import Link from "next/link"
import { FileBarChart, FileText, Lock, PackageX, ReceiptText, ShoppingCart } from "lucide-react"

import { buttonVariants } from "@/components/ui/button"
import { cn } from "@/lib/utils"

const sections = [
  {
    title: "Invoices",
    description: "Create and manage sales invoices.",
    href: "/dashboard/sales/invoices",
    icon: FileText,
  },
  {
    title: "Slips",
    description: "Counter-style sales documents.",
    href: "/dashboard/sales/slips",
    icon: ShoppingCart,
  },
  {
    title: "Free Issues",
    description: "Promotional free-issue slips.",
    href: "/dashboard/sales/free-issues",
    icon: PackageX,
  },
  {
    title: "Day End",
    description: "Close a cashier's day and post it to the ledger.",
    href: "/dashboard/sales/day-end",
    icon: Lock,
  },
  // {
  //   title: "Reports",
  //   description: "Sales report catalog and query entry point.",
  //   href: "/dashboard/sales/reports",
  //   icon: FileBarChart,
  // },
]

export default function SalesHubPage() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-start justify-between gap-4">
        <div>
          <div className="mb-3 inline-flex items-center gap-2 rounded-full bg-primary/10 px-3 py-1 text-sm font-medium text-primary">
            <ReceiptText className="size-4" />
            Sales
          </div>
          <h1 className="text-2xl font-bold text-foreground">Sales</h1>
          <p className="text-base text-muted-foreground">
            Invoices, slips, and free issues in one place.
          </p>
        </div>
      </div>

      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        {sections.map((section) => {
          const Icon = section.icon
          return (
            <Link
              key={section.href}
              href={section.href}
              className="group rounded-2xl border bg-card p-5 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md"
            >
              <div className="mb-4 flex size-11 items-center justify-center rounded-2xl bg-primary/10 text-primary">
                <Icon className="size-5" />
              </div>
              <h2 className="text-lg font-semibold text-foreground">{section.title}</h2>
              <p className="mt-1 text-sm leading-6 text-muted-foreground">{section.description}</p>
              <div className={cn(buttonVariants({ variant: "ghost", size: "sm" }), "mt-4 px-0 text-primary")}>
                Open
              </div>
            </Link>
          )
        })}
      </div>
    </div>
  )
}
