"use client"

import Link from "next/link"
import { FileText, FileSearch, Receipt, ShoppingCart } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import type { DashboardData } from "./use-dashboard-data"
import { getNavHrefByTitle } from "./nav-groups-links"

type Props = { data: DashboardData }

export function SalesPurchaseCards({ data }: Props) {
    const sales = data.sales_totals
    const purchase = data.purchase_totals

    const salesStats = [
        { label: "Inspections", value: sales?.inspections ?? 0, icon: FileSearch, href: getNavHrefByTitle("Inspections") },
        { label: "Estimates", value: sales?.estimates ?? 0, icon: FileText, href: getNavHrefByTitle("Estimates") },
        { label: "Invoices", value: sales?.invoices ?? 0, icon: Receipt, href: getNavHrefByTitle("Invoices") },
    ]

    const purchaseStats = [
        { label: "Purchase Orders", value: purchase?.purchase_orders ?? 0, icon: ShoppingCart, href: getNavHrefByTitle("Purchase Orders") },
        { label: "Bills", value: purchase?.bills ?? 0, icon: Receipt, href: getNavHrefByTitle("Bills") },
        { label: "Expenses", value: purchase?.expenses ?? 0, icon: FileText, href: getNavHrefByTitle("Expenses") },
    ]

    return (
        <div className="grid gap-4 md:grid-cols-2">
            <Card>
                <CardHeader className="flex flex-row items-center justify-between">
                    <CardTitle className="text-sm font-medium">Sales Documents</CardTitle>
                    <span className="text-2xl font-bold text-emerald-600">
                        {sales?.total_sales_documents ?? 0}
                    </span>
                </CardHeader>
                <CardContent>
                    <div className="grid grid-cols-3 gap-2">
                        {salesStats.map((stat) => (
                            stat.href ? (
                                <Link
                                    key={stat.label}
                                    href={stat.href}
                                    className="flex flex-col items-center gap-1 rounded-lg border p-3 text-center transition-colors hover:bg-muted/50"
                                >
                                    <stat.icon className="h-4 w-4 text-muted-foreground" />
                                    <span className="text-lg font-bold">{stat.value}</span>
                                    <span className="text-[11px] text-muted-foreground leading-tight">
                                        {stat.label}
                                    </span>
                                </Link>
                            ) : (
                                <div
                                    key={stat.label}
                                    className="flex flex-col items-center gap-1 rounded-lg border p-3 text-center"
                                >
                                    <stat.icon className="h-4 w-4 text-muted-foreground" />
                                    <span className="text-lg font-bold">{stat.value}</span>
                                    <span className="text-[11px] text-muted-foreground leading-tight">
                                        {stat.label}
                                    </span>
                                </div>
                            )
                        ))}
                    </div>
                </CardContent>
            </Card>

            <Card>
                <CardHeader className="flex flex-row items-center justify-between">
                    <CardTitle className="text-sm font-medium">Purchase Documents</CardTitle>
                    <span className="text-2xl font-bold text-blue-600">
                        {purchase?.total_purchase_documents ?? 0}
                    </span>
                </CardHeader>
                <CardContent>
                    <div className="grid grid-cols-3 gap-2">
                        {purchaseStats.map((stat) => (
                            stat.href ? (
                                <Link
                                    key={stat.label}
                                    href={stat.href}
                                    className="flex flex-col items-center gap-1 rounded-lg border p-3 text-center transition-colors hover:bg-muted/50"
                                >
                                    <stat.icon className="h-4 w-4 text-muted-foreground" />
                                    <span className="text-lg font-bold">{stat.value}</span>
                                    <span className="text-[11px] text-muted-foreground leading-tight">
                                        {stat.label}
                                    </span>
                                </Link>
                            ) : (
                                <div
                                    key={stat.label}
                                    className="flex flex-col items-center gap-1 rounded-lg border p-3 text-center"
                                >
                                    <stat.icon className="h-4 w-4 text-muted-foreground" />
                                    <span className="text-lg font-bold">{stat.value}</span>
                                    <span className="text-[11px] text-muted-foreground leading-tight">
                                        {stat.label}
                                    </span>
                                </div>
                            )
                        ))}
                    </div>
                </CardContent>
            </Card>
        </div>
    )
}