"use client";

import { API_BASE_URL, getAuthHeaders } from "@/lib/api";
import React, { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import Link from "next/link";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ArrowLeft, Edit, Mail, Phone, MapPin, Building2, Calendar, FileText, CreditCard } from "lucide-react";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table";

export default function ClientProfilePage() {
    const { id } = useParams();
    const router = useRouter();
    const [client, setClient] = useState<any>(null);
    const [contracts, setContracts] = useState<any[]>([]);
    const [payments, setPayments] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        async function fetchClientData() {
            try {
                // Fetch Client details
                const clientRes = await fetch(`${API_BASE_URL}/clients/${id}/`, { headers: getAuthHeaders() });
                const clientData = await clientRes.json();
                setClient(clientData);

                // Fetch Contracts & Payments (client-side filtering for demo speed)
                const contractsRes = await fetch(`${API_BASE_URL}/contracts/`, { headers: getAuthHeaders() });
                const contractsData = await contractsRes.json();
                const allContracts = contractsData.results || contractsData;
                const clientContracts = allContracts.filter((c: any) => c.client === Number(id) || (typeof c.client === 'object' && c.client.id === Number(id)));
                setContracts(clientContracts);

                const paymentsRes = await fetch(`${API_BASE_URL}/payments/`, { headers: getAuthHeaders() });
                const paymentsData = await paymentsRes.json();
                const allPayments = paymentsData.results || paymentsData;

                // Filter payments belonging to client contracts
                const contractIds = clientContracts.map((c: any) => c.id);
                const clientPayments = allPayments.filter((p: any) => contractIds.includes(p.contract) || contractIds.includes(p.contract?.id));
                setPayments(clientPayments);

                setLoading(false);
            } catch (err) {
                console.error("Failed to load client profile:", err);
                setLoading(false);
            }
        }

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

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

    if (!client) {
        return <div className="p-12 text-center text-red-500">Client profile not found.</div>;
    }

    return (
        <div className="flex-1 space-y-6 pb-12">

            {/* Dynamic Header Actions */}
            <div className="flex items-center gap-4">
                <Button variant="outline" size="icon" onClick={() => router.back()} className="rounded-xl shadow-card border-border/10 bg-background transition-all active:scale-95">
                    <ArrowLeft className="h-5 w-5 text-foreground" />
                </Button>
                <div className="flex-1">
                    <h2 className="text-3xl font-black tracking-tighter text-foreground">{client.full_name}</h2>
                    <div className="flex items-center mt-2 gap-3">
                        <Badge className={client.status === 'active' ? 'bg-emerald-500/10 text-emerald-600 border-none px-4 font-black text-[10px] tracking-widest uppercase' : 'bg-muted/10 text-muted-foreground border-none px-4 font-black text-[10px] tracking-widest uppercase'} variant="outline">
                            {client.status}
                        </Badge>
                        <span className="text-muted-foreground/30 font-black">•</span>
                        <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground bg-muted/20 px-3 py-1 rounded-full">ID: {client.id_type} {client.id_number}</span>
                    </div>
                </div>
                <Button variant="outline" className="hidden sm:flex shadow-card bg-background border-border/10 rounded-xl font-black uppercase text-[10px] tracking-widest h-12 px-6">
                    <Edit className="h-4 w-4 mr-2" /> Edit Profile
                </Button>
            </div>

            <div className="grid gap-6 md:grid-cols-3">
                {/* Left Column - Contact Master Data */}
                <Card className="md:col-span-1 rounded-3xl shadow-card border-none bg-card overflow-hidden">
                    <CardHeader className="bg-muted/5 pb-6 border-b border-border/10 flex flex-col items-center text-center">
                        <div className="w-24 h-24 rounded-3xl bg-primary flex items-center justify-center text-4xl font-black shadow-lg shadow-primary/20 text-primary-foreground mb-4 rotate-3">
                            {client.full_name.charAt(0)}
                        </div>
                        <CardTitle className="text-xl font-black uppercase tracking-widest">Contact Identity</CardTitle>
                        <CardDescription className="font-medium">Primary communication channels</CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-6 pt-8">
                        <a href={client.email ? `mailto:${client.email}` : undefined} className="flex items-start gap-4 p-4 rounded-2xl bg-muted/5 border border-border/5 group hover:bg-primary/5 hover:border-primary/20 transition-all cursor-pointer">
                            <Mail className="h-5 w-5 text-primary mt-1 group-hover:scale-110 transition-transform" />
                            <div>
                                <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground mb-1">Email Address</p>
                                <p className="text-sm text-primary font-bold group-hover:underline">{client.email || 'Not provided'}</p>
                            </div>
                        </a>
                        <a href={client.phone_number ? `tel:${client.phone_number}` : undefined} className="flex items-start gap-4 p-4 rounded-2xl bg-muted/5 border border-border/5 group hover:bg-emerald-500/5 hover:border-emerald-500/20 transition-all cursor-pointer">
                            <Phone className="h-5 w-5 text-emerald-600 mt-1 group-hover:scale-110 transition-transform" />
                            <div>
                                <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground mb-1">Phone Number</p>
                                <p className="text-sm text-emerald-600 font-bold group-hover:underline">{client.phone_number}</p>
                            </div>
                        </a>
                        <div className="flex items-start gap-4 p-4 rounded-2xl bg-muted/5 border border-border/5 group hover:bg-muted/10 transition-colors">
                            <MapPin className="h-5 w-5 text-primary mt-1" />
                            <div>
                                <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground mb-1">Residential Address</p>
                                <p className="text-sm text-foreground font-bold leading-relaxed">{client.address || 'Not specified on file'}</p>
                            </div>
                        </div>
                        <div className="flex items-start gap-4 p-4 rounded-2xl bg-muted/5 border border-border/5 group hover:bg-muted/10 transition-colors">
                            <Calendar className="h-5 w-5 text-primary mt-1" />
                            <div>
                                <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground mb-1">Registration Date</p>
                                <p className="text-sm text-foreground font-bold">{new Date(client.created_at).toLocaleDateString()}</p>
                            </div>
                        </div>
                    </CardContent>
                </Card>

                {/* Right Columns - Complex Operational Timeline tabs */}
                <Card className="md:col-span-2 rounded-3xl shadow-card border-none bg-card overflow-hidden flex flex-col">
                    <Tabs defaultValue="contracts" className="flex-1 flex flex-col">
                        <div className="bg-muted/5 border-b border-border/10 px-6">
                            <TabsList className="bg-transparent gap-4 h-16 w-full justify-start mt-2">
                                <TabsTrigger value="contracts" className="data-[state=active]:bg-background data-[state=active]:shadow-sm px-6 rounded-xl font-black uppercase text-[10px] tracking-widest transition-all">
                                    <FileText className="w-4 h-4 mr-2" /> Active Contracts ({contracts.length})
                                </TabsTrigger>
                                <TabsTrigger value="payments" className="data-[state=active]:bg-background data-[state=active]:shadow-sm px-6 rounded-xl font-black uppercase text-[10px] tracking-widest transition-all">
                                    <CreditCard className="w-4 h-4 mr-2" /> Payment Ledger
                                </TabsTrigger>
                            </TabsList>
                        </div>

                        <TabsContent value="contracts" className="flex-1 p-0 m-0 overflow-auto outline-none">
                            <Table>
                                <TableHeader className="bg-muted/10">
                                    <TableRow className="border-b border-border/10">
                                        <TableHead className="font-black uppercase text-[10px] tracking-widest text-muted-foreground pl-8">Asset Placed</TableHead>
                                        <TableHead className="font-black uppercase text-[10px] tracking-widest text-muted-foreground">Value</TableHead>
                                        <TableHead className="font-black uppercase text-[10px] tracking-widest text-muted-foreground">Start Date</TableHead>
                                        <TableHead className="font-black uppercase text-[10px] tracking-widest text-muted-foreground pr-8">Status</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {contracts.length === 0 ? (
                                        <TableRow><TableCell colSpan={4} className="text-center h-48 font-black uppercase text-xs tracking-widest text-muted-foreground opacity-40">No contracts generated yet.</TableCell></TableRow>
                                    ) : (
                                        contracts.map((c: any) => (
                                            <TableRow key={c.id} className="hover:bg-muted/5 border-b border-border/5 group transition-colors">
                                                <TableCell className="font-black text-foreground pl-8">
                                                    <Link href={`/contracts/${c.id}`} className="hover:text-primary transition-all flex items-center gap-3">
                                                        <Building2 className="w-5 h-5 text-primary opacity-50 group-hover:opacity-100" /> {c.contract_number || `Contract #${c.id}`}
                                                    </Link>
                                                    <p className="text-[10px] text-muted-foreground font-bold uppercase tracking-widest ml-8 mt-1">Asset: {typeof c.asset === 'object' ? c.asset.name : `ID: ${c.asset}`}</p>
                                                </TableCell>
                                                <TableCell className="font-black text-foreground text-base">₦{parseFloat(c.total_price).toLocaleString()}</TableCell>
                                                <TableCell className="font-bold text-muted-foreground">{new Date(c.start_date).toLocaleDateString()}</TableCell>
                                                <TableCell className="pr-8">
                                                    <Badge variant="outline" className={c.status === 'active' ? 'bg-emerald-500/10 text-emerald-600 border-none font-black text-[10px] px-3' : 'bg-primary/10 text-primary border-none font-black text-[10px] px-3'}>
                                                        {c.status}
                                                    </Badge>
                                                </TableCell>
                                            </TableRow>
                                        ))
                                    )}
                                </TableBody>
                            </Table>
                        </TabsContent>

                        <TabsContent value="payments" className="flex-1 p-0 m-0 overflow-auto outline-none">
                            <Table>
                                <TableHeader className="bg-muted/10">
                                    <TableRow className="border-b border-border/10">
                                        <TableHead className="font-black uppercase text-[10px] tracking-widest text-muted-foreground pl-8">Receipt ID</TableHead>
                                        <TableHead className="font-black uppercase text-[10px] tracking-widest text-muted-foreground">Type</TableHead>
                                        <TableHead className="font-black uppercase text-[10px] tracking-widest text-muted-foreground">Date Logged</TableHead>
                                        <TableHead className="text-right font-black uppercase text-[10px] tracking-widest text-muted-foreground pr-8">Amount (₦)</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {payments.length === 0 ? (
                                        <TableRow><TableCell colSpan={4} className="text-center h-48 font-black uppercase text-xs tracking-widest text-muted-foreground opacity-40">No payment records found.</TableCell></TableRow>
                                    ) : (
                                        payments.sort((a, b) => new Date(b.payment_date).getTime() - new Date(a.payment_date).getTime()).map((p: any) => (
                                            <TableRow key={p.id} className="hover:bg-muted/5 border-b border-border/5 group transition-colors">
                                                <TableCell className="font-black text-muted-foreground pl-8">RCPT-{p.id}96</TableCell>
                                                <TableCell>
                                                    <Badge variant="secondary" className={p.payment_type === 'down_payment' ? 'bg-primary/10 text-primary border-none font-black text-[10px] tracking-widest' : 'bg-muted/20 text-muted-foreground border-none font-black text-[10px] tracking-widest'}>
                                                        {p.payment_type.replace('_', ' ')}
                                                    </Badge>
                                                </TableCell>
                                                <TableCell className="font-bold text-muted-foreground">{new Date(p.payment_date).toLocaleDateString()}</TableCell>
                                                <TableCell className="text-right font-black text-emerald-600 text-base pr-8">+{parseFloat(p.amount).toLocaleString()}</TableCell>
                                            </TableRow>
                                        ))
                                    )}
                                </TableBody>
                            </Table>
                        </TabsContent>
                    </Tabs>
                </Card>
            </div>
        </div>
    );
}