"use client";

import Link from "next/link";
import { API_BASE_URL, getAuthHeaders } from "@/lib/api";
import React, { useEffect, useState, useMemo, useRef } from "react";
import { useSearchParams } 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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { CheckCircle2, Clock, CreditCard, ShieldCheck, FileText, PlusCircle, Printer, Loader2 } from "lucide-react";

export default function PaymentsPage() {
    const searchParams = useSearchParams();
    const defaultContract = searchParams.get('contract');
    const tabRef = useRef<any>(null);
    const [activeTab, setActiveTab] = useState(defaultContract ? "record" : "ledger");

    const [installments, setInstallments] = useState<any[]>([]);
    const [payments, setPayments] = useState<any[]>([]);
    const [contracts, setContracts] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [submitSuccess, setSubmitSuccess] = useState(false);

    // Form State
    const [formContract, setFormContract] = useState(defaultContract || "");
    const [formAmount, setFormAmount] = useState("");
    const [formDate, setFormDate] = useState(new Date().toISOString().split('T')[0]);
    const [formMethod, setFormMethod] = useState("bank_transfer");
    const [formType, setFormType] = useState("installment");
    const [formVerified, setFormVerified] = useState("True");
    const [formDesc, setFormDesc] = useState("");
    const [selectedInstallments, setSelectedInstallments] = useState<number[]>([]);

    useEffect(() => {
        async function fetchLedger() {
            try {
                const [instRes, payRes, contRes] = await Promise.all([
                    fetch(`${API_BASE_URL}/installments/`, { headers: getAuthHeaders() }),
                    fetch(`${API_BASE_URL}/payments/`, { headers: getAuthHeaders() }),
                    fetch(`${API_BASE_URL}/contracts/`, { headers: getAuthHeaders() })
                ]);

                if (instRes.ok) setInstallments((await instRes.json()).results || await instRes.json());
                if (payRes.ok) setPayments((await payRes.json()).results || await payRes.json());
                if (contRes.ok) {
                    const cData = await contRes.json();
                    setContracts(cData.results || cData);
                }
            } catch (err) {
                console.error("Ledger fetch error:", err);
            } finally {
                setLoading(false);
            }
        }
        fetchLedger();
    }, []);

    // Filter installments based on selected contract for the form
    const pendingInstallmentsForContract = useMemo(() => {
        if (!formContract) return [];
        return installments.filter(
            (i: any) => (i.contract === Number(formContract) || (i.contract && i.contract.id === Number(formContract))) && i.status !== "paid"
        );
    }, [formContract, installments]);

    // Handle Installment Checkbox Selection -> Auto calculate amount
    const handleInstallmentToggle = (id: number, amount: string) => {
        const amt = parseFloat(amount || "0");
        let newSelected = [...selectedInstallments];
        if (newSelected.includes(id)) {
            newSelected = newSelected.filter(x => x !== id);
        } else {
            newSelected.push(id);
        }
        setSelectedInstallments(newSelected);

        if (formType === "installment") {
            const total = newSelected.reduce((sum, currId) => {
                const i = pendingInstallmentsForContract.find(x => x.id === currId);
                return sum + (i ? parseFloat(i.amount) : 0);
            }, 0);
            setFormAmount(total > 0 ? total.toFixed(2) : "");
        }
    };

    const handleContractChange = (val: string) => {
        setFormContract(val);
        setSelectedInstallments([]);
        setFormAmount("");
    };

    const handlePaymentTypeChange = (val: string) => {
        setFormType(val);
        if (val === "down_payment") {
            const c = contracts.find(x => x.id === Number(formContract));
            if (c) setFormAmount(parseFloat(c.down_payment).toFixed(2));
        } else if (val === "installment") {
            const total = selectedInstallments.reduce((sum, currId) => {
                const i = pendingInstallmentsForContract.find(x => x.id === currId);
                return sum + (i ? parseFloat(i.amount) : 0);
            }, 0);
            setFormAmount(total > 0 ? total.toFixed(2) : "");
        }
    };

    const submitPayment = async (e: React.FormEvent) => {
        e.preventDefault();
        setIsSubmitting(true);
        setSubmitSuccess(false);
        try {
            const payload = {
                contract: Number(formContract),
                amount: formAmount,
                payment_date: formDate,
                payment_method: formMethod,
                payment_type: formType,
                is_verified: formVerified === "True",
                description: formDesc,
                installments: selectedInstallments
            };

            const res = await fetch(`${API_BASE_URL}/payments/`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    ...getAuthHeaders()
                },
                body: JSON.stringify(payload)
            });

            if (res.ok) {
                const newPay = await res.json();
                setPayments([newPay, ...payments]);
                // Reset form
                setFormAmount("");
                setSelectedInstallments([]);
                setFormDesc("");
                setSubmitSuccess(true);
                // Navigate to ledger tab after 800ms to show success state
                setTimeout(() => {
                    setActiveTab("ledger");
                    setSubmitSuccess(false);
                }, 800);
            } else {
                const err = await res.json();
                alert(`Failed to record payment: ${JSON.stringify(err)}`);
            }
        } catch (e) {
            console.error(e);
            alert("Network error. Please try again.");
        } finally {
            setIsSubmitting(false);
        }
    };

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

    return (
        <div className="flex-1 space-y-6 pb-12">
            <div>
                <h2 className="text-3xl font-bold tracking-tight">Payments &amp; Ledger</h2>
                <p className="text-muted-foreground mt-1 text-sm">
                    Manage incoming payments, verify transactions, and view the global ledger.
                </p>
            </div>

            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full bg-transparent">
                <TabsList className="bg-muted/10 p-1 mb-6 gap-2 h-14 w-full justify-start rounded-2xl border border-border/10">
                    <TabsTrigger value="ledger" className="py-2.5 px-6 rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-sm font-bold transition-all">
                        <FileText className="w-4 h-4 mr-2" /> Global Ledger
                    </TabsTrigger>
                    <TabsTrigger value="record" className="py-2.5 px-6 rounded-xl data-[state=active]:bg-emerald-600 data-[state=active]:text-white shadow-sm transition-all font-bold">
                        <PlusCircle className="w-4 h-4 mr-2" /> Record Manual Payment
                    </TabsTrigger>
                </TabsList>

                {/* LEDGER TAB */}
                <TabsContent value="ledger" className="mt-0 space-y-4">
                    <Card className="rounded-3xl shadow-card border-none bg-card overflow-hidden">
                        <CardHeader className="bg-muted/5 rounded-t-2xl border-b border-border/10 pb-4">
                            <CardTitle className="text-xl font-black">Master Payment History</CardTitle>
                        </CardHeader>
                        <CardContent className="p-0">
                            <Table>
                                <TableHeader className="bg-muted/10">
                                    <TableRow className="border-b border-border/10">
                                        <TableHead className="w-[120px] font-bold uppercase text-[10px] tracking-widest text-muted-foreground pl-6">Date</TableHead>
                                        <TableHead className="font-bold uppercase text-[10px] tracking-widest text-muted-foreground">Contract / Client</TableHead>
                                        <TableHead className="font-bold uppercase text-[10px] tracking-widest text-muted-foreground">Method & Type</TableHead>
                                        <TableHead className="font-bold uppercase text-[10px] tracking-widest text-muted-foreground">Status</TableHead>
                                        <TableHead className="text-right font-bold uppercase text-[10px] tracking-widest text-muted-foreground">Amount</TableHead>
                                        <TableHead className="text-right font-bold uppercase text-[10px] tracking-widest text-muted-foreground pr-6">Actions</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {payments.length === 0 ? (
                                        <TableRow>
                                            <TableCell colSpan={6} className="text-center h-48">
                                                <div className="flex flex-col items-center justify-center opacity-40">
                                                    <CreditCard className="w-12 h-12 mb-3" />
                                                    <p className="font-bold uppercase text-xs tracking-widest">No payments recorded in system</p>
                                                </div>
                                            </TableCell>
                                        </TableRow>
                                    ) :
                                        payments.sort((a, b) => new Date(b.payment_date).getTime() - new Date(a.payment_date).getTime()).map(p => (
                                            <TableRow key={p.id} className="hover:bg-muted/5 transition-colors border-b border-border/10 group">
                                                <TableCell className="font-bold text-foreground pl-6">{new Date(p.payment_date).toLocaleDateString()}</TableCell>
                                                <TableCell>
                                                    <div className="font-black text-foreground group-hover:text-primary transition-colors">
                                                        {p.contract_display_name || `Contract #${p.contract}`}
                                                    </div>
                                                </TableCell>
                                                <TableCell>
                                                    <div className="flex flex-col gap-1 items-start">
                                                        <Badge variant="outline" className="text-[10px] uppercase font-black bg-muted/20 border-border/10 tracking-tighter">{p.payment_method.replace('_', ' ')}</Badge>
                                                        <span className="text-[10px] font-bold uppercase text-muted-foreground">{p.payment_type.replace('_', ' ')}</span>
                                                    </div>
                                                </TableCell>
                                                <TableCell>
                                                    {p.is_verified ? (
                                                        <Badge className="bg-emerald-500/10 text-emerald-600 border-none font-bold text-[10px]"><CheckCircle2 className="w-3 h-3 mr-1" /> VERIFIED</Badge>
                                                    ) : (
                                                        <Badge variant="outline" className="text-amber-500 bg-amber-500/10 border-amber-500/20 font-bold text-[10px] uppercase"><Clock className="w-3 h-3 mr-1" /> PENDING</Badge>
                                                    )}
                                                </TableCell>
                                                <TableCell className="text-right font-black text-emerald-600 dark:text-emerald-400 text-lg">
                                                    + ₦{parseFloat(p.amount).toLocaleString()}
                                                </TableCell>
                                                <TableCell className="text-right pr-6">
                                                    <Link href={`/receipts/payment/${p.id}/`} target="_blank">
                                                        <Button variant="ghost" size="sm" className="h-9 w-9 rounded-xl hover:bg-muted p-0 transition-transform active:scale-90">
                                                            <Printer className="h-4 w-4 text-muted-foreground" />
                                                        </Button>
                                                    </Link>
                                                </TableCell>
                                            </TableRow>
                                        ))
                                    }
                                </TableBody>
                            </Table>
                        </CardContent>
                    </Card>
                </TabsContent>

                {/* RECORD FORM TAB */}
                <TabsContent value="record" className="mt-0">
                    <Card className="rounded-3xl shadow-card border-none bg-card max-w-4xl mx-auto overflow-hidden">
                        <CardHeader className="bg-muted/5 border-b border-border/10 pb-6">
                            <CardTitle className="text-xl font-black">Record Manual Payment</CardTitle>
                            <CardDescription className="font-medium">Log offline payments such as cash or direct bank transfers into the system ledger.</CardDescription>
                        </CardHeader>
                        <CardContent className="pt-6">
                            <form onSubmit={submitPayment} className="space-y-6">
                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div className="space-y-2">
                                        <Label>Contract <span className="text-red-500">*</span></Label>
                                        <Select value={formContract} onValueChange={handleContractChange} required>
                                            <SelectTrigger>
                                                <SelectValue placeholder="Select a Contract" />
                                            </SelectTrigger>
                                            <SelectContent>
                                                {contracts.map(c => (
                                                    <SelectItem key={c.id} value={c.id.toString()}>
                                                        {c.display_name || `${c.contract_number} - ${typeof c.client === 'object' ? c.client.full_name : c.client}`}
                                                    </SelectItem>
                                                ))}
                                            </SelectContent>
                                        </Select>
                                    </div>
                                    <div className="space-y-2">
                                        <Label>Payment Type <span className="text-red-500">*</span></Label>
                                        <Select value={formType} onValueChange={handlePaymentTypeChange} required>
                                            <SelectTrigger><SelectValue /></SelectTrigger>
                                            <SelectContent>
                                                <SelectItem value="installment">Installment Payment</SelectItem>
                                                <SelectItem value="down_payment">Down Payment</SelectItem>
                                                <SelectItem value="early_payment">Early Payment</SelectItem>
                                                <SelectItem value="partial_payment">Partial Payment</SelectItem>
                                                <SelectItem value="penalty">Penalty Fee</SelectItem>
                                            </SelectContent>
                                        </Select>
                                    </div>
                                </div>

                                {formContract && (
                                    <div className="p-6 rounded-2xl border border-primary/10 bg-primary/5 space-y-4">
                                        <Label className="text-foreground font-black uppercase text-xs tracking-widest flex items-center gap-2">
                                            <ShieldCheck className="w-4 h-4 text-primary" /> Assign to Pending Installments
                                        </Label>
                                        {pendingInstallmentsForContract.length === 0 ? (
                                            <p className="text-sm text-slate-500 italic">No pending installments for this contract.</p>
                                        ) : (
                                            <div className="grid gap-3">
                                                {pendingInstallmentsForContract.map(inst => (
                                                    <label key={inst.id} className="flex items-center space-x-4 p-4 bg-background border border-border/10 rounded-xl cursor-pointer hover:border-primary/50 hover:bg-primary/5 transition-all group">
                                                        <input
                                                            type="checkbox"
                                                            className="w-5 h-5 text-primary rounded-lg border-border/40 bg-muted/20"
                                                            checked={selectedInstallments.includes(inst.id)}
                                                            onChange={() => handleInstallmentToggle(inst.id, inst.amount)}
                                                        />
                                                        <div className="flex-1 text-sm flex justify-between items-center">
                                                            <div>
                                                                <span className="font-black text-foreground block">Installment #{inst.installment_number}</span>
                                                                <span className="text-[10px] font-bold uppercase text-muted-foreground">Due: {new Date(inst.due_date).toLocaleDateString()}</span>
                                                            </div>
                                                            <span className="font-black text-foreground text-base">₦{parseFloat(inst.amount).toLocaleString()}</span>
                                                        </div>
                                                    </label>
                                                ))}
                                            </div>
                                        )}
                                    </div>
                                )}

                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div className="space-y-2">
                                        <Label className="font-black uppercase text-[10px] tracking-widest text-muted-foreground">Amount Received (₦) <span className="text-red-500">*</span></Label>
                                        <Input type="number" step="0.01" value={formAmount} onChange={e => setFormAmount(e.target.value)} required placeholder="0.00" className="text-2xl font-black h-14 bg-muted/20 focus:bg-background transition-colors" />
                                    </div>
                                    <div className="space-y-2">
                                        <Label className="font-black uppercase text-[10px] tracking-widest text-muted-foreground">Payment Date <span className="text-red-500">*</span></Label>
                                        <Input type="date" value={formDate} onChange={e => setFormDate(e.target.value)} required className="h-14 bg-muted/20" />
                                    </div>
                                    <div className="space-y-2">
                                        <Label>Payment Method <span className="text-red-500">*</span></Label>
                                        <Select value={formMethod} onValueChange={setFormMethod} required>
                                            <SelectTrigger><SelectValue /></SelectTrigger>
                                            <SelectContent>
                                                <SelectItem value="cash">Cash</SelectItem>
                                                <SelectItem value="bank_transfer">Bank Transfer</SelectItem>
                                                <SelectItem value="pos">POS Terminal</SelectItem>
                                                <SelectItem value="cheque">Cheque</SelectItem>
                                                <SelectItem value="mobile_money">Mobile Money</SelectItem>
                                            </SelectContent>
                                        </Select>
                                    </div>
                                    <div className="space-y-2">
                                        <Label>Verification Status</Label>
                                        <Select value={formVerified} onValueChange={setFormVerified}>
                                            <SelectTrigger><SelectValue /></SelectTrigger>
                                            <SelectContent>
                                                <SelectItem value="True">Verified & Cleared</SelectItem>
                                                <SelectItem value="False">Pending Verification</SelectItem>
                                            </SelectContent>
                                        </Select>
                                    </div>
                                </div>

                                <div className="space-y-2">
                                    <Label className="font-black uppercase text-[10px] tracking-widest text-muted-foreground">Internal Note / Description</Label>
                                    <Textarea value={formDesc} onChange={e => setFormDesc(e.target.value)} placeholder="E.g., Teller Number, Reference ID..." className="resize-none min-h-[100px] bg-muted/20" />
                                </div>

                                <div className="pt-6 flex justify-end">
                                    <Button
                                        type="submit"
                                        size="lg"
                                        disabled={isSubmitting}
                                        className={`rounded-2xl px-10 h-14 font-black transition-all active:scale-95 shadow-lg ${submitSuccess
                                            ? "bg-emerald-500 text-white shadow-emerald-500/20"
                                            : "bg-emerald-600 hover:bg-emerald-700 text-white shadow-emerald-500/20"
                                            }`}
                                    >
                                        {isSubmitting ? (
                                            <>
                                                <Loader2 className="h-5 w-5 animate-spin mr-2" />
                                                Processing...
                                            </>
                                        ) : submitSuccess ? (
                                            <>
                                                <CheckCircle2 className="h-5 w-5 mr-2" />
                                                Saved! Redirecting...
                                            </>
                                        ) : (
                                            "Record & Add to Ledger"
                                        )}
                                    </Button>
                                </div>
                            </form>
                        </CardContent>
                    </Card>
                </TabsContent>
            </Tabs>

        </div>
    );
}