import type { ReactNode } from "react";
import { AlertCircle, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

/** One compact, responsive definition list, rather than a wall of KPI cards. */
export function MetricSummary({
  items,
}: {
  items: { label: string; value: ReactNode; detail?: ReactNode }[];
}) {
  return (
    <dl className="grid min-w-0 grid-cols-[repeat(auto-fit,minmax(min(100%,150px),1fr))] overflow-hidden rounded-xl border bg-background">
      {items.map((item) => (
        <div
          key={item.label}
          className="min-w-0 space-y-2 border-b border-r p-5 last:border-r-0"
        >
          <dt className="text-sm text-muted-foreground">{item.label}</dt>
          <dd
            className={
              item.value === "Not available"
                ? "text-sm font-medium text-muted-foreground"
                : "break-words text-2xl font-semibold tabular-nums tracking-tight"
            }
          >
            {item.value}
          </dd>
          {item.detail && (
            <dd className="text-xs text-muted-foreground">{item.detail}</dd>
          )}
        </div>
      ))}
    </dl>
  );
}

export function ReportSection({
  title,
  description,
  actions,
  children,
}: {
  title: string;
  description?: ReactNode;
  actions?: ReactNode;
  children: ReactNode;
}) {
  return (
    <section className="min-w-0 overflow-hidden rounded-xl border bg-background">
      <div className="flex flex-wrap items-start justify-between gap-3 px-5 pb-4 pt-5">
        <div className="min-w-0 space-y-1">
          <h3 className="text-sm font-semibold">{title}</h3>
          {description && (
            <p className="text-sm text-muted-foreground">{description}</p>
          )}
        </div>
        {actions}
      </div>
      <div className="px-5 pb-5">{children}</div>
    </section>
  );
}

export function ReportPeriodSelect({
  value,
  onChange,
  options,
  label = "Reporting period",
}: {
  value: string;
  onChange: (value: string) => void;
  options: { value: string; label: string }[];
  label?: string;
}) {
  return (
    <Select value={value} onValueChange={onChange}>
      <SelectTrigger aria-label={label} className="h-9 w-[170px] bg-background">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        {options.map((option) => (
          <SelectItem key={option.value} value={option.value}>
            {option.label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}

export function ReportToolbar({
  title,
  description,
  children,
  loading,
  updatedAt,
  onRefresh,
}: {
  title: string;
  description?: ReactNode;
  children?: ReactNode;
  loading?: boolean;
  updatedAt?: Date | null;
  onRefresh: () => void;
}) {
  return (
    <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      <div className="min-w-0 space-y-1">
        <h2 className="text-base font-semibold">{title}</h2>
        {description && (
          <p className="text-sm text-muted-foreground">{description}</p>
        )}
        <p role="status" className="text-xs text-muted-foreground">
          {loading
            ? "Updating data…"
            : updatedAt
              ? `Updated ${updatedAt.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })}`
              : ""}
        </p>
      </div>
      <div className="flex flex-wrap items-center gap-2">
        {children}
        <Button
          type="button"
          variant="outline"
          size="sm"
          onClick={onRefresh}
          disabled={loading}
        >
          <RefreshCw
            aria-hidden="true"
            className={`mr-2 h-4 w-4 ${loading ? "animate-spin motion-reduce:animate-none" : ""}`}
          />
          Refresh
        </Button>
      </div>
    </div>
  );
}

export function ReportError({
  message,
  stale = false,
  onRetry,
}: {
  message: string;
  stale?: boolean;
  onRetry: () => void;
}) {
  return (
    <div
      role="alert"
      className="flex flex-wrap items-center gap-3 rounded-lg border border-destructive/30 bg-background p-4 text-sm"
    >
      <AlertCircle
        aria-hidden="true"
        className="h-4 w-4 shrink-0 text-destructive"
      />
      <div className="min-w-0 flex-1">
        <p>{message}</p>
        {stale && (
          <p className="mt-1 text-muted-foreground">
            Showing the last successful result. It may be out of date.
          </p>
        )}
      </div>
      <Button type="button" size="sm" variant="outline" onClick={onRetry}>
        Try again
      </Button>
    </div>
  );
}

export function DataEmptyState({
  title,
  children,
  action,
}: {
  title: string;
  children?: ReactNode;
  action?: ReactNode;
}) {
  return (
    <div className="px-4 py-10 text-center">
      <h3 className="font-medium">{title}</h3>
      {children && (
        <p className="mx-auto mt-2 max-w-md text-sm text-muted-foreground">
          {children}
        </p>
      )}
      {action && <div className="mt-4">{action}</div>}
    </div>
  );
}

export function ReportSkeleton({
  label = "Loading report",
}: {
  label?: string;
}) {
  return (
    <div role="status" aria-label={label} className="space-y-4">
      <span className="sr-only">{label}</span>
      <Skeleton className="h-24 w-full" />
      <Skeleton className="h-40 w-full" />
    </div>
  );
}

export function DataPagination({
  page,
  pages,
  total,
  perPage,
  busy,
  onPageChange,
}: {
  page: number;
  pages: number;
  total: number;
  perPage: number;
  busy?: boolean;
  onPageChange: (page: number) => void;
}) {
  if (total === 0) return null;
  return (
    <nav
      aria-label="Results pagination"
      className="flex flex-wrap items-center justify-between gap-3 border-t pt-4 text-sm"
    >
      <p className="text-muted-foreground">
        {((page - 1) * perPage + 1).toLocaleString()}–
        {Math.min(page * perPage, total).toLocaleString()} of{" "}
        {total.toLocaleString()}
      </p>
      <div className="flex items-center gap-2">
        <Button
          type="button"
          variant="outline"
          size="sm"
          disabled={busy || page <= 1}
          onClick={() => onPageChange(page - 1)}
        >
          Previous
        </Button>
        <span className="tabular-nums">
          {page} / {Math.max(1, pages)}
        </span>
        <Button
          type="button"
          variant="outline"
          size="sm"
          disabled={busy || page >= pages}
          onClick={() => onPageChange(page + 1)}
        >
          Next
        </Button>
      </div>
    </nav>
  );
}