import { Head, router } from '@inertiajs/react'
import { useState } from 'react'
import { toast } from 'sonner'
import { LimsAppLayout } from '@/layouts/lims-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 { type SampleTypeParameter } from '@/types/glims'
import { SampleTypeTabs } from '@/components/master-data/SampleTypeTabs'
import { SampleTypeParameterForm } from './components/SampleTypeParameterForm'

interface Option {
    id: number
    code: string
    name: string
}

interface EnumOption {
    value: string
    label: string
}

interface UnitOption {
    id: number
    name: string
}

interface Props {
    records: ServerPaginatedData<SampleTypeParameter>
    filters: Record<string, string | undefined>
    sampleTypeOptions: Option[]
    parameterOptions: Option[]
    methodOptions: Option[]
    unitOptions: UnitOption[]
    testTypeOptions: EnumOption[]
    samplingTypeOptions: EnumOption[]
}

function routes(record?: SampleTypeParameter) {
    const base = '/master-data/sample-type-parameters'
    return {
        index: base,
        destroy: record ? `${base}/${record.id}` : base,
        toggle: record ? `${base}/${record.id}/toggle-status` : base,
    }
}

export default function SampleTypeParameterIndex({
    records,
    filters,
    sampleTypeOptions,
    parameterOptions,
    methodOptions,
    unitOptions,
    testTypeOptions,
    samplingTypeOptions,
}: Props) {
    const [isDrawerOpen, setIsDrawerOpen]     = useState(false)
    const [selectedItem, setSelectedItem]     = useState<SampleTypeParameter | undefined>()
    const [isDeleteOpen, setIsDeleteOpen]     = useState(false)
    const [itemToDelete, setItemToDelete]     = useState<SampleTypeParameter | undefined>()
    const [isToggleOpen, setIsToggleOpen]     = useState(false)
    const [itemToToggle, setItemToToggle]     = useState<SampleTypeParameter | undefined>()
    const [isDeleting, setIsDeleting]         = useState(false)
    const [isToggling, setIsToggling]         = useState(false)
    const activeFilters = Object.fromEntries(Object.entries(filters).filter(([key]) => key !== 'sample_type_id'))

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

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

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

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

    function handleDeleteConfirm() {
        if (!itemToDelete) return

        router.delete(routes(itemToDelete).destroy, {
            onStart: () => setIsDeleting(true),
            onSuccess: () => {
                toast.success('Record berhasil dihapus.')
                setIsDeleteOpen(false)
                setItemToDelete(undefined)
            },
            onError: () => toast.error('Terjadi kesalahan. Silakan coba lagi.'),
            onFinish: () => setIsDeleting(false),
        })
    }

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

        router.patch(routes(itemToToggle).toggle, {}, {
            onStart: () => setIsToggling(true),
            onSuccess: () => {
                toast.success(`Record 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: activeFilters.search,
    }

    const columns: ServerColumnDef<SampleTypeParameter>[] = [
        {
            key: 'parameter_id',
            label: 'Parameter',
            render: (row) => row.parameter
                ? row.parameter.name
                : <span className='text-muted-foreground'>-</span>,
        },
        {
            key: 'method_id',
            label: 'Metode',
            render: (row) => row.method
                ? `${row.method.code} - ${row.method.name}`
                : <span className='text-muted-foreground'>-</span>,
        },
        {
            key: 'test_type',
            label: 'Tipe Uji',
            render: (row) => {
                const opt = testTypeOptions.find((o) => o.value === row.test_type)
                return opt
                    ? <Badge variant={row.test_type === 'SUBCONTRACT' ? 'secondary' : 'outline'}>{opt.label}</Badge>
                    : row.test_type
            },
        },
        {
            key: 'sampling_type',
            label: 'Lokasi Uji',
            render: (row) => {
                const opt = samplingTypeOptions.find((o) => o.value === row.sampling_type)
                return opt ? opt.label : row.sampling_type
            },
        },
        {
            key: 'is_accredited',
            label: 'Akreditasi',
            render: (row) => row.is_accredited
                ? <Badge className='bg-emerald-600'>Ya</Badge>
                : <Badge variant='secondary'>Tidak</Badge>,
        },
        {
            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-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 (
        <LimsAppLayout>
            <Head title='Parameter per 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'>Parameter per Item Sampel</h1>
                        <p className='text-sm text-muted-foreground'>
                            Mapping parameter ke item sampel beserta tipe uji, lokasi uji, dan akreditasi
                        </p>
                    </div>
                    <Button className='gap-2' onClick={handleCreate}>
                        <Plus className='h-4 w-4' /> Tambah
                    </Button>
                </div>

                <SampleTypeTabs />

                {/* Filters */}
                <div className='flex flex-wrap gap-2'>
                    <div className='w-full sm:w-[260px]'>
                        <ComboboxDropdown
                            value={filters.parameter_id || undefined}
                            onValueChange={(value) => router.get(
                                routes().index,
                                { ...activeFilters, parameter_id: value || undefined, page: 1 },
                                { preserveState: true, replace: true }
                            )}
                            placeholder='Semua Parameter'
                            options={parameterOptions.map((o) => ({ value: String(o.id), label: o.name }))}
                            searchPlaceholder='Cari parameter...'
                            emptyText='Parameter tidak ditemukan.'
                        />
                    </div>

                    <div className='w-full sm:w-[220px]'>
                        <ComboboxDropdown
                            value={filters.test_type || undefined}
                            onValueChange={(value) => router.get(
                                routes().index,
                                { ...activeFilters, test_type: value || undefined, page: 1 },
                                { preserveState: true, replace: true }
                            )}
                            placeholder='Semua Tipe Uji'
                            options={testTypeOptions.map((o) => ({ value: o.value, label: o.label }))}
                            searchPlaceholder='Cari tipe uji...'
                            emptyText='Tipe uji tidak ditemukan.'
                        />
                    </div>

                    <div className='w-full sm:w-[220px]'>
                        <ComboboxDropdown
                            value={filters.sampling_type || undefined}
                            onValueChange={(value) => router.get(
                                routes().index,
                                { ...activeFilters, sampling_type: value || undefined, page: 1 },
                                { preserveState: true, replace: true }
                            )}
                            placeholder='Semua Lokasi Uji'
                            options={samplingTypeOptions.map((o) => ({ value: o.value, label: o.label }))}
                            searchPlaceholder='Cari lokasi uji...'
                            emptyText='Lokasi uji 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(
                                routes().index,
                                { ...activeFilters, 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
                    columns={columns}
                    data={records}
                    params={params}
                    routeUrl={routes().index}
                    filterValues={activeFilters}
                    searchPlaceholder='Cari parameter...'
                />

                <ResizableDrawer
                    open={isDrawerOpen}
                    onOpenChange={setIsDrawerOpen}
                    title={selectedItem ? 'Edit Parameter per Item Sampel' : 'Tambah Parameter per Item Sampel'}
                >
                    <SampleTypeParameterForm
                        record={selectedItem}
                        sampleTypeOptions={sampleTypeOptions}
                        parameterOptions={parameterOptions}
                        methodOptions={methodOptions}
                        unitOptions={unitOptions}
                        testTypeOptions={testTypeOptions}
                        samplingTypeOptions={samplingTypeOptions}
                        onSuccess={() => {
                            setIsDrawerOpen(false)
                            router.reload()
                        }}
                        onCancel={() => setIsDrawerOpen(false)}
                    />
                </ResizableDrawer>

                <DeleteConfirmationDialog
                    open={isDeleteOpen}
                    onOpenChange={setIsDeleteOpen}
                    onConfirm={handleDeleteConfirm}
                    isDeleting={isDeleting}
                    description='Data mapping parameter-item sampel ini akan dihapus permanen.'
                />

                <ToggleStatusDialog
                    open={isToggleOpen}
                    onOpenChange={setIsToggleOpen}
                    onConfirm={handleToggleConfirm}
                    isToggling={isToggling}
                    isCurrentlyActive={itemToToggle?.is_active ?? false}
                />
            </div>
        </LimsAppLayout>
    )
}