import GroupedTable from '@/components/custom-admin-table/GroupedTable';
import { Button } from '@/components/ui/button';
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import {
    Empty,
    EmptyDescription,
    EmptyHeader,
    EmptyMedia,
    EmptyTitle,
} from '@/components/ui/empty';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useAuthBreadcrumbOperator } from '@/hooks/use-auth-breadcrumb-operator';
import AppLayout from '@/layouts/app-layout';
import { GroupedData } from '@/types/tables';
import { Head, router } from '@inertiajs/react';
import { FileSpreadsheet, FolderCodeIcon, Gift } from 'lucide-react';
import { useState } from 'react';
import { toast } from 'sonner';

const unformatNumber = (val: string) => val.replace(/\D/g, '');

// Helper: format angka ke ribuan (id-ID)
const formatNumber = (val: string) => {
    if (!val) return '';
    return new Intl.NumberFormat('id-ID').format(Number(val));
};

interface Props {
    grouped: GroupedData;
    totalPagu: number;
    totalRincian: number;
}

export default function DashboardAdministrator({
    grouped,
    totalPagu,
    totalRincian,
}: Props) {
    const breadcrumbs = useAuthBreadcrumbOperator();

    /**
     * Hitung jumlah data
     */
    const totalProgram = Object.keys(grouped).length;
    const totalKegiatan = Object.values(grouped).reduce(
        (acc, program) => acc + Object.keys(program).length,
        0,
    );
    const totalSubKegiatan = Object.values(grouped).reduce(
        (acc, program) =>
            acc +
            Object.values(program).reduce(
                (subAcc, subList) => subAcc + subList.length,
                0,
            ),
        0,
    );

    /**
     * Handler tombol aksi
     */
    const handleViewRincian = (subId: number) => {
        router.get(route('administrator-rincian.show', { id: subId }));
    };

    const handleViewPO = (subId: number) => {
        router.get(route('administrator-triwulan.show', { id: subId }));
    };

    const [openModalAnggaran, setOpenModalAnggaran] = useState(false);
    const [selectedSub, setSelectedSub] = useState<any>(null);
    const [newAnggaran, setNewAnggaran] = useState<string>(''); // gunakan string

    const handleUbahAnggaran = (sub: any) => {
        setSelectedSub(sub);
        setNewAnggaran(sub.anggaran?.toString() || '');
        setOpenModalAnggaran(true);
    };

    // Saat input berubah
    const handleAnggaranChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const raw = unformatNumber(e.target.value); // simpan angka mentah
        setNewAnggaran(raw);
    };

    const handleSaveAnggaran = (e: React.FormEvent) => {
        e.preventDefault();

        if (!selectedSub?.id) {
            toast.error('Sub kegiatan tidak valid');
            return;
        }

        // kirim sebagai string → biar Laravel yang parsing
        const payload = { anggaran: newAnggaran };

        // console.log('🟢 Kirim payload ke server:', payload, typeof newAnggaran);

        router.put(
            route('administrator-subkeg.update', selectedSub.id),
            payload,
            {
                preserveScroll: true,
                onSuccess: () => {
                    toast.success('Anggaran berhasil diperbarui!');
                    setOpenModalAnggaran(false);
                },
                onError: (errors) => {
                    console.error('❌ Error dari server:', errors);
                    toast.error(errors.anggaran || 'Terjadi kesalahan');
                },
            },
        );
    };

    /**
     * Data untuk cards atas
     */
    const atasCards = [
        {
            title: 'Pagu Anggaran',
            description: 'Total pagu anggaran',
            amount: totalPagu,
            bgColor: 'bg-amber-200',
            iconBg: 'bg-amber-100',
            iconColor: 'text-amber-200',
            Icon: Gift,
        },
        {
            title: 'Total Rincian',
            description: 'Total rincian anggaran yang diinput',
            amount: totalRincian,
            bgColor: 'bg-emerald-200',
            iconBg: 'bg-emerald-100',
            iconColor: 'text-emerald-200',
            Icon: FileSpreadsheet,
        },
    ];

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Beranda" />
            <div className="flex h-full flex-1 flex-col gap-4 rounded-xl px-6 py-4">
                {/* Bagian cards atas */}
                <div className="grid auto-rows-min gap-4 md:grid-cols-2">
                    {atasCards.map((card, index) => (
                        <Card
                            key={index}
                            className={`relative ${card.bgColor}`}
                        >
                            <CardHeader>
                                <CardTitle className="dark:text-black">
                                    {card.title}
                                </CardTitle>
                                <CardDescription className="text-xs dark:text-black">
                                    {card.description}
                                </CardDescription>
                                <div
                                    className={`absolute top-4 right-4 rounded-full ${card.iconBg} p-2`}
                                >
                                    <card.Icon
                                        className={`h-9 w-9 ${card.iconColor}`}
                                    />
                                </div>
                            </CardHeader>
                            <CardContent className="text-2xl font-bold dark:text-black">
                                {card.amount.toLocaleString('id-ID')}
                            </CardContent>
                        </Card>
                    ))}
                </div>

                {/* Bagian tabel */}
                <div className="relative min-h-[400px] flex-1 overflow-hidden rounded-xl border border-sidebar-border/70 md:min-h-min dark:border-sidebar-border">
                    {totalSubKegiatan === 0 ? (
                        <div className="flex h-full items-center justify-center text-gray-500">
                            <Empty>
                                <EmptyHeader>
                                    <EmptyMedia variant="icon">
                                        <FolderCodeIcon className="text-neutral-400" />
                                    </EmptyMedia>
                                    <EmptyTitle className="text-neutral-400">
                                        Masih Kosong
                                    </EmptyTitle>
                                    <EmptyDescription className="text-neutral-400">
                                        Hubungi admin Stevan Cristanto.
                                    </EmptyDescription>
                                </EmptyHeader>
                            </Empty>
                        </div>
                    ) : (
                        <GroupedTable
                            grouped={grouped}
                            onViewRincian={handleViewRincian}
                            onViewPO={handleViewPO}
                            onUbahAnggaran={handleUbahAnggaran}
                        />
                    )}
                </div>
            </div>
            <Dialog
                open={openModalAnggaran}
                onOpenChange={setOpenModalAnggaran}
            >
                <DialogContent className="sm:max-w-md">
                    <DialogHeader>
                        <DialogTitle className="text-center uppercase">
                            Ubah Anggaran
                        </DialogTitle>
                        <DialogDescription></DialogDescription>
                    </DialogHeader>

                    <form onSubmit={handleSaveAnggaran} className="space-y-4">
                        {/* Nama Sub Kegiatan */}
                        <div className="rounded-2xl bg-neutral-300 p-4">
                            <Label className="text-xs uppercase">
                                Sub Kegiatan
                            </Label>
                            <p className="text-justify font-medium">
                                {selectedSub?.nama || '-'}
                            </p>
                        </div>

                        {/* Input Anggaran Baru */}
                        <div>
                            <Label htmlFor="anggaran" className="text-sm">
                                Anggaran Baru
                            </Label>
                            <Input
                                id="anggaran"
                                type="text"
                                value={formatNumber(newAnggaran)}
                                onChange={handleAnggaranChange}
                                placeholder="Masukkan nominal anggaran"
                                className="mt-1"
                                inputMode="numeric" // cukup ini
                                onKeyDown={(
                                    e: React.KeyboardEvent<HTMLInputElement>,
                                ) => {
                                    if (
                                        ['e', 'E', '+', '-', '.'].includes(
                                            e.key,
                                        )
                                    ) {
                                        e.preventDefault();
                                    }
                                }}
                            />
                        </div>

                        <DialogFooter>
                            <Button
                                type="button"
                                variant="outline"
                                onClick={() => setOpenModalAnggaran(false)}
                            >
                                Batal
                            </Button>
                            <Button
                                type="submit"
                                className="bg-emerald-600 text-white hover:bg-emerald-700"
                            >
                                Simpan
                            </Button>
                        </DialogFooter>
                    </form>
                </DialogContent>
            </Dialog>
        </AppLayout>
    );
}