import { Head, router } from '@inertiajs/react'
import { useEffect, useMemo, useState } from 'react'
import { toast } from 'sonner'
import { LimsAppLayout } from '@/layouts/lims-app-layout'
import { Badge } from '@ui/components/ui/badge'
import { Button } from '@ui/components/ui/button'
import { GripVertical, Pencil, Plus, ToggleLeft, ToggleRight } from 'lucide-react'
import { ResizableDrawer } from '@/components/common/ResizableDrawer'
import { DeleteConfirmationDialog } from '@/components/common/DeleteConfirmationDialog'
import { ToggleStatusDialog } from '@/components/common/ToggleStatusDialog'
import { type QualityStandard } from '@/types/glims'
import { QualityStandardParamForm } from './components/QualityStandardParamForm'

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

interface Props {
    qualityStandard: QualityStandard
    parameterOptions: OptionSimple[]
    unitOptions: { id: number; name: string }[]
}

export default function QualityStandardParameters({
    qualityStandard,
    parameterOptions,
    unitOptions,
}: Props) {
    const sortedParams = useMemo(
        () => (qualityStandard.params ?? []).slice().sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0)),
        [qualityStandard.params]
    )
    const [params, setParams] = useState(sortedParams)

    const [isDrawerOpen, setIsDrawerOpen] = useState(false)
    const [selectedParam, setSelectedParam] = useState<NonNullable<QualityStandard['params']>[number] | undefined>()
    const [isDeleteOpen, setIsDeleteOpen] = useState(false)
    const [paramToDelete, setParamToDelete] = useState<NonNullable<QualityStandard['params']>[number] | undefined>()
    const [isToggleOpen, setIsToggleOpen] = useState(false)
    const [paramToToggle, setParamToToggle] = useState<NonNullable<QualityStandard['params']>[number] | undefined>()
    const [isDeleting, setIsDeleting] = useState(false)
    const [isToggling, setIsToggling] = useState(false)
    const [dragIndex, setDragIndex] = useState<number | null>(null)
    const [isReordering, setIsReordering] = useState(false)

    const base = `/master-data/quality-standards/${qualityStandard.id}/parameters`

    useEffect(() => {
        setParams(sortedParams)
    }, [sortedParams])

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

    function handleEdit(param: NonNullable<QualityStandard['params']>[number]) {
        setSelectedParam(param)
        setIsDrawerOpen(true)
    }

    function handleDeleteClick(param: NonNullable<QualityStandard['params']>[number]) {
        setParamToDelete(param)
        setIsDeleteOpen(true)
    }

    function handleToggleClick(param: NonNullable<QualityStandard['params']>[number]) {
        setParamToToggle(param)
        setIsToggleOpen(true)
    }

    function persistOrder(next: NonNullable<QualityStandard['params']>) {
        const orderedIds = next.map((item) => item.id)
        router.patch(`${base}/reorder`, { ordered_ids: orderedIds }, {
            preserveScroll: true,
            onStart: () => setIsReordering(true),
            onSuccess: () => toast.success('Urutan parameter diperbarui.'),
            onError: () => toast.error('Gagal menyimpan urutan parameter.'),
            onFinish: () => setIsReordering(false),
        })
    }

    function handleDrop(targetIndex: number) {
        if (dragIndex === null || dragIndex === targetIndex) {
            setDragIndex(null)
            return
        }

        const next = [...params]
        const [moved] = next.splice(dragIndex, 1)
        next.splice(targetIndex, 0, moved)
        const normalized = next.map((item, idx) => ({ ...item, sort_order: idx + 1 }))
        setParams(normalized)
        setDragIndex(null)
        persistOrder(normalized)
    }

    function handleDeleteConfirm() {
        if (!paramToDelete) {
            return
        }

        const name = paramToDelete.parameter?.name ?? `#${paramToDelete.id}`
        router.delete(`${base}/${paramToDelete.id}`, {
            onStart: () => setIsDeleting(true),
            onSuccess: () => {
                toast.success(`Parameter "${name}" berhasil dihapus.`)
                setIsDeleteOpen(false)
                setParamToDelete(undefined)
            },
            onError: () => toast.error('Terjadi kesalahan. Silakan coba lagi.'),
            onFinish: () => setIsDeleting(false),
        })
    }

    function handleToggleConfirm() {
        if (!paramToToggle) {
            return
        }

        const isActive = !(paramToToggle.deleted_at ?? null)
        router.patch(`${base}/${paramToToggle.id}/toggle-status`, {}, {
            onStart: () => setIsToggling(true),
            onSuccess: () => {
                toast.success(`Parameter "${paramToToggle.parameter?.name ?? paramToToggle.id}" berhasil ${isActive ? 'dinonaktifkan' : 'diaktifkan'}.`)
                setIsToggleOpen(false)
                setParamToToggle(undefined)
            },
            onError: () => toast.error('Terjadi kesalahan. Silakan coba lagi.'),
            onFinish: () => setIsToggling(false),
        })
    }

    return (
        <LimsAppLayout>
            <Head title={`Baku Mutu - Kelola Parameter ${qualityStandard.code}`} />
            <div className='flex h-full flex-1 flex-col gap-4 p-4'>
                <div className='flex flex-wrap items-center justify-between gap-3'>
                    <div>
                        <h1 className='text-xl font-bold tracking-tight'>Baku Mutu</h1>
                        <p className='text-sm text-muted-foreground'>
                            Kelola parameter untuk {qualityStandard.code} - {qualityStandard.sample_type?.name ?? '-'} - {qualityStandard.regulation?.short_name ?? qualityStandard.regulation?.name ?? '-'}
                        </p>
                    </div>
                    <div className='flex gap-2'>
                        <Button className='gap-2' onClick={handleCreate}>
                            <Plus className='h-4 w-4' /> Tambah Parameter
                        </Button>
                        <Button variant='outline' onClick={() => router.get('/master-data/quality-standards')}>
                            Kembali ke Baku Mutu
                        </Button>
                    </div>
                </div>

                <div className='rounded-xl border bg-card p-4'>
                    <div className='mb-3 flex items-center justify-between'>
                        <div>
                            <h2 className='font-semibold'>Daftar Parameter</h2>
                            <p className='text-xs text-muted-foreground'>Tarik dan lepas baris parameter untuk mengubah urutan.</p>
                        </div>
                        <div className='flex items-center gap-2'>
                            {isReordering && <Badge variant='outline'>Menyimpan urutan...</Badge>}
                            <Badge variant='secondary'>Total: {params.length}</Badge>
                        </div>
                    </div>

                    {params.length === 0 ? (
                        <div className='rounded-lg border border-dashed p-8 text-center text-sm text-muted-foreground'>
                            Belum ada parameter pada baku mutu ini.
                        </div>
                    ) : (
                        <div className='space-y-2'>
                            {params.map((item, index) => (
                                <div
                                    key={item.id}
                                    draggable
                                    onDragStart={() => setDragIndex(index)}
                                    onDragOver={(e) => e.preventDefault()}
                                    onDrop={() => handleDrop(index)}
                                    className='grid cursor-move grid-cols-1 gap-3 rounded-lg border bg-background p-3 md:grid-cols-9'
                                >
                                    <div className='flex items-center gap-1 text-sm text-muted-foreground'>
                                        <GripVertical className='h-4 w-4' />
                                        #{index + 1}
                                    </div>
                                    <div className='md:col-span-2'>
                                        <p className='font-medium'>{item.parameter?.name ?? '-'}</p>
                                    </div>
                                    <div>
                                        <p className='text-sm'>{item.method?.name ?? '-'}</p>
                                        <p className='text-xs text-muted-foreground'>{item.method?.code ?? '-'}</p>
                                    </div>
                                    <div className='text-sm'>{item.unit ?? '-'}</div>
                                    <div className='text-sm'>
                                        {item.threshold_display
                                            ?? (item.min_value || item.max_value
                                                ? `${item.min_value ?? '-'} .. ${item.max_value ?? '-'}`
                                                : '-')}
                                    </div>
                                    <div className='text-sm text-muted-foreground'>
                                        Urutan: {item.sort_order ?? 0}
                                    </div>
                                    <div>
                                        {item.deleted_at
                                            ? <Badge className='border-rose-200 bg-rose-100 text-rose-700'>Nonaktif</Badge>
                                            : <Badge className='bg-emerald-600 text-white hover:bg-emerald-600'>Aktif</Badge>}
                                    </div>
                                    <div className='flex justify-end gap-1'>
                                        <Button
                                            size='icon'
                                            variant='ghost'
                                            className='h-7 w-7'
                                            title={item.deleted_at ? 'Aktifkan' : 'Nonaktifkan'}
                                            onClick={() => handleToggleClick(item)}
                                        >
                                            {item.deleted_at
                                                ? <ToggleLeft className='h-3.5 w-3.5' />
                                                : <ToggleRight className='h-3.5 w-3.5 text-emerald-600' />}
                                        </Button>
                                        <Button
                                            size='icon'
                                            variant='ghost'
                                            className='h-7 w-7'
                                            title='Edit'
                                            onClick={() => handleEdit(item)}
                                        >
                                            <Pencil className='h-3.5 w-3.5' />
                                        </Button>
                                    </div>
                                </div>
                            ))}
                        </div>
                    )}
                </div>
            </div>

            <ResizableDrawer
                open={isDrawerOpen}
                onOpenChange={setIsDrawerOpen}
                title={selectedParam ? 'Edit Parameter Baku Mutu' : 'Tambah Parameter Baku Mutu'}
                description={selectedParam ? `Edit: ${selectedParam.parameter?.name ?? selectedParam.id}` : 'Tambahkan parameter untuk baku mutu ini'}
            >
                <QualityStandardParamForm
                    qualityStandard={qualityStandard}
                    parameterOptions={parameterOptions}
                    unitOptions={unitOptions}
                    param={selectedParam}
                    onSuccess={() => setIsDrawerOpen(false)}
                    onCancel={() => setIsDrawerOpen(false)}
                />
            </ResizableDrawer>

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

            <ToggleStatusDialog
                open={isToggleOpen}
                onOpenChange={setIsToggleOpen}
                onConfirm={handleToggleConfirm}
                itemName={paramToToggle?.parameter?.name}
                isActive={!((paramToToggle?.deleted_at ?? null))}
                isLoading={isToggling}
            />
        </LimsAppLayout>
    )
}