import React, { useCallback, useEffect, useRef, useState } from "react";
import { Search, Download, Printer, Calendar as CalendarIcon, BarChart3, LineChart, ArrowUpRight, RefreshCw, FileText } from "lucide-react";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../ui/card";
import { Badge } from "../ui/badge";
import { Calendar } from "../ui/calendar";
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Line, LineChart as RechartsLineChart } from "recharts";
import { toast } from "sonner";
import { cn } from "../ui/utils";
import { skipCountForPage } from "../../lib/paginationQuery";
import { getLocations } from "../../services/locationService";
import { getPartners } from "../../services/partnerService";
import { getGroups } from "../../services/groupService";
import {
  exportLabelReportPdf,
  exportPrintLogPdf,
  getLabelReport,
  getReportsPrintLogList,
  reprintPrintLog,
} from "../../services/reportsService";
import type { LocationDto } from "../../types/location";
import type { PartnerListItem } from "../../types/partner";
import type { GroupListItem } from "../../types/group";
import type { LabelReportData, ReportsPrintLogListItem } from "../../types/reports";
import { ApiError } from "../../lib/apiClient";
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "../ui/pagination";

const ALL = "all" as const;

function defaultDateRange(): { start: string; end: string } {
  const end = new Date();
  const start = new Date(end);
  start.setDate(start.getDate() - 29);
  return {
    start: start.toISOString().slice(0, 10),
    end: end.toISOString().slice(0, 10),
  };
}

function parseIsoDate(value: string): Date | undefined {
  const s = (value ?? "").trim();
  if (!/^\d{4}-\d{2}-\d{2}$/.test(s)) return undefined;
  const d = new Date(`${s}T00:00:00`);
  if (Number.isNaN(d.getTime())) return undefined;
  return d;
}

function formatIsoDate(value: Date): string {
  const y = value.getFullYear();
  const m = String(value.getMonth() + 1).padStart(2, "0");
  const d = String(value.getDate()).padStart(2, "0");
  return `${y}-${m}-${d}`;
}

function formatPrintedAt(raw: string): string {
  const s = (raw ?? "").trim();
  if (!s) return "None";
  const d = new Date(s);
  if (Number.isNaN(d.getTime())) return s;
  return d.toLocaleString("en-US", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "numeric",
    minute: "2-digit",
    second: "2-digit",
    hour12: true,
  });
}

function toDisplay(v: string | null | undefined): string {
  const s = (v ?? "").trim();
  return s ? s : "None";
}

function formatPct(n: number): string {
  if (!Number.isFinite(n)) return "0%";
  const sign = n > 0 ? "+" : "";
  return `${sign}${n.toFixed(1)}%`;
}

function formatTrendLabel(iso: string): string {
  const s = (iso ?? "").trim();
  if (!s) return "";
  const d = new Date(s);
  if (Number.isNaN(d.getTime())) return s.length > 10 ? s.slice(0, 10) : s;
  return d.toLocaleDateString("en-US", { month: "numeric", day: "numeric" });
}

function templateCell(template: string) {
  const t = template ?? "";
  if (!t.trim()) return <span className="text-gray-500">None</span>;
  const hasAlert = t.endsWith(" !!!");
  const main = hasAlert ? t.slice(0, -4) : t;
  const lastSpace = main.lastIndexOf(" ");
  const prefix = lastSpace < 0 ? "" : main.slice(0, lastSpace + 1);
  const boldPart = lastSpace < 0 ? main : main.slice(lastSpace + 1);
  return (
    <>
      {prefix}
      <span className="font-bold text-gray-900">{boldPart}</span>
      {hasAlert && <span className="text-red-600"> !!!</span>}
    </>
  );
}

const EMPTY_LABEL_REPORT: LabelReportData = {
  summary: {
    totalLabelsPrinted: 0,
    totalLabelsPrintedPrevPeriod: 0,
    totalLabelsPrintedChangeRate: 0,
    hottestCategoryName: "None",
    hottestCategoryCount: 0,
    topProductName: "None",
    topProductCount: 0,
    avgDailyPrints: 0,
    avgDailyPrintsChangeRate: 0,
  },
  labelsByCategory: [],
  printVolumeTrend: [],
  mostUsedProducts: [],
};

