import { Head, router } from '@inertiajs/react'
import { useEffect, useState } from 'react'
import { toast } from 'sonner'
import { LimsAppLayout } from '@/layouts/lims-app-layout'
import { ServerDataTable, type ServerColumnDef, type ServerPaginatedData, type ServerDataTableParams } from '@ui/components/data-table/server-data-table'
import { Button } from '@ui/components/ui/button'
import { Badge } from '@ui/components/ui/badge'
import { ComboboxDropdown } from '@ui/components/combobox-dropdown'
import { type SampleType, type SampleTypeField } from '@/types/glims'
import SampleTypeController from '@/actions/App/Modules/MasterData/Infrastructure/Controllers/SampleTypeController'
import SampleTypeFieldController from '@/actions/App/Modules/MasterData/Infrastructure/Controllers/SampleTypeFieldController'
import { Plus, Pencil, ToggleLeft, ToggleRight, Rows3, X } from 'lucide-react'
import { ResizableDrawer } from '@/components/common/ResizableDrawer'
import { DeleteConfirmationDialog } from '@/components/common/DeleteConfirmationDialog'
import { ToggleStatusDialog } from '@/components/common/ToggleStatusDialog'
import { SampleTypeTabs } from '@/components/master-data/SampleTypeTabs'
import { SampleTypeForm } from './components/SampleTypeForm'
import { SampleTypeFieldForm } from './components/SampleTypeFieldForm'

interface Props {
    sampleTypes: ServerPaginatedData<SampleType>
    filters: Record<string, string | undefined>
    categoryOptions: Array<{ id: number; code: string; name: string }>
    itemCategoryOptions: Array<{ value: string; label: string }>
    itemTypeOptions: Array<{ value: string; label: string }>
    departmentOptions: Array<{ id: number; name: string }>
}

type FieldTypeOption = {
    value: 'TEXT' | 'NUMBER' | 'DATE' | 'SELECT' | 'TEXTAREA'
    label: string
}

