import { Head, router } from '@inertiajs/react'
import { useState } from 'react'
import { toast } from 'sonner'
import { FinanceAppLayout } from '@/layouts/finance-app-layout'
import { ServerDataTable, type ServerColumnDef, type ServerDataTableParams, type ServerPaginatedData } from '@ui/components/data-table/server-data-table'
import { Button } from '@ui/components/ui/button'
import { Badge } from '@ui/components/ui/badge'
import { Plus, Pencil, ToggleLeft, ToggleRight, Trash2, Link2 } from 'lucide-react'
import { ResizableDrawer } from '@/components/common/ResizableDrawer'
import { DeleteConfirmationDialog } from '@/components/common/DeleteConfirmationDialog'
import { ToggleStatusDialog } from '@/components/common/ToggleStatusDialog'
import { ComboboxDropdown } from '@ui/components/combobox-dropdown'
import { CustomerForm } from './components/CustomerForm'
import { type Customer } from '@/types/finance'

interface Props {
    records: ServerPaginatedData<Customer>
    filters: Record<string, string | undefined>
    businessUnitOptions: { value: string; label: string }[]
    businessScaleOptions: { value: string; label: string }[]
}

const BASE = '/department/finance/customers'

const BUSINESS_UNIT_BADGE: Record<string, string> = {
    GMP: 'bg-emerald-700',
    QSM: 'bg-blue-700',
}

