import Link from "next/link"
import {
  BadgeDollarSign,
  BookOpen,
  Landmark,
  LineChart,
  PieChart,
  Receipt,
  Scale,
  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: "Trial Balance",
    description: "Every postable account's debit/credit balance as at a given date.",
    href: "/dashboard/ledgers/trial-balance",
    icon: Scale,
  },
  {
    title: "Balance Sheet",
    description: "Statement of Financial Position — Assets, Liabilities and Equity as at a date.",
    href: "/dashboard/ledgers/balance-sheet",
    icon: Landmark,
  },
  {
    title: "General Ledger",
    description: "Every posted movement on one account across a date range, with running balance.",
    href: "/dashboard/ledgers/general-ledger",
    icon: BookOpen,
  },
  {
    title: "Profit & Loss",
    description: "Statement of Profit or Loss — Income and Expense for a period.",
    href: "/dashboard/ledgers/profit-and-loss",
    icon: LineChart,
  },
  {
    title: "Cash Flow",
    description: "Statement of Cash Flows — operating, investing and financing movement for a period.",
    href: "/dashboard/ledgers/cash-flow",
    icon: PieChart,
  },
  {
    title: "Budget vs Actual",
    description: "Budgeted amounts against real postings per account/period, with variance.",
    href: "/dashboard/ledgers/budget-vs-actual",
    icon: BadgeDollarSign,
  },
  {
    title: "Tax Report",
    description: "Income Tax Computation for a period, with optional adjustments.",
    href: "/dashboard/ledgers/tax-report",
    icon: Receipt,
  },
]

export default function LedgersHubPage() {
  return (
    <div className="flex flex-col gap-6">
      <div>
        <h1 className="text-2xl font-bold text-foreground">Ledgers</h1>
        <p className="text-base text-muted-foreground">
          Statutory-format financial reports from the General Ledger service.
        </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>
  )
}
