"use client"
import {
    FileText,
    Calendar,
    Hash,
    Users,
    Car,
    Building2,
    Clock,
    Mail,
    Phone,
    AlertTriangle,
    CheckCircle2,
    TimerIcon,
} from "lucide-react"
import {
    Card,
    CardContent,
    CardHeader,
    CardTitle,
} from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge"
import { Separator } from "@/shared/components/ui/separator"
import { cn } from "@/shared/lib/utils"
import { formatDate, formatCurrency, formatEnum, formatNumber } from "@/shared/utils/formatters"
import { useInvoice } from "./invoice-context"

function InfoItem({
    icon: Icon,
    label,
    value,
}: {
    icon: React.ComponentType<{ className?: string }>
    label: string
    value?: string | null
}) {
    return (
        <div className="flex items-start gap-3">
            <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
                <Icon className="size-4" />
            </div>
            <div className="flex flex-col gap-0.5">
                <span className="text-xs text-muted-foreground">{label}</span>
                <span className="text-sm font-medium">
                    {value || <span className="text-muted-foreground">—</span>}
                </span>
            </div>
        </div>
    )
}

const statusVariantMap: Record<string, "secondary" | "default" | "destructive" | "outline"> = {
    draft: "secondary",
    open: "default",
    paid: "default",
    overdue: "destructive",
    void: "outline",
}

function getDueInfo(dueDateStr?: string, status?: string) {
    if (!dueDateStr) return null
    const now = new Date()
    const due = new Date(dueDateStr)
    const diffMs = due.getTime() - now.getTime()
    const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24))
    const isPaid = status === "paid" || status === "void"
    if (isPaid) return { label: formatDate(dueDateStr), variant: "neutral" as const }
    if (diffDays < 0) return { label: `${Math.abs(diffDays)} days overdue`, variant: "overdue" as const }
    if (diffDays === 0) return { label: "Due today", variant: "today" as const }
    if (diffDays <= 7) return { label: `Due in ${diffDays} day${diffDays === 1 ? "" : "s"}`, variant: "soon" as const }
    return { label: formatDate(dueDateStr), variant: "neutral" as const }
}