export default function CustomerIndex({ records, filters, businessUnitOptions, businessScaleOptions }: Props) {
    const [isDrawerOpen, setIsDrawerOpen]   = useState(false)
    const [selectedCustomer, setSelectedCustomer] = useState<Customer | undefined>()
    const [isDeleteOpen, setIsDeleteOpen]   = useState(false)
    const [customerToDelete, setCustomerToDelete] = useState<Customer | undefined>()
    const [isToggleOpen, setIsToggleOpen]   = useState(false)
    const [customerToToggle, setCustomerToToggle] = useState<Customer | undefined>()
    const [isDeleting, setIsDeleting]       = useState(false)
    const [isToggling, setIsToggling]       = useState(false)

    function handleCreate() { setSelectedCustomer(undefined); setIsDrawerOpen(true) }
    function handleEdit(c: Customer) { setSelectedCustomer(c); setIsDrawerOpen(true) }
    function handleDeleteClick(c: Customer) { setCustomerToDelete(c); setIsDeleteOpen(true) }
    function handleToggleClick(c: Customer) { setCustomerToToggle(c); setIsToggleOpen(true) }

    function handleDeleteConfirm() {
        if (!customerToDelete) return
        router.delete(`${BASE}/${customerToDelete.id}`, {
            onStart:   () => setIsDeleting(true),
            onSuccess: () => { toast.success('Customer berhasil dihapus.'); setIsDeleteOpen(false); setCustomerToDelete(undefined) },
            onError:   () => toast.error('Terjadi kesalahan. Silakan coba lagi.'),
            onFinish:  () => setIsDeleting(false),
        })
    }

    function handleToggleConfirm() {
        if (!customerToToggle) return
        const label = customerToToggle.is_active ? 'dinonaktifkan' : 'diaktifkan'
        router.patch(`${BASE}/${customerToToggle.id}/toggle-status`, {}, {
            onStart:   () => setIsToggling(true),
            onSuccess: () => { toast.success(`Customer berhasil ${label}.`); setIsToggleOpen(false); setCustomerToToggle(undefined) },
            onError:   () => toast.error('Terjadi kesalahan. Silakan coba lagi.'),
            onFinish:  () => setIsToggling(false),
        })
    }

    const params: ServerDataTableParams = {
        page:     records.current_page,
        per_page: records.per_page,
        search:   filters.search,
    }

    const columns: ServerColumnDef<Customer>[] = [
        {
            key: 'customer_code',
            label: 'Kode',
            className: 'w-32 font-mono text-xs',
            render: (row) => row.customer_code ?? <span className='text-muted-foreground'>-</span>,
        },
        { key: 'company_name', label: 'Nama Perusahaan' },
        {
            key: 'business_unit',
            label: 'Unit',
            className: 'w-20',
            render: (row) => row.business_unit
                ? <Badge className={BUSINESS_UNIT_BADGE[row.business_unit] ?? 'bg-slate-600'}>{row.business_unit}</Badge>
                : <span className='text-muted-foreground'>-</span>,
        },
        {
            key: 'npwp',
            label: 'NPWP',
            render: (row) => row.npwp ?? <span className='text-muted-foreground'>-</span>,
        },
        {
            key: 'accurate_code',
            label: 'Accurate',
            className: 'w-40',
            render: (row) => row.accurate_code
                ? (
                    <span className='inline-flex items-center gap-1 text-xs font-mono'>
                        <Link2 className='h-3 w-3 text-blue-500' />
                        {row.accurate_code}
                    </span>
                )
                : <span className='text-muted-foreground text-xs'>Belum terhubung</span>,
        },
        {
            key: 'is_active',
            label: 'Status',
            className: 'w-24',
            render: (row) => row.is_active
                ? <Badge className='bg-emerald-600'>Aktif</Badge>
                : <Badge variant='secondary'>Nonaktif</Badge>,
        },
        {
            key: 'actions',
            label: '',
            className: 'w-28 text-right',
            render: (row) => (
                <div className='flex justify-end gap-1'>
                    <Button size='icon' variant='ghost' className='h-7 w-7' title={row.is_active ? 'Nonaktifkan' : 'Aktifkan'} onClick={() => handleToggleClick(row)}>
                        {row.is_active
                            ? <ToggleRight className='h-4 w-4 text-emerald-600' />
                            : <ToggleLeft className='h-4 w-4 text-muted-foreground' />}
                    </Button>
                    <Button size='icon' variant='ghost' className='h-7 w-7' title='Edit' onClick={() => handleEdit(row)}>
                        <Pencil className='h-3.5 w-3.5' />
                    </Button>
                    <Button size='icon' variant='ghost' className='h-7 w-7 text-destructive hover:text-destructive' title='Hapus' onClick={() => handleDeleteClick(row)}>
                        <Trash2 className='h-3.5 w-3.5' />
                    </Button>
                </div>
            ),
        },
    ]

    return (
        <FinanceAppLayout>
            <Head title='Master Customer' />
            <div className='flex h-full flex-1 flex-col gap-4 p-4'>
                <div className='flex items-center justify-between'>
                    <div>
                        <h1 className='text-xl font-bold tracking-tight'>Master Data Keuangan</h1>
                        <p className='text-sm text-muted-foreground'>Kelola data master customer untuk seluruh aplikasi</p>
                    </div>
                    <Button className='gap-2 bg-blue-600 hover:bg-blue-700' onClick={handleCreate}>
                        <Plus className='h-4 w-4' /> Tambah Customer
                    </Button>
                </div>

                {/* Filter row */}
                <div className='flex flex-wrap gap-3'>
                    <div className='w-full sm:w-[180px]'>
                        <ComboboxDropdown
                            value={filters.business_unit || undefined}
                            onValueChange={(v) => router.get(BASE, { ...filters, business_unit: v || undefined, page: 1 }, { preserveState: true, replace: true })}
                            placeholder='Semua Unit'
                            options={businessUnitOptions}
                            searchPlaceholder='Cari unit...'
                            emptyText='Tidak ditemukan.'
                        />
                    </div>
                    <div className='w-full sm:w-[200px]'>
                        <ComboboxDropdown
                            value={filters.business_scale || undefined}
                            onValueChange={(v) => router.get(BASE, { ...filters, business_scale: v || undefined, page: 1 }, { preserveState: true, replace: true })}
                            placeholder='Semua Skala'
                            options={businessScaleOptions}
                            searchPlaceholder='Cari skala...'
                            emptyText='Tidak ditemukan.'
                        />
                    </div>
                    <div className='w-full sm:w-[220px]'>
                        <ComboboxDropdown
                            value={filters.has_accurate || undefined}
                            onValueChange={(v) => router.get(BASE, { ...filters, has_accurate: v || undefined, page: 1 }, { preserveState: true, replace: true })}
                            placeholder='Status Accurate'
                            options={[
                                { value: '1', label: 'Sudah Terhubung Accurate' },
                                { value: '0', label: 'Belum Terhubung Accurate' },
                            ]}
                            searchPlaceholder='Filter accurate...'
                            emptyText='Tidak ditemukan.'
                        />
                    </div>
                </div>

                <ServerDataTable
                    data={records}
                    columns={columns}
                    params={params}
                    onParamsChange={(nextParams) => router.get(BASE, { ...filters, ...nextParams }, { preserveState: true, replace: true })}
                    searchPlaceholder='Cari kode, nama perusahaan, NPWP, PIC...'
                />
            </div>

            <ResizableDrawer
                open={isDrawerOpen}
                onOpenChange={setIsDrawerOpen}
                title={selectedCustomer ? 'Edit Master Customer' : 'Tambah Master Customer'}
            >
                <CustomerForm
                    customer={selectedCustomer}
                    businessUnitOptions={businessUnitOptions}
                    businessScaleOptions={businessScaleOptions}
                    onSuccess={() => setIsDrawerOpen(false)}
                />
            </ResizableDrawer>

            <DeleteConfirmationDialog
                open={isDeleteOpen}
                onOpenChange={setIsDeleteOpen}
                onConfirm={handleDeleteConfirm}
                itemName={customerToDelete?.company_name}
                isDeleting={isDeleting}
            />

            <ToggleStatusDialog
                open={isToggleOpen}
                onOpenChange={setIsToggleOpen}
                onConfirm={handleToggleConfirm}
                itemName={customerToToggle?.company_name}
                isActive={customerToToggle?.is_active}
                isLoading={isToggling}
            />
        </FinanceAppLayout>
    )
}