import { Head, router } from '@inertiajs/react'
import { useState } from 'react'
import { toast } from 'sonner'
import { GwinAppLayout } from '@/layouts/gwin-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 { DeleteConfirmationDialog } from '@/components/common/DeleteConfirmationDialog'
import { ToggleStatusDialog } from '@/components/common/ToggleStatusDialog'
import { ComboboxDropdown } from '@ui/components/combobox-dropdown'
import { WarehouseTabs } from '@/components/master-data/WarehouseTabs'
import { AssetForm } from './components/AssetForm'
import { type Asset, type Item, type Supplier } from '@/types/gwin'

interface Props {
    records: ServerPaginatedData<Asset>
    filters: Record<string, string | undefined>
    itemOptions: Pick<Item, 'id' | 'code' | 'name'>[]
    supplierOptions: Pick<Supplier, 'id' | 'code' | 'name' | 'supplier_type'>[]
    branchOptions: { id: number; code: string; name: string }[]
    assetGroupOptions: { id: number; code: string; name: string }[]
    conditionOptions: { value: string; label: string }[]
    statusOptions: { value: string; label: string }[]
}

const BASE = '/master-data/assets'

const CONDITION_BADGE: Record<string, string> = {
    GOOD:     'bg-emerald-600',
    FAIR:     'bg-yellow-500',
    DAMAGED:  'bg-red-600',
    DISPOSED: 'bg-gray-500',
}

const STATUS_BADGE: Record<string, string> = {
    ACTIVE:         'bg-emerald-600',
    IN_MAINTENANCE: 'bg-amber-500',
    RETIRED:        'bg-gray-500',
}