export function InvoiceGeneralInfo() {
    const _invoice = useInvoice()
    if (!_invoice) return null
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const invoice = _invoice as any

    const customer = invoice.customer || {}
    const vehicle = invoice.vehicle || {}
    const insurer = invoice.insurer || {}
    const department = invoice.department || null

    const total = parseFloat(String(invoice.total ?? 0)) || 0
    const paid = parseFloat(String(invoice.payments_recieved ?? invoice.received_payment ?? 0)) || 0
    const balanceDue = parseFloat(String(invoice.balance_due ?? 0)) || 0

    const dueInfo = getDueInfo(invoice.due_date as string | undefined, invoice.status as string | undefined)

    return (
        <div className="grid gap-6">

            {/* ── Summary Hero ── */}
            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
                {/* Status */}
                <Card className="flex flex-col gap-1 p-4">
                    <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Status</span>
                    <div className="mt-1 flex items-center gap-2">
                        {invoice.status === "paid" && <CheckCircle2 className="size-4 text-green-500" />}
                        {invoice.status === "overdue" && <AlertTriangle className="size-4 text-destructive" />}
                        {(invoice.status === "draft" || invoice.status === "open") && <TimerIcon className="size-4 text-muted-foreground" />}
                        <Badge variant={statusVariantMap[String(invoice.status ?? "")] ?? "outline"} className="text-sm px-2 py-0.5">
                            {formatEnum(String(invoice.status ?? ""))}
                        </Badge>
                    </div>
                    {invoice.invoice_number && (
                        <span className="mt-1 text-xs text-muted-foreground">{invoice.invoice_number}</span>
                    )}
                </Card>

                {/* Due Date */}
                <Card className={cn(
                    "flex flex-col gap-1 p-4",
                    dueInfo?.variant === "overdue" && "border-destructive/60 bg-destructive/5",
                    dueInfo?.variant === "today" && "border-orange-400/60 bg-orange-50 dark:bg-orange-950/20",
                    dueInfo?.variant === "soon" && "border-yellow-400/60 bg-yellow-50 dark:bg-yellow-950/20",
                )}>
                    <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Due Date</span>
                    <span className={cn(
                        "mt-1 text-lg font-semibold",
                        dueInfo?.variant === "overdue" && "text-destructive",
                        dueInfo?.variant === "today" && "text-orange-600",
                        dueInfo?.variant === "soon" && "text-yellow-700 dark:text-yellow-500",
                    )}>
                        {formatDate(invoice.due_date) || "—"}
                    </span>
                    {dueInfo && dueInfo.variant !== "neutral" && (
                        <span className={cn(
                            "text-xs font-medium",
                            dueInfo.variant === "overdue" && "text-destructive",
                            dueInfo.variant === "today" && "text-orange-600",
                            dueInfo.variant === "soon" && "text-yellow-700 dark:text-yellow-500",
                        )}>
                            {dueInfo.label}
                        </span>
                    )}
                </Card>

                {/* Total Amount */}
                <Card className="flex flex-col gap-1 p-4">
                    <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Total Amount</span>
                    <span className="mt-1 text-lg font-semibold">{formatCurrency(total)}</span>
                    {paid > 0 && (
                        <span className="text-xs text-muted-foreground">{formatCurrency(paid)} received</span>
                    )}
                </Card>

                {/* Balance Due */}
                <Card className={cn(
                    "flex flex-col gap-1 p-4",
                    balanceDue > 0 && invoice.status !== "paid" && "border-primary/40 bg-primary/5",
                    balanceDue <= 0 && "border-green-500/40 bg-green-50 dark:bg-green-950/20",
                )}>
                    <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Balance Due</span>
                    <span className={cn(
                        "mt-1 text-lg font-bold",
                        balanceDue > 0 && invoice.status !== "paid" && "text-primary",
                        balanceDue <= 0 && "text-green-600",
                    )}>
                        {formatCurrency(balanceDue)}
                    </span>
                    {balanceDue <= 0 && (
                        <span className="text-xs font-medium text-green-600">Fully paid</span>
                    )}
                    {invoice.discount && invoice.discount !== "no" && (
                        <span className="text-xs text-muted-foreground">Discount: {formatEnum(invoice.discount)}</span>
                    )}
                </Card>
            </div>

            {/* ── Customer & Vehicle ── */}
            <div className="grid gap-6 md:grid-cols-2">
                <Card>
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2">
                            <Users className="size-4" />
                            Customer Information
                        </CardTitle>
                    </CardHeader>
                    <CardContent className="grid gap-4">
                        <div className="grid gap-4 sm:grid-cols-2">
                            <InfoItem
                                icon={Users}
                                label="Customer Name"
                                value={customer.first_name && customer.last_name ? `${customer.first_name} ${customer.last_name}` : invoice.customer_name}
                            />
                            <InfoItem icon={Mail} label="Email" value={customer.email} />
                            <InfoItem icon={Phone} label="Phone" value={customer.phone} />
                            <InfoItem icon={Phone} label="Alternate Phone" value={customer.alternate_phone} />
                        </div>
                        {customer.address_line_1 && (
                            <>
                                <Separator />
                                <div className="flex flex-col gap-1">
                                    <span className="text-xs text-muted-foreground">Address</span>
                                    <p className="text-sm">
                                        {customer.address_line_1}
                                        {customer.address_line_2 ? `, ${customer.address_line_2}` : ""}
                                        <br />
                                        {customer.city ?? ""}{customer.zip_code ? `, ${customer.zip_code}` : ""}
                                    </p>
                                </div>
                            </>
                        )}
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2">
                            <Car className="size-4" />
                            Vehicle Information
                        </CardTitle>
                    </CardHeader>
                    <CardContent className="grid gap-4">
                        <div className="grid gap-4 sm:grid-cols-2">
                            <InfoItem
                                icon={Car}
                                label="Vehicle"
                                value={vehicle.make && vehicle.model ? `${vehicle.make} ${vehicle.model}` : invoice.vehicle_name}
                            />
                            <InfoItem icon={Hash} label="License Plate" value={vehicle.license_plate} />
                            <InfoItem icon={Hash} label="VIN" value={vehicle.vin_number} />
                            <InfoItem icon={Hash} label="Engine Number" value={vehicle.engine_number} />
                        </div>
                        {vehicle.mileage && (
                            <>
                                <Separator />
                                <InfoItem icon={Clock} label="Mileage" value={formatNumber(vehicle.mileage)} />
                            </>
                        )}
                    </CardContent>
                </Card>
            </div>

            {/* ── Invoice Meta ── */}
            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        <FileText className="size-4" />
                        Invoice Details
                    </CardTitle>
                </CardHeader>
                <CardContent>
                    <div className="grid gap-4 sm:grid-cols-3">
                        <InfoItem icon={Hash} label="Invoice Number" value={invoice.invoice_number} />
                        <InfoItem icon={Calendar} label="Invoice Date" value={formatDate(invoice.invoice_date)} />
                        <InfoItem icon={Calendar} label="Due Date" value={formatDate(invoice.due_date)} />
                        <InfoItem icon={Building2} label="Department" value={department?.name} />
                        <InfoItem icon={Hash} label="Has Insurance" value={invoice.has_insurance ? "Yes" : "No"} />
                        {invoice.has_insurance && insurer.id && (
                            <InfoItem icon={Users} label="Insurer" value={insurer.name} />
                        )}
                        {invoice.kms_in ? (
                            <InfoItem icon={Clock} label="KMs In" value={formatNumber(invoice.kms_in)} />
                        ) : null}
                        {invoice.invoice_title ? (
                            <InfoItem icon={FileText} label="Invoice Title" value={invoice.invoice_title} />
                        ) : null}
                    </div>
                </CardContent>
            </Card>

            {/* ── Notes & Terms ── */}
            {(invoice.notes || invoice.terms_and_conditions) && (
                <div className="grid gap-6 md:grid-cols-2">
                    {invoice.notes && (
                        <Card>
                            <CardHeader>
                                <CardTitle className="text-base">Notes</CardTitle>
                            </CardHeader>
                            <CardContent>
                                <p className="whitespace-pre-wrap text-sm">{invoice.notes}</p>
                            </CardContent>
                        </Card>
                    )}
                    {invoice.terms_and_conditions && (
                        <Card>
                            <CardHeader>
                                <CardTitle className="text-base">Terms & Conditions</CardTitle>
                            </CardHeader>
                            <CardContent>
                                <p className="whitespace-pre-wrap text-sm">{invoice.terms_and_conditions}</p>
                            </CardContent>
                        </Card>
                    )}
                </div>
            )}
        </div>
    )
}