import { useState, type ReactNode } from "react";
import { Download, Printer } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { toCSV, downloadCSV, type Row } from "@/lib/crud";

export type ReportColumn = {
  name: string;
  label: string;
  align?: "right";
  render?: (row: Row) => ReactNode;
};

export function periodOptions(n = 12) {
  const out: { key: string; label: string }[] = [{ key: "all", label: "All time" }];
  const now = new Date();
  for (let i = 0; i < n; i++) {
    const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
    out.push({
      key: `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`,
      label: d.toLocaleDateString(undefined, { month: "long", year: "numeric" }),
    });
  }
  return out;
}

export function usePeriodFilter(dateField: string) {
  const [period, setPeriod] = useState("all");
  const filter = <T extends Row>(rows: T[]): T[] =>
    period === "all"
      ? rows
      : rows.filter((r) => String(r[dateField] ?? "").slice(0, 7) === period);
  const PeriodSelect = (
    <div className="flex items-center gap-2 print:hidden">
      <label className="text-sm text-muted-foreground">Period</label>
      <select
        value={period}
        onChange={(e) => setPeriod(e.target.value)}
        className="h-9 rounded-md border border-input bg-background px-3 text-sm"
      >
        {periodOptions().map((p) => (
          <option key={p.key} value={p.key}>
            {p.label}
          </option>
        ))}
      </select>
    </div>
  );
  return { period, setPeriod, filter, PeriodSelect };
}

export function ReportStats({ items }: { items: { label: string; value: string }[] }) {
  return (
    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
      {items.map((s) => (
        <Card key={s.label}>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-normal text-muted-foreground">{s.label}</CardTitle>
          </CardHeader>
          <CardContent className="text-2xl font-bold">{s.value}</CardContent>
        </Card>
      ))}
    </div>
  );
}

export function ReportShell({
  title,
  description,
  columns,
  rows,
  stats,
  toolbar,
  children,
}: {
  title: string;
  description: string;
  columns: ReportColumn[];
  rows: Row[];
  stats?: { label: string; value: string }[];
  toolbar?: ReactNode;
  children?: ReactNode;
}) {
  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-end justify-between gap-3">
        <div>
          <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
          <p className="text-sm text-muted-foreground">{description}</p>
        </div>
        <div className="flex gap-2 print:hidden">
          {toolbar}
          <Button
            variant="outline"
            size="sm"
            onClick={() =>
              downloadCSV(
                `${title.toLowerCase().replace(/\s+/g, "-")}.csv`,
                toCSV(rows, columns.map((c) => ({ name: c.name, label: c.label }))),
              )
            }
          >
            <Download className="size-4" /> Export
          </Button>
          <Button variant="outline" size="sm" onClick={() => window.print()}>
            <Printer className="size-4" /> Print
          </Button>
        </div>
      </div>

      {stats && stats.length > 0 && <ReportStats items={stats} />}
      {children}

      <Card className="overflow-hidden p-0">
        <Table>
          <TableHeader>
            <TableRow>
              {columns.map((c) => (
                <TableHead key={c.name} className={c.align === "right" ? "text-right" : undefined}>
                  {c.label}
                </TableHead>
              ))}
            </TableRow>
          </TableHeader>
          <TableBody>
            {rows.length === 0 && (
              <TableRow>
                <TableCell colSpan={columns.length} className="py-10 text-center text-muted-foreground">
                  Nothing to show yet.
                </TableCell>
              </TableRow>
            )}
            {rows.map((r, i) => (
              <TableRow key={String(r["id"] ?? i)}>
                {columns.map((c) => (
                  <TableCell key={c.name} className={c.align === "right" ? "text-right" : undefined}>
                    {c.render ? c.render(r) : String(r[c.name] ?? "—")}
                  </TableCell>
                ))}
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Card>
    </div>
  );
}