import Link from "next/link";
import {
  Users,
  Radio,
  UserCheck,
  CalendarDays,
  BookOpen,
  FileWarning,
  ClipboardList,
  Hash,
  Workflow,
  Wallet,
  Building2,
  Receipt,
  GraduationCap,
  PieChart,
} from "lucide-react";
import { PageHeader } from "@/components/layout/page-header";
import { Card, CardContent } from "@/components/ui/card";

type ReportLink = {
  href: string;
  title: string;
  description: string;
  icon: React.ComponentType<{ className?: string }>;
};

const SECTIONS: { name: string; reports: ReportLink[] }[] = [
  {
    name: "Lead & Admission",
    reports: [
      { href: "/reports/overall", title: "Overall", description: "Branch matrix: leads, applications, offers, visas, travelled.", icon: PieChart },
      { href: "/reports/lead-form", title: "Lead Form", description: "All captured leads with contact and status.", icon: Users },
      { href: "/reports/lead-source", title: "Lead Source", description: "Lead counts grouped by source.", icon: Radio },
      { href: "/reports/counselor-performance", title: "Counselor Performance", description: "Leads assigned, applications, conversions per counselor.", icon: UserCheck },
      { href: "/reports/daywise-admission", title: "Day-wise Admission", description: "Applications created per day.", icon: CalendarDays },
      { href: "/reports/most-preferred-courses", title: "Most Preferred Courses", description: "Application counts by course.", icon: BookOpen },
      { href: "/reports/pending-agreement", title: "Pending Agreement", description: "Applications still awaiting an offer.", icon: FileWarning },
      { href: "/reports/student-application", title: "Student Application", description: "All student applications with full detail.", icon: ClipboardList },
    ],
  },
  {
    name: "Visa",
    reports: [
      { href: "/reports/visa-collection", title: "Visa Collection", description: "Visa fee collection summary.", icon: Wallet },
      { href: "/reports/visa-number-counselor", title: "Visa Number by Counselor", description: "Visa counts by counselor.", icon: Hash },
      { href: "/reports/visa-process", title: "Visa Process", description: "Visa processing pipeline status.", icon: Workflow },
    ],
  },
  {
    name: "Finance",
    reports: [
      { href: "/reports/collection-payment", title: "Collection Payment", description: "Payments collected over time.", icon: Wallet },
      { href: "/reports/university-commission", title: "University Commission", description: "Commission received from universities.", icon: Building2 },
      { href: "/reports/fee-payment", title: "Fee Payment", description: "Student fee payment records.", icon: Receipt },
      { href: "/reports/final-student", title: "Final Student", description: "Finalised student outcomes.", icon: GraduationCap },
      { href: "/reports/finance-summary", title: "Finance Summary", description: "Overall finance overview.", icon: PieChart },
    ],
  },
];

export default function Page() {
  return (
    <div>
      <PageHeader title="Reports" breadcrumb="Home / Reports" />
      <div className="flex flex-col gap-8">
        {SECTIONS.map((section) => (
          <section key={section.name}>
            <h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-brand-navy">
              {section.name}
            </h2>
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
              {section.reports.map((r) => {
                const Icon = r.icon;
                return (
                  <Link key={r.href} href={r.href} className="group">
                    <Card className="h-full transition-shadow hover:shadow-md">
                      <CardContent className="flex items-start gap-3">
                        <span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-brand-blue/10 text-brand-blue">
                          <Icon className="size-5" />
                        </span>
                        <div>
                          <h3 className="font-medium leading-snug group-hover:text-brand-blue">
                            {r.title}
                          </h3>
                          <p className="mt-1 text-sm text-muted-foreground">
                            {r.description}
                          </p>
                        </div>
                      </CardContent>
                    </Card>
                  </Link>
                );
              })}
            </div>
          </section>
        ))}
      </div>
    </div>
  );
}