export default function AssetIndex({ records, filters, itemOptions, supplierOptions, branchOptions, assetGroupOptions, conditionOptions, statusOptions }: Props) {
    const [isDrawerOpen, setIsDrawerOpen] = useState(false)
    const [selectedAsset, setSelectedAsset] = useState<Asset | undefined>()
    const [isDeleteOpen, setIsDeleteOpen] = useState(false)
    const [assetToDelete, setAssetToDelete] = useState<Asset | undefined>()
    const [isToggleOpen, setIsToggleOpen] = useState(false)
    const [assetToToggle, setAssetToToggle] = useState<Asset | undefined>()
    const [isDeleting, setIsDeleting] = useState(false)
    const [isToggling, setIsToggling] = useState(false)

    function handleCreate() { setSelectedAsset(undefined); setIsDrawerOpen(true) }
    function handleEdit(asset: Asset) { setSelectedAsset(asset); setIsDrawerOpen(true) }
    function handleDeleteClick(asset: Asset) { setAssetToDelete(asset); setIsDeleteOpen(true) }
    function handleToggleClick(asset: Asset) { setAssetToToggle(asset); setIsToggleOpen(true) }

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

    function handleToggleConfirm() {
        if (!assetToToggle) return
        const label = assetToToggle.is_active ? 'dinonaktifkan' : 'diaktifkan'
        router.patch(`${BASE}/${assetToToggle.id}/toggle-status`, {}, {
            onStart: () => setIsToggling(true),
            onSuccess: () => { toast.success(`Aset berhasil ${label}.`); setIsToggleOpen(false); setAssetToToggle(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<Asset>[] = [
        { key: 'asset_code', label: 'Kode Aset', className: 'w-36 font-mono text-xs' },
        {
            key: 'item_id',
            label: 'Item',
            render: (row) => row.item
                ? `${row.item.code} - ${row.item.name}`
                : <span className='text-muted-foreground'>-</span>,
        },
        {
            key: 'supplier_id',
            label: 'Pemasok',
            render: (row) => row.supplier
                ? row.supplier.name
                : row.vendor ?? <span className='text-muted-foreground'>-</span>,
        },
        {
            key: 'condition',
            label: 'Kondisi',
            render: (row) => {
                const option = conditionOptions.find((item) => item.value === row.condition)
                return <Badge className={CONDITION_BADGE[row.condition] ?? ''}>{option?.label ?? row.condition}</Badge>
            },
        },
        {
            key: 'status',
            label: 'Status Operasional',
            render: (row) => {
                const option = statusOptions.find((item) => item.value === row.status)
                return <Badge className={STATUS_BADGE[row.status] ?? ''}>{option?.label ?? row.status}</Badge>
            },
        },
        {
            key: 'branch_id',
            label: 'Cabang',
            render: (row) => row.branch
                ? `${row.branch.code} - ${row.branch.name}`
                : <span className='text-muted-foreground'>-</span>,
        },
        {
            key: 'asset_group_id',
            label: 'Group Aset',
            render: (row) => row.asset_group
                ? `${row.asset_group.code} - ${row.asset_group.name}`
                : <span className='text-muted-foreground'>-</span>,
        },
        {
            key: 'no_urut',
            label: 'No Urut',
            render: (row) => row.no_urut ?? <span className='text-muted-foreground'>-</span>,
        },
        {
            key: 'location',
            label: 'Lokasi',
            render: (row) => row.location ?? <span className='text-muted-foreground'>-</span>,
        },
        {
            key: 'is_active',
            label: 'Aktif',
            render: (row) => row.is_active
                ? <Badge className='bg-emerald-600'>Ya</Badge>
                : <Badge variant='secondary'>Tidak</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>
                </div>
            ),
        },
    ]

    return (
        <GwinAppLayout>
            <Head title='Master Aset' />
            <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 Warehouse</h1>
                        <p className='text-sm text-muted-foreground'>Kelola kategori, item, aset, dan pemasok inventaris</p>
                    </div>
                    <Button className='gap-2 bg-amber-600 hover:bg-amber-700' onClick={handleCreate}>
                        <Plus className='h-4 w-4' /> Tambah Aset
                    </Button>
                </div>

                <WarehouseTabs />

                <div className='flex flex-wrap gap-2'>
                    <div className='w-full sm:w-[260px]'>
                        <ComboboxDropdown
                            value={filters.item_id || undefined}
                            onValueChange={(value) => router.get(BASE, { ...filters, item_id: value || undefined, page: 1 }, { preserveState: true, replace: true })}
                            placeholder='Semua Item'
                            options={itemOptions.map((item) => ({ value: String(item.id), label: `${item.code} - ${item.name}` }))}
                            searchPlaceholder='Cari item...'
                            emptyText='Item tidak ditemukan.'
                        />
                    </div>
                    <div className='w-full sm:w-[260px]'>
                        <ComboboxDropdown
                            value={filters.supplier_id || undefined}
                            onValueChange={(value) => router.get(BASE, { ...filters, supplier_id: value || undefined, page: 1 }, { preserveState: true, replace: true })}
                            placeholder='Semua Pemasok'
                            options={supplierOptions.map((supplier) => ({ value: String(supplier.id), label: `${supplier.code} - ${supplier.name}` }))}
                            searchPlaceholder='Cari pemasok...'
                            emptyText='Pemasok tidak ditemukan.'
                        />
                    </div>
                    <div className='w-full sm:w-[200px]'>
                        <ComboboxDropdown
                            value={filters.condition || undefined}
                            onValueChange={(value) => router.get(BASE, { ...filters, condition: value || undefined, page: 1 }, { preserveState: true, replace: true })}
                            placeholder='Semua Kondisi'
                            options={conditionOptions.map((item) => ({ value: item.value, label: item.label }))}
                            searchPlaceholder='Cari kondisi...'
                            emptyText='Kondisi tidak ditemukan.'
                        />
                    </div>
                    <div className='w-full sm:w-[220px]'>
                        <ComboboxDropdown
                            value={filters.status || undefined}
                            onValueChange={(value) => router.get(BASE, { ...filters, status: value || undefined, page: 1 }, { preserveState: true, replace: true })}
                            placeholder='Semua Status'
                            options={statusOptions.map((item) => ({ value: item.value, label: item.label }))}
                            searchPlaceholder='Cari status...'
                            emptyText='Status tidak ditemukan.'
                        />
                    </div>
                </div>

                <div className='flex flex-wrap gap-2'>
                    {([
                        [null, 'Semua'],
                        ['1', 'Aktif'],
                        ['0', 'Nonaktif'],
                    ] as const).map(([v, label]) => (
                        <button
                            key={v ?? 'all-active'}
                            onClick={() => router.get(BASE, { ...filters, is_active: v ?? undefined, page: 1 }, { preserveState: true, replace: true })}
                            className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${
                                (filters.is_active ?? null) === v
                                    ? 'bg-teal-600 text-white'
                                    : 'bg-muted text-muted-foreground hover:bg-muted/80'
                            }`}
                        >
                            {label}
                        </button>
                    ))}
                </div>

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

            <ResizableDrawer
                open={isDrawerOpen}
                onOpenChange={setIsDrawerOpen}
                title={selectedAsset ? 'Edit Aset' : 'Tambah Aset'}
            >
                <AssetForm
                    asset={selectedAsset}
                    itemOptions={itemOptions}
                    supplierOptions={supplierOptions}
                    branchOptions={branchOptions}
                    assetGroupOptions={assetGroupOptions}
                    conditionOptions={conditionOptions}
                    statusOptions={statusOptions}
                    onSuccess={() => setIsDrawerOpen(false)}
                />
            </ResizableDrawer>

            <DeleteConfirmationDialog
                open={isDeleteOpen}
                onOpenChange={setIsDeleteOpen}
                onConfirm={handleDeleteConfirm}
                itemName={assetToDelete?.asset_code}
                isLoading={isDeleting}
            />

            <ToggleStatusDialog
                open={isToggleOpen}
                onOpenChange={setIsToggleOpen}
                onConfirm={handleToggleConfirm}
                itemName={assetToToggle?.asset_code}
                isActive={assetToToggle?.is_active}
                isLoading={isToggling}
            />
        </GwinAppLayout>
    )
}