import { Card, Button } from '@heroui/react';
import AppLayout from '@/Layouts/AppLayout';
import { PeriodeSelect } from '@/Components/ui/PeriodeSelect';
import { useAll, useList } from '@/hooks/useResource';
import { usePeriodeStore } from '@/store/usePeriodeStore';
import { useAuth } from '@/hooks/useAuth';
import { formatDate } from '@/lib/formatDate';
import { Link } from '@inertiajs/react';
import { 
    CalendarDaysIcon, 
    CheckCircleIcon, 
    ClockIcon, 
    BanknotesIcon, 
    DocumentTextIcon, 
    UserGroupIcon,
    ChevronRightIcon,
    BoltIcon,
    SparklesIcon
} from '@heroicons/react/24/outline';

interface Kegiatan {
    id: number;
    kode: string;
    nama_kegiatan: string;
    tanggal: string;
    status: string;
    prioritas: string;
    lokasi?: string | null;
    pa_utama?: { name: string };
    klien?: { nama: string };
}

interface Disposisi {
    id: number;
    surat_masuk?: { nomor_surat: string; perihal: string };
    instruksi: string;
    sifat: string;
    penerima?: { name: string };
    status: string;
    tenggat_waktu?: string;
}

interface RekapHonorRow {
    pa_id: number;
    pa?: { name: string };
    jumlah_tugas: number;
    total_diterima: number;
    sudah_dibayar: number;
    sisa_belum_dibayar: number;
}

interface ActivityLog {
    id: number;
    aktor: string;
    event: string;
    model: string;
    waktu: string;
}

function rupiah(num: number) {
    return `Rp ${Number(num || 0).toLocaleString('id-ID')}`;
}

function CustomProgressBar({ value, color = 'sky' }: { value: number; color?: 'sky' | 'emerald' }) {
    const bgColors = {
        sky: 'bg-sky-600',
        emerald: 'bg-emerald-600',
    };

    return (
        <div className="w-full bg-slate-100 rounded-full h-1.5 overflow-hidden">
            <div className={`h-full ${bgColors[color]} transition-all duration-300 rounded-full`} style={{ width: `${Math.min(100, Math.max(0, value))}%` }} />
        </div>
    );
}

