"use client";

import { API_BASE_URL, getAuthHeaders } from "@/lib/api";
import React, { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Progress } from "@/components/ui/progress";
import { ArrowLeft, CheckCircle2, Clock, AlertCircle, Printer, Plus, Trash2, Edit2, FileText, Building2 } from "lucide-react";
import Link from "next/link";

export default function ContractDetailsPage() {
    const { id } = useParams();
    const router = useRouter();

    const [contract, setContract] = useState<any>(null);
    const [installments, setInstallments] = useState<any[]>([]);
    const [payments, setPayments] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        async function fetchDetails() {
            setLoading(true);
            try {
                const [contractRes, instRes, payRes] = await Promise.all([
                    fetch(`${API_BASE_URL}/contracts/${id}/`, { headers: getAuthHeaders() }),
                    fetch(`${API_BASE_URL}/installments/?contract=${id}`, { headers: getAuthHeaders() }),
                    fetch(`${API_BASE_URL}/payments/?contract=${id}`, { headers: getAuthHeaders() })
                ]);

                if (contractRes.ok) {
                    setContract(await contractRes.json());
                }

                if (instRes.ok) {
                    const iData = await instRes.json();
                    // Just in case API doesn't filter by contract yet in headless mode
                    const allInst = iData.results || iData;
                    setInstallments(allInst.filter((i: any) => i.contract === Number(id) || (i.contract && i.contract.id === Number(id))));
                }

                if (payRes.ok) {
                    const pData = await payRes.json();
                    const allPay = pData.results || pData;
                    setPayments(allPay.filter((p: any) => p.contract === Number(id) || (p.contract && p.contract.id === Number(id))));
                }

            } catch (err) {
                console.error(err);
            } finally {
                setLoading(false);
            }
        }

        if (id) {
            fetchDetails();
        }
    }, [id]);

    if (loading) return <div className="p-12 text-center animate-pulse text-slate-500 font-semibold text-lg">Loading Contract Matrix...</div>;

    if (!contract) return <div className="p-12 text-center text-red-500">Contract not found</div>;

    // Derived Metrics
    const totalPaid = payments.filter(p => p.is_verified).reduce((sum, curr) => sum + parseFloat(curr.amount), 0);
    const totalPrice = parseFloat(contract.total_price);
    const remainingBalance = totalPrice - totalPaid;
    const progressPercent = totalPrice > 0 ? (totalPaid / totalPrice) * 100 : 0;

    return (
        <div className="flex-1 space-y-6 pb-12">
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div className="flex items-center space-x-4">
                    <Button variant="outline" size="icon" onClick={() => router.back()} className="rounded-xl border-border/10">
                        <ArrowLeft className="h-4 w-4" />
                    </Button>
                    <div className="flex items-center space-x-3">
                        <h2 className="text-3xl font-black tracking-tight text-foreground">{contract.contract_number || `Contract #${contract.id}`}</h2>
                        <Badge variant={contract.status === 'active' ? 'default' : contract.status === 'completed' ? 'secondary' : 'destructive'} className="uppercase font-black text-[10px] tracking-widest h-6">
                            {contract.status}
                        </Badge>
                    </div>
                </div>
                <div className="flex flex-wrap gap-2">
                    <Link href={`/receipts/contract/${contract.id}/`} target="_blank">
                        <Button variant="outline" className="border-primary/10 text-primary hover:bg-primary/5 font-black uppercase text-[10px] tracking-widest rounded-xl">
                            <Printer className="h-4 w-4 mr-2" /> Master Receipt
                        </Button>
                    </Link>
                    <Button variant="outline" className="text-rose-600 border-rose-500/10 hover:bg-rose-500/5 font-black uppercase text-[10px] tracking-widest rounded-xl">
                        <Trash2 className="h-4 w-4 mr-2" /> Delete
                    </Button>
                    <Link href={`/payments?contract=${contract.id}`}>
                        <Button className="bg-emerald-600 hover:bg-emerald-700 text-white font-black uppercase text-[10px] tracking-widest rounded-xl px-6 shadow-lg shadow-emerald-500/20">
                            <Plus className="h-4 w-4 mr-2" /> Accept Payment
                        </Button>
                    </Link>
                </div>
            </div>

            {/* Client & Asset Orientation */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {/* Client Details */}
                <Card className="rounded-3xl shadow-card border-none bg-card overflow-hidden">
                    <CardHeader className="bg-muted/10 border-b border-border/10 pb-4">
                        <CardTitle className="text-base font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
                            <Clock className="w-5 h-5 text-primary" /> Buyer Information
                        </CardTitle>
                    </CardHeader>
                    <CardContent className="pt-8">
                        <div className="flex items-start gap-6">
                            <div className="w-20 h-20 rounded-2xl bg-primary flex items-center justify-center text-primary-foreground text-3xl font-black shadow-lg shadow-primary/20">
                                {contract.client_detail?.full_name?.charAt(0) || "C"}
                            </div>
                            <div className="flex-1 space-y-1">
                                <h3 className="text-2xl font-black text-foreground">{contract.client_detail?.full_name}</h3>
                                <p className="text-primary font-bold uppercase text-[10px] tracking-widest">{contract.client_detail?.occupation || "Merchant"}</p>
                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-6 pt-4">
                                    <a href={contract.client_detail?.phone_number ? `tel:${contract.client_detail.phone_number}` : undefined} className="text-muted-foreground text-[13px] flex items-center gap-2 hover:text-emerald-600 hover:underline transition-colors cursor-pointer"> <span className="text-primary">📞</span> {contract.client_detail?.phone_number || 'N/A'}</a>
                                    <a href={contract.client_detail?.email ? `mailto:${contract.client_detail.email}` : undefined} className="text-muted-foreground text-[13px] flex items-center gap-2 hover:text-primary hover:underline transition-colors cursor-pointer"> <span className="text-primary">✉️</span> {contract.client_detail?.email || "No Email Provided"}</a>
                                    <div className="text-muted-foreground text-[13px] sm:col-span-2 flex items-center gap-2"> <span className="text-primary">📍</span> {contract.client_detail?.address || "Region X, Nigeria"}</div>
                                </div>
                            </div>
                        </div>
                        <div className="mt-4 pt-4 border-t flex justify-between items-center text-xs">
                            <div className="px-3 py-1 bg-slate-100 rounded-full font-semibold">KYC: {contract.client_detail?.id_type} / {contract.client_detail?.id_number}</div>
                            <Link href={`/clients/${contract.client}`}>
                                <Button variant="link" size="sm" className="text-indigo-600 h-auto p-0 hover:underline">Full Details →</Button>
                            </Link>
                        </div>
                    </CardContent>
                </Card>

                {/* Asset Specifications */}
                <Card className="rounded-3xl shadow-card border-none bg-card overflow-hidden">
                    <CardHeader className="bg-muted/10 border-b border-border/10 pb-4">
                        <CardTitle className="text-base font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
                            <Building2 className="w-5 h-5 text-emerald-600" /> Asset Details
                        </CardTitle>
                    </CardHeader>
                    <CardContent className="pt-8">
                        <div className="flex items-start gap-6">
                            <div className="w-20 h-20 rounded-2xl bg-emerald-600 flex items-center justify-center text-white p-4 shadow-lg shadow-emerald-500/20">
                                <Building2 className="w-full h-full" />
                            </div>
                            <div className="flex-1 space-y-1">
                                <div className="flex justify-between items-start">
                                    <h3 className="text-2xl font-black text-foreground">{contract.asset_detail?.name}</h3>
                                    <Badge className="bg-emerald-500/10 text-emerald-600 border-none uppercase text-[8px] font-black tracking-widest px-2">UNDER CONTRACT</Badge>
                                </div>
                                <p className="text-emerald-600 font-bold uppercase text-[10px] tracking-widest">{contract.asset_detail?.asset_type_name || "Plot"}</p>
                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-6 pt-4">
                                    <div className="text-muted-foreground text-[13px] flex items-center gap-2"> <span className="text-emerald-600">📍</span> {contract.asset_detail?.location || "Primary Layout"}</div>
                                    <div className="text-muted-foreground text-[13px] flex items-center gap-2"> <span className="text-emerald-600">📐</span> {contract.asset_detail?.precise_size || "N/A"} sqm</div>
                                    <div className="font-black text-foreground text-lg sm:col-span-2 mt-2">₦{parseFloat(contract.asset_detail?.price || "0").toLocaleString()}</div>
                                </div>
                            </div>
                        </div>
                        <div className="mt-4 pt-4 border-t text-[10px] text-slate-400 italic">
                            Legal title and possession remain with the developer until full vesting of the contract value.
                        </div>
                    </CardContent>
                </Card>
            </div>

            {/* Financial Summary */}
            <div className="grid gap-6 md:grid-cols-3">
                <Card className="rounded-3xl shadow-card border-none bg-muted/10 overflow-hidden group hover:bg-muted/20 transition-colors">
                    <CardHeader className="pb-2 bg-muted/10 rounded-t-2xl border-b border-border/10">
                        <CardTitle className="text-xs font-black text-muted-foreground uppercase tracking-widest">Contract Total</CardTitle>
                    </CardHeader>
                    <CardContent className="pt-6">
                        <div className="text-3xl font-black text-foreground">₦{totalPrice.toLocaleString()}</div>
                    </CardContent>
                </Card>
                <Card className="rounded-3xl shadow-card border-none bg-emerald-500/5 overflow-hidden group hover:bg-emerald-500/10 transition-colors">
                    <CardHeader className="pb-2 bg-emerald-500/10 rounded-t-2xl border-b border-emerald-500/10">
                        <CardTitle className="text-xs font-black text-emerald-600 dark:text-emerald-400 uppercase tracking-widest">Verified Collections</CardTitle>
                    </CardHeader>
                    <CardContent className="pt-6">
                        <div className="text-3xl font-black text-emerald-600">₦{totalPaid.toLocaleString()}</div>
                    </CardContent>
                </Card>
                <Card className="rounded-3xl shadow-card border-none bg-rose-500/5 overflow-hidden group hover:bg-rose-500/10 transition-colors">
                    <CardHeader className="pb-2 bg-rose-500/10 rounded-t-2xl border-b border-rose-500/10">
                        <CardTitle className="text-xs font-black text-rose-600 dark:text-rose-400 uppercase tracking-widest">Outstanding Equity</CardTitle>
                    </CardHeader>
                    <CardContent className="pt-6">
                        <div className="text-3xl font-black text-rose-600">₦{Math.max(0, remainingBalance).toLocaleString()}</div>
                    </CardContent>
                </Card>
            </div>

            <Card className="rounded-3xl shadow-card border-none bg-card p-8">
                <div className="flex justify-between text-xs font-black uppercase tracking-widest text-muted-foreground mb-4">
                    <span>Performance Tracking</span>
                    <Badge variant="outline" className="border-primary/20 text-primary bg-primary/5 px-4 h-8 rounded-full font-black">
                        {progressPercent.toFixed(1)}% Secured
                    </Badge>
                </div>
                <Progress value={progressPercent} className="h-4 bg-muted/20" style={{ "--tw-progress": "var(--dynamic-primary, #4f46e5)" } as any} />
            </Card>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {/* Details Side */}
                <div className="space-y-6 md:col-span-1">
                    <Card className="rounded-3xl shadow-card border-none bg-card">
                        <CardHeader className="border-b border-border/10 bg-muted/5">
                            <CardTitle className="font-black uppercase text-[10px] tracking-widest text-muted-foreground">Agreement Specs</CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-6 pt-6">
                            <div className="flex flex-col">
                                <span className="text-muted-foreground font-bold text-[10px] uppercase tracking-widest pb-1">Commencement Date</span>
                                <span className="font-black text-foreground text-lg">{new Date(contract.start_date).toLocaleDateString()}</span>
                            </div>
                            <div className="flex flex-col">
                                <span className="text-muted-foreground font-bold text-[10px] uppercase tracking-widest pb-1">Expected Conclusion Date</span>
                                <span className="font-black text-foreground text-lg">{new Date(contract.end_date).toLocaleDateString()}</span>
                            </div>
                            <div className="flex flex-col">
                                <span className="text-muted-foreground font-bold text-[10px] uppercase tracking-widest pb-1">Required Frequency</span>
                                <span className="font-black text-foreground text-lg">
                                    {contract.installment_frequency.charAt(0).toUpperCase() + contract.installment_frequency.slice(1)}
                                </span>
                            </div>
                        </CardContent>
                    </Card>

                    <Card className="rounded-3xl shadow-card border-none bg-card">
                        <CardHeader className="border-b border-border/10 bg-muted/5">
                            <CardTitle className="font-black uppercase text-[10px] tracking-widest text-muted-foreground">Management Notes</CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-4 pt-6">
                            <div className="p-4 rounded-xl bg-muted/20 text-sm text-foreground italic border-l-4 border-primary">
                                "{contract.notes || "No internal management notes provided."}"
                            </div>
                            {contract.terms && (
                                <div className="p-4 rounded-xl bg-amber-500/5 text-[11px] text-amber-600 border border-amber-500/20">
                                    <span className="font-black uppercase block mb-1">Custom Terms</span>
                                    {contract.terms}
                                </div>
                            )}
                        </CardContent>
                    </Card>

                    <Card className="rounded-3xl shadow-card border-none bg-card">
                        <CardHeader className="border-b border-border/10 bg-muted/5">
                            <CardTitle className="font-black uppercase text-[10px] tracking-widest text-muted-foreground">Verified Payments</CardTitle>
                        </CardHeader>
                        <CardContent className="pt-6">
                            <div className="space-y-4">
                                {payments.length === 0 ? <p className="text-xs font-bold text-muted-foreground uppercase tracking-widest opacity-40">No payments registered.</p> :
                                    payments.map((p, i) => (
                                        <div key={i} className="flex justify-between items-center bg-muted/5 p-4 rounded-xl border border-border/10 group relative hover:bg-muted/10 transition-colors">
                                            <div>
                                                <p className="font-black text-foreground text-base">₦{parseFloat(p.amount).toLocaleString()}</p>
                                                <p className="text-[10px] font-black uppercase text-muted-foreground">{new Date(p.payment_date).toLocaleDateString()}</p>
                                            </div>
                                            <div className="flex items-center gap-3">
                                                <Badge className="bg-emerald-500/10 text-emerald-600 border-none font-black text-[8px] tracking-widest uppercase px-2">
                                                    {p.payment_method.replace('_', ' ')}
                                                </Badge>
                                                <Link href={`/receipts/payment/${p.id}/`} target="_blank" className="text-muted-foreground hover:text-primary transition-all active:scale-90">
                                                    <FileText className="h-5 w-5" />
                                                </Link>
                                            </div>
                                        </div>
                                    ))}
                            </div>
                        </CardContent>
                    </Card>
                </div>

                {/* Installments Table */}
                <Card className="md:col-span-2 rounded-3xl shadow-card border-none bg-card overflow-hidden">
                    <CardHeader className="bg-muted/10 border-b border-border/10">
                        <CardTitle className="text-base font-black uppercase tracking-widest text-foreground">Installment Ledger</CardTitle>
                        <CardDescription className="font-medium">Track the timeline of expected installments vs actuals.</CardDescription>
                    </CardHeader>
                    <CardContent className="p-0">
                        <Table>
                            <TableHeader className="bg-muted/5 uppercase font-black text-[10px] tracking-widest">
                                <TableRow className="border-b border-border/10">
                                    <TableHead className="w-[80px] font-black pl-6">Set</TableHead>
                                    <TableHead className="font-black">Expected Date</TableHead>
                                    <TableHead className="font-black">Expected Amount</TableHead>
                                    <TableHead className="font-black pr-6">Status</TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                {installments.length === 0 ? <TableRow><TableCell colSpan={4} className="text-center h-24 font-bold text-muted-foreground uppercase text-xs tracking-widest opacity-40">No schedule generated</TableCell></TableRow> :
                                    installments.map((inst, i) => {
                                        const isPaid = inst.status === "paid";
                                        const isOverdue = inst.status !== "paid" && new Date(inst.due_date) < new Date();
                                        return (
                                            <TableRow key={i} className={`border-b border-border/5 group transition-colors ${isPaid ? "bg-emerald-500/5 hover:bg-emerald-500/10" : isOverdue ? "bg-rose-500/5 hover:bg-rose-500/10" : "hover:bg-muted/5"}`}>
                                                <TableCell className="font-black text-muted-foreground pl-6">#{inst.installment_number || (i + 1)}</TableCell>
                                                <TableCell className="font-black text-foreground">
                                                    {new Date(inst.due_date).toLocaleDateString()}
                                                </TableCell>
                                                <TableCell className="font-black text-foreground">₦{parseFloat(inst.amount).toLocaleString()}</TableCell>
                                                <TableCell className="pr-6">
                                                    {isPaid ? (
                                                        <Badge className="bg-emerald-500/10 text-emerald-600 border-none px-3 font-black text-[10px] tracking-widest uppercase"><CheckCircle2 className="w-3 h-3 mr-1" /> Paid</Badge>
                                                    ) : isOverdue ? (
                                                        <Badge className="bg-rose-500/10 text-rose-600 border-none px-3 font-black text-[10px] tracking-widest uppercase"><AlertCircle className="w-3 h-3 mr-1" /> Overdue</Badge>
                                                    ) : (
                                                        <Badge variant="outline" className="text-muted-foreground bg-muted/10 border-border/10 px-3 font-black text-[10px] tracking-widest uppercase"><Clock className="w-3 h-3 mr-1" /> Pending</Badge>
                                                    )}
                                                </TableCell>
                                            </TableRow>
                                        )
                                    })}
                            </TableBody>
                        </Table>
                    </CardContent>
                </Card>
            </div>
        </div>
    );
}