import Link from "next/link"
import {
  AlertOctagon,
  AlertTriangle,
  ArrowLeftRight,
  BadgeDollarSign,
  ClipboardList,
  PackageSearch,
  ScrollText,
  SlidersHorizontal,
  type LucideIcon,
} from "lucide-react"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

const areas: { title: string; description: string; href: string; icon: LucideIcon }[] = [
  {
    title: "Stock Enquiry",
    description: "On-hand, available, on-hold, and in-transit quantities by item and warehouse.",
    href: "/dashboard/stock/enquiry",
    icon: PackageSearch,
  },
  {
    title: "Stock Ledger",
    description: "The immutable, append-only movement journal — every in/out with running balance.",
    href: "/dashboard/stock/ledger",
    icon: ScrollText,
  },
  {
    title: "Valuation",
    description: "FIFO cost-layer breakdown and total stock value by item and warehouse.",
    href: "/dashboard/stock/valuation",
    icon: BadgeDollarSign,
  },
  {
    title: "Transfers",
    description: "Move stock between warehouses: create, dispatch, and receive (in-transit).",
    href: "/dashboard/stock/transfers",
    icon: ArrowLeftRight,
  },
  {
    title: "Adjustments",
    description: "Increase, decrease, or write off stock with a mandatory reason code.",
    href: "/dashboard/stock/adjustments",
    icon: SlidersHorizontal,
  },
  {
    title: "Counts",
    description: "Cycle or full physical counts — snapshot, enter counts, post variance.",
    href: "/dashboard/stock/counts",
    icon: ClipboardList,
  },
  {
    title: "Reorder Alerts",
    description: "Items at or below their reorder point, with a one-click requisition.",
    href: "/dashboard/stock/reorder-alerts",
    icon: AlertTriangle,
  },
  {
    title: "Wastage",
    description: "Damage, theft/loss, and expiry write-offs — reason-coded adjustments with a totals report.",
    href: "/dashboard/stock/wastage",
    icon: AlertOctagon,
  },
]

export default function StockHubPage() {
  return (
    <div className="flex flex-col gap-6">
      <div>
        <h1 className="text-2xl font-bold text-foreground">Stock Management</h1>
        <p className="text-base text-muted-foreground">
          FIFO-costed stock across multiple warehouses (FR-STK-01..14).
        </p>
      </div>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
        {areas.map((area) => (
          <Link key={area.href} href={area.href}>
            <Card className="h-full transition-shadow hover:shadow-md">
              <CardHeader>
                <div className="flex items-center gap-3">
                  <div className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
                    <area.icon className="size-5" />
                  </div>
                  <CardTitle className="text-lg">{area.title}</CardTitle>
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-base text-muted-foreground">{area.description}</p>
              </CardContent>
            </Card>
          </Link>
        ))}
      </div>
    </div>
  )
}
