"use client"

import {
    Calendar,
    Hash,
    Building2,
    AlertTriangle,
    CheckCircle2,
    TimerIcon,
    ReceiptIcon,
    Wrench,
    Tag,
    Percent,
} from "lucide-react"
import {
    Card,
    CardContent,
    CardHeader,
    CardTitle,
} from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge"
import { cn } from "@/shared/lib/utils"
import { formatDate, formatCurrency, formatEnum } from "@/shared/utils/formatters"
import { getFullName } from "@/shared/utils/getFullName"
import { useExpense } from "./expense-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",
    un_paid: "destructive",
    partially_paid: "secondary",
    paid: "default",
    cancelled: "destructive",
}

export function ExpenseGeneralInfo() {
    const expense = useExpense()
    if (!expense) return null

    const vendor = expense.vendor || {}
    const department = expense.department || null
    const jobCard = expense.job_card || null
    const category = expense.category || null
    const labels = (expense as any)?.labels || []
    const balanceDue = expense.balance_due ?? null
    const paymentsM = expense.payments_made ?? null
    const taxLabel = expense.tax?.title
        ? `${expense.tax.title} (${expense.tax.rate}%)`
        : "Tax"

    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">
                        {expense.status === "paid" && <CheckCircle2 className="size-4 text-green-500" />}
                        {expense.status === "pending" && <TimerIcon className="size-4 text-muted-foreground" />}
                        {expense.status === "open" && <AlertTriangle className="size-4 text-yellow-600" />}
                        {expense.status === "un_paid" && <AlertTriangle className="size-4 text-destructive" />}
                        <Badge variant={statusVariantMap[String(expense.status ?? "")] ?? "outline"} className="text-sm px-2 py-0.5">
                            {formatEnum(String(expense.status ?? ""))}
                        </Badge>
                    </div>
                </Card>

                {/* Total */}
                <Card className="flex flex-col gap-1 p-4">
                    <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Total</span>
                    <span className="mt-1 text-lg font-semibold">
                        {formatCurrency(expense.total ?? 0)}
                    </span>
                    {expense.sub_total != null && expense.sub_total !== expense.total && (
                        <span className="text-xs text-muted-foreground">Subtotal: {formatCurrency(expense.sub_total)}</span>
                    )}
                </Card>

                {/* Payments Made */}
                <Card className="flex flex-col gap-1 p-4">
                    <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Paid</span>
                    <span className="mt-1 text-lg font-semibold text-green-600 dark:text-green-400">
                        {formatCurrency(paymentsM ?? 0)}
                    </span>
                </Card>

                {/* Balance Due */}
                <Card className={cn("flex flex-col gap-1 p-4", (balanceDue ?? 0) > 0 && "border-destructive/50 bg-destructive/5")}>
                    <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Balance Due</span>
                    <span className={cn("mt-1 text-lg font-semibold", (balanceDue ?? 0) > 0 ? "text-destructive" : "text-green-600 dark:text-green-400")}>
                        {formatCurrency(balanceDue ?? 0)}
                    </span>
                </Card>
            </div>

            {/* ── Vendor ── */}
            <Card className="flex flex-col gap-1 p-4">
                <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Vendor</span>
                <span className="mt-1 text-lg font-semibold">{vendor.company_name || getFullName(vendor as any) || "—"}</span>
            </Card>

            {/* ── Expense Details ── */}
            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        <ReceiptIcon className="size-4" />
                        Expense Details
                    </CardTitle>
                </CardHeader>
                <CardContent>
                    <div className="grid gap-4 sm:grid-cols-3">
                        <InfoItem icon={Hash} label="Invoice Number" value={expense.invoice_number} />
                        <InfoItem icon={Calendar} label="Expense Date" value={formatDate(expense.expense_date)} />
                        <InfoItem icon={Building2} label="Department" value={department?.name} />
                        {expense.discount && expense.discount !== "no" && (
                            <InfoItem icon={Percent} label="Discount Type" value={formatEnum(expense.discount)} />
                        )}
                        {expense.discount_amount_major != null && expense.discount_amount_major > 0 && (
                            <InfoItem icon={Percent} label="Discount" value={formatCurrency(expense.discount_amount_major)} />
                        )}
                        {expense.tax_amount != null && expense.tax_amount > 0 && (
                            <InfoItem icon={Percent} label={taxLabel} value={formatCurrency(expense.tax_amount)} />
                        )}
                    </div>
                </CardContent>
            </Card>

            {/* ── Job Card & Category ── */}
            {(jobCard || category) && (
                <Card>
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2">
                            <Wrench className="size-4" />
                            Related Information
                        </CardTitle>
                    </CardHeader>
                    <CardContent>
                        <div className="grid gap-4 sm:grid-cols-2">
                            {jobCard && (
                                <div className="flex items-start gap-3 p-3 rounded-lg bg-muted/50">
                                    <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-background text-muted-foreground">
                                        <Wrench className="size-4" />
                                    </div>
                                    <div className="flex flex-col gap-0.5">
                                        <span className="text-xs text-muted-foreground font-medium">Job Card</span>
                                        <span className="text-sm font-semibold">{jobCard.order_number || "—"}</span>
                                        <span className="text-xs text-muted-foreground">{jobCard.title || ""}</span>
                                    </div>
                                </div>
                            )}
                            {category && (
                                <div className="flex items-start gap-3 p-3 rounded-lg bg-muted/50">
                                    <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-background text-muted-foreground">
                                        <Tag className="size-4" />
                                    </div>
                                    <div className="flex flex-col gap-0.5">
                                        <span className="text-xs text-muted-foreground font-medium">Category</span>
                                        <span className="text-sm font-semibold">{category.title || "—"}</span>
                                    </div>
                                </div>
                            )}
                        </div>
                    </CardContent>
                </Card>
            )}

            {/* ── Labels ── */}
            {labels && labels.length > 0 && (
                <Card>
                    <CardHeader>
                        <CardTitle className="text-base flex items-center gap-2">
                            <Tag className="size-4" />
                            Labels
                        </CardTitle>
                    </CardHeader>
                    <CardContent>
                        <div className="flex flex-wrap gap-2">
                            {labels.map((label: any) => (
                                <Badge
                                    key={label.id}
                                    style={{
                                        backgroundColor: label.color_code + "20",
                                        borderColor: label.color_code,
                                        color: label.color_code,
                                    }}
                                    variant="outline"
                                >
                                    {label.title}
                                </Badge>
                            ))}
                        </div>
                    </CardContent>
                </Card>
            )}

            {/* ── Notes ── */}
            {expense.notes && (
                <Card>
                    <CardHeader>
                        <CardTitle className="text-base">Notes</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <p className="text-sm text-muted-foreground whitespace-pre-wrap">{expense.notes}</p>
                    </CardContent>
                </Card>
            )}
        </div>
    )
}