garage-erp/apps/dashboard/modules/bills/bill-general-info.tsx

"use client"

import {
    FileText,
    Calendar,
    Hash,
    Building2,
    AlertTriangle,
    CheckCircle2,
    TimerIcon,
    ShoppingCart,
    CreditCard,
} 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 { useBill } from "./bill-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",
}

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"
    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 BillGeneralInfo() {
    const bill = useBill()
    if (!bill) return null

    const vendor = bill.vendor || {}
    const department = bill.department || null
    const jobCard = bill.job_card || null
    const purchaseOrder = bill.purchase_order || null

    const dueInfo = getDueInfo(bill.bill_due_date as string | undefined, bill.status as string | undefined)

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

            {/* ── Summary Hero ── */}
            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                {/* 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">
                        {bill.status === "paid" && <CheckCircle2 className="size-4 text-green-500" />}
                        {bill.status === "un_paid" && <AlertTriangle className="size-4 text-destructive" />}
                        {(bill.status === "draft" || bill.status === "open") && <TimerIcon className="size-4 text-muted-foreground" />}
                        <Badge variant={statusVariantMap[String(bill.status ?? "")] ?? "outline"} className="text-sm px-2 py-0.5">
                            {formatEnum(String(bill.status ?? ""))}
                        </Badge>
                    </div>
                    {bill.bill_number && (
                        <span className="mt-1 text-xs text-muted-foreground">{bill.bill_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(bill.bill_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>

                {/* 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) || "—"}</span>
                </Card>
            </div>

            {/* ── Bill Details ── */}
            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        <FileText className="size-4" />
                        Bill Details
                    </CardTitle>
                </CardHeader>
                <CardContent>
                    <div className="grid gap-4 sm:grid-cols-3">
                        <InfoItem icon={Hash} label="Bill Number" value={bill.bill_number} />
                        <InfoItem icon={Calendar} label="Bill Date" value={formatDate(bill.bill_date)} />
                        <InfoItem icon={Calendar} label="Due Date" value={formatDate(bill.bill_due_date)} />
                        <InfoItem icon={Building2} label="Department" value={department?.name} />
                        <InfoItem icon={CreditCard} label="Payment Terms" value={bill.payment_terms?.name} />
                        {jobCard?.order_number && (
                            <InfoItem icon={Hash} label="Job Card" value={jobCard.order_number} />
                        )}
                        {purchaseOrder?.order_number && (
                            <InfoItem icon={ShoppingCart} label="Purchase Order" value={purchaseOrder.order_number} />
                        )}
                        {bill.tax?.name && (
                            <InfoItem icon={Hash} label="Tax" value={`${bill.tax.name} (${bill.tax.rate}%)`} />
                        )}
                    </div>
                </CardContent>
            </Card>

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