import Link from 'next/link';
import type { Route } from 'next';
import { BookOpen, Calendar, Clock, Layers, Sparkles, TrendingUp, Wallet } from 'lucide-react';

import { PageHeader } from '@/components/shared/page-header';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { cn } from '@/lib/utils';

interface PageProps {
  params: Promise<{ portSlug: string }>;
}

interface KindCard {
  href: string;
  label: string;
  description: string;
  icon: typeof TrendingUp;
}

/**
 * Five entry points - four canonical categories from the launch
 * initiative (sales / financial / marketing / operational) plus the
 * ad-hoc custom composer. Rendered with the same CardHeader +
 * CardDescription pattern as the admin sections browser so this surface
 * reads as part of the same app.
 */
const KIND_CARDS: KindCard[] = [
  {
    href: 'sales',
    label: 'Sales performance',
    description:
      'Rep leaderboards, win rates, average time-to-close, stalled deals, conversion funnel by stage.',
    icon: TrendingUp,
  },
  {
    href: 'operational',
    label: 'Operational',
    description:
      'Berth utilisation timeline, occupancy heatmap, tenancy churn, signing turnaround.',
    icon: Layers,
  },
  {
    href: 'financial',
    label: 'Financial',
    description:
      'Revenue collected, deposits, outstanding balances, cash flow, and expense breakdown.',
    icon: Wallet,
  },
  {
    href: 'custom',
    label: 'Custom report',
    description:
      'Build your own: pick an entity, choose columns, set a date range, export to CSV, and save as a template.',
    icon: Sparkles,
  },
];

interface LibraryCard {
  href: string;
  label: string;
  description: string;
  icon: typeof Calendar;
}

const LIBRARY_CARDS: LibraryCard[] = [
  {
    href: '/reports/templates',
    label: 'Templates',
    description: 'Saved configurations. Modify, re-run, or save as a new template.',
    icon: BookOpen,
  },
  {
    href: '/reports/runs',
    label: 'Runs',
    description: 'Every report generated, with re-run and re-send.',
    icon: Clock,
  },
  {
    href: '/reports/schedules',
    label: 'Schedules',
    description: 'Recurring runs. Email delivery is optional per schedule.',
    icon: Calendar,
  },
];

interface SectionCardProps {
  href: string;
  label: string;
  description: string;
  icon: typeof TrendingUp;
  /** Optional small uppercase label rendered above the title, mirroring
   *  the admin-sections-browser pattern. */
  eyebrow?: string;
}

/**
 * Matches the SectionCard pattern used on the Administration landing
 * page so cards across the app share one visual + interactive idiom.
 * Don't restyle this independently - if the admin card style changes,
 * propagate here.
 */
function ReportSectionCard({ href, label, description, icon: Icon, eyebrow }: SectionCardProps) {
  return (
    <Link href={href as Route} className="block group">
      <Card
        className={cn(
          'h-full transition-colors group-hover:border-primary/50 group-hover:bg-muted/30',
        )}
      >
        <CardHeader className="flex flex-row items-start gap-3 space-y-0 pb-2">
          <Icon
            className="h-5 w-5 mt-0.5 text-muted-foreground group-hover:text-primary"
            aria-hidden
          />
          <div className="flex-1">
            <CardTitle className="text-base">{label}</CardTitle>
            {eyebrow ? (
              <p className="text-xs uppercase tracking-wider text-muted-foreground">{eyebrow}</p>
            ) : null}
          </div>
        </CardHeader>
        <CardContent>
          <CardDescription>{description}</CardDescription>
        </CardContent>
      </Card>
    </Link>
  );
}

export default async function ReportsLandingPage({ params }: PageProps) {
  const { portSlug } = await params;

  return (
    <div className="space-y-6">
      <PageHeader
        title="Reports"
        description="Generate curated and ad-hoc reports as PDF, CSV, or Excel. Schedule recurring runs with optional email delivery."
      />

      <section className="space-y-3">
        <div>
          <h2 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
            Compose a report
          </h2>
          <p className="text-xs text-muted-foreground/80">
            Sales and operational dashboards, plus an ad-hoc composer for anything else.
          </p>
        </div>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {KIND_CARDS.map((k) => (
            <ReportSectionCard
              key={k.href}
              href={`/${portSlug}/reports/${k.href}`}
              label={k.label}
              description={k.description}
              icon={k.icon}
            />
          ))}
        </div>
      </section>

      <section className="space-y-3">
        <div>
          <h2 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
            Library
          </h2>
          <p className="text-xs text-muted-foreground/80">
            Saved templates, generated runs, and recurring schedules. Re-run anything in one click.
          </p>
        </div>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {LIBRARY_CARDS.map((l) => (
            <ReportSectionCard
              key={l.href}
              href={`/${portSlug}${l.href}`}
              label={l.label}
              description={l.description}
              icon={l.icon}
            />
          ))}
        </div>
      </section>
    </div>
  );
}
