import { Button } from '@heroui/react';
import AppLayout from '@/Layouts/AppLayout';
import { DataTable } from '@/Components/ui/DataTable';
import { api } from '@/lib/api';
import { useAll } from '@/hooks/useResource';
import { useQueryClient } from '@tanstack/react-query';
import { formatDate } from '@/lib/formatDate';

interface AuditResults {
    counts: Record<string, number>;
    results: {
        kegiatan_tanpa_pa: any[];
        kegiatan_tanpa_klien: any[];
        link_belum_lengkap: any[];
        dibayar_tanpa_tanggal: any[];
    };
}

const LABELS: Record<string, string> = {
    kegiatan_tanpa_pa: 'Kegiatan Tanpa PA',
    kegiatan_tanpa_klien: 'Kegiatan Tanpa Klien',
    link_belum_lengkap: 'Link Belum Lengkap',
    dibayar_tanpa_tanggal: 'Dibayar Tanpa Tanggal',
};

export default function AuditIndex() {
    const qc = useQueryClient();
    const { data, isLoading } = useAll<AuditResults>('audit', '/audit');

    async function refresh() {
        await api.post('/audit/refresh');
        qc.invalidateQueries({ queryKey: ['audit'] });
    }

    return (
        <AppLayout>
            <div className="flex flex-col gap-6">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 bg-white border border-slate-200/80 px-4 sm:px-6 py-4 sm:py-4.5 rounded-2xl shadow-sm">
                    <h1 className="text-lg sm:text-xl font-bold text-gray-900">Audit Data</h1>
                    <Button variant="outline" onPress={refresh} className="shrink-0">Segarkan</Button>
                </div>

                {isLoading || !data ? (
                    <p className="text-gray-400">Memuat...</p>
                ) : (
                    <>
                        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
                            {Object.entries(data.counts).map(([key, count]) => (
                                <div key={key} className="bg-white border border-gray-200 rounded-xl p-4">
                                    <div className="text-xs text-gray-400 mb-1">{LABELS[key] ?? key}</div>
                                    <div className={`text-2xl font-bold ${count > 0 ? 'text-red-600' : 'text-emerald-600'}`}>{count}</div>
                                </div>
                            ))}
                        </div>

                        <div>
                            <h2 className="font-semibold text-gray-900 mb-2">{LABELS.kegiatan_tanpa_pa}</h2>
                            <DataTable
                                columns={[
                                    { header: 'Kode', cell: (r: any) => r.kode },
                                    { header: 'Kegiatan', cell: (r: any) => r.nama_kegiatan },
                                    { header: 'Tanggal', cell: (r: any) => formatDate(r.tanggal) },
                                ]}
                                rows={data.results.kegiatan_tanpa_pa}
                                rowKey={(r: any) => r.id}
                            />
                        </div>

                        <div>
                            <h2 className="font-semibold text-gray-900 mb-2">{LABELS.kegiatan_tanpa_klien}</h2>
                            <DataTable
                                columns={[
                                    { header: 'Kode', cell: (r: any) => r.kode },
                                    { header: 'Kegiatan', cell: (r: any) => r.nama_kegiatan },
                                    { header: 'Tanggal', cell: (r: any) => formatDate(r.tanggal) },
                                ]}
                                rows={data.results.kegiatan_tanpa_klien}
                                rowKey={(r: any) => r.id}
                            />
                        </div>

                        <div>
                            <h2 className="font-semibold text-gray-900 mb-2">{LABELS.link_belum_lengkap}</h2>
                            <DataTable
                                columns={[
                                    { header: 'Kode', cell: (r: any) => r.kode },
                                    { header: 'Kegiatan', cell: (r: any) => r.nama_kegiatan },
                                    { header: 'Link Terisi', cell: (r: any) => `${r.jumlah_link} / 4` },
                                ]}
                                rows={data.results.link_belum_lengkap}
                                rowKey={(r: any) => r.id}
                            />
                        </div>

                        <div>
                            <h2 className="font-semibold text-gray-900 mb-2">{LABELS.dibayar_tanpa_tanggal}</h2>
                            <DataTable
                                columns={[
                                    { header: 'Kode', cell: (r: any) => r.kode },
                                    { header: 'PA', cell: (r: any) => r.pa?.name ?? '-' },
                                    { header: 'Kegiatan', cell: (r: any) => r.kegiatan?.nama_kegiatan ?? '-' },
                                ]}
                                rows={data.results.dibayar_tanpa_tanggal}
                                rowKey={(r: any) => r.id}
                            />
                        </div>
                    </>
                )}
            </div>
        </AppLayout>
    );
}