export default function Dashboard() {
    const { bulan, tahun } = usePeriodeStore();
    const { isPa } = useAuth();

    const { data: kegiatans, isLoading: loadingKegiatan } = useAll<Kegiatan[]>('kegiatan-agenda', '/kegiatan/agenda', { bulan, tahun });
    const { data: disposisiList, isLoading: loadingDisposisi } = useList<Disposisi>('disposisi-belum-selesai', '/disposisi', { belum_selesai: 1, per_page: 5 });
    const { data: rekapHonor, isLoading: loadingHonor } = useAll<RekapHonorRow[]>('honor-rekap', '/honor/rekap', { bulan, tahun });
    const { data: recentLogs } = useList<ActivityLog>('activity-logs-recent', '/activity-log', { per_page: 5 }, !isPa);

    const totalKegiatan = kegiatans?.length ?? 0;
    const selesai = kegiatans?.filter((k) => k.status === 'Selesai').length ?? 0;
    const berjalan = kegiatans?.filter((k) => k.status === 'Berjalan' || k.status === 'Direncanakan').length ?? 0;
    const pendingDisposisiCount = disposisiList?.total ?? 0;
    
    const totalHonorPeriod = (rekapHonor ?? []).reduce((sum, r) => sum + Number(r.total_diterima), 0);
    const totalTerbayar = (rekapHonor ?? []).reduce((sum, r) => sum + Number(r.sudah_dibayar), 0);
    const totalSisa = (rekapHonor ?? []).reduce((sum, r) => sum + Number(r.sisa_belum_dibayar), 0);
    
    const percentSelesai = totalKegiatan > 0 ? Math.round((selesai / totalKegiatan) * 100) : 0;
    const percentHonorLunas = totalHonorPeriod > 0 ? Math.round((totalTerbayar / totalHonorPeriod) * 100) : 0;

    return (
        <AppLayout>
            <div className="flex flex-col gap-3">
                {/* Header Section */}
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 bg-white border border-slate-200/80 px-3 py-2 rounded-xl shadow-2xs">
                    <div className="space-y-0.5">
                        <h1 className="text-xl font-bold tracking-tight text-slate-900">{isPa ? 'Tugas & Agenda Saya' : 'Ringkasan Operasional'}</h1>
                        <p className="text-xs text-slate-500">
                            {isPa
                                ? 'Pantau kegiatan yang Anda tangani, disposisi yang ditugaskan, dan status honor Anda.'
                                : 'Pantau performa kegiatan, tindak lanjut disposisi, dan penyelesaian honorarium.'}
                        </p>
                    </div>
                    <div className="flex items-center gap-2 bg-slate-50 px-3 py-1.5 rounded-lg border border-slate-200">
                        <CalendarDaysIcon className="w-4 h-4 text-slate-500" />
                        <PeriodeSelect />
                    </div>
                </div>

                {/* KPI Highlight Grid */}
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2.5">
                    {/* KPI 1 */}
                    <Card className="border border-slate-200/80 shadow-2xs bg-white">
                        <Card.Content className="p-2.5">
                            <div className="flex items-center justify-between">
                                <span className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Total Kegiatan</span>
                                <div className="p-1 rounded bg-sky-50 text-sky-600">
                                    <CalendarDaysIcon className="w-4 h-4" />
                                </div>
                            </div>
                            <div className="mt-2 flex items-baseline justify-between">
                                <span className="text-2xl font-extrabold text-slate-900">{totalKegiatan}</span>
                                <span className="text-xs font-medium text-slate-500">{berjalan} Berjalan</span>
                            </div>
                            <div className="mt-2 space-y-1">
                                <div className="flex justify-between text-xs text-slate-500">
                                    <span>Tingkat Penyelesaian</span>
                                    <span className="font-semibold text-slate-700">{percentSelesai}%</span>
                                </div>
                                <CustomProgressBar value={percentSelesai} color="sky" />
                            </div>
                        </Card.Content>
                    </Card>

                    {/* KPI 2 */}
                    <Card className="border border-slate-200/80 shadow-2xs bg-white">
                        <Card.Content className="p-2.5">
                            <div className="flex items-center justify-between">
                                <span className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Kegiatan Selesai</span>
                                <div className="p-1 rounded bg-emerald-50 text-emerald-600">
                                    <CheckCircleIcon className="w-4 h-4" />
                                </div>
                            </div>
                            <div className="mt-2 flex items-baseline justify-between">
                                <span className="text-2xl font-extrabold text-slate-900">{selesai}</span>
                                <span className="text-xs font-semibold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">
                                    Target Tercapai
                                </span>
                            </div>
                            <p className="mt-2 text-xs text-slate-500 truncate">
                                {totalKegiatan - selesai} kegiatan belum selesai.
                            </p>
                        </Card.Content>
                    </Card>

                    {/* KPI 3 */}
                    <Card className="border border-slate-200/80 shadow-2xs bg-white">
                        <Card.Content className="p-2.5">
                            <div className="flex items-center justify-between">
                                <span className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Disposisi Pending</span>
                                <div className="p-1 rounded bg-amber-50 text-amber-600">
                                    <ClockIcon className="w-4 h-4" />
                                </div>
                            </div>
                            <div className="mt-2 flex items-baseline justify-between">
                                <span className="text-2xl font-extrabold text-slate-900">{pendingDisposisiCount}</span>
                                <span className="text-xs font-medium text-amber-700 bg-amber-50 px-2 py-0.5 rounded-full">
                                    Tindak Lanjut
                                </span>
                            </div>
                            <p className="mt-2 text-xs text-slate-500 truncate">
                                Perlu tindak lanjut pimpinan.
                            </p>
                        </Card.Content>
                    </Card>

                    {/* KPI 4 */}
                    <Card className="border border-slate-200/80 shadow-2xs bg-white">
                        <Card.Content className="p-2.5">
                            <div className="flex items-center justify-between">
                                <span className="text-xs font-semibold text-slate-500 uppercase tracking-wider">{isPa ? 'Honor Saya Periode Ini' : 'Total Honor Periode'}</span>
                                <div className="p-1 rounded bg-emerald-50 text-emerald-600">
                                    <BanknotesIcon className="w-4 h-4" />
                                </div>
                            </div>
                            <div className="mt-2">
                                <span className="text-xl font-extrabold text-slate-900">{rupiah(totalHonorPeriod)}</span>
                            </div>
                            <div className="mt-2 space-y-1">
                                <div className="flex justify-between text-xs text-slate-500">
                                    <span>Lunas ({percentHonorLunas}%)</span>
                                    <span className="text-amber-600 font-medium">Sisa: {rupiah(totalSisa)}</span>
                                </div>
                                <CustomProgressBar value={percentHonorLunas} color="emerald" />
                            </div>
                        </Card.Content>
                    </Card>
                </div>

                {/* Main Dashboard Content */}
                <div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
                    {/* Left Column: Agenda & Disposisi */}
                    <div className="lg:col-span-2 space-y-3">
                        {/* Upcoming Agenda Card */}
                        <Card className="border border-slate-200/80 shadow-2xs bg-white">
                            <Card.Content className="p-3">
                                <div className="flex items-center justify-between mb-2">
                                    <div className="flex items-center gap-2">
                                        <div className="p-1.5 rounded-lg bg-sky-100 text-sky-700">
                                            <CalendarDaysIcon className="w-4 h-4" />
                                        </div>
                                        <div>
                                            <h2 className="text-sm font-bold text-slate-900">Agenda Kegiatan Terdekat</h2>
                                            <p className="text-xs text-slate-500">Jadwal pelaksanaan kegiatan pada periode aktif</p>
                                        </div>
                                    </div>
                                    <Link href="/kegiatan" className="text-slate-500 hover:text-slate-900 font-semibold text-xs flex items-center gap-1 transition-colors">
                                        Lihat Semua <ChevronRightIcon className="w-3.5 h-3.5" />
                                    </Link>
                                </div>

                                {loadingKegiatan ? (
                                    <div className="py-4 text-center text-xs text-slate-400">Memuat agenda kegiatan...</div>
                                ) : (kegiatans ?? []).length === 0 ? (
                                    <div className="py-4 text-center text-xs text-slate-400">Tidak ada kegiatan untuk periode ini.</div>
                                ) : (
                                    <div className="divide-y divide-slate-100">
                                        {(kegiatans ?? []).slice(0, 5).map((keg) => (
                                            <div key={keg.id} className="py-2 first:pt-0 last:pb-0 flex items-center justify-between gap-3 hover:bg-slate-50/60 px-1 rounded transition-colors">
                                                <div className="space-y-0.5 min-w-0">
                                                    <h3 className="text-sm font-semibold text-slate-900 truncate">{keg.nama_kegiatan}</h3>
                                                    <div className="flex items-center gap-4 text-xs text-slate-500">
                                                        <span className="flex items-center gap-1">
                                                            <CalendarDaysIcon className="w-3.5 h-3.5 text-slate-400" />
                                                            {formatDate(keg.tanggal, { day: 'numeric', month: 'short', year: 'numeric' })}
                                                        </span>
                                                        {keg.pa_utama?.name && (
                                                            <span className="flex items-center gap-1">
                                                                <UserGroupIcon className="w-3.5 h-3.5 text-slate-400" />
                                                                PA: {keg.pa_utama.name}
                                                            </span>
                                                        )}
                                                    </div>
                                                </div>
                                                <div className="shrink-0 flex items-center gap-2">
                                                    <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
                                                        keg.status === 'Selesai' ? 'bg-emerald-100 text-emerald-800' :
                                                        keg.status === 'Berjalan' ? 'bg-sky-100 text-sky-800' : 'bg-amber-100 text-amber-800'
                                                    }`}>
                                                        {keg.status}
                                                    </span>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                )}
                            </Card.Content>
                        </Card>

                        {/* Disposisi Perlu Tindak Lanjut */}
                        <Card className="border border-slate-200/80 shadow-2xs bg-white">
                            <Card.Content className="p-3">
                                <div className="flex items-center justify-between mb-2">
                                    <div className="flex items-center gap-2">
                                        <div className="p-1 rounded bg-amber-100 text-amber-700">
                                            <DocumentTextIcon className="w-4 h-4" />
                                        </div>
                                        <div>
                                            <h2 className="text-sm font-bold text-slate-900">Disposisi Menunggu Tindak Lanjut</h2>
                                            <p className="text-xs text-slate-500">Surat & instruksi pimpinan yang belum ditindaklanjuti</p>
                                        </div>
                                    </div>
                                    <Link href="/disposisi" className="text-slate-500 hover:text-slate-900 font-semibold text-xs flex items-center gap-1 transition-colors">
                                        Lihat Semua <ChevronRightIcon className="w-3.5 h-3.5" />
                                    </Link>
                                </div>

                                {loadingDisposisi ? (
                                    <div className="py-4 text-center text-xs text-slate-400">Memuat disposisi...</div>
                                ) : (disposisiList?.data ?? []).length === 0 ? (
                                    <div className="py-4 text-center text-xs text-slate-400">Semua disposisi telah ditindaklanjuti.</div>
                                ) : (
                                    <div className="space-y-2">
                                        {(disposisiList?.data ?? []).map((disp) => (
                                            <div key={disp.id} className="p-2 rounded-lg border border-slate-200/70 bg-slate-50/40 hover:bg-slate-50 transition-colors flex flex-col sm:flex-row sm:items-center justify-between gap-2">
                                                <div className="space-y-0.5">
                                                    <div className="flex items-center gap-2">
                                                        <span className="text-xs font-semibold text-amber-700 bg-amber-100/80 px-2 py-0.5 rounded">
                                                            {disp.sifat ?? 'Biasa'}
                                                        </span>
                                                        <span className="text-xs text-slate-500 font-mono">
                                                            {disp.surat_masuk?.nomor_surat ?? 'No Surat -'}
                                                        </span>
                                                    </div>
                                                    <p className="text-xs font-semibold text-slate-800 line-clamp-1">{disp.instruksi}</p>
                                                    <div className="text-xs text-slate-500">
                                                        Penerima: <span className="font-medium text-slate-700">{disp.penerima?.name ?? '-'}</span>
                                                    </div>
                                                </div>
                                                <div className="shrink-0 flex items-center gap-2">
                                                    <Link href="/disposisi">
                                                        <Button size="sm" className="bg-amber-600 hover:bg-amber-700 text-white font-medium text-xs">
                                                            Tindak Lanjuti
                                                        </Button>
                                                    </Link>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                )}
                            </Card.Content>
                        </Card>
                    </div>

                    {/* Right Column: Honorarium Summary & Recent Activities */}
                    <div className="space-y-3">
                        {/* Rekap Honorarium Status */}
                        <Card className="border border-slate-200/80 shadow-2xs bg-white">
                            <Card.Content className="p-3">
                                <div className="flex items-center justify-between mb-2">
                                    <div className="flex items-center gap-2">
                                        <div className="p-1 rounded bg-emerald-100 text-emerald-700">
                                            <BanknotesIcon className="w-4 h-4" />
                                        </div>
                                        <h2 className="text-sm font-bold text-slate-900">{isPa ? 'Status Honor Saya' : 'Rekap Honorarium PA'}</h2>
                                    </div>
                                    <Link href="/honor" className="text-slate-500 hover:text-slate-900 font-semibold text-xs flex items-center gap-1 transition-colors">
                                        Detail <ChevronRightIcon className="w-3.5 h-3.5" />
                                    </Link>
                                </div>

                                {loadingHonor ? (
                                    <div className="py-4 text-center text-xs text-slate-400">Memuat data honorarium...</div>
                                ) : (rekapHonor ?? []).length === 0 ? (
                                    <div className="py-4 text-center text-xs text-slate-400">Belum ada data honorarium periode ini.</div>
                                ) : (
                                    <div className="space-y-2">
                                        {(rekapHonor ?? []).slice(0, 5).map((r) => {
                                            const isLunas = Number(r.sisa_belum_dibayar) <= 0;
                                            return (
                                                <div key={r.pa_id} className="p-2 rounded-lg border border-slate-100 bg-slate-50/50 flex items-center justify-between">
                                                    <div>
                                                        <div className="text-xs font-semibold text-slate-900">{r.pa?.name ?? 'PA'}</div>
                                                        <div className="text-xs text-slate-500">{r.jumlah_tugas} Tugas • {rupiah(r.total_diterima)}</div>
                                                    </div>
                                                    <div className="text-right">
                                                        <span className={`inline-block px-2 py-0.5 rounded text-xs font-semibold ${
                                                            isLunas ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800'
                                                        }`}>
                                                            {isLunas ? 'Lunas' : `Sisa ${rupiah(r.sisa_belum_dibayar)}`}
                                                        </span>
                                                    </div>
                                                </div>
                                            );
                                        })}
                                    </div>
                                )}
                            </Card.Content>
                        </Card>

                        {/* Recent Activity Log - system-wide feed, admin/koordinator only */}
                        {!isPa && (
                            <Card className="border border-slate-200/80 shadow-2xs bg-white">
                                <Card.Content className="p-3">
                                    <div className="flex items-center gap-2 mb-2">
                                        <div className="p-1 rounded bg-slate-100 text-slate-700">
                                            <BoltIcon className="w-4 h-4" />
                                        </div>
                                        <h2 className="text-sm font-bold text-slate-900">Aktivitas Terakhir</h2>
                                    </div>

                                    <div className="space-y-2">
                                        {(recentLogs?.data ?? []).length === 0 ? (
                                            <div className="py-3 text-center text-xs text-slate-400">Belum ada riwayat aktivitas.</div>
                                        ) : (
                                            (recentLogs?.data ?? []).map((log) => (
                                                <div key={log.id} className="flex gap-2 text-xs">
                                                    <div className="w-1.5 h-1.5 rounded-full bg-sky-500 mt-1.5 shrink-0" />
                                                    <div className="space-y-0.5">
                                                        <p className="text-slate-800 font-medium text-xs line-clamp-1">{log.event} {log.model}</p>
                                                        <div className="text-xs text-slate-400">
                                                            {log.aktor} • {new Date(log.waktu).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' })}
                                                        </div>
                                                    </div>
                                                </div>
                                            ))
                                        )}
                                    </div>
                                </Card.Content>
                            </Card>
                        )}
                    </div>
                </div>
            </div>
        </AppLayout>
    );
}