import { Head, router } from '@inertiajs/react'
import { useMemo, useState } from 'react'
import { Plus, Pencil, ToggleLeft, ToggleRight, Wrench, Search, Trash2 } from 'lucide-react'
import { toast } from 'sonner'
import { LimsAppLayout } from '@/layouts/lims-app-layout'
import { 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 { Card, CardContent } from '@ui/components/ui/card'
import { Input } from '@ui/components/ui/input'
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 { SamplingToolPlottingForm } from './components/SamplingToolPlottingForm'

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

interface PlottingItem {
    id: number
    sample_type_id: number
    gwin_item_category_id: number
    qty: number
    notes?: string | null
    is_active: boolean
    sample_type?: Option
    tool_group?: Option
}

interface Props {
    records: ServerPaginatedData<PlottingItem>
    filters: Record<string, string | undefined>
    sampleTypeOptions: Option[]
    samplingToolGroupOptions: Option[]
}

export default function SamplingToolPlottingIndex({ records, filters, sampleTypeOptions, samplingToolGroupOptions }: Props) {
    const [isDrawerOpen, setIsDrawerOpen] = useState(false)
    const [selectedItem, setSelectedItem] = useState<PlottingItem | undefined>()
    const [selectedSampleTypeId, setSelectedSampleTypeId] = useState<number | null>(filters.sample_type_id ? Number(filters.sample_type_id) : null)
    const [localSearch, setLocalSearch] = useState('')
    const [isDeleteOpen, setIsDeleteOpen] = useState(false)
    const [itemToDelete, setItemToDelete] = useState<PlottingItem | undefined>()
    const [isToggleOpen, setIsToggleOpen] = useState(false)
    const [itemToToggle, setItemToToggle] = useState<PlottingItem | undefined>()
    const [isDeleting, setIsDeleting] = useState(false)
    const [isToggling, setIsToggling] = useState(false)
    const [isCompact, setIsCompact] = useState(true)

    const groupedRecords = useMemo(() => {
        const grouped = new Map<number, { sampleType: Option | null, items: PlottingItem[] }>()

        records.data.forEach((row) => {
            const key = row.sample_type_id
            if (!grouped.has(key)) {
                grouped.set(key, {
                    sampleType: row.sample_type ?? null,
                    items: [],
                })
            }
            grouped.get(key)?.items.push(row)
        })

        return [...grouped.entries()]
            .map(([sampleTypeId, payload]) => {
                const activeCount = payload.items.filter((item) => item.is_active).length
                const totalQty = payload.items.reduce((sum, item) => sum + Number(item.qty || 0), 0)
                return {
                    sampleTypeId,
                    sampleType: payload.sampleType,
                    items: payload.items.sort((a, b) => (a.tool_group?.name ?? '').localeCompare(b.tool_group?.name ?? '')),
                    activeCount,
                    totalQty,
                }
            })
            .sort((a, b) => (a.sampleType?.name ?? '').localeCompare(b.sampleType?.name ?? ''))
    }, [records.data])

    const visibleMasters = useMemo(() => {
        const query = localSearch.trim().toLowerCase()
        if (!query) return groupedRecords
        return groupedRecords.filter((group) => {
            const sampleText = `${group.sampleType?.code ?? ''} ${group.sampleType?.name ?? ''}`.toLowerCase()
            const toolText = group.items
                .map((item) => `${item.tool_group?.code ?? ''} ${item.tool_group?.name ?? ''} ${item.notes ?? ''}`)
                .join(' ')
                .toLowerCase()
            return sampleText.includes(query) || toolText.includes(query)
        })
    }, [groupedRecords, localSearch])

    const activeMasterId = useMemo(() => {
        if (selectedSampleTypeId && visibleMasters.some((group) => group.sampleTypeId === selectedSampleTypeId)) {
            return selectedSampleTypeId
        }
        return visibleMasters[0]?.sampleTypeId ?? null
    }, [selectedSampleTypeId, visibleMasters])

    const activeMaster = visibleMasters.find((group) => group.sampleTypeId === activeMasterId) ?? null
    const totalMappings = groupedRecords.reduce((sum, group) => sum + group.items.length, 0)
    const totalActiveMappings = groupedRecords.reduce((sum, group) => sum + group.activeCount, 0)

    function goToPage(page: number) {
        router.get(
            '/master-data/sampling-tool-plottings',
            { ...filters, page },
            { preserveState: true, replace: true },
        )
    }

    return (
        <LimsAppLayout>
            <Head title='Master Plotting Alat Sampling' />
            <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 Plotting Alat Sampling</h1>
                        <p className='text-sm text-muted-foreground'>Kelola relasi group alat terhadap sample type (satu sample type bisa memiliki beberapa group alat)</p>
                    </div>
                    <Button className='gap-2' onClick={() => { setSelectedItem(undefined); setIsDrawerOpen(true) }}>
                        <Plus className='h-4 w-4' /> Tambah
                    </Button>
                </div>

                <div className='grid grid-cols-1 gap-3 md:grid-cols-3'>
                    <Card><CardContent className='p-4'><p className='text-xs text-muted-foreground'>Total Mapping</p><p className='text-2xl font-semibold'>{totalMappings}</p></CardContent></Card>
                    <Card><CardContent className='p-4'><p className='text-xs text-muted-foreground'>Mapping Aktif</p><p className='text-2xl font-semibold text-emerald-600'>{totalActiveMappings}</p></CardContent></Card>
                    <Card><CardContent className='p-4'><p className='text-xs text-muted-foreground'>Sample Type Terpetakan</p><p className='text-2xl font-semibold'>{groupedRecords.length}</p></CardContent></Card>
                </div>

                <div className='flex flex-wrap gap-2'>
                    <div className='w-full sm:w-[280px]'>
                        <ComboboxDropdown
                            value={filters.sample_type_id || undefined}
                            onValueChange={(value) => router.get('/master-data/sampling-tool-plottings', { ...filters, sample_type_id: value || undefined, page: 1 }, { preserveState: true, replace: true })}
                            placeholder='Semua Sample Type'
                            options={sampleTypeOptions.map((o) => ({ value: String(o.id), label: `${o.code} - ${o.name}` }))}
                            searchPlaceholder='Cari sample type...'
                            emptyText='Sample type tidak ditemukan.'
                        />
                    </div>
                    <div className='w-full sm:w-[300px]'>
                        <ComboboxDropdown
                            value={filters.gwin_item_category_id || undefined}
                            onValueChange={(value) => router.get('/master-data/sampling-tool-plottings', { ...filters, gwin_item_category_id: value || undefined, page: 1 }, { preserveState: true, replace: true })}
                            placeholder='Semua Group Alat'
                            options={samplingToolGroupOptions.map((o) => ({ value: String(o.id), label: `${o.code} - ${o.name}` }))}
                            searchPlaceholder='Cari group alat...'
                            emptyText='Group alat tidak ditemukan.'
                        />
                    </div>
                    <div className='relative w-full sm:w-[280px]'>
                        <Search className='absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground' />
                        <Input
                            className='pl-9'
                            value={localSearch}
                            onChange={(e) => setLocalSearch(e.target.value)}
                            placeholder='Cari di panel master/detail...'
                        />
                    </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('/master-data/sampling-tool-plottings', { ...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-primary text-primary-foreground'
                                    : 'bg-muted text-muted-foreground hover:bg-muted/80'
                            }`}
                        >
                            {label}
                        </button>
                    ))}
                </div>

                <div className='grid grid-cols-1 gap-4 xl:grid-cols-[340px_minmax(0,1fr)]'>
                    <Card className='overflow-hidden'>
                        <div className='border-b bg-muted/30 px-4 py-3'>
                            <p className='text-sm font-semibold'>Master Sample Type</p>
                            <p className='text-xs text-muted-foreground'>Pilih satu sample type untuk melihat relasi group alat (one-to-many)</p>
                        </div>
                        <div className={`max-h-[560px] overflow-auto ${isCompact ? 'space-y-1.5 p-2.5' : 'space-y-2.5 p-3'}`}>
                            {visibleMasters.length > 0 ? visibleMasters.map((group) => {
                                const isActiveMaster = activeMasterId === group.sampleTypeId
                                return (
                                    <button
                                        key={group.sampleTypeId}
                                        type='button'
                                        onClick={() => setSelectedSampleTypeId(group.sampleTypeId)}
                                        className={`w-full border text-left transition-colors ${
                                            isCompact ? 'rounded-md px-3 py-2.5' : 'rounded-lg p-3'
                                        } ${
                                            isActiveMaster
                                                ? 'border-primary/40 bg-primary/10'
                                                : 'border-border bg-background hover:border-primary/30 hover:bg-muted/30'
                                        }`}
                                    >
                                        <div className='flex items-start justify-between gap-2'>
                                            <div>
                                                <p className='text-xs text-muted-foreground'>{group.sampleType?.code ?? `ID ${group.sampleTypeId}`}</p>
                                                <p className='font-medium'>{group.sampleType?.name ?? `Sample Type #${group.sampleTypeId}`}</p>
                                            </div>
                                            <Badge variant={isActiveMaster ? 'default' : 'secondary'}>
                                                {group.items.length}
                                            </Badge>
                                        </div>
                                        <p className={`${isCompact ? 'mt-1 text-[11px]' : 'mt-2 text-xs'} text-muted-foreground`}>
                                            Aktif: {group.activeCount} • Total Qty: {group.totalQty}
                                        </p>
                                    </button>
                                )
                            }) : (
                                <div className='rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground'>
                                    Tidak ada data master yang cocok.
                                </div>
                            )}
                        </div>
                    </Card>

                    <Card className='overflow-hidden'>
                        <div className='flex flex-wrap items-center justify-between gap-2 border-b bg-muted/20 px-4 py-3'>
                            <div>
                                <p className='text-sm font-semibold'>Detail Relasi Group Alat</p>
                                <p className='text-xs text-muted-foreground'>
                                    {activeMaster
                                        ? `${activeMaster.sampleType?.code ?? 'Sample'} - ${activeMaster.sampleType?.name ?? `#${activeMaster.sampleTypeId}`}`
                                        : 'Pilih sample type dari panel kiri'}
                                </p>
                            </div>
                            <div className='flex items-center gap-2'>
                                <div className='inline-flex rounded-md border bg-background p-0.5'>
                                    <button
                                        type='button'
                                        onClick={() => setIsCompact(false)}
                                        className={`rounded px-2 py-1 text-xs ${!isCompact ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-muted'}`}
                                    >
                                        Normal
                                    </button>
                                    <button
                                        type='button'
                                        onClick={() => setIsCompact(true)}
                                        className={`rounded px-2 py-1 text-xs ${isCompact ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-muted'}`}
                                    >
                                        Compact
                                    </button>
                                </div>
                                <Button
                                    size='sm'
                                    className='gap-2'
                                    onClick={() => { setSelectedItem(undefined); setIsDrawerOpen(true) }}
                                    disabled={!activeMaster}
                                >
                                    <Plus className='h-4 w-4' /> Tambah Relasi
                                </Button>
                            </div>
                        </div>

                        <div className={`max-h-[560px] overflow-auto ${isCompact ? 'space-y-2 p-3' : 'space-y-3 p-4'}`}>
                            {activeMaster && activeMaster.items.length > 0 ? activeMaster.items.map((row) => (
                                <div key={row.id} className={`border bg-background ${isCompact ? 'rounded-lg px-3 py-2.5' : 'rounded-xl p-4'}`}>
                                    <div className='flex flex-wrap items-start justify-between gap-2'>
                                        <div className='min-w-0 space-y-0.5'>
                                            <p className={`${isCompact ? 'text-[11px]' : 'text-xs'} text-muted-foreground`}>Group Alat</p>
                                            <p className={`${isCompact ? 'truncate text-sm' : 'text-base'} font-semibold`}>
                                                {row.tool_group ? `${row.tool_group.code} - ${row.tool_group.name}` : '-'}
                                            </p>
                                        </div>
                                        <div className='flex items-center gap-2'>
                                            {row.is_active
                                                ? <Badge className='bg-emerald-600 text-white'>Aktif</Badge>
                                                : <Badge className='border-rose-200 bg-rose-100 text-rose-700'>Nonaktif</Badge>}
                                            <Button size='icon' variant='ghost' className={isCompact ? 'h-7 w-7' : 'h-8 w-8'} onClick={() => { setItemToToggle(row); setIsToggleOpen(true) }}>
                                                {row.is_active ? <ToggleRight className={`${isCompact ? 'h-4 w-4' : 'h-[18px] w-[18px]'} text-emerald-600`} /> : <ToggleLeft className={`${isCompact ? 'h-4 w-4' : 'h-[18px] w-[18px]'} text-muted-foreground`} />}
                                            </Button>
                                            <Button size='icon' variant='ghost' className={isCompact ? 'h-7 w-7' : 'h-8 w-8'} onClick={() => { setSelectedItem(row); setIsDrawerOpen(true) }}>
                                                <Pencil className={isCompact ? 'h-3.5 w-3.5' : 'h-4 w-4'} />
                                            </Button>
                                            <Button size='icon' variant='ghost' className={`${isCompact ? 'h-7 w-7' : 'h-8 w-8'} text-rose-600 hover:text-rose-700`} onClick={() => { setItemToDelete(row); setIsDeleteOpen(true) }}>
                                                <Trash2 className={isCompact ? 'h-3.5 w-3.5' : 'h-4 w-4'} />
                                            </Button>
                                        </div>
                                    </div>
                                    {isCompact ? (
                                        <div className='mt-2 grid grid-cols-[auto_minmax(0,1fr)] items-center gap-x-3 gap-y-1 text-xs'>
                                            <p className='text-muted-foreground'>Qty</p>
                                            <p className='font-semibold'>{row.qty}</p>
                                            <p className='text-muted-foreground'>Catatan</p>
                                            <p className='truncate'>{row.notes || '-'}</p>
                                        </div>
                                    ) : (
                                        <div className='mt-3 grid grid-cols-1 gap-3 sm:grid-cols-3'>
                                            <div className='rounded-lg bg-muted/30 p-3'>
                                                <p className='text-xs text-muted-foreground'>Qty alat</p>
                                                <p className='text-lg font-semibold'>{row.qty}</p>
                                            </div>
                                            <div className='rounded-lg bg-muted/30 p-3 sm:col-span-2'>
                                                <p className='text-xs text-muted-foreground'>Catatan</p>
                                                <p className='text-sm'>{row.notes || '-'}</p>
                                            </div>
                                        </div>
                                    )}
                                </div>
                            )) : (
                                <div className='rounded-xl border border-dashed p-8 text-center'>
                                    <Wrench className='mx-auto h-9 w-9 text-muted-foreground' />
                                    <p className='mt-2 font-medium'>Belum ada relasi group alat</p>
                                    <p className='text-sm text-muted-foreground'>
                                        Tambahkan group alat untuk sample type ini agar plotting siap dipakai.
                                    </p>
                                </div>
                            )}
                        </div>
                    </Card>
                </div>

                <div className='flex flex-wrap items-center justify-between gap-2 rounded-lg border bg-card px-3 py-2'>
                    <p className='text-sm text-muted-foreground'>
                        Menampilkan {records.from ?? 0}-{records.to ?? 0} dari {records.total} data
                    </p>
                    <div className='flex items-center gap-2'>
                        <Button
                            size='sm'
                            variant='outline'
                            disabled={records.current_page <= 1}
                            onClick={() => goToPage(records.current_page - 1)}
                        >
                            Sebelumnya
                        </Button>
                        <span className='text-sm text-muted-foreground'>
                            Halaman {records.current_page} / {records.last_page}
                        </span>
                        <Button
                            size='sm'
                            variant='outline'
                            disabled={records.current_page >= records.last_page}
                            onClick={() => goToPage(records.current_page + 1)}
                        >
                            Berikutnya
                        </Button>
                    </div>
                </div>
            </div>

            <ResizableDrawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen} title={selectedItem ? 'Edit Plotting Alat Sampling' : 'Tambah Plotting Alat Sampling'}>
                <SamplingToolPlottingForm
                    item={selectedItem}
                    sampleTypeOptions={sampleTypeOptions}
                    samplingToolGroupOptions={samplingToolGroupOptions}
                    initialSampleTypeId={selectedItem?.sample_type_id ?? activeMasterId}
                    onSuccess={() => setIsDrawerOpen(false)}
                    onCancel={() => setIsDrawerOpen(false)}
                />
            </ResizableDrawer>

            <DeleteConfirmationDialog
                open={isDeleteOpen}
                onOpenChange={setIsDeleteOpen}
                onConfirm={() => {
                    if (!itemToDelete) return
                    router.delete(`/master-data/sampling-tool-plottings/${itemToDelete.id}`, {
                        onStart: () => setIsDeleting(true),
                        onSuccess: () => { toast.success('Plotting alat sampling dihapus.'); setIsDeleteOpen(false); setItemToDelete(undefined) },
                        onFinish: () => setIsDeleting(false),
                    })
                }}
                itemName={itemToDelete ? `${itemToDelete.sample_type?.name ?? '-'} / ${itemToDelete.tool_group?.name ?? '-'}` : undefined}
                isDeleting={isDeleting}
            />

            <ToggleStatusDialog
                open={isToggleOpen}
                onOpenChange={setIsToggleOpen}
                onConfirm={() => {
                    if (!itemToToggle) return
                    router.patch(`/master-data/sampling-tool-plottings/${itemToToggle.id}/toggle-status`, {}, {
                        onStart: () => setIsToggling(true),
                        onSuccess: () => { toast.success('Status plotting alat sampling diubah.'); setIsToggleOpen(false); setItemToToggle(undefined) },
                        onFinish: () => setIsToggling(false),
                    })
                }}
                itemName={itemToToggle ? `${itemToToggle.sample_type?.name ?? '-'} / ${itemToToggle.tool_group?.name ?? '-'}` : undefined}
                isActive={itemToToggle?.is_active ?? true}
                isLoading={isToggling}
            />
        </LimsAppLayout>
    )
}