import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { useAuthBreadcrumb } from '@/hooks/use-auth-breadcrumb';
import AppLayout from '@/layouts/app-layout';
import { Head, router } from '@inertiajs/react';
import {
    DollarSign,
    File,
    FileSpreadsheet,
    Gift,
    ListChecks,
    Loader2,
} from 'lucide-react';
import { useState } from 'react';

const parseCurrencyToNumber = (val: any): number => {
    if (val === null || val === undefined || val === '') return 0;
    if (typeof val === 'number' && Number.isFinite(val)) return val;

    let str = String(val).trim();

    // Jika format seperti "23.172,50" -> koma desimal, titik ribuan
    if (str.includes(',') && str.includes('.')) {
        // Hapus titik (ribuan), ubah koma menjadi titik
        str = str.replace(/\./g, '').replace(',', '.');
    }
    // Jika format seperti "23172,50" -> hanya koma desimal
    else if (str.includes(',')) {
        str = str.replace(',', '.');
    }
    // Jika format seperti "23.172" -> titik ribuan (bukan desimal)
    else if (str.includes('.')) {
        const parts = str.split('.');
        // Jika panjang terakhir <= 2 berarti titik kemungkinan desimal
        if (parts[parts.length - 1].length > 2) {
            // titik dianggap pemisah ribuan -> hapus
            str = str.replace(/\./g, '');
        }
    }

    const n = parseFloat(str);
    return Number.isFinite(n) ? n : 0;
};

const formatRupiahTitik = (number: number): string => {
    if (!number) return 'Rp 0';
    return `Rp ${number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')}`;
};

interface Tahun {
    id: number;
    nama: string;
    jenis: string;
}

interface Counts {
    rekening: number;
    program: number;
    kegiatan: number;
    subKegiatan: number;
    totalAnggaran: number;
    totalRincian: number;
}

interface DashboardAdminProps {
    user: any;
    tahuns: Tahun[];
    selectedTahun?: string | number;
    counts?: Counts; // bisa undefined, nanti diberi default
}

export default function DashboardSuper({
    tahuns,
    selectedTahun,
    counts,
}: DashboardAdminProps) {
    const breadcrumbs = useAuthBreadcrumb();
    const [loading, setLoading] = useState(false);

    // Pastikan counts selalu ada nilai default
    const safeCounts: Counts = counts || {
        rekening: 0,
        program: 0,
        kegiatan: 0,
        subKegiatan: 0,
        totalAnggaran: 0,
        totalRincian: 0,
    };

    const handleTahunChange = (tahunId: string) => {
        setLoading(true);
        router.get(
            route('dashboard'),
            { tahun_id: tahunId === 'all' ? undefined : tahunId },
            {
                onFinish: () => setLoading(false), // loader otomatis hilang
            },
        );
    };

    const atasCards = [
        {
            title: 'Rekening',
            description: 'Total rekening',
            amount: safeCounts.rekening,
            bgColor: 'bg-amber-200',
            iconBg: 'bg-amber-100',
            iconColor: 'text-amber-200',
            Icon: Gift,
        },
        {
            title: 'Program',
            description: 'Total program',
            amount: safeCounts.program,
            bgColor: 'bg-emerald-200',
            iconBg: 'bg-emerald-100',
            iconColor: 'text-emerald-200',
            Icon: File,
        },
        {
            title: 'Kegiatan',
            description: 'Total kegiatan',
            amount: safeCounts.kegiatan,
            bgColor: 'bg-blue-200',
            iconBg: 'bg-blue-100',
            iconColor: 'text-blue-200',
            Icon: FileSpreadsheet,
        },
        {
            title: 'Sub Kegiatan',
            description: 'Total sub kegiatan',
            amount: safeCounts.subKegiatan,
            bgColor: 'bg-fuchsia-200',
            iconBg: 'bg-fuchsia-100',
            iconColor: 'text-fuchsia-200',
            Icon: ListChecks,
        },
    ];

    const cardDua = [
        {
            title: 'Total Anggaran',
            description: 'Jumlah anggaran sub kegiatan',
            amount: formatRupiahTitik(
                parseCurrencyToNumber(safeCounts.totalAnggaran),
            ),
            bgColor: 'bg-slate-200',
            iconBg: 'bg-slate-100',
            iconColor: 'text-slate-200',
            Icon: DollarSign,
        },
        {
            title: 'Total Rincian',
            description: 'Jumlah rincian yang diinput',
            amount: formatRupiahTitik(
                parseCurrencyToNumber(safeCounts.totalRincian),
            ),
            bgColor: 'bg-teal-200',
            iconBg: 'bg-teal-100',
            iconColor: 'text-teal-200',
            Icon: DollarSign,
        },
    ];

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Dashboard Admin" />

            <div className="flex h-full flex-1 flex-col gap-4 rounded-xl px-6 py-4">
                <div className="flex flex-col gap-4">
                    {/* Dropdown Tahun */}
                    <div className="w-60">
                        <Select
                            value={selectedTahun?.toString() ?? ''}
                            onValueChange={handleTahunChange}
                        >
                            <SelectTrigger>
                                <SelectValue placeholder="Pilih Tahun" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="all">Semua</SelectItem>
                                {tahuns.map((t) => (
                                    <SelectItem
                                        key={t.id}
                                        value={t.id.toString()}
                                    >
                                        {t.nama} ({t.jenis})
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                    </div>

                    {/* Loader */}
                    {loading && (
                        <div className="flex items-center justify-center py-20">
                            <Loader2 className="h-10 w-10 animate-spin text-gray-500" />
                        </div>
                    )}

                    {/* Cards */}
                    {!loading && selectedTahun !== undefined && (
                        <div>
                            {/* Cards utama (atasCards) */}
                            <div className="mb-4 grid auto-rows-min grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4">
                                {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-xl font-bold dark:text-black">
                                            {card.amount}
                                        </CardContent>
                                    </Card>
                                ))}
                            </div>

                            {/* Cards kedua (cardDua) */}
                            <div className="grid auto-rows-min grid-cols-1 gap-4 sm:grid-cols-2">
                                {cardDua.map((card, index) => (
                                    <Card
                                        key={index}
                                        className={`relative ${card.bgColor}`}
                                    >
                                        <CardHeader>
                                            <CardTitle className="dark:text-secondary">
                                                {card.title}
                                            </CardTitle>
                                            <CardDescription className="text-xs dark:text-secondary">
                                                {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-xl font-bold dark:text-secondary">
                                            {card.amount}
                                        </CardContent>
                                    </Card>
                                ))}
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </AppLayout>
    );
}