export default function SampleTypeIndex({
    sampleTypes,
    filters,
    categoryOptions,
    itemCategoryOptions,
    itemTypeOptions,
    departmentOptions,
}: Props) {
    const [isDrawerOpen, setIsDrawerOpen] = useState(false)
    const [selectedItem, setSelectedItem] = useState<SampleType | undefined>()
    const [isFieldsDrawerOpen, setIsFieldsDrawerOpen] = useState(false)
    const [sampleTypeForFields, setSampleTypeForFields] = useState<SampleType | undefined>()
    const [isDeleteOpen, setIsDeleteOpen] = useState(false)
    const [itemToDelete, setItemToDelete] = useState<SampleType | undefined>()
    const [isToggleOpen, setIsToggleOpen] = useState(false)
    const [itemToToggle, setItemToToggle] = useState<SampleType | undefined>()
    const [isDeleting, setIsDeleting] = useState(false)
    const [isToggling, setIsToggling] = useState(false)

    const [fields, setFields] = useState<SampleTypeField[]>([])
    const [isLoadingFields, setIsLoadingFields] = useState(false)
    const [fieldTypeOptions, setFieldTypeOptions] = useState<FieldTypeOption[]>([])
    const [isFieldFormOpen, setIsFieldFormOpen] = useState(false)
    const [selectedField, setSelectedField] = useState<SampleTypeField | undefined>()
    const [isFieldDeleteOpen, setIsFieldDeleteOpen] = useState(false)
    const [fieldToDelete, setFieldToDelete] = useState<SampleTypeField | undefined>()
    const [isDeletingField, setIsDeletingField] = useState(false)
    const [isFieldToggleOpen, setIsFieldToggleOpen] = useState(false)
    const [fieldToToggle, setFieldToToggle] = useState<SampleTypeField | undefined>()
    const [isTogglingField, setIsTogglingField] = useState(false)

    async function loadFields(sampleType: SampleType) {
        setIsLoadingFields(true)
        try {
            const response = await fetch(`/master-data/sample-items/${sampleType.uuid}/fields/options`, {
                headers: {
                    Accept: 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                },
            })
            if (!response.ok) throw new Error('Gagal memuat field dinamis.')
            const payload = await response.json() as {
                fields?: SampleTypeField[]
                fieldTypeOptions?: FieldTypeOption[]
            }
            setFields(payload.fields ?? [])
            setFieldTypeOptions(payload.fieldTypeOptions ?? [])
        } catch {
            toast.error('Gagal memuat daftar field dinamis.')
            setFields([])
            setFieldTypeOptions([])
        } finally {
            setIsLoadingFields(false)
        }
    }

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

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

    function handleDeleteClick(item: SampleType) {
        setItemToDelete(item)
        setIsDeleteOpen(true)
    }

    function handleManageFields(item: SampleType) {
        setSampleTypeForFields(item)
        setIsFieldsDrawerOpen(true)
    }

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

    function handleDeleteConfirm() {
        if (!itemToDelete) return
        const name = itemToDelete.name
        router.delete(SampleTypeController.destroy(itemToDelete).url, {
            onStart: () => setIsDeleting(true),
            onSuccess: () => {
                toast.success(`Item sampel "${name}" berhasil dihapus.`)
                setIsDeleteOpen(false)
                setItemToDelete(undefined)
            },
            onError: () => toast.error('Terjadi kesalahan. Silakan coba lagi.'),
            onFinish: () => setIsDeleting(false),
        })
    }

    function handleToggleConfirm() {
        if (!itemToToggle) return
        const name = itemToToggle.name
        const label = itemToToggle.is_active ? 'dinonaktifkan' : 'diaktifkan'
        router.patch(SampleTypeController.toggleStatus(itemToToggle).url, {}, {
            onStart: () => setIsToggling(true),
            onSuccess: () => {
                toast.success(`Item sampel "${name}" berhasil ${label}.`)
                setIsToggleOpen(false)
                setItemToToggle(undefined)
            },
            onError: () => toast.error('Terjadi kesalahan. Silakan coba lagi.'),
            onFinish: () => setIsToggling(false),
        })
    }

    function handleFormSuccess() {
        setIsDrawerOpen(false)
    }

    function handleFieldFormOpen(field?: SampleTypeField) {
        setSelectedField(field)
        setIsFieldFormOpen(true)
    }

    function handleFieldDeleteClick(field: SampleTypeField) {
        setFieldToDelete(field)
        setIsFieldDeleteOpen(true)
    }

    function handleFieldToggleClick(field: SampleTypeField) {
        setFieldToToggle(field)
        setIsFieldToggleOpen(true)
    }

    function handleFieldDeleteConfirm() {
        if (!sampleTypeForFields || !fieldToDelete) return
        const fieldName = fieldToDelete.field_name
        router.delete(`/master-data/sample-items/${sampleTypeForFields.uuid}/fields/${fieldToDelete.id}`, {
            onStart: () => setIsDeletingField(true),
            onSuccess: () => {
                toast.success(`Field "${fieldName}" berhasil dihapus.`)
                setIsFieldDeleteOpen(false)
                setFieldToDelete(undefined)
                loadFields(sampleTypeForFields)
            },
            onError: () => toast.error('Gagal menghapus field dinamis.'),
            onFinish: () => setIsDeletingField(false),
        })
    }

    function handleFieldToggleConfirm() {
        if (!sampleTypeForFields || !fieldToToggle) return
        const fieldName = fieldToToggle.field_name
        const label = fieldToToggle.is_active ? 'dinonaktifkan' : 'diaktifkan'
        router.patch(`/master-data/sample-items/${sampleTypeForFields.uuid}/fields/${fieldToToggle.id}/toggle-status`, {}, {
            onStart: () => setIsTogglingField(true),
            onSuccess: () => {
                toast.success(`Field "${fieldName}" berhasil ${label}.`)
                setIsFieldToggleOpen(false)
                setFieldToToggle(undefined)
                loadFields(sampleTypeForFields)
            },
            onError: () => toast.error('Gagal mengubah status field dinamis.'),
            onFinish: () => setIsTogglingField(false),
        })
    }

    useEffect(() => {
        if (isFieldsDrawerOpen && sampleTypeForFields) {
            loadFields(sampleTypeForFields)
            return
        }

        if (!isFieldsDrawerOpen) {
            setFields([])
            setFieldTypeOptions([])
            setSelectedField(undefined)
            setFieldToDelete(undefined)
            setFieldToToggle(undefined)
            setIsFieldFormOpen(false)
            setIsFieldDeleteOpen(false)
            setIsFieldToggleOpen(false)
        }
    }, [isFieldsDrawerOpen, sampleTypeForFields])

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

    const columns: ServerColumnDef<SampleType>[] = [
        {
            key: 'code',
            label: 'Kode',
            sortable: true,
            className: 'font-mono text-sm w-24',
        },
        {
            key: 'name',
            label: 'Nama Item Sampel',
            sortable: true,
        },
        {
            key: 'item_category',
            label: 'Item Category',
            render: (row) => row.item_category,
        },
        {
            key: 'item_type',
            label: 'Item Type',
            render: (row) => row.item_type,
        },
        {
            key: 'category',
            label: 'Kategori',
            render: (row) => row.category?.name ?? <span className='text-muted-foreground'>-</span>,
        },
        {
            key: 'handling_time',
            label: 'Handling (menit)',
            className: 'text-center',
            render: (row) => row.handling_time ?? <span className='text-muted-foreground'>-</span>,
        },
        {
            key: 'is_active',
            label: 'Status',
            render: (row) => row.is_active
                ? <Badge variant='default' className='bg-emerald-600'>Aktif</Badge>
                : <Badge className='border-rose-200 bg-rose-100 text-rose-700'>Nonaktif</Badge>,
        },
        {
            key: 'actions',
            label: '',
            className: 'w-36 text-right',
            render: (row) => (
                <div className='flex justify-end gap-1'>
                    <Button
                        size='icon'
                        variant='ghost'
                        className='h-7 w-7'
                        title='Kelola Field Dinamis'
                        onClick={() => handleManageFields(row)}
                    >
                        <Rows3 className='h-3.5 w-3.5' />
                    </Button>
                    <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 (
        <LimsAppLayout>
            <Head title='Item Sampel' />
            <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'>Item Sampel</h1>
                        <p className='text-sm text-muted-foreground'>Kelola master data item sampel dan biaya tambahan</p>
                    </div>
                    <Button className='gap-2' onClick={handleCreate}>
                        <Plus className='h-4 w-4' /> Tambah
                    </Button>
                </div>

                <SampleTypeTabs />

                <div className='flex flex-wrap gap-3'>
                    <div className='w-full sm:w-[220px]'>
                        <ComboboxDropdown
                            value={filters.category_id || undefined}
                            onValueChange={(value) => router.get(
                                SampleTypeController.index().url,
                                { ...filters, category_id: value || undefined, page: 1 },
                                { preserveState: true, replace: true },
                            )}
                            placeholder='Semua Kategori'
                            options={categoryOptions.map((category) => ({
                                value: String(category.id),
                                label: `${category.code} - ${category.name}`,
                            }))}
                            searchPlaceholder='Cari kategori...'
                            emptyText='Kategori tidak ditemukan.'
                        />
                    </div>
                    <div className='w-full sm:w-[220px]'>
                        <ComboboxDropdown
                            value={filters.item_category || undefined}
                            onValueChange={(value) => router.get(
                                SampleTypeController.index().url,
                                { ...filters, item_category: value || undefined, page: 1 },
                                { preserveState: true, replace: true },
                            )}
                            placeholder='Semua Item Category'
                            options={itemCategoryOptions}
                            searchPlaceholder='Cari item category...'
                            emptyText='Item category tidak ditemukan.'
                        />
                    </div>
                    <div className='w-full sm:w-[220px]'>
                        <ComboboxDropdown
                            value={filters.item_type || undefined}
                            onValueChange={(value) => router.get(
                                SampleTypeController.index().url,
                                { ...filters, item_type: value || undefined, page: 1 },
                                { preserveState: true, replace: true },
                            )}
                            placeholder='Semua Item Type'
                            options={itemTypeOptions}
                            searchPlaceholder='Cari item type...'
                            emptyText='Item type 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'}
                            onClick={() => router.get(SampleTypeController.index().url, { ...filters, is_active: v ?? undefined }, { preserveState: 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={sampleTypes}
                    columns={columns}
                    params={params}
                    onParamsChange={(next) => router.get(
                        SampleTypeController.index().url,
                        { ...filters, ...next } as Record<string, string | number | undefined>,
                        { preserveState: true, replace: true },
                    )}
                    searchPlaceholder='Cari nama atau kode...'
                    emptyText='Belum ada item sampel.'
                />
            </div>

            <ResizableDrawer
                open={isDrawerOpen}
                onOpenChange={setIsDrawerOpen}
                title={selectedItem ? 'Edit Item Sampel' : 'Tambah Item Sampel'}
                description={selectedItem ? `Edit data: ${selectedItem.name}` : 'Isi form untuk menambah item sampel baru'}
            >
                <SampleTypeForm
                    key={selectedItem?.uuid ?? 'new'}
                    sampleType={selectedItem}
                    categoryOptions={categoryOptions}
                    itemCategoryOptions={itemCategoryOptions}
                    itemTypeOptions={itemTypeOptions}
                    departmentOptions={departmentOptions}
                    onManageFields={(sampleType) => {
                        setIsDrawerOpen(false)
                        handleManageFields(sampleType)
                    }}
                    onSuccess={handleFormSuccess}
                    onCancel={() => setIsDrawerOpen(false)}
                />
            </ResizableDrawer>

            <ResizableDrawer
                open={isFieldsDrawerOpen}
                onOpenChange={setIsFieldsDrawerOpen}
                title={sampleTypeForFields ? `Field Dinamis: ${sampleTypeForFields.name}` : 'Field Dinamis'}
                description='Kelola cepat field dinamis tanpa keluar dari menu Item Sampel.'
            >
                {sampleTypeForFields && (
                    <div className='space-y-4 rounded-lg border bg-muted/20 p-4'>
                        <div className='space-y-1'>
                            <p className='text-sm font-medium text-foreground'>Item Sampel</p>
                            <p className='text-sm text-muted-foreground'>
                                {sampleTypeForFields.code} - {sampleTypeForFields.name}
                            </p>
                        </div>

                        <div className='flex justify-end gap-2'>
                            <Button type='button' variant='outline' className='gap-1.5' onClick={() => handleFieldFormOpen()}>
                                <Plus className='h-3.5 w-3.5' />
                                Tambah Field
                            </Button>
                        </div>

                        {isFieldFormOpen && (
                            <div className='rounded-lg border bg-background p-4'>
                                <div className='mb-3 flex items-center justify-between'>
                                    <p className='text-sm font-semibold text-foreground'>
                                        {selectedField ? 'Edit Field Dinamis' : 'Tambah Field Dinamis Baru'}
                                    </p>
                                    <Button
                                        type='button'
                                        size='icon'
                                        variant='ghost'
                                        className='h-7 w-7'
                                        onClick={() => {
                                            setIsFieldFormOpen(false)
                                            setSelectedField(undefined)
                                        }}
                                    >
                                        <X className='h-4 w-4' />
                                    </Button>
                                </div>

                                <SampleTypeFieldForm
                                    sampleTypeId={sampleTypeForFields.id}
                                    sampleTypeUuid={sampleTypeForFields.uuid}
                                    fieldTypeOptions={fieldTypeOptions}
                                    field={selectedField}
                                    onSuccess={() => {
                                        setIsFieldFormOpen(false)
                                        setSelectedField(undefined)
                                        loadFields(sampleTypeForFields)
                                    }}
                                    onCancel={() => {
                                        setIsFieldFormOpen(false)
                                        setSelectedField(undefined)
                                    }}
                                />
                            </div>
                        )}

                        {isLoadingFields ? (
                            <div className='rounded-md border bg-background p-4 text-sm text-muted-foreground'>
                                Memuat field dinamis...
                            </div>
                        ) : fields.length === 0 ? (
                            <div className='rounded-md border border-dashed bg-background p-4 text-sm text-muted-foreground'>
                                Belum ada field dinamis.
                            </div>
                        ) : (
                            <div className='overflow-hidden rounded-md border bg-background'>
                                <table className='w-full text-sm'>
                                    <thead className='bg-muted/50 text-xs text-muted-foreground'>
                                        <tr>
                                            <th className='px-3 py-2 text-left font-medium'>Nama Field</th>
                                            <th className='px-3 py-2 text-left font-medium'>Tipe</th>
                                            <th className='px-3 py-2 text-center font-medium'>Wajib</th>
                                            <th className='px-3 py-2 text-center font-medium'>Urutan</th>
                                            <th className='px-3 py-2 text-center font-medium'>Status</th>
                                            <th className='px-3 py-2 text-right font-medium'>Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {fields.map((field) => (
                                            <tr key={field.id} className='border-t'>
                                                <td className='px-3 py-2'>
                                                    <p className='font-medium text-foreground'>{field.field_name}</p>
                                                    <p className='text-xs text-muted-foreground'>{field.field_key}</p>
                                                </td>
                                                <td className='px-3 py-2'>{field.field_type}</td>
                                                <td className='px-3 py-2 text-center'>{field.is_required ? 'Ya' : 'Tidak'}</td>
                                                <td className='px-3 py-2 text-center'>{field.display_order}</td>
                                                <td className='px-3 py-2 text-center'>
                                                    {field.is_active
                                                        ? <Badge className='bg-emerald-600 text-white'>Aktif</Badge>
                                                        : <Badge className='border-rose-200 bg-rose-100 text-rose-700'>Nonaktif</Badge>}
                                                </td>
                                                <td className='px-3 py-2'>
                                                    <div className='flex justify-end gap-1'>
                                                        <Button
                                                            size='icon'
                                                            variant='ghost'
                                                            className='h-7 w-7'
                                                            title={field.is_active ? 'Nonaktifkan' : 'Aktifkan'}
                                                            onClick={() => handleFieldToggleClick(field)}
                                                        >
                                                            {field.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={() => handleFieldFormOpen(field)}
                                                        >
                                                            <Pencil className='h-3.5 w-3.5' />
                                                        </Button>
                                                    </div>
                                                </td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        )}

                        <div className='flex justify-end gap-2'>
                            <Button type='button' variant='outline' onClick={() => setIsFieldsDrawerOpen(false)}>
                                Tutup
                            </Button>
                            <Button
                                type='button'
                                onClick={() => router.get(SampleTypeFieldController.index(sampleTypeForFields).url)}
                            >
                                Buka Halaman Penuh
                            </Button>
                        </div>
                    </div>
                )}
            </ResizableDrawer>

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

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

            <DeleteConfirmationDialog
                open={isFieldDeleteOpen}
                onOpenChange={setIsFieldDeleteOpen}
                onConfirm={handleFieldDeleteConfirm}
                itemName={fieldToDelete?.field_name}
                isDeleting={isDeletingField}
            />

            <ToggleStatusDialog
                open={isFieldToggleOpen}
                onOpenChange={setIsFieldToggleOpen}
                onConfirm={handleFieldToggleConfirm}
                itemName={fieldToToggle?.field_name}
                isActive={fieldToToggle?.is_active}
                isLoading={isTogglingField}
            />
        </LimsAppLayout>
    )
}