import { useMemo } from 'react';
import { Building2, TrendingUp, DollarSign } from 'lucide-react';

// Definisikan Interface Data Kontrak dari Database Laravel
interface Contract {
    id: string | number;
    counterParty: string;
    value: number;
    isSigned: boolean | number | string;
    createdAt?: string | Date;
    created_at?: string | Date;
    end_date?: string;
}

interface CounterpartiesTableProps {
    contracts: Contract[];
}

interface CounterpartyData {
    name: string;
    contractCount: number;
    totalValue: number;
    status: 'Active' | 'Pending' | 'Inactive';
    lastContractDate: Date | string;
}

// Helper Formatter Keuangan & Tanggal
function formatCurrency(value: number): string {
    return new Intl.NumberFormat('id-ID', {
        style: 'currency',
        currency: 'IDR',
        maximumFractionDigits: 0,
    }).format(value);
}

function formatDate(date: Date | string): string {
    if (!date) return '-';
    const dateObj = typeof date === 'string' ? new Date(date) : date;
    return new Intl.DateTimeFormat('id-ID', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
    }).format(dateObj);
}

// Komponen Utama Ekspor
export default function CounterpartiesTable({
    contracts = [],
}: CounterpartiesTableProps) {
    // Kelompokkan data menggunakan useMemo agar tidak re-render berat di sisi client
    const {
        counterparties,
        totalCounterparties,
        totalContractsValue,
        avgValue,
    } = useMemo(() => {
        const counterpartiesMap = new Map<string, CounterpartyData>();

        contracts.forEach((contract) => {
            if (!contract.counterParty) return;

            const existing = counterpartiesMap.get(contract.counterParty);
            const contractDate =
                contract.createdAt || contract.created_at || new Date();
            const isSignedBool =
                contract.isSigned === true ||
                contract.isSigned === 1 ||
                contract.isSigned === '1';

            if (existing) {
                existing.contractCount += 1;
                existing.totalValue += Number(contract.value) || 0;

                const currentLastDate = new Date(existing.lastContractDate);
                const newDateCompare = new Date(contractDate);
                if (newDateCompare > currentLastDate) {
                    existing.lastContractDate = contractDate;
                }
                if (isSignedBool) {
                    existing.status = 'Active';
                }
            } else {
                counterpartiesMap.set(contract.counterParty, {
                    name: contract.counterParty,
                    contractCount: 1,
                    totalValue: Number(contract.value) || 0,
                    status: isSignedBool ? 'Active' : 'Pending',
                    lastContractDate: contractDate,
                });
            }
        });

        const list = Array.from(counterpartiesMap.values()).sort(
            (a, b) => b.totalValue - a.totalValue,
        );

        const totalCp = list.length;
        const totalVal = list.reduce((sum, cp) => sum + cp.totalValue, 0);
        const avgVal = totalCp > 0 ? totalVal / totalCp : 0;

        return {
            counterparties: list,
            totalCounterparties: totalCp,
            totalContractsValue: totalVal,
            avgValue: avgVal,
        };
    }, [contracts]);

    return (
        <div className="space-y-6 pt-6">
            {/* 1. Kumpulan Ringkasan / Stats Cards */}
            <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
                {/* Total Counterparties */}
                <div className="rounded-lg border border-slate-800 bg-slate-900/40 p-6">
                    <div className="mb-4 flex items-center justify-between">
                        <h3 className="text-sm font-medium text-slate-400">
                            Total Counterparties
                        </h3>
                        <Building2 className="h-5 w-5 text-blue-400" />
                    </div>
                    <p className="text-3xl font-bold text-white">
                        {totalCounterparties}
                    </p>
                    <p className="mt-2 text-xs text-slate-500">
                        Unique business partners
                    </p>
                </div>

                {/* Total Value */}
                <div className="rounded-lg border border-slate-800 bg-slate-900/40 p-6">
                    <div className="mb-4 flex items-center justify-between">
                        <h3 className="text-sm font-medium text-slate-400">
                            Total Contract Value
                        </h3>
                        <DollarSign className="h-5 w-5 text-emerald-400" />
                    </div>
                    <p className="text-3xl font-bold text-emerald-400">
                        {formatCurrency(totalContractsValue)}
                    </p>
                    <p className="mt-2 text-xs text-slate-500">
                        All counterparties combined
                    </p>
                </div>

                {/* Average Value */}
                <div className="rounded-lg border border-slate-800 bg-slate-900/40 p-6">
                    <div className="mb-4 flex items-center justify-between">
                        <h3 className="text-sm font-medium text-slate-400">
                            Average Value
                        </h3>
                        <TrendingUp className="h-5 w-5 text-amber-400" />
                    </div>
                    <p className="text-3xl font-bold text-white">
                        {formatCurrency(avgValue)}
                    </p>
                    <p className="mt-2 text-xs text-slate-500">
                        Per business partner
                    </p>
                </div>
            </div>

            {/* 2. Tabel Direktori Utama */}
            <div className="overflow-hidden rounded-lg border border-slate-800 bg-slate-900/20">
                <div className="border-b border-slate-800 bg-slate-900/60 px-6 py-4">
                    <h3 className="text-base font-semibold text-white">
                        Counterparties Directory
                    </h3>
                    <p className="mt-0.5 text-xs text-slate-400">
                        All business partners and their contract history
                    </p>
                </div>

                {counterparties.length === 0 ? (
                    <div className="bg-slate-950/20 px-6 py-12 text-center">
                        <Building2 className="mx-auto mb-3 h-12 w-12 text-slate-700" />
                        <p className="text-sm text-slate-500">
                            Belum ada data partner bisnis terdaftar
                        </p>
                    </div>
                ) : (
                    <div className="overflow-x-auto">
                        <table className="w-full border-collapse text-left text-sm">
                            <thead>
                                <tr className="border-b border-slate-800 bg-slate-900/40 text-xs font-semibold tracking-wider text-slate-400 uppercase">
                                    <th className="px-6 py-3">
                                        Counterparty Name
                                    </th>
                                    <th className="px-6 py-3">Contracts</th>
                                    <th className="px-6 py-3">Total Value</th>
                                    <th className="px-6 py-3">Status</th>
                                    <th className="px-6 py-3">Last Activity</th>
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-slate-800/50">
                                {counterparties.map((cp, idx) => (
                                    <tr
                                        key={idx}
                                        className="border-b border-slate-800 bg-slate-950/40 transition-colors hover:bg-slate-900/40"
                                    >
                                        <td className="px-6 py-4">
                                            <div className="flex items-center gap-3">
                                                <div className="flex h-9 w-9 items-center justify-center rounded-full border border-blue-500/20 bg-blue-500/10">
                                                    <Building2 className="h-4 w-4 text-blue-400" />
                                                </div>
                                                <div>
                                                    <p className="font-medium text-white">
                                                        {cp.name}
                                                    </p>
                                                    <p className="text-xs text-slate-500">
                                                        Business Partner
                                                    </p>
                                                </div>
                                            </div>
                                        </td>
                                        <td className="px-6 py-4">
                                            <div className="inline-flex items-center gap-2 rounded-full border border-slate-800 bg-slate-950 px-2.5 py-0.5">
                                                <span className="text-xs font-semibold text-white">
                                                    {cp.contractCount}
                                                </span>
                                                <span className="text-[11px] text-slate-500">
                                                    dokumen
                                                </span>
                                            </div>
                                        </td>
                                        <td className="px-6 py-4">
                                            <p className="font-semibold text-emerald-400">
                                                {formatCurrency(cp.totalValue)}
                                            </p>
                                        </td>
                                        <td className="px-6 py-4">
                                            <span
                                                className={`inline-block rounded-full border px-2.5 py-0.5 text-xs font-medium ${
                                                    cp.status === 'Active'
                                                        ? 'border border-emerald-800/60 bg-emerald-950 text-emerald-400'
                                                        : 'border border-amber-800/60 bg-amber-950 text-amber-400'
                                                }`}
                                            >
                                                {cp.status}
                                            </span>
                                        </td>
                                        <td className="px-6 py-4">
                                            <p className="text-sm text-slate-400">
                                                {formatDate(
                                                    cp.lastContractDate,
                                                )}
                                            </p>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                )}
            </div>
        </div>
    );
}