export type ReportsViewProps = {
  layoutReportsOpenKey?: number;
  layoutReportsTargetTab?: "print-log" | "label-report";
};

export function ReportsView({
  layoutReportsOpenKey = 0,
  layoutReportsTargetTab = "label-report",
}: ReportsViewProps = {}) {
  const [activeTab, setActiveTab] = useState<"print-log" | "label-report">("print-log");
  const lastAppliedLayoutKeyRef = useRef(0);

  const [partners, setPartners] = useState<PartnerListItem[]>([]);
  const [groups, setGroups] = useState<GroupListItem[]>([]);
  const [locations, setLocations] = useState<LocationDto[]>([]);

  const [partnerId, setPartnerId] = useState<string>(ALL);
  const [groupId, setGroupId] = useState<string>(ALL);
  const [locationId, setLocationId] = useState<string>(ALL);

  const { start: defaultStart, end: defaultEnd } = defaultDateRange();
  const [startDate, setStartDate] = useState<string>(defaultStart);
  const [endDate, setEndDate] = useState<string>(defaultEnd);
  const [keyword, setKeyword] = useState("");

  const [debouncedKeyword, setDebouncedKeyword] = useState("");
  const keywordTimerRef = useRef<number | null>(null);

  const [printRows, setPrintRows] = useState<ReportsPrintLogListItem[]>([]);
  const [printTotal, setPrintTotal] = useState(0);
  const [printLoading, setPrintLoading] = useState(false);
  const [pageIndex, setPageIndex] = useState(1);
  const [pageSize] = useState(10);

  const [labelData, setLabelData] = useState<LabelReportData | null>(null);
  const [labelLoading, setLabelLoading] = useState(false);
  const [exporting, setExporting] = useState(false);
  const [reprintBusyId, setReprintBusyId] = useState<string | null>(null);
  const [filterMetaLoading, setFilterMetaLoading] = useState(true);

  const printAbortRef = useRef<AbortController | null>(null);
  const labelAbortRef = useRef<AbortController | null>(null);

  useEffect(() => {
    if (keywordTimerRef.current) window.clearTimeout(keywordTimerRef.current);
    keywordTimerRef.current = window.setTimeout(() => setDebouncedKeyword(keyword.trim()), 300);
    return () => {
      if (keywordTimerRef.current) window.clearTimeout(keywordTimerRef.current);
    };
  }, [keyword]);

  useEffect(() => {
    if (layoutReportsOpenKey > 0 && layoutReportsOpenKey > lastAppliedLayoutKeyRef.current) {
      lastAppliedLayoutKeyRef.current = layoutReportsOpenKey;
      setActiveTab(layoutReportsTargetTab);
    }
  }, [layoutReportsOpenKey, layoutReportsTargetTab]);

  const totalPages = Math.max(1, Math.ceil(printTotal / pageSize));

  const partnerNameForQuery = useCallback((): string | undefined => {
    if (partnerId === ALL) return undefined;
    const p = partners.find((x) => x.id === partnerId);
    return p?.partnerName?.trim() || undefined;
  }, [partnerId, partners]);

  const groupNameForQuery = useCallback((): string | undefined => {
    if (groupId === ALL) return undefined;
    const g = groups.find((x) => x.id === groupId);
    return g?.groupName?.trim() || undefined;
  }, [groupId, groups]);

  const buildReportFilters = useCallback(
    () => ({
      partnerId: partnerId === ALL ? undefined : partnerId,
      groupId: groupId === ALL ? undefined : groupId,
      locationId: locationId === ALL ? undefined : locationId,
      startDate: startDate.trim() || undefined,
      endDate: endDate.trim() || undefined,
      keyword: debouncedKeyword || undefined,
    }),
    [debouncedKeyword, endDate, groupId, locationId, partnerId, startDate]
  );

  useEffect(() => {
    setPageIndex(1);
  }, [debouncedKeyword, partnerId, groupId, locationId, startDate, endDate, activeTab, pageSize]);

  useEffect(() => {
    let cancel = false;
    const run = async () => {
      setFilterMetaLoading(true);
      try {
        const [pRes, gRes] = await Promise.all([
          getPartners({ skipCount: 1, maxResultCount: 500, state: true }),
          getGroups({ skipCount: 1, maxResultCount: 500, state: true }),
        ]);
        if (cancel) return;
        setPartners(pRes.items ?? []);
        setGroups(gRes.items ?? []);
      } catch (e) {
        if (!cancel) {
          setPartners([]);
          setGroups([]);
          toast.error("Failed to load companies / regions.", {
            description: e instanceof Error ? e.message : "Please try again.",
          });
        }
      } finally {
        if (!cancel) setFilterMetaLoading(false);
      }
    };
    run();
    return () => {
      cancel = true;
    };
  }, []);

  useEffect(() => {
    let cancel = false;
    const run = async () => {
      try {
        const res = await getLocations({
          skipCount: 1,
          maxResultCount: 2000,
          partner: partnerNameForQuery(),
          groupName: groupNameForQuery(),
          state: true,
        });
        if (cancel) return;
        setLocations(res.items ?? []);
      } catch (e) {
        if (!cancel) {
          setLocations([]);
          toast.error("Failed to load locations.", {
            description: e instanceof Error ? e.message : "Please try again.",
          });
        }
      }
    };
    run();
    return () => {
      cancel = true;
    };
  }, [groupNameForQuery, partnerNameForQuery, partnerId, groupId]);

  useEffect(() => {
    if (activeTab !== "print-log") return;

    const run = async () => {
      printAbortRef.current?.abort();
      const ac = new AbortController();
      printAbortRef.current = ac;
      setPrintLoading(true);
      const f = buildReportFilters();
      try {
        const res = await getReportsPrintLogList(
          {
            skipCount: skipCountForPage(pageIndex),
            maxResultCount: pageSize,
            sorting: "PrintedAt desc",
            ...f,
          },
          ac.signal
        );
        setPrintRows(res.items ?? []);
        setPrintTotal(res.totalCount ?? 0);
      } catch (e) {
        if (e instanceof Error && e.name === "AbortError") return;
        toast.error("Failed to load print log.", {
          description: e instanceof Error ? e.message : "Please try again.",
        });
        setPrintRows([]);
        setPrintTotal(0);
      } finally {
        if (!ac.signal.aborted) setPrintLoading(false);
      }
    };
    void run();
    return () => printAbortRef.current?.abort();
  }, [activeTab, buildReportFilters, pageIndex, pageSize]);

  useEffect(() => {
    if (activeTab !== "label-report") return;
    const run = async () => {
      labelAbortRef.current?.abort();
      const ac = new AbortController();
      labelAbortRef.current = ac;
      setLabelLoading(true);
      const f = buildReportFilters();
      try {
        const data = await getLabelReport(f, ac.signal);
        setLabelData(data);
      } catch (e) {
        if (e instanceof Error && e.name === "AbortError") return;
        toast.error("Failed to load label report.", {
          description: e instanceof Error ? e.message : "Please try again.",
        });
        setLabelData(EMPTY_LABEL_REPORT);
      } finally {
        if (!ac.signal.aborted) setLabelLoading(false);
      }
    };
    void run();
    return () => labelAbortRef.current?.abort();
  }, [activeTab, buildReportFilters]);

  const onPartnerChange = (v: string) => {
    setPartnerId(v);
    setGroupId(ALL);
    setLocationId(ALL);
  };

  const onGroupChange = (v: string) => {
    setGroupId(v);
    setLocationId(ALL);
  };

  const handleReprint = async (row: ReportsPrintLogListItem) => {
    const loc = (row.locationId ?? "").trim();
    const task = (row.taskId ?? "").trim();
    if (!loc || !task) {
      toast.error("Cannot reprint", { description: "Missing location or task id." });
      return;
    }
    const key = task;
    setReprintBusyId(key);
    try {
      await reprintPrintLog({ locationId: loc, taskId: task, printQuantity: 1 });
      toast.success("Reprint request sent", { description: `Task ${row.labelCode || task}` });
    } catch (e) {
      const msg = e instanceof ApiError ? e.message : e instanceof Error ? e.message : "Please try again.";
      toast.error("Reprint failed", { description: msg });
    } finally {
      setReprintBusyId(null);
    }
  };

  const handleExport = async () => {
    const f = buildReportFilters();
    setExporting(true);
    try {
      if (activeTab === "print-log") {
        await exportPrintLogPdf({
          ...f,
          skipCount: 1,
          maxResultCount: 10,
          sorting: "PrintedAt desc",
        });
      } else {
        await exportLabelReportPdf(f);
      }
      toast.success("Export ready", { description: "The PDF download should start shortly." });
    } catch (e) {
      const msg = e instanceof ApiError ? e.message : e instanceof Error ? e.message : "Please try again.";
      toast.error("Export failed", { description: msg });
    } finally {
      setExporting(false);
    }
  };

  const report = labelData ?? EMPTY_LABEL_REPORT;
  const trendData = (report.printVolumeTrend ?? []).map((p) => ({
    date: formatTrendLabel(p.date),
    count: p.count,
  }));
  const categoryData = (report.labelsByCategory ?? []).map((c) => ({ name: c.name, count: c.count }));

  return (
    <div className="h-full flex flex-col">
      <div className="pb-4">
        <div className="flex flex-wrap items-center gap-3">
          <Select value={partnerId} onValueChange={onPartnerChange} disabled={filterMetaLoading}>
            <SelectTrigger className="w-[140px] h-10 rounded-md border border-gray-300 bg-white font-medium text-gray-900 shrink-0">
              <SelectValue placeholder="Company" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value={ALL}>All companies</SelectItem>
              {partners.map((p) => (
                <SelectItem key={p.id} value={p.id}>
                  {toDisplay(p.partnerName)}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Select value={groupId} onValueChange={onGroupChange} disabled={filterMetaLoading}>
            <SelectTrigger className="w-[140px] h-10 rounded-md border border-gray-300 bg-white font-medium text-gray-900 shrink-0">
              <SelectValue placeholder="Region" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value={ALL}>All regions</SelectItem>
              {groups
                .filter((g) => (partnerId === ALL ? true : g.partnerId === partnerId))
                .map((g) => (
                  <SelectItem key={g.id} value={g.id}>
                    {toDisplay(g.groupName)}
                  </SelectItem>
                ))}
            </SelectContent>
          </Select>
          <Select value={locationId} onValueChange={setLocationId} disabled={filterMetaLoading}>
            <SelectTrigger className="w-[160px] h-10 rounded-md border border-gray-300 bg-white font-medium text-gray-900 shrink-0">
              <SelectValue placeholder="Location" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value={ALL}>All locations</SelectItem>
              {locations.map((loc) => (
                <SelectItem key={loc.id} value={loc.id ?? ""}>
                  {toDisplay(loc.locationName) || toDisplay(loc.locationCode)}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <div className="flex items-center gap-2 shrink-0" lang="en-US">
            <span className="text-sm font-medium text-gray-700">Period Search:</span>
            <div
              className="flex items-center bg-white border border-gray-300 rounded-md h-10 px-2"
              style={{ minHeight: 40 }}
              lang="en-US"
            >
              <CalendarIcon className="w-4 h-4 text-gray-500 mr-2 shrink-0" aria-hidden />
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    type="button"
                    variant="ghost"
                    className="h-8 w-[10.5rem] justify-start px-0 text-sm font-mono tabular-nums hover:bg-transparent"
                  >
                    {startDate || "YYYY-MM-DD"}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0" align="start">
                  <Calendar
                    mode="single"
                    selected={parseIsoDate(startDate)}
                    onSelect={(d) => d && setStartDate(formatIsoDate(d))}
                    initialFocus
                  />
                </PopoverContent>
              </Popover>
              <span className="mx-2 text-gray-400" aria-hidden>
                -
              </span>
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    type="button"
                    variant="ghost"
                    className="h-8 w-[10.5rem] justify-start px-0 text-sm font-mono tabular-nums hover:bg-transparent"
                  >
                    {endDate || "YYYY-MM-DD"}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0" align="start">
                  <Calendar
                    mode="single"
                    selected={parseIsoDate(endDate)}
                    onSelect={(d) => d && setEndDate(formatIsoDate(d))}
                    initialFocus
                  />
                </PopoverContent>
              </Popover>
            </div>
          </div>
          <div
            className="flex items-center w-64 rounded-md border border-gray-300 bg-white overflow-hidden shrink-0"
            style={{ height: 40 }}
          >
            <Search className="h-4 w-4 text-gray-400 shrink-0 ml-3 pointer-events-none" />
            <Input
              value={keyword}
              onChange={(e) => setKeyword(e.target.value)}
              placeholder="Search Product or Category..."
              className="flex-1 min-w-0 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 py-2 px-2 h-full placeholder:text-gray-500"
            />
          </div>
          <div className="flex-1 min-w-2" />
          <Button
            type="button"
            variant="outline"
            className="h-10 border border-gray-300 rounded-md text-gray-900 bg-white hover:bg-gray-50 gap-2 shrink-0"
            disabled={exporting}
            onClick={() => void handleExport()}
          >
            <Download className="w-4 h-4" /> {exporting ? "Exporting…" : "Export Report"}
          </Button>
        </div>

        <div className="w-full border-b border-gray-200 mt-4">
          <div className="flex overflow-x-auto w-fit">
            <button
              type="button"
              onClick={() => setActiveTab("print-log")}
              style={
                activeTab === "print-log" ? { borderBottomWidth: 2, borderBottomStyle: "solid", borderBottomColor: "#2563eb" } : undefined
              }
              className={cn(
                "px-4 py-2.5 text-sm font-medium whitespace-nowrap cursor-pointer transition-colors -mb-px border-b-2",
                activeTab === "print-log" ? "text-blue-600" : "border-b-transparent text-gray-600 hover:text-gray-800"
              )}
            >
              Print Log
            </button>
            <button
              type="button"
              onClick={() => setActiveTab("label-report")}
              style={
                activeTab === "label-report"
                  ? { borderBottomWidth: 2, borderBottomStyle: "solid", borderBottomColor: "#2563eb" }
                  : undefined
              }
              className={cn(
                "px-4 py-2.5 text-sm font-medium whitespace-nowrap cursor-pointer transition-colors -mb-px border-b-2",
                activeTab === "label-report" ? "text-blue-600" : "border-b-transparent text-gray-600 hover:text-gray-800"
              )}
            >
              Label Report
            </button>
          </div>
        </div>
      </div>

      <div className="flex-1 overflow-auto pt-6">
        {activeTab === "print-log" && (
          <div className="space-y-4">
            <div className="bg-white border border-gray-200 shadow-sm rounded-md overflow-hidden min-h-[200px]">
              {printLoading && (
                <div className="p-6 text-sm text-gray-500">Loading print log…</div>
              )}
              {!printLoading && (
                <Table>
                  <TableHeader>
                    <TableRow className="bg-gray-100 hover:bg-gray-100">
                      <TableHead className="text-gray-900 font-bold border-r">Label ID</TableHead>
                      <TableHead className="text-gray-900 font-bold border-r">Product Name</TableHead>
                      <TableHead className="text-gray-900 font-bold border-r">Category</TableHead>
                      <TableHead className="text-gray-900 font-bold border-r">Template</TableHead>
                      <TableHead className="text-gray-900 font-bold border-r">Printed At</TableHead>
                      <TableHead className="text-gray-900 font-bold border-r">Printed By</TableHead>
                      <TableHead className="text-gray-900 font-bold border-r">Location</TableHead>
                      <TableHead className="text-gray-900 font-bold border-r">Expiry Date</TableHead>
                      <TableHead className="text-gray-900 font-bold text-center">Action</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {printRows.length === 0 && (
                      <TableRow>
                        <TableCell colSpan={9} className="text-center text-sm text-gray-500 py-10">
                          No print records
                        </TableCell>
                      </TableRow>
                    )}
                    {printRows.map((log) => (
                      <TableRow key={log.taskId + log.labelCode}>
                        <TableCell className="border-r font-mono text-gray-600">{toDisplay(log.labelCode)}</TableCell>
                        <TableCell className="border-r font-medium">{toDisplay(log.productName)}</TableCell>
                        <TableCell className="border-r">
                          <Badge variant="secondary" className="bg-blue-50 text-blue-700 hover:bg-blue-50 border-blue-200">
                            {toDisplay(log.categoryName)}
                          </Badge>
                        </TableCell>
                        <TableCell className="border-r text-gray-600 text-sm">{templateCell(log.templateText)}</TableCell>
                        <TableCell className="border-r text-gray-600 text-sm font-numeric">{formatPrintedAt(log.printedAt)}</TableCell>
                        <TableCell className="border-r text-gray-600 text-sm">{toDisplay(log.printedByName)}</TableCell>
                        <TableCell className="border-r text-gray-600 text-sm font-numeric">{toDisplay(log.locationText)}</TableCell>
                        <TableCell className="border-r text-sm font-mono text-gray-800">{toDisplay(log.expiryDateText)}</TableCell>
                        <TableCell className="text-center">
                          <Button
                            type="button"
                            size="sm"
                            variant="outline"
                            className="h-8 gap-1 hover:bg-gray-100 border-gray-300"
                            disabled={reprintBusyId === (log.taskId || "")}
                            onClick={() => void handleReprint(log)}
                          >
                            <Printer className="w-3 h-3" />
                            {reprintBusyId === (log.taskId || "") ? "…" : "Reprint"}
                          </Button>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              )}
            </div>
            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-end gap-2 text-sm text-gray-600">
              <span>
                {printTotal === 0
                  ? "Showing 0 of 0"
                  : `Showing ${(pageIndex - 1) * pageSize + 1}–${Math.min(pageIndex * pageSize, printTotal)} of ${printTotal}`}
              </span>
              <Pagination className="mx-0 w-auto justify-end">
                <PaginationContent>
                  <PaginationItem>
                    <PaginationPrevious
                      className={pageIndex <= 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
                      onClick={() => pageIndex > 1 && setPageIndex((p) => Math.max(1, p - 1))}
                      aria-disabled={pageIndex <= 1}
                    />
                  </PaginationItem>
                  <PaginationItem>
                    <PaginationLink className="cursor-default" isActive onClick={(e) => e.preventDefault()}>
                      Page {pageIndex} / {totalPages}
                    </PaginationLink>
                  </PaginationItem>
                  <PaginationItem>
                    <PaginationNext
                      className={pageIndex >= totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"}
                      onClick={() => pageIndex < totalPages && setPageIndex((p) => Math.min(totalPages, p + 1))}
                      aria-disabled={pageIndex >= totalPages}
                    />
                  </PaginationItem>
                </PaginationContent>
              </Pagination>
            </div>
          </div>
        )}

        {activeTab === "label-report" && (
          <div className="space-y-6">
            {labelLoading && <div className="text-sm text-gray-500">Loading label report…</div>}

            {!labelLoading && (
              <>
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">Total Labels Printed</CardTitle>
                      <FileText className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                      <div className="text-2xl font-bold">{report.summary.totalLabelsPrinted.toLocaleString("en-US")}</div>
                      <p className="text-xs text-muted-foreground">
                        {formatPct(report.summary.totalLabelsPrintedChangeRate)} vs previous period
                      </p>
                    </CardContent>
                  </Card>
                  <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">Most Printed Category</CardTitle>
                      <BarChart3 className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                      <div className="text-2xl font-bold">{toDisplay(report.summary.hottestCategoryName)}</div>
                      <p className="text-xs text-muted-foreground">
                        {report.summary.hottestCategoryCount.toLocaleString("en-US")} label(s) in range
                      </p>
                    </CardContent>
                  </Card>
                  <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">Top Product</CardTitle>
                      <ArrowUpRight className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                      <div className="text-2xl font-bold">{toDisplay(report.summary.topProductName)}</div>
                      <p className="text-xs text-muted-foreground">
                        {report.summary.topProductCount.toLocaleString("en-US")} label(s) in range
                      </p>
                    </CardContent>
                  </Card>
                  <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">Avg. Daily Prints</CardTitle>
                      <RefreshCw className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                      <div className="text-2xl font-bold">
                        {Number.isFinite(report.summary.avgDailyPrints)
                          ? report.summary.avgDailyPrints.toLocaleString("en-US", { maximumFractionDigits: 1 })
                          : "0"}
                      </div>
                      <p className="text-xs text-muted-foreground">
                        {formatPct(report.summary.avgDailyPrintsChangeRate)} vs previous period
                      </p>
                    </CardContent>
                  </Card>
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                  <Card className="col-span-1">
                    <CardHeader>
                      <CardTitle>Labels by Category</CardTitle>
                      <CardDescription>Distribution of printed labels by label category in the selected range.</CardDescription>
                    </CardHeader>
                    <CardContent className="h-[300px]">
                      {categoryData.length === 0 ? (
                        <div className="h-full flex items-center justify-center text-sm text-gray-500">No data</div>
                      ) : (
                        <ResponsiveContainer width="100%" height="100%">
                          <BarChart data={categoryData}>
                            <CartesianGrid strokeDasharray="3 3" vertical={false} />
                            <XAxis dataKey="name" fontSize={12} tickLine={false} axisLine={false} />
                            <YAxis fontSize={12} tickLine={false} axisLine={false} tickFormatter={(v) => `${v}`} />
                            <Tooltip />
                            <Bar dataKey="count" fill="#facc15" radius={[4, 4, 0, 0]} />
                          </BarChart>
                        </ResponsiveContainer>
                      )}
                    </CardContent>
                  </Card>

                  <Card className="col-span-1">
                    <CardHeader>
                      <CardTitle>Print Volume Trends</CardTitle>
                      <CardDescription>Daily print volume in the current filter window (up to 7 days).</CardDescription>
                    </CardHeader>
                    <CardContent className="h-[300px]">
                      {trendData.length === 0 ? (
                        <div className="h-full flex items-center justify-center text-sm text-gray-500">No data</div>
                      ) : (
                        <ResponsiveContainer width="100%" height="100%">
                          <RechartsLineChart data={trendData}>
                            <CartesianGrid strokeDasharray="3 3" vertical={false} />
                            <XAxis dataKey="date" fontSize={12} tickLine={false} axisLine={false} />
                            <YAxis fontSize={12} tickLine={false} axisLine={false} />
                            <Tooltip />
                            <Line type="monotone" dataKey="count" stroke="#dc2626" strokeWidth={2} dot={{ r: 4 }} activeDot={{ r: 6 }} />
                          </RechartsLineChart>
                        </ResponsiveContainer>
                      )}
                    </CardContent>
                  </Card>
                </div>

                <Card>
                  <CardHeader>
                    <CardTitle>Most Used Products</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>Product Name</TableHead>
                          <TableHead>Category</TableHead>
                          <TableHead className="text-right">Total Printed</TableHead>
                          <TableHead className="text-right">Usage %</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {report.mostUsedProducts.length === 0 && (
                          <TableRow>
                            <TableCell colSpan={4} className="text-center text-sm text-gray-500">
                              No data
                            </TableCell>
                          </TableRow>
                        )}
                        {report.mostUsedProducts.map((row, i) => (
                          <TableRow key={`${row.productName}-${i}`}>
                            <TableCell className="font-medium">{toDisplay(row.productName)}</TableCell>
                            <TableCell>{toDisplay(row.categoryName)}</TableCell>
                            <TableCell className="text-right font-numeric">{row.totalPrinted.toLocaleString("en-US")}</TableCell>
                            <TableCell className="text-right font-numeric">
                              {Number.isFinite(row.usagePercent) ? `${row.usagePercent.toFixed(1)}%` : "—"}
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </CardContent>
                </Card>
              </>
            )}
          </div>
        )}
      </div>
    </div>
  );
}