import { useForm } from '@inertiajs/react'
import { Button } from '@ui/components/ui/button'
import { Input } from '@ui/components/ui/input'
import { Label } from '@ui/components/ui/label'
import { Textarea } from '@ui/components/ui/textarea'
import { Switch } from '@ui/components/ui/switch'
import { ComboboxDropdown } from '@ui/components/combobox-dropdown'
import { type Customer } from '@/types/finance'

interface Props {
    customer?: Customer
    businessUnitOptions: { value: string; label: string }[]
    businessScaleOptions: { value: string; label: string }[]
    onSuccess?: () => void
}

const COMPANY_TYPE_OPTIONS = [
    { value: 'PT', label: 'PT' },
    { value: 'CV', label: 'CV' },
    { value: 'UD', label: 'UD' },
    { value: 'Firma', label: 'Firma' },
    { value: 'Koperasi', label: 'Koperasi' },
    { value: 'Yayasan', label: 'Yayasan' },
    { value: 'Perorangan', label: 'Perorangan' },
    { value: 'Instansi Pemerintah', label: 'Instansi Pemerintah' },
    { value: 'Lainnya', label: 'Lainnya' },
]

export function CustomerForm({ customer, businessUnitOptions, businessScaleOptions, onSuccess }: Props) {
    const isEditing = !!customer

    const form = useForm({
        company_name:               customer?.company_name ?? '',
        customer_code:              customer?.customer_code ?? '',
        company_type:               customer?.company_type ?? '',
        business_unit:              customer?.business_unit ?? '',
        business_scale:             customer?.business_scale ?? '',
        is_proper:                  customer?.is_proper ?? false,
        company_address:            customer?.company_address ?? '',
        document_delivery_address:  customer?.document_delivery_address ?? '',
        office_phone:               customer?.office_phone ?? '',
        npwp:                       customer?.npwp ?? '',
        nama_sesuai_npwp:           customer?.nama_sesuai_npwp ?? '',
        alamat_sesuai_npwp:         customer?.alamat_sesuai_npwp ?? '',
        cp_nama:                    customer?.cp_nama ?? '',
        cp_telp:                    customer?.cp_telp ?? '',
        cp_email:                   customer?.cp_email ?? '',
        cp_nama_keuangan:           customer?.cp_nama_keuangan ?? '',
        cp_telp_keuangan:           customer?.cp_telp_keuangan ?? '',
        cp_email_keuangan:          customer?.cp_email_keuangan ?? '',
        product:                    customer?.product ?? '',
        area:                       customer?.area ?? '',
        company_note:               customer?.company_note ?? '',
        // Integrasi Accurate
        accurate_id:                customer?.accurate_id ?? '',
        accurate_code:              customer?.accurate_code ?? '',
        accurate_customer_no:       customer?.accurate_customer_no ?? '',
        accurate_trans_date:        customer?.accurate_trans_date ? customer.accurate_trans_date.slice(0, 10) : '',
        accurate_branch_id:         customer?.accurate_branch_id?.toString() ?? '',
        accurate_branch_name:       customer?.accurate_branch_name ?? '',
        accurate_category_name:     customer?.accurate_category_name ?? '',
        accurate_currency_code:     customer?.accurate_currency_code ?? '',
        accurate_email:             customer?.accurate_email ?? '',
        accurate_mobile_phone:      customer?.accurate_mobile_phone ?? '',
        accurate_work_phone:        customer?.accurate_work_phone ?? '',
        accurate_fax:               customer?.accurate_fax ?? '',
        accurate_website:           customer?.accurate_website ?? '',
        accurate_npwp_no:           customer?.accurate_npwp_no ?? '',
        accurate_pkp_no:            customer?.accurate_pkp_no ?? '',
        accurate_wp_name:           customer?.accurate_wp_name ?? '',
        accurate_wp_number:         customer?.accurate_wp_number ?? '',
        accurate_bill_street:       customer?.accurate_bill_street ?? '',
        accurate_bill_city:         customer?.accurate_bill_city ?? '',
        accurate_bill_province:     customer?.accurate_bill_province ?? '',
        accurate_bill_country:      customer?.accurate_bill_country ?? '',
        accurate_bill_zip_code:     customer?.accurate_bill_zip_code ?? '',
        accurate_ship_street:       customer?.accurate_ship_street ?? '',
        accurate_ship_city:         customer?.accurate_ship_city ?? '',
        accurate_ship_province:     customer?.accurate_ship_province ?? '',
        accurate_ship_country:      customer?.accurate_ship_country ?? '',
        accurate_ship_zip_code:     customer?.accurate_ship_zip_code ?? '',
        accurate_default_inc_tax:   customer?.accurate_default_inc_tax ?? false,
        accurate_customer_limit_age: customer?.accurate_customer_limit_age ?? false,
        accurate_customer_limit_age_value: customer?.accurate_customer_limit_age_value?.toString() ?? '',
        accurate_customer_limit_amount: customer?.accurate_customer_limit_amount ?? false,
        accurate_customer_limit_amount_value: customer?.accurate_customer_limit_amount_value?.toString() ?? '',
        accurate_customer_receivable_account_no: customer?.accurate_customer_receivable_account_no ?? '',
        accurate_customer_down_payment_account_no: customer?.accurate_customer_down_payment_account_no ?? '',
        accurate_sales_account_no:  customer?.accurate_sales_account_no ?? '',
        accurate_sales_discount_account_no: customer?.accurate_sales_discount_account_no ?? '',
        accurate_sales_return_account_no: customer?.accurate_sales_return_account_no ?? '',
        accurate_item_discount_account_no: customer?.accurate_item_discount_account_no ?? '',
        accurate_cogs_account_no:   customer?.accurate_cogs_account_no ?? '',
        sync_accurate:              true,
        // Virtual Account
        virtual_account_code:       customer?.virtual_account_code ?? '',
        virtual_account_bank_id:    customer?.virtual_account_bank_id ?? '',
        // Status
        is_active:                  customer?.is_active ?? true,
    })

    function handleSubmit(e: React.FormEvent) {
        e.preventDefault()

        const url = isEditing
            ? `/department/finance/customers/${customer!.id}`
            : '/department/finance/customers'

        const method = isEditing ? form.put : form.post
        method(url, { preserveScroll: true, onSuccess: () => onSuccess?.() })
    }

    function field(key: string) {
        return form.errors[key as keyof typeof form.errors]
            ? 'border-destructive'
            : ''
    }

    return (
        <form onSubmit={handleSubmit} className='flex flex-col gap-5 p-4'>

            {/* ── Identifikasi ────────────────────────────────────────────── */}
            <div>
                <p className='mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground'>Identifikasi</p>
                <div className='grid grid-cols-2 gap-4'>
                    <div className='space-y-1'>
                        <Label htmlFor='company_name'>Nama Perusahaan <span className='text-destructive'>*</span></Label>
                        <Input
                            id='company_name'
                            value={form.data.company_name}
                            onChange={(e) => form.setData('company_name', e.target.value)}
                            placeholder='PT Contoh Indonesia'
                            className={field('company_name')}
                        />
                        {form.errors.company_name && <p className='text-xs text-destructive'>{form.errors.company_name}</p>}
                    </div>
                    <div className='space-y-1'>
                        <Label htmlFor='customer_code'>Kode Customer</Label>
                        <Input
                            id='customer_code'
                            value={form.data.customer_code}
                            onChange={(e) => form.setData('customer_code', e.target.value)}
                            placeholder='CUST-001'
                            className={field('customer_code')}
                        />
                        {form.errors.customer_code && <p className='text-xs text-destructive'>{form.errors.customer_code}</p>}
                    </div>
                </div>

                <div className='mt-4 grid grid-cols-3 gap-4'>
                    <div className='space-y-1'>
                        <Label>Jenis Perusahaan</Label>
                        <ComboboxDropdown
                            value={form.data.company_type || undefined}
                            onValueChange={(v) => form.setData('company_type', v ?? '')}
                            placeholder='Pilih jenis'
                            options={COMPANY_TYPE_OPTIONS}
                            searchPlaceholder='Cari jenis...'
                            emptyText='Tidak ditemukan.'
                        />
                    </div>
                    <div className='space-y-1'>
                        <Label>Business Unit</Label>
                        <ComboboxDropdown
                            value={form.data.business_unit || undefined}
                            onValueChange={(v) => form.setData('business_unit', v ?? '')}
                            placeholder='Pilih unit'
                            options={businessUnitOptions}
                            searchPlaceholder='Cari unit...'
                            emptyText='Tidak ditemukan.'
                        />
                    </div>
                    <div className='space-y-1'>
                        <Label>Skala Bisnis</Label>
                        <ComboboxDropdown
                            value={form.data.business_scale || undefined}
                            onValueChange={(v) => form.setData('business_scale', v ?? '')}
                            placeholder='Pilih skala'
                            options={businessScaleOptions}
                            searchPlaceholder='Cari skala...'
                            emptyText='Tidak ditemukan.'
                        />
                    </div>
                </div>

                <div className='mt-4 grid grid-cols-2 gap-4'>
                    <div className='space-y-1'>
                        <Label htmlFor='office_phone'>Telepon Kantor</Label>
                        <Input id='office_phone' value={form.data.office_phone} onChange={(e) => form.setData('office_phone', e.target.value)} placeholder='021-xxxx / 08xx' />
                    </div>
                    <div className='space-y-1'>
                        <Label htmlFor='area'>Area / Wilayah</Label>
                        <Input id='area' value={form.data.area} onChange={(e) => form.setData('area', e.target.value)} placeholder='Jawa Barat, DKI, dll.' />
                    </div>
                </div>

                <div className='mt-4 grid grid-cols-2 gap-4'>
                    <div className='space-y-1'>
                        <Label htmlFor='product'>Produk</Label>
                        <Input id='product' value={form.data.product} onChange={(e) => form.setData('product', e.target.value)} placeholder='Jenis produk perusahaan' />
                    </div>
                    <div className='mt-3 flex items-center gap-3 rounded-lg border p-3'>
                        <Switch id='is_proper' checked={form.data.is_proper} onCheckedChange={(v) => form.setData('is_proper', v)} />
                        <Label htmlFor='is_proper' className='cursor-pointer'>Proper</Label>
                    </div>
                </div>
            </div>

            {/* ── Alamat ────────────────────────────────────────────────── */}
            <div>
                <p className='mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground'>Alamat</p>
                <div className='space-y-3'>
                    <div className='space-y-1'>
                        <Label htmlFor='company_address'>Alamat Perusahaan</Label>
                        <Textarea id='company_address' value={form.data.company_address} onChange={(e) => form.setData('company_address', e.target.value)} rows={2} placeholder='Alamat lengkap perusahaan' />
                    </div>
                    <div className='space-y-1'>
                        <Label htmlFor='document_delivery_address'>Alamat Pengiriman Dokumen</Label>
                        <Textarea id='document_delivery_address' value={form.data.document_delivery_address} onChange={(e) => form.setData('document_delivery_address', e.target.value)} rows={2} placeholder='Alamat untuk pengiriman dokumen/laporan' />
                    </div>
                </div>
            </div>

            {/* ── NPWP ──────────────────────────────────────────────────── */}
            <div>
                <p className='mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground'>Data NPWP</p>
                <div className='grid grid-cols-2 gap-4'>
                    <div className='space-y-1'>
                        <Label htmlFor='npwp'>NPWP</Label>
                        <Input id='npwp' value={form.data.npwp} onChange={(e) => form.setData('npwp', e.target.value)} placeholder='00.000.000.0-000.000' />
                    </div>
                    <div className='space-y-1'>
                        <Label htmlFor='nama_sesuai_npwp'>Nama Sesuai NPWP</Label>
                        <Input id='nama_sesuai_npwp' value={form.data.nama_sesuai_npwp} onChange={(e) => form.setData('nama_sesuai_npwp', e.target.value)} placeholder='Nama pada NPWP' />
                    </div>
                </div>
                <div className='mt-3 space-y-1'>
                    <Label htmlFor='alamat_sesuai_npwp'>Alamat Sesuai NPWP</Label>
                    <Textarea id='alamat_sesuai_npwp' value={form.data.alamat_sesuai_npwp} onChange={(e) => form.setData('alamat_sesuai_npwp', e.target.value)} rows={2} placeholder='Alamat pada NPWP' />
                </div>
            </div>

            {/* ── Kontak ────────────────────────────────────────────────── */}
            <div>
                <p className='mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground'>Kontak PIC</p>
                <div className='grid grid-cols-3 gap-4'>
                    <div className='space-y-1'>
                        <Label htmlFor='cp_nama'>Nama PIC</Label>
                        <Input id='cp_nama' value={form.data.cp_nama} onChange={(e) => form.setData('cp_nama', e.target.value)} placeholder='Nama contact person' />
                    </div>
                    <div className='space-y-1'>
                        <Label htmlFor='cp_telp'>Telepon PIC</Label>
                        <Input id='cp_telp' value={form.data.cp_telp} onChange={(e) => form.setData('cp_telp', e.target.value)} placeholder='08xx' />
                    </div>
                    <div className='space-y-1'>
                        <Label htmlFor='cp_email'>Email PIC</Label>
                        <Input id='cp_email' value={form.data.cp_email} onChange={(e) => form.setData('cp_email', e.target.value)} placeholder='pic@perusahaan.com' />
                        {form.errors.cp_email && <p className='text-xs text-destructive'>{form.errors.cp_email}</p>}
                    </div>
                </div>
                <p className='mb-2 mt-4 text-xs font-semibold uppercase tracking-wider text-muted-foreground'>Kontak Keuangan</p>
                <div className='grid grid-cols-3 gap-4'>
                    <div className='space-y-1'>
                        <Label htmlFor='cp_nama_keuangan'>Nama PIC Keuangan</Label>
                        <Input id='cp_nama_keuangan' value={form.data.cp_nama_keuangan} onChange={(e) => form.setData('cp_nama_keuangan', e.target.value)} placeholder='Nama PIC keuangan' />
                    </div>
                    <div className='space-y-1'>
                        <Label htmlFor='cp_telp_keuangan'>Telepon PIC Keuangan</Label>
                        <Input id='cp_telp_keuangan' value={form.data.cp_telp_keuangan} onChange={(e) => form.setData('cp_telp_keuangan', e.target.value)} placeholder='08xx' />
                    </div>
                    <div className='space-y-1'>
                        <Label htmlFor='cp_email_keuangan'>Email PIC Keuangan</Label>
                        <Input id='cp_email_keuangan' value={form.data.cp_email_keuangan} onChange={(e) => form.setData('cp_email_keuangan', e.target.value)} placeholder='finance@perusahaan.com' />
                        {form.errors.cp_email_keuangan && <p className='text-xs text-destructive'>{form.errors.cp_email_keuangan}</p>}
                    </div>
                </div>
            </div>

            {/* ── Integrasi Accurate ────────────────────────────────────── */}
            <div>
                <p className='mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground'>Integrasi Accurate Online</p>
                <div className='grid grid-cols-2 gap-4'>
                    <div className='space-y-1'>
                        <Label htmlFor='accurate_id'>Accurate ID</Label>
                        <Input
                            id='accurate_id'
                            value={form.data.accurate_id}
                            onChange={(e) => form.setData('accurate_id', e.target.value)}
                            placeholder='ID customer di Accurate'
                            className={field('accurate_id')}
                        />
                        {form.errors.accurate_id && <p className='text-xs text-destructive'>{form.errors.accurate_id}</p>}
                    </div>
                    <div className='space-y-1'>
                        <Label htmlFor='accurate_code'>Accurate Code</Label>
                        <Input
                            id='accurate_code'
                            value={form.data.accurate_code}
                            onChange={(e) => form.setData('accurate_code', e.target.value)}
                            placeholder='Kode customer di Accurate'
                            className={field('accurate_code')}
                        />
                        {form.errors.accurate_code && <p className='text-xs text-destructive'>{form.errors.accurate_code}</p>}
                    </div>
                </div>

                <div className='mt-4 grid grid-cols-3 gap-4'>
                    <div className='space-y-1'>
                        <Label htmlFor='accurate_customer_no'>Customer No</Label>
                        <Input id='accurate_customer_no' value={form.data.accurate_customer_no} onChange={(e) => form.setData('accurate_customer_no', e.target.value)} />
                    </div>
                    <div className='space-y-1'>
                        <Label htmlFor='accurate_trans_date'>Trans Date</Label>
                        <Input id='accurate_trans_date' type='date' value={form.data.accurate_trans_date} onChange={(e) => form.setData('accurate_trans_date', e.target.value)} />
                    </div>
                    <div className='space-y-1'>
                        <Label htmlFor='accurate_currency_code'>Currency Code</Label>
                        <Input id='accurate_currency_code' value={form.data.accurate_currency_code} onChange={(e) => form.setData('accurate_currency_code', e.target.value)} placeholder='IDR' />
                    </div>
                </div>

                <div className='mt-4 grid grid-cols-3 gap-4'>
                    <div className='space-y-1'>
                        <Label htmlFor='accurate_branch_id'>Branch ID</Label>
                        <Input id='accurate_branch_id' type='number' value={form.data.accurate_branch_id} onChange={(e) => form.setData('accurate_branch_id', e.target.value)} />
                    </div>
                    <div className='space-y-1'>
                        <Label htmlFor='accurate_branch_name'>Branch Name</Label>
                        <Input id='accurate_branch_name' value={form.data.accurate_branch_name} onChange={(e) => form.setData('accurate_branch_name', e.target.value)} />
                    </div>
                    <div className='space-y-1'>
                        <Label htmlFor='accurate_category_name'>Category Name</Label>
                        <Input id='accurate_category_name' value={form.data.accurate_category_name} onChange={(e) => form.setData('accurate_category_name', e.target.value)} />
                    </div>
                </div>

                <p className='mb-2 mt-4 text-xs font-semibold uppercase tracking-wider text-muted-foreground'>Akun Accurate</p>
                <div className='grid grid-cols-2 gap-4'>
                    <div className='space-y-1'><Label htmlFor='accurate_customer_receivable_account_no'>Akun Piutang</Label><Input id='accurate_customer_receivable_account_no' value={form.data.accurate_customer_receivable_account_no} onChange={(e) => form.setData('accurate_customer_receivable_account_no', e.target.value)} /></div>
                    <div className='space-y-1'><Label htmlFor='accurate_customer_down_payment_account_no'>Akun Uang Muka</Label><Input id='accurate_customer_down_payment_account_no' value={form.data.accurate_customer_down_payment_account_no} onChange={(e) => form.setData('accurate_customer_down_payment_account_no', e.target.value)} /></div>
                    <div className='space-y-1'><Label htmlFor='accurate_sales_account_no'>Akun Sales</Label><Input id='accurate_sales_account_no' value={form.data.accurate_sales_account_no} onChange={(e) => form.setData('accurate_sales_account_no', e.target.value)} /></div>
                    <div className='space-y-1'><Label htmlFor='accurate_sales_discount_account_no'>Akun Diskon Sales</Label><Input id='accurate_sales_discount_account_no' value={form.data.accurate_sales_discount_account_no} onChange={(e) => form.setData('accurate_sales_discount_account_no', e.target.value)} /></div>
                    <div className='space-y-1'><Label htmlFor='accurate_sales_return_account_no'>Akun Retur Sales</Label><Input id='accurate_sales_return_account_no' value={form.data.accurate_sales_return_account_no} onChange={(e) => form.setData('accurate_sales_return_account_no', e.target.value)} /></div>
                    <div className='space-y-1'><Label htmlFor='accurate_item_discount_account_no'>Akun Diskon Item</Label><Input id='accurate_item_discount_account_no' value={form.data.accurate_item_discount_account_no} onChange={(e) => form.setData('accurate_item_discount_account_no', e.target.value)} /></div>
                    <div className='space-y-1'><Label htmlFor='accurate_cogs_account_no'>Akun COGS</Label><Input id='accurate_cogs_account_no' value={form.data.accurate_cogs_account_no} onChange={(e) => form.setData('accurate_cogs_account_no', e.target.value)} /></div>
                </div>

                <div className='mt-4 flex items-center justify-between rounded-lg border p-3'>
                    <div>
                        <Label htmlFor='sync_accurate'>Sync ke Accurate saat simpan</Label>
                        <p className='text-xs text-muted-foreground'>Jika aktif, perubahan customer akan langsung dikirim ke API Accurate.</p>
                    </div>
                    <Switch id='sync_accurate' checked={form.data.sync_accurate} onCheckedChange={(v) => form.setData('sync_accurate', v)} />
                </div>
            </div>

            {/* ── Virtual Account ───────────────────────────────────────── */}
            <div>
                <p className='mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground'>Virtual Account</p>
                <div className='grid grid-cols-2 gap-4'>
                    <div className='space-y-1'>
                        <Label htmlFor='virtual_account_code'>Nomor Virtual Account</Label>
                        <Input
                            id='virtual_account_code'
                            value={form.data.virtual_account_code}
                            onChange={(e) => form.setData('virtual_account_code', e.target.value)}
                            placeholder='Nomor VA customer'
                            className={field('virtual_account_code')}
                        />
                        {form.errors.virtual_account_code && <p className='text-xs text-destructive'>{form.errors.virtual_account_code}</p>}
                    </div>
                    <div className='space-y-1'>
                        <Label htmlFor='virtual_account_bank_id'>Bank Virtual Account</Label>
                        <Input
                            id='virtual_account_bank_id'
                            type='number'
                            value={form.data.virtual_account_bank_id}
                            onChange={(e) => form.setData('virtual_account_bank_id', e.target.value)}
                            placeholder='ID Bank (master bank)'
                            className={field('virtual_account_bank_id')}
                        />
                        {form.errors.virtual_account_bank_id && <p className='text-xs text-destructive'>{form.errors.virtual_account_bank_id}</p>}
                    </div>
                </div>
            </div>

            {/* ── Catatan ───────────────────────────────────────────────── */}
            <div className='space-y-1'>
                <Label htmlFor='company_note'>Catatan</Label>
                <Textarea id='company_note' value={form.data.company_note} onChange={(e) => form.setData('company_note', e.target.value)} rows={2} placeholder='Catatan tambahan (opsional)' />
            </div>

            {/* ── Status ────────────────────────────────────────────────── */}
            <div className='flex items-center justify-between rounded-lg border p-3'>
                <div>
                    <Label>Status Aktif</Label>
                    <p className='text-xs text-muted-foreground'>Customer nonaktif tidak muncul di pilihan form</p>
                </div>
                <Switch checked={form.data.is_active} onCheckedChange={(v) => form.setData('is_active', v)} />
            </div>

            <div className='flex justify-end gap-2 border-t pt-4'>
                <Button type='submit' disabled={form.processing} className='bg-blue-600 hover:bg-blue-700'>
                    {form.processing ? 'Menyimpan...' : isEditing ? 'Simpan Perubahan' : 'Tambah Customer'}
                </Button>
            </div>
        </form>
    )
}