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 { Rekening, SubRekening } from '@/types';
import { Head, Link, router } from '@inertiajs/react';
import { ColumnDef } from '@tanstack/react-table';
import { ArrowLeft, MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
import { useMemo, useState } from 'react';
import { toast, Toaster } from 'sonner';

type Props = {
    parentRekening: Rekening;
    subRekeningList: SubRekening[];
};

type AlertType = 'delete';

export default function IndexSubRekening({
    parentRekening,
    subRekeningList,
}: Props) {
    const breadcrumbs = useAuthBreadcrumb();

    // State untuk pencarian
    const [searchTerm, setSearchTerm] = useState('');

    // State untuk dropdown filter
    const [selectedJenis, setSelectedJenis] = useState('');

    // State untuk Alert konfirmasi
    const [openAlert, setOpenAlert] = useState(false);
    const [alertType, setAlertType] = useState<AlertType>();
    const [selectedSubRekening, setSelectedSubRekening] =
        useState<SubRekening>();

    // State untuk form tambah/edit
    const [editingSubRekening, setEditingSubRekening] = useState<
        SubRekening | undefined
    >(undefined);
    const [openSheet, setOpenSheet] = useState(false);

    /** ============================
     * CRUD ACTIONS
     =============================*/
    const handleSubmit = (subRekening: SubRekening) => {
        const payload = {
            kode: subRekening.kode,
            nama: subRekening.nama,
            spesifikasi: subRekening.spesifikasi,
            satuan: subRekening.satuan,
            harga_satuan: subRekening.harga_satuan,
            jenis: subRekening.jenis,
            rekening_id: parentRekening.id,
        };

        if (subRekening.id) {
            // Update data
            router.put(route('sub-rekenings.update', subRekening.id), payload, {
                onSuccess: () => {
                    toast.success('Sub-Rekening berhasil diperbarui');
                    setOpenSheet(false);
                },
                onError: (errors) => {
                    const errorMessage =
                        errors?.nama ||
                        errors?.kode ||
                        'Terjadi kesalahan saat memperbarui sub-rekening';
                    toast.error(errorMessage);
                },
            });
        } else {
            // Simpan data baru
            router.post(route('sub-rekenings.store'), payload, {
                onSuccess: () => {
                    toast.success('Sub-Rekening berhasil ditambahkan');
                    setOpenSheet(false);
                },
                onError: (errors) => {
                    const errorMessage =
                        errors?.nama ||
                        errors?.kode ||
                        'Terjadi kesalahan saat menambahkan sub-rekening';
                    toast.error(errorMessage);
                },
            });
        }
    };

    const handleEdit = (subRekening: SubRekening) => {
        setEditingSubRekening({ ...subRekening });
        setOpenSheet(true);
    };

    const handleDelete = () => {
        if (!selectedSubRekening?.id) return;
        router.delete(route('sub-rekenings.destroy', selectedSubRekening.id), {
            preserveState: true,
            preserveScroll: true,
            onSuccess: () => {
                toast.success('Sub-Rekening telah dihapus');
                setSelectedSubRekening(undefined);
            },
        });
    };

    const presentAlert = (subRekening: SubRekening, type: AlertType) => {
        setSelectedSubRekening(subRekening);
        setAlertType(type);
        setOpenAlert(true);
    };

    /** ============================
     * TABLE CONFIG
     =============================*/
    const columns = useMemo<ColumnDef<SubRekening>[]>(
        () => [
            {
                id: 'no',
                header: '#',
                cell: ({ row }) => row.index + 1,
                enableSorting: false,
                size: 10,
            },
            {
                id: 'kode',
                accessorKey: 'kode',
                header: ({ column }) => (
                    <ColumnHeader column={column} title="Kode" />
                ),
                enableSorting: false,
            },
            {
                id: 'nama',
                accessorKey: 'nama',
                header: ({ column }) => (
                    <ColumnHeader column={column} title="Nama" />
                ),
                enableSorting: false,
                size: 200,
                cell: ({ row }) => (
                    <div className="flex flex-col">
                        {/* Nama */}
                        <span className="font-medium text-gray-900">
                            {row.original.nama}
                        </span>

                        {/* Spesifikasi di bawah nama */}
                        <span className="text-xs text-gray-500">
                            {row.original.spesifikasi || '-'}
                        </span>
                    </div>
                ),
            },
            {
                id: 'satuan',
                accessorKey: 'satuan',
                header: ({ column }) => (
                    <ColumnHeader column={column} title="Satuan" />
                ),
                enableSorting: false,
                size: 200,
            },
            {
                id: 'harga_satuan',
                accessorKey: 'harga_satuan',
                header: ({ column }) => (
                    <ColumnHeader column={column} title="Harga Satuan" />
                ),
                enableSorting: false,
                size: 200,
                cell: ({ row }) => {
                    const raw = row.getValue('harga_satuan');
                    const value = Number(raw) || 0;
                    const formatted = new Intl.NumberFormat('id-ID').format(
                        value,
                    );
                    return <div className="text-left">{formatted}</div>;
                },
            },
            {
                id: 'actions',
                header: ({ column }) => (
                    <ColumnHeader column={column} title="Aksi" />
                ),
                enableSorting: false,
                cell: ({ row }) => {
                    const data = row.original;
                    return (
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <Button
                                    variant="ghost"
                                    className="flex h-8 w-8 p-0"
                                >
                                    <MoreHorizontal />
                                    <span className="sr-only">Open menu</span>
                                </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent
                                align="start"
                                side="left"
                                className="w-[160px]"
                            >
                                <DropdownMenuLabel>Aksi</DropdownMenuLabel>
                                <DropdownMenuItem
                                    onClick={() => handleEdit(data)}
                                >
                                    <Pencil className="mr-2 h-4 w-4" />
                                    Edit
                                </DropdownMenuItem>
                                <DropdownMenuItem
                                    onClick={() => presentAlert(data, 'delete')}
                                >
                                    <Trash2 className="mr-2 h-4 w-4" />
                                    Hapus
                                </DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    );
                },
                size: 50,
            },
        ],
        [],
    );

    /** ============================
     * FORM CONFIG
     =============================*/
    const subRekeningFields: Field[] = [
        {
            key: 'kode',
            name: 'kode',
            label: 'Kode',
            type: 'text',
            placeholder: 'Ketik kode',
            required: true,
        },
        {
            key: 'nama',
            name: 'nama',
            label: 'Nama Sub Rekening',
            type: 'text',
            placeholder: 'Ketik nama sub rekening',
            required: true,
        },
        {
            key: 'spesifikasi',
            name: 'spesifikasi',
            label: 'Spesifikasi',
            type: 'multitext',
            placeholder: 'Ketik spesifikasi',
        },
        {
            key: 'satuan',
            name: 'satuan',
            label: 'Satuan',
            type: 'text',
            placeholder: 'Ketik satuan',
            required: true,
        },
        {
            key: 'harga_satuan',
            name: 'harga_satuan',
            label: 'Harga Satuan',
            type: 'number',
            placeholder: 'Ketik harga satuan',
            required: true,
            numericOnly: true,
            minLength: 1,
            maxLength: 20,
        },
        {
            key: 'jenis',
            name: 'jenis',
            label: 'Jenis',
            type: 'select',
            options: [
                { value: 'sbu', label: 'SBU' },
                { value: 'ssh', label: 'SSH' },
                { value: 'asb', label: 'ASB' },
            ],
            required: true,
        },
    ];

    /** ============================
     * FILTERING LOGIC
     =============================*/
    const filteredData = useMemo(() => {
        return (subRekeningList ?? []).filter((sr) => {
            const matchesSearch =
                sr.nama?.toLowerCase().includes(searchTerm.toLowerCase()) ||
                sr.kode?.toLowerCase().includes(searchTerm.toLowerCase());

            const matchesJenis = selectedJenis
                ? sr.jenis === selectedJenis // pastikan field "jenis" ada di tabel
                : true;

            return matchesSearch && matchesJenis;
        });
    }, [subRekeningList, searchTerm, selectedJenis]);

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title={`Sub Rekening`} />
            <div className="flex h-full flex-1 flex-col gap-4 rounded-xl px-6 py-4">
                {/* Header */}
                <div className="flex items-center justify-between">
                    <div>
                        <h1 className="text-2xl font-bold uppercase">
                            Sub Rekening
                        </h1>
                        <p className="text-sm text-muted-foreground">
                            Halaman ini untuk mengelola sub rekening
                            <span className="font-semibold text-primary">
                                &nbsp; ({parentRekening.nama})
                            </span>
                        </p>
                    </div>
                    <Link href="/rekenings">
                        <Button
                            variant="outline"
                            size={'sm'}
                            className="bg-red-500 text-white"
                        >
                            <ArrowLeft className="h-4 w-4" />
                        </Button>
                    </Link>
                </div>

                {/* Data Table */}
                <DataTable
                    columns={columns}
                    data={filteredData}
                    searchValue={searchTerm}
                    onSearchChange={setSearchTerm}
                    filterLabel="Pilih Jenis"
                    filterOptions={[
                        { label: 'Semua', value: 'all' },
                        { label: 'SSH', value: 'ssh' },
                        { label: 'SBU', value: 'sbu' },
                    ]}
                    onFilterChange={(value) => {
                        console.log('Filter selected:', value);
                        setSelectedJenis(value); // simpan ke state untuk filter data
                    }}
                    onAddClick={() => {
                        setEditingSubRekening(undefined);
                        setOpenSheet(true);
                    }}
                />
            </div>

            {/* Form Tambah/Edit */}
            <CustomFormSheet
                title={
                    editingSubRekening
                        ? 'Edit Sub-Rekening'
                        : 'Tambah Sub-Rekening'
                }
                open={openSheet}
                onOpenChange={setOpenSheet}
                data={editingSubRekening}
                fields={subRekeningFields}
                onSave={handleSubmit}
            />

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

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