import ConfirmAlert from '@/components/custom-alert/custom-alert';
import CustomFormSheet, { Field } from '@/components/custom-sheet/custom-sheet';
import { ColumnHeader } from '@/components/custom-table/column-header';
import DataTable from '@/components/custom-table/data-table';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { useAuthBreadcrumb } from '@/hooks/use-auth-breadcrumb';
import AppLayout from '@/layouts/app-layout';
import { Asn, Tahun } from '@/types';
import { Head, router } from '@inertiajs/react';
import { ColumnDef } from '@tanstack/react-table';
import { MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
import { useMemo, useState } from 'react';
import { toast, Toaster } from 'sonner';

type Props = {
    tahunList: Tahun[];
    asnList: Asn[];
};

type AlertType = 'delete';

export default function IndexPegawai({ asnList, tahunList }: Props) {
    const breadcrumbs = useAuthBreadcrumb();
    const [searchTerm, setSearchTerm] = useState('');
    const [selectedTahunId, setSelectedTahunId] = useState<number | undefined>(
        undefined,
    );
    const [openAlert, setOpenAlert] = useState(false);
    const [alertType, setAlertType] = useState<AlertType>();
    const [selectedAsn, setSelectedAsn] = useState<Asn>();
    const [editingAsn, setEditingAsn] = useState<Asn>();
    const [openSheet, setOpenSheet] = useState(false);

    const handleSubmit = (pegawai: Asn) => {
        const payload = {
            tahun_id: pegawai.tahun_id,
            nip: pegawai.nip,
            nama: pegawai.nama,
            pangkat: pegawai.pangkat,
            golongan: pegawai.golongan,
            jabatan: pegawai.jabatan,
        };

        if (pegawai.id) {
            router.put(route('pegawais.update', pegawai.id), payload, {
                onSuccess: () => {
                    toast.success('ASN berhasil diperbarui');
                    setOpenSheet(false);
                },
                onError: (errors) => {
                    toast.error(errors.nama || 'Terjadi kesalahan');
                },
            });
        } else {
            router.post(route('pegawais.store'), payload, {
                onSuccess: () => {
                    toast.success('ASN berhasil ditambahkan');
                    setOpenSheet(false);
                },
                onError: (errors) => {
                    toast.error(errors.nama || 'Terjadi kesalahan');
                },
            });
        }
    };

    const handleEdit = (pegawai: Asn) => {
        setEditingAsn(pegawai);
        setOpenSheet(true);
    };

    const handleDelete = () => {
        router.delete(route('pegawais.destroy', selectedAsn?.id), {
            preserveState: true,
            preserveScroll: true,
            onSuccess: () => {
                toast.success('ASN telah dihapus');
                setSelectedAsn(undefined);
            },
        });
    };

    const presentAlert = (pegawai: Asn, type: AlertType) => {
        setSelectedAsn(pegawai);
        setAlertType(type);
        setOpenAlert(true);
    };

    const filteredData = useMemo(() => {
        let dataToFilter = asnList ?? [];

        // Filter berdasarkan tahun jika tahun dipilih
        if (selectedTahunId !== undefined && selectedTahunId !== null) {
            dataToFilter = dataToFilter.filter((pegawai) => {
                // Pastikan id tahun dibandingkan sebagai angka
                const pegawaiTahunId = pegawai.tahun_id ?? pegawai.tahun?.id;
                return Number(pegawaiTahunId) === selectedTahunId;
            });
        }

        // Filter berdasarkan pencarian teks
        if (searchTerm) {
            dataToFilter = dataToFilter.filter(
                (pegawai) =>
                    pegawai.nip
                        .toLowerCase()
                        .includes(searchTerm.toLowerCase()) ||
                    pegawai.nama
                        .toLowerCase()
                        .includes(searchTerm.toLowerCase()),
            );
        }

        return dataToFilter;
    }, [asnList, selectedTahunId, searchTerm]);

    const columns = useMemo<ColumnDef<Asn>[]>(
        () => [
            {
                id: 'no',
                header: () => <div className="text-center">#</div>,
                cell: ({ row }) => (
                    <div className="w-full text-center">{row.index + 1}</div>
                ),
                enableSorting: false,
                size: 40,
                minSize: 30,
            },
            {
                id: 'nip',
                accessorKey: 'nip',
                header: ({ column }) => (
                    <ColumnHeader column={column} title="NIP" />
                ),
                enableSorting: false,
                size: 200,
            },
            {
                id: 'nama',
                accessorKey: 'nama',
                header: ({ column }) => (
                    <ColumnHeader column={column} title="Nama" />
                ),
                enableSorting: false,
                size: 400,
            },
            {
                id: 'tahun',
                accessorFn: (row: Asn) => row.tahun?.nama ?? '-',
                header: ({ column }) => (
                    <ColumnHeader
                        className="text-center"
                        column={column}
                        title="Tahun"
                    />
                ),
                cell: ({ row }) => (
                    <div className="text-center">{row.getValue('tahun')}</div>
                ),
                enableSorting: false,
            },
            {
                id: 'actions',
                header: 'Aksi',
                enableSorting: false,
                cell: ({ row }: any) => {
                    const datapegawai = row.original;
                    return (
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <Button
                                    variant="ghost"
                                    className="flex h-8 w-8 p-0"
                                >
                                    <MoreHorizontal />
                                </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent
                                className="w-[160px]"
                                side="left"
                                align="start"
                            >
                                <DropdownMenuLabel>Aksi</DropdownMenuLabel>
                                <DropdownMenuItem
                                    onClick={() => handleEdit(datapegawai)}
                                >
                                    <Pencil /> Edit
                                </DropdownMenuItem>
                                <DropdownMenuItem
                                    onClick={() =>
                                        presentAlert(datapegawai, 'delete')
                                    }
                                >
                                    <Trash2 /> Hapus
                                </DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    );
                },
                size: 50,
            },
        ],
        [],
    );

    const programFields: Field[] = [
        {
            key: 'tahun_id',
            name: 'tahun_id',
            label: 'Tahun',
            type: 'select',
            required: true,
            options: (tahunList ?? []).map((thn) => ({
                value: thn.id.toString(),
                label: `${thn.nama} (${thn.jenis})`,
            })),
        },
        {
            key: 'nip',
            name: 'nip',
            label: 'Nomor Induk Pegawai',
            type: 'number',
            required: true,
            numericOnly: true,
            numericNoFormat: true,
            minLength: 18,
            maxLength: 20,
        },
        {
            key: 'nama',
            name: 'nama',
            label: 'Nama Pegawai',
            type: 'text',
            required: true,
        },
        {
            key: 'pangkat',
            name: 'pangkat',
            label: 'Pangkat',
            type: 'select',
            required: true,
            options: [
                { value: 'Pengatur Muda', label: 'Pengatur Muda' },
                { value: 'Pengatur Muda Tkt.I', label: 'Pengatur Muda Tkt.I' },
                { value: 'Pengatur', label: 'Pengatur' },
                { value: 'Pengatur Tkt.I', label: 'Pengatur Tkt.I' },
                { value: 'Penata Muda', label: 'Penata Muda' },
                { value: 'Penata Muda Tkt.I', label: 'Penata Muda Tkt.I' },
                { value: 'Penata', label: 'Penata' },
                { value: 'Penata Tkt.I', label: 'Penata Tkt.I' },
                { value: 'Pembina', label: 'Pembina' },
                { value: 'Pembina Tkt.I', label: 'Pembina Tkt.I' },
                { value: 'Pembina Utama Muda', label: 'Pembina Utama Muda' },
                { value: 'Pembina Utama Madya', label: 'Pembina Utama Madya' },
                { value: 'Pembina Utama', label: 'Pembina Utama' },
            ],
        },
        {
            key: 'golongan',
            name: 'golongan',
            label: 'Golongan',
            type: 'select',
            required: true,
            options: [
                { value: 'II/a', label: 'II/a' },
                { value: 'II/b', label: 'II/b' },
                { value: 'II/c', label: 'II/c' },
                { value: 'II/d', label: 'II/d' },
                { value: 'III/a', label: 'III/a' },
                { value: 'III/b', label: 'III/b' },
                { value: 'III/c', label: 'III/c' },
                { value: 'III/d', label: 'III/d' },
                { value: 'IV/a', label: 'IV/a' },
                { value: 'IV/b', label: 'IV/b' },
                { value: 'IV/c', label: 'IV/c' },
                { value: 'IV/d', label: 'IV/d' },
                { value: 'IV/e', label: 'IV/e' },
            ],
        },
        {
            key: 'jabatan',
            name: 'jabatan',
            label: 'Jabatan',
            type: 'text',
            required: true,
        },
    ];

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="ASN" />
            <div className="flex h-full flex-1 flex-col gap-4 rounded-xl px-6 py-4">
                <span>
                    <h1 className="text-2xl font-bold uppercase">
                        Aparatur Sipil Negara
                    </h1>
                    <p className="text-sm text-muted-foreground">
                        Halaman ini digunakan untuk mengelola data ASN.
                    </p>
                </span>
                <DataTable
                    columns={columns}
                    data={filteredData}
                    searchValue={searchTerm}
                    onSearchChange={setSearchTerm}
                    onAddClick={() => {
                        setEditingAsn(undefined);
                        setOpenSheet(true);
                    }}
                    filterLabel="Pilih Tahun"
                    filterOptions={[
                        { value: 'all', label: 'Semua' },
                        ...(tahunList ?? []).map((t) => ({
                            value: t.id.toString(),
                            label: `${t.nama} (${t.jenis})`,
                        })),
                    ]}
                    onFilterChange={(value) => {
                        if (value === 'all') {
                            setSelectedTahunId(undefined);
                            return;
                        }
                        const id = parseInt(String(value), 10);
                        setSelectedTahunId(Number.isNaN(id) ? undefined : id);
                    }}
                />
            </div>

            <CustomFormSheet
                title={editingAsn ? 'Edit ASN' : 'Tambah ASN'}
                open={openSheet}
                onOpenChange={setOpenSheet}
                data={editingAsn}
                fields={programFields}
                onSave={handleSubmit}
            />

            <ConfirmAlert
                title={`Konfirmasi ${alertType}`}
                message={`Apakah Anda yakin ingin ${alertType === 'delete' ? 'menghapus' : ''} data ini?`}
                submessage={`"${selectedAsn?.nama}"`}
                open={openAlert}
                onOpenChange={setOpenAlert}
                onConfirm={() => {
                    if (alertType === 'delete') handleDelete();
                }}
            />

            <Toaster position="top-right" />
        </AppLayout>
    );
}