import { useEffect, useState } from 'react'
import { router } from '@inertiajs/react'
import { toast } from 'sonner'
import { Badge } from '@ui/components/ui/badge'
import { Button } from '@ui/components/ui/button'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@ui/components/ui/tabs'
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@ui/components/ui/alert-dialog'
import { FileText, ShieldCheck, Info, Plus, Pencil, ToggleLeft, ToggleRight, X } from 'lucide-react'
import { type Parameter, type ParameterAccreditation, type ParameterAlias } from '@/types/glims'
import { ParameterAliasForm } from '@/pages/MasterData/ParameterAlias/components/ParameterAliasForm'
import { ParameterAccreditationForm } from '@/pages/MasterData/ParameterAccreditation/components/ParameterAccreditationForm'
import { ResizableDrawer } from '@/components/common/ResizableDrawer'

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

interface Props {
    parameter?: Parameter
    open: boolean
    onOpenChange: (open: boolean) => void
    defaultTab?: 'info' | 'alias' | 'accreditation'
    sampleTypeOptions: OptionItem[]
}

function statusLabel(status: string) {
    if (status === 'ACCREDITED') return 'Terakreditasi'
    if (status === 'IN_PROCESS') return 'Dalam Proses'
    if (status === 'EXPIRED') return 'Kedaluwarsa'
    return 'Belum Terakreditasi'
}

export function ParameterDetailDrawer({
    parameter,
    open,
    onOpenChange,
    defaultTab = 'info',
    sampleTypeOptions,
}: Props) {
    const [activeTab, setActiveTab] = useState(defaultTab)
    const [aliasMode, setAliasMode] = useState<'none' | 'create' | 'edit'>('none')
    const [editingAlias, setEditingAlias] = useState<ParameterAlias | undefined>()
    const [deleteAlias, setDeleteAlias] = useState<ParameterAlias | undefined>()
    const [isDeletingAlias, setIsDeletingAlias] = useState(false)
    const [toggleAlias, setToggleAlias] = useState<ParameterAlias | undefined>()
    const [isTogglingAlias, setIsTogglingAlias] = useState(false)

    const [accreditationMode, setAccreditationMode] = useState<'none' | 'create' | 'edit'>('none')
    const [editingAccreditation, setEditingAccreditation] = useState<ParameterAccreditation | undefined>()
    const [deleteAccreditation, setDeleteAccreditation] = useState<ParameterAccreditation | undefined>()
    const [isDeletingAccreditation, setIsDeletingAccreditation] = useState(false)
    const [toggleAccreditation, setToggleAccreditation] = useState<ParameterAccreditation | undefined>()
    const [isTogglingAccreditation, setIsTogglingAccreditation] = useState(false)

    useEffect(() => {
        if (!open) return
        setActiveTab(defaultTab)
        setAliasMode('none')
        setAccreditationMode('none')
    }, [open, defaultTab])

    if (!parameter) return null

    const aliases = parameter.aliases ?? []
    const accreditations = parameter.accreditations ?? []

    function reloadParameterData() {
        router.reload({ only: ['parameters'] })
    }

    return (
        <>
            <ResizableDrawer
                open={open}
                onOpenChange={onOpenChange}
                title={`Detail Parameter: ${parameter.name}`}
                description='Detail parameter'
            >
                <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as typeof activeTab)} className='space-y-3'>
                    <TabsList className='grid w-full grid-cols-3'>
                        <TabsTrigger value='info'><Info className='mr-1.5 h-3.5 w-3.5' />Info</TabsTrigger>
                        <TabsTrigger value='alias'>
                            <FileText className='mr-1.5 h-3.5 w-3.5' />
                            Alias
                            <Badge variant='secondary' className='ml-1.5 h-4 px-1.5 text-[10px]'>{parameter.aliases_count ?? aliases.length}</Badge>
                        </TabsTrigger>
                        <TabsTrigger value='accreditation'>
                            <ShieldCheck className='mr-1.5 h-3.5 w-3.5' />
                            Akreditasi
                            <Badge variant='secondary' className='ml-1.5 h-4 px-1.5 text-[10px]'>{parameter.accreditations_count ?? accreditations.length}</Badge>
                        </TabsTrigger>
                    </TabsList>

                    <TabsContent value='info' className='space-y-2'>
                        <div className='rounded-lg border bg-muted/20 p-3 text-sm'>
                            <p><span className='font-medium'>Nama:</span> {parameter.name}</p>
                            <p><span className='font-medium'>Simbol:</span> {parameter.symbol || '-'}</p>
                            <p><span className='font-medium'>Status:</span> {parameter.is_active ? 'Aktif' : 'Nonaktif'}</p>
                        </div>
                    </TabsContent>

                    <TabsContent value='alias' className='space-y-3'>
                        <div className='flex items-center justify-between'>
                            <p className='text-xs font-semibold uppercase tracking-wide text-muted-foreground'>Daftar Alias</p>
                            <Button size='sm' variant='outline' className='gap-1' onClick={() => { setEditingAlias(undefined); setAliasMode('create') }}>
                                <Plus className='h-3 w-3' /> Tambah
                            </Button>
                        </div>

                        {aliasMode !== 'none' && (
                            <div className='rounded-lg border bg-background p-3'>
                                <div className='mb-3 flex items-center justify-between'>
                                    <p className='text-sm font-semibold'>{aliasMode === 'edit' ? 'Edit Alias' : 'Tambah Alias Baru'}</p>
                                    <Button size='icon' variant='ghost' className='h-7 w-7' onClick={() => setAliasMode('none')}>
                                        <X className='h-4 w-4' />
                                    </Button>
                                </div>
                                <ParameterAliasForm
                                    alias={aliasMode === 'edit' ? editingAlias : undefined}
                                    parameterOptions={[{ id: parameter.id, code: '', name: parameter.name }]}
                                    fixedParameterId={parameter.id}
                                    embedded
                                    onSuccess={() => { setAliasMode('none'); reloadParameterData() }}
                                    onCancel={() => setAliasMode('none')}
                                />
                            </div>
                        )}

                        {aliases.length === 0 ? (
                            <div className='rounded-lg border border-dashed bg-muted/20 p-4 text-sm text-muted-foreground'>Belum ada alias parameter.</div>
                        ) : (
                            <div className='space-y-1.5'>
                                {aliases.map((item) => (
                                    <div key={item.id} className='flex items-start gap-2 rounded-lg border bg-background p-3'>
                                        <div className='min-w-0 flex-1'>
                                            <p className='text-sm font-medium'>{item.alias_name}</p>
                                            <p className='text-xs text-muted-foreground'>{item.source || '-'}</p>
                                        </div>
                                        <div className='flex gap-1'>
                                            <Button size='icon' variant='ghost' className='h-7 w-7' onClick={() => setToggleAlias(item)}>
                                                {item.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' onClick={() => { setEditingAlias(item); setAliasMode('edit') }}>
                                                <Pencil className='h-3.5 w-3.5' />
                                            </Button>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        )}
                    </TabsContent>

                    <TabsContent value='accreditation' className='space-y-3'>
                        <div className='flex items-center justify-between'>
                            <p className='text-xs font-semibold uppercase tracking-wide text-muted-foreground'>Daftar Akreditasi</p>
                            <Button size='sm' variant='outline' className='gap-1' onClick={() => { setEditingAccreditation(undefined); setAccreditationMode('create') }}>
                                <Plus className='h-3 w-3' /> Tambah
                            </Button>
                        </div>

                        {accreditationMode !== 'none' && (
                            <div className='rounded-lg border bg-background p-3'>
                                <div className='mb-3 flex items-center justify-between'>
                                    <p className='text-sm font-semibold'>{accreditationMode === 'edit' ? 'Edit Akreditasi' : 'Tambah Akreditasi Baru'}</p>
                                    <Button size='icon' variant='ghost' className='h-7 w-7' onClick={() => setAccreditationMode('none')}>
                                        <X className='h-4 w-4' />
                                    </Button>
                                </div>
                                <ParameterAccreditationForm
                                    accreditation={accreditationMode === 'edit' ? editingAccreditation : undefined}
                                    parameterOptions={[{ id: parameter.id, code: '', name: parameter.name }]}
                                    sampleTypeOptions={sampleTypeOptions}
                                    fixedParameterId={parameter.id}
                                    embedded
                                    onSuccess={() => { setAccreditationMode('none'); reloadParameterData() }}
                                    onCancel={() => setAccreditationMode('none')}
                                />
                            </div>
                        )}

                        {accreditations.length === 0 ? (
                            <div className='rounded-lg border border-dashed bg-muted/20 p-4 text-sm text-muted-foreground'>Belum ada data akreditasi.</div>
                        ) : (
                            <div className='space-y-1.5'>
                                {accreditations.map((item) => (
                                    <div key={item.id} className='flex items-start gap-2 rounded-lg border bg-background p-3'>
                                        <div className='min-w-0 flex-1'>
                                            <div className='flex items-center gap-2'>
                                                <Badge variant='outline'>{statusLabel(item.accreditation_status)}</Badge>
                                                {!item.is_active && <Badge className='border-rose-200 bg-rose-100 text-rose-700'>Nonaktif</Badge>}
                                            </div>
                                            <p className='mt-1 text-sm font-medium'>{item.sample_type?.name || '-'}</p>
                                            <p className='text-xs text-muted-foreground'>{item.certificate_no || '-'}</p>
                                        </div>
                                        <div className='flex gap-1'>
                                            <Button size='icon' variant='ghost' className='h-7 w-7' onClick={() => setToggleAccreditation(item)}>
                                                {item.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' onClick={() => { setEditingAccreditation(item); setAccreditationMode('edit') }}>
                                                <Pencil className='h-3.5 w-3.5' />
                                            </Button>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        )}
                    </TabsContent>
                </Tabs>
            </ResizableDrawer>

            <AlertDialog open={!!deleteAlias} onOpenChange={(o) => !o && setDeleteAlias(undefined)}>
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>Hapus Alias?</AlertDialogTitle>
                        <AlertDialogDescription>Alias <strong>{deleteAlias?.alias_name}</strong> akan dihapus permanen.</AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel disabled={isDeletingAlias}>Batal</AlertDialogCancel>
                        <AlertDialogAction
                            disabled={isDeletingAlias}
                            onClick={() => {
                                if (!deleteAlias) return
                                router.delete(`/master-data/parameter-aliases/${deleteAlias.id}?embedded=1`, {
                                    onStart: () => setIsDeletingAlias(true),
                                    onSuccess: () => { setDeleteAlias(undefined); reloadParameterData(); toast.success('Alias berhasil dihapus.') },
                                    onFinish: () => setIsDeletingAlias(false),
                                })
                            }}
                        >
                            {isDeletingAlias ? 'Menghapus...' : 'Hapus'}
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>

            <AlertDialog open={!!deleteAccreditation} onOpenChange={(o) => !o && setDeleteAccreditation(undefined)}>
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>Hapus Akreditasi?</AlertDialogTitle>
                        <AlertDialogDescription>Data akreditasi akan dihapus permanen.</AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel disabled={isDeletingAccreditation}>Batal</AlertDialogCancel>
                        <AlertDialogAction
                            disabled={isDeletingAccreditation}
                            onClick={() => {
                                if (!deleteAccreditation) return
                                router.delete(`/master-data/parameter-accreditations/${deleteAccreditation.id}?embedded=1`, {
                                    onStart: () => setIsDeletingAccreditation(true),
                                    onSuccess: () => { setDeleteAccreditation(undefined); reloadParameterData(); toast.success('Akreditasi berhasil dihapus.') },
                                    onFinish: () => setIsDeletingAccreditation(false),
                                })
                            }}
                        >
                            {isDeletingAccreditation ? 'Menghapus...' : 'Hapus'}
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>

            <AlertDialog open={!!toggleAlias} onOpenChange={(o) => !o && setToggleAlias(undefined)}>
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>Ubah Status Alias?</AlertDialogTitle>
                        <AlertDialogDescription>Alias <strong>{toggleAlias?.alias_name}</strong> akan diubah statusnya.</AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel disabled={isTogglingAlias}>Batal</AlertDialogCancel>
                        <AlertDialogAction
                            disabled={isTogglingAlias}
                            onClick={() => {
                                if (!toggleAlias) return
                                router.patch(`/master-data/parameter-aliases/${toggleAlias.id}/toggle-status`, {}, {
                                    onStart: () => setIsTogglingAlias(true),
                                    onSuccess: () => { setToggleAlias(undefined); reloadParameterData(); toast.success('Status alias berhasil diubah.') },
                                    onFinish: () => setIsTogglingAlias(false),
                                })
                            }}
                        >
                            {isTogglingAlias ? 'Menyimpan...' : 'Ubah'}
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>

            <AlertDialog open={!!toggleAccreditation} onOpenChange={(o) => !o && setToggleAccreditation(undefined)}>
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>Ubah Status Akreditasi?</AlertDialogTitle>
                        <AlertDialogDescription>Data akreditasi akan diubah statusnya.</AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel disabled={isTogglingAccreditation}>Batal</AlertDialogCancel>
                        <AlertDialogAction
                            disabled={isTogglingAccreditation}
                            onClick={() => {
                                if (!toggleAccreditation) return
                                router.patch(`/master-data/parameter-accreditations/${toggleAccreditation.id}/toggle-status`, {}, {
                                    onStart: () => setIsTogglingAccreditation(true),
                                    onSuccess: () => { setToggleAccreditation(undefined); reloadParameterData(); toast.success('Status akreditasi berhasil diubah.') },
                                    onFinish: () => setIsTogglingAccreditation(false),
                                })
                            }}
                        >
                            {isTogglingAccreditation ? 'Menyimpan...' : 'Ubah'}
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>
        </>
    )
}