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 } from 'lucide-react'
import { ResizableDrawer } from '@/components/common/ResizableDrawer'
import { ToggleStatusDialog } from '@/components/common/ToggleStatusDialog'
import { ComboboxDropdown } from '@ui/components/combobox-dropdown'
import { type MasterItem } from '@/types/finance'
import { ItemForm } from './components/ItemForm'

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

const BASE = '/department/finance/items'

export default function ItemIndex({ records, filters, itemTypeOptions }: Props) {
    const [isDrawerOpen, setIsDrawerOpen] = useState(false)
    const [selectedItem, setSelectedItem] = useState<MasterItem | undefined>()
    const [isToggleOpen, setIsToggleOpen] = useState(false)
    const [itemToToggle, setItemToToggle] = useState<MasterItem | undefined>()
    const [isToggling, setIsToggling] = useState(false)

    function handleCreate() {
        setSelectedItem(undefined)
        setIsDrawerOpen(true)
    }

    function handleEdit(item: MasterItem) {
        setSelectedItem(item)
        setIsDrawerOpen(true)
    }

    function handleToggleClick(item: MasterItem) {
        setItemToToggle(item)
        setIsToggleOpen(true)
    }

    function handleToggleConfirm() {
        if (!itemToToggle) return
        const label = itemToToggle.is_active ? 'dinonaktifkan' : 'diaktifkan'

        router.patch(`${BASE}/${itemToToggle.id}/toggle-status`, {}, {
            onStart: () => setIsToggling(true),
            onSuccess: () => {
                toast.success(`Master item berhasil ${label}.`)
                setIsToggleOpen(false)
                setItemToToggle(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<MasterItem>[] = [
        {
            key: 'code',
            label: 'Kode',
            className: 'w-32 font-mono text-xs',
        },
        {
            key: 'name',
            label: 'Nama Item',
        },
        {
            key: 'item_type',
            label: 'Tipe Item',
            className: 'w-40',
            render: (row) => (
                <Badge variant='outline' className='capitalize'>
                    {row.item_type.replaceAll('_', ' ')}
                </Badge>
            ),
        },
        {
            key: 'unit',
            label: 'Unit',
            className: 'w-28',
            render: (row) => row.unit || <span className='text-muted-foreground'>-</span>,
        },
        {
            key: 'accurate_mapping',
            label: 'Mapping Accurate',
            className: 'w-56',
            render: (row) => (
                <div className='text-xs'>
                    <p className='font-mono'>{row.accurate_id || '-'}</p>
                    <p className='text-muted-foreground'>{row.accurate_code || '-'}</p>
                </div>
            ),
        },
        {
            key: 'item_id_old',
            label: 'Item ID Old',
            className: 'w-28 font-mono text-xs',
            render: (row) => row.item_id_old ?? <span className='text-muted-foreground'>-</span>,
        },
        {
            key: 'flags',
            label: 'Flag',
            className: 'w-52',
            render: (row) => (
                <div className='flex flex-wrap gap-1'>
                    {row.is_sellable && <Badge className='bg-blue-600'>Jual</Badge>}
                    {row.is_purchasable && <Badge className='bg-violet-600'>Beli</Badge>}
                    {row.is_inventoried && <Badge className='bg-orange-600'>Stok</Badge>}
                    {!row.is_sellable && !row.is_purchasable && !row.is_inventoried && (
                        <Badge variant='secondary'>Tanpa Flag</Badge>
                    )}
                </div>
            ),
        },
        {
            key: 'is_active',
            label: 'Status',
            className: 'w-28',
            render: (row) => row.is_active
                ? <Badge className='bg-emerald-600'>Aktif</Badge>
                : <Badge className='border-rose-200 bg-rose-100 text-rose-700'>Nonaktif</Badge>,
        },
        {
            key: 'actions',
            label: '',
            className: 'w-20 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>
                </div>
            ),
        },
    ]

    return (
        <FinanceAppLayout>
            <Head title='Master Item' />
            <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 Item</h1>
                        <p className='text-sm text-muted-foreground'>Kelola item utama lintas aplikasi dari tabel global gfin_m_items</p>
                    </div>
                    <Button className='gap-2 bg-blue-600 hover:bg-blue-700' onClick={handleCreate}>
                        <Plus className='h-4 w-4' /> Tambah Item
                    </Button>
                </div>

                <div className='flex flex-wrap gap-3'>
                    <div className='w-full sm:w-[220px]'>
                        <ComboboxDropdown
                            value={filters.item_type || undefined}
                            onValueChange={(value) => router.get(
                                BASE,
                                { ...filters, item_type: value || undefined, page: 1 },
                                { preserveState: true, replace: true },
                            )}
                            placeholder='Semua Tipe Item'
                            options={itemTypeOptions}
                            searchPlaceholder='Cari tipe item...'
                            emptyText='Tipe item tidak ditemukan.'
                        />
                    </div>
                    <div className='w-full sm:w-[220px]'>
                        <ComboboxDropdown
                            value={filters.is_sellable || undefined}
                            onValueChange={(value) => router.get(
                                BASE,
                                { ...filters, is_sellable: value || undefined, page: 1 },
                                { preserveState: true, replace: true },
                            )}
                            placeholder='Status Jual'
                            options={[
                                { value: '1', label: 'Bisa Dijual' },
                                { value: '0', label: 'Tidak Dijual' },
                            ]}
                            searchPlaceholder='Filter status jual...'
                            emptyText='Pilihan tidak ditemukan.'
                        />
                    </div>
                    <div className='w-full sm:w-[220px]'>
                        <ComboboxDropdown
                            value={filters.is_purchasable || undefined}
                            onValueChange={(value) => router.get(
                                BASE,
                                { ...filters, is_purchasable: value || undefined, page: 1 },
                                { preserveState: true, replace: true },
                            )}
                            placeholder='Status Beli'
                            options={[
                                { value: '1', label: 'Bisa Dibeli' },
                                { value: '0', label: 'Tidak Dibeli' },
                            ]}
                            searchPlaceholder='Filter status beli...'
                            emptyText='Pilihan 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, tipe, unit, atau tax code...'
                />
            </div>

            <ResizableDrawer
                open={isDrawerOpen}
                onOpenChange={setIsDrawerOpen}
                title={selectedItem ? 'Edit Master Item' : 'Tambah Master Item'}
            >
                <ItemForm
                    item={selectedItem}
                    itemTypeOptions={itemTypeOptions}
                    onSuccess={() => setIsDrawerOpen(false)}
                />
            </ResizableDrawer>

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