"use client";

import * as React from "react";
import { AlertTriangle, ArrowDown, ArrowUp, ArrowUpDown, ChevronDown, ChevronRight, Inbox, RefreshCw } from "lucide-react";
import { Button, Sheet, Skeleton } from "@/components/ui";
import { cn } from "@/lib/utils";
import type { ApiClientError } from "@/lib/api";
import type { GameLifecycle } from "@spinza/shared";
import { describeError } from "./format";

/* ------------------------------------------------------------ page header */

export function PageHeader({ title, description, actions, eyebrow }: { title: string; description?: React.ReactNode; actions?: React.ReactNode; eyebrow?: string }) {
  return (
    <div className="mb-5 flex flex-wrap items-end justify-between gap-3">
      <div className="min-w-0">
        {eyebrow ? <div className="eyebrow mb-1">{eyebrow}</div> : null}
        <h1 className="text-xl font-semibold tracking-tight sm:text-2xl">{title}</h1>
        {description ? <p className="mt-1 max-w-2xl text-[13px] text-fg-3">{description}</p> : null}
      </div>
      {actions ? <div className="flex flex-wrap items-center gap-2">{actions}</div> : null}
    </div>
  );
}

export function RefreshButton({ onClick, loading, label = "Refresh", size = "sm" }: { onClick: () => void; loading?: boolean; label?: string; size?: "sm" | "md" }) {
  return (
    <Button variant="outline" size={size} onClick={onClick} disabled={loading} aria-label={label} title={label}>
      <RefreshCw className={cn("h-3.5 w-3.5", loading && "animate-spin")} />
      <span className="hidden sm:inline">{label}</span>
    </Button>
  );
}

/* ---------------------------------------------------------------- panel */

export function Panel({ title, description, actions, children, className, padded = true, tone }: { title?: React.ReactNode; description?: React.ReactNode; actions?: React.ReactNode; children: React.ReactNode; className?: string; padded?: boolean; tone?: "danger" | "success" }) {
  return (
    <section className={cn("surface rounded-md", tone === "danger" && "border-danger/30", tone === "success" && "border-success/30", className)}>
      {title || actions ? (
        <header className="flex flex-wrap items-center justify-between gap-2 border-b border-line px-4 py-2.5">
          <div className="min-w-0">
            <h2 className="text-[13px] font-semibold tracking-tight">{title}</h2>
            {description ? <p className="text-[12px] text-fg-3">{description}</p> : null}
          </div>
          {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
        </header>
      ) : null}
      <div className={cn(padded && "p-4")}>{children}</div>
    </section>
  );
}

/* ------------------------------------------------------------- stat tile */

export function StatTile({ label, value, sub, tone = "neutral", icon, className, compact }: { label: string; value: React.ReactNode; sub?: React.ReactNode; tone?: "neutral" | "accent" | "success" | "danger" | "info"; icon?: React.ReactNode; className?: string; compact?: boolean }) {
  const valueTone = { neutral: "text-fg", accent: "text-accent-2", success: "text-success", danger: "text-danger", info: "text-info" }[tone];
  return (
    <div className={cn("surface rounded-md px-4 py-3", className)}>
      <div className="flex items-center justify-between gap-2">
        <div className="truncate text-[12px] font-medium text-fg-3">{label}</div>
        {icon ? <span className="text-fg-4">{icon}</span> : null}
      </div>
      <div className={cn("mt-1 font-semibold tracking-tight", compact ? "text-lg" : "text-2xl", valueTone)} style={{ fontVariantNumeric: "proportional-nums" }}>
        {value}
      </div>
      {sub ? <div className="mt-0.5 truncate text-[12px] text-fg-3">{sub}</div> : null}
    </div>
  );
}

export function StatGrid({ children, cols = 4, className }: { children: React.ReactNode; cols?: 3 | 4 | 5 | 6; className?: string }) {
  const c = { 3: "sm:grid-cols-3", 4: "sm:grid-cols-2 lg:grid-cols-4", 5: "sm:grid-cols-3 xl:grid-cols-5", 6: "sm:grid-cols-3 xl:grid-cols-6" }[cols];
  return <div className={cn("grid grid-cols-2 gap-3", c, className)}>{children}</div>;
}

/* ------------------------------------------------------------------ pills */

type PillTone = "neutral" | "accent" | "success" | "danger" | "info" | "warn" | "muted";

export function Pill({ tone = "neutral", children, className, dot }: { tone?: PillTone; children: React.ReactNode; className?: string; dot?: boolean }) {
  const tones: Record<PillTone, string> = {
    neutral: "bg-surface-2 text-fg-2 border-line",
    muted: "bg-transparent text-fg-3 border-line",
    accent: "bg-accent-soft text-accent-2 border-accent/30",
    success: "bg-success/10 text-success border-success/30",
    danger: "bg-danger/10 text-danger border-danger/30",
    info: "bg-info/10 text-info border-info/30",
    warn: "bg-[#ffb454]/10 text-[#ffc46b] border-[#ffb454]/30",
  };
  return (
    <span className={cn("inline-flex items-center gap-1.5 rounded-full border px-2 py-[2px] text-[11px] font-semibold uppercase tracking-wider whitespace-nowrap", tones[tone], className)}>
      {dot ? <span className="h-1.5 w-1.5 rounded-full bg-current" /> : null}
      {children}
    </span>
  );
}

export const LIFECYCLE_TONE: Record<GameLifecycle, PillTone> = { draft: "muted", simulation: "info", approved: "accent", staging: "warn", published: "success", disabled: "danger" };

export function LifecyclePill({ lifecycle }: { lifecycle: GameLifecycle | string }) {
  const tone = (LIFECYCLE_TONE as Record<string, PillTone>)[lifecycle] ?? "neutral";
  return <Pill tone={tone}>{lifecycle}</Pill>;
}

export function UserStatusPill({ status }: { status: string }) {
  const tone: PillTone = status === "active" ? "success" : status === "suspended" ? "danger" : "muted";
  return (
    <Pill tone={tone} dot>
      {status}
    </Pill>
  );
}

export function SeverityPill({ severity }: { severity: string }) {
  const tone: PillTone = severity === "high" ? "danger" : severity === "warn" ? "warn" : "muted";
  return <Pill tone={tone}>{severity}</Pill>;
}

export function PassFail({ pass, label }: { pass: boolean; label?: string }) {
  return <Pill tone={pass ? "success" : "danger"}>{label ?? (pass ? "PASS" : "FAIL")}</Pill>;
}

/* ------------------------------------------------------------ data table */

export interface Column<T> {
  key: string;
  header: React.ReactNode;
  render: (row: T) => React.ReactNode;
  align?: "left" | "right" | "center";
  width?: string;
  /** Provide to make the column sortable (client-side). */
  sortValue?: (row: T) => number | string | null;
  className?: string;
  mono?: boolean;
}

export interface SortState {
  key: string;
  dir: "asc" | "desc";
}

export function useSort<T>(rows: T[] | null | undefined, columns: Column<T>[], initial?: SortState) {
  const [sort, setSort] = React.useState<SortState | null>(initial ?? null);
  const sorted = React.useMemo(() => {
    if (!rows) return [];
    if (!sort) return rows;
    const col = columns.find((c) => c.key === sort.key);
    if (!col?.sortValue) return rows;
    const sv = col.sortValue;
    return rows
      .map((r, i) => ({ r, i, v: sv(r) }))
      .sort((a, b) => {
        const av = a.v;
        const bv = b.v;
        if (av === null || av === undefined) return 1;
        if (bv === null || bv === undefined) return -1;
        const c = typeof av === "number" && typeof bv === "number" ? av - bv : String(av).localeCompare(String(bv));
        return (sort.dir === "asc" ? c : -c) || a.i - b.i;
      })
      .map((x) => x.r);
  }, [rows, sort, columns]);
  const toggle = React.useCallback((key: string) => {
    setSort((s) => (s?.key === key ? (s.dir === "desc" ? { key, dir: "asc" } : null) : { key, dir: "desc" }));
  }, []);
  return { sorted, sort, toggle };
}

export function DataTable<T>({ columns, rows, rowKey, onRowClick, empty, className, sort, onSort, stale, dense, footer, rowClassName }: { columns: Column<T>[]; rows: T[]; rowKey: (row: T) => string; onRowClick?: (row: T) => void; empty?: React.ReactNode; className?: string; sort?: SortState | null; onSort?: (key: string) => void; stale?: boolean; dense?: boolean; footer?: React.ReactNode; rowClassName?: (row: T) => string | undefined }) {
  const alignCls = (a?: Column<T>["align"]) => (a === "right" ? "text-right" : a === "center" ? "text-center" : "text-left");
  return (
    <div className={cn("overflow-x-auto", stale && "opacity-60 transition-opacity", className)}>
      <table className="w-full min-w-[640px] border-collapse text-[13px]">
        <thead>
          <tr className="border-b border-line">
            {columns.map((c) => {
              const sortable = !!(c.sortValue && onSort);
              const active = sort?.key === c.key;
              return (
                <th key={c.key} scope="col" style={{ width: c.width }} className={cn("px-3 py-2 text-[11px] font-semibold uppercase tracking-wider text-fg-3 whitespace-nowrap", alignCls(c.align), sortable && "cursor-pointer select-none hover:text-fg-2")} onClick={sortable ? () => onSort?.(c.key) : undefined} aria-sort={active ? (sort?.dir === "asc" ? "ascending" : "descending") : undefined}>
                  <span className={cn("inline-flex items-center gap-1", c.align === "right" && "flex-row-reverse")}>
                    {c.header}
                    {sortable ? active ? sort?.dir === "asc" ? <ArrowUp className="h-3 w-3" /> : <ArrowDown className="h-3 w-3" /> : <ArrowUpDown className="h-3 w-3 opacity-40" /> : null}
                  </span>
                </th>
              );
            })}
          </tr>
        </thead>
        <tbody>
          {rows.length === 0 ? (
            <tr>
              <td colSpan={columns.length} className="px-3 py-10 text-center text-[13px] text-fg-3">
                {empty ?? "Nothing to show."}
              </td>
            </tr>
          ) : (
            rows.map((r) => (
              <tr key={rowKey(r)} onClick={onRowClick ? () => onRowClick(r) : undefined} className={cn("border-b border-line/60 last:border-0", onRowClick && "cursor-pointer hover:bg-surface-2", rowClassName?.(r))}>
                {columns.map((c) => (
                  <td key={c.key} className={cn("px-3 align-middle", dense ? "py-1.5" : "py-2", alignCls(c.align), c.mono && "font-mono text-[12px]", (c.align === "right" || c.mono) && "tabular", c.className)}>
                    {c.render(r)}
                  </td>
                ))}
              </tr>
            ))
          )}
        </tbody>
        {footer ? <tfoot>{footer}</tfoot> : null}
      </table>
    </div>
  );
}

export function TableSkeleton({ rows = 6, cols = 5 }: { rows?: number; cols?: number }) {
  return (
    <div className="space-y-2 p-3" aria-busy>
      <div className="flex gap-3">
        {Array.from({ length: cols }).map((_, i) => (
          <Skeleton key={i} className="h-3 flex-1" />
        ))}
      </div>
      {Array.from({ length: rows }).map((_, i) => (
        <div key={i} className="flex gap-3">
          {Array.from({ length: cols }).map((_, j) => (
            <Skeleton key={j} className="h-5 flex-1" />
          ))}
        </div>
      ))}
    </div>
  );
}

export function TileSkeleton({ count = 4, cols = 4 }: { count?: number; cols?: 3 | 4 | 5 | 6 }) {
  return (
    <StatGrid cols={cols}>
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} className="surface rounded-md px-4 py-3">
          <Skeleton className="h-3 w-24" />
          <Skeleton className="mt-2 h-7 w-20" />
        </div>
      ))}
    </StatGrid>
  );
}

export function ChartSkeleton({ height = 220 }: { height?: number }) {
  return (
    <div style={{ height }} className="w-full">
      <Skeleton className="h-full w-full" />
    </div>
  );
}

/* --------------------------------------------------------- state blocks */

export function ErrorState({ error, onRetry, title = "Couldn't load this view" }: { error: ApiClientError | Error | string | null; onRetry?: () => void; title?: string }) {
  const msg = typeof error === "string" ? error : error ? describeError(error) : "";
  return (
    <div className="surface flex flex-col items-center gap-3 rounded-md border-danger/30 px-6 py-10 text-center">
      <div className="grid h-10 w-10 place-items-center rounded-full bg-danger/10 text-danger">
        <AlertTriangle className="h-5 w-5" />
      </div>
      <div>
        <div className="text-[15px] font-semibold">{title}</div>
        {msg ? <div className="mt-1 text-[13px] text-fg-3">{msg}</div> : null}
      </div>
      {onRetry ? (
        <Button variant="outline" size="sm" onClick={onRetry}>
          <RefreshCw className="h-3.5 w-3.5" /> Try again
        </Button>
      ) : null}
    </div>
  );
}

export function EmptyState({ title, description, action, className }: { title: string; description?: string; action?: React.ReactNode; className?: string }) {
  return (
    <div className={cn("flex flex-col items-center gap-2 px-6 py-10 text-center", className)}>
      <div className="grid h-10 w-10 place-items-center rounded-full bg-surface-2 text-fg-3">
        <Inbox className="h-5 w-5" />
      </div>
      <div className="text-[14px] font-semibold">{title}</div>
      {description ? <p className="max-w-sm text-[13px] text-fg-3">{description}</p> : null}
      {action ? <div className="mt-2">{action}</div> : null}
    </div>
  );
}

export function InlineError({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex items-start gap-2 rounded-sm border border-danger/30 bg-danger/10 px-3 py-2 text-[13px] text-danger">
      <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
      <span>{children}</span>
    </div>
  );
}

/* ------------------------------------------------------------- KV list */

export function KV({ items, className, cols = 2 }: { items: { label: string; value: React.ReactNode; mono?: boolean }[]; className?: string; cols?: 1 | 2 | 3 }) {
  return (
    <dl className={cn("grid gap-x-6 gap-y-2.5", cols === 1 ? "grid-cols-1" : cols === 3 ? "grid-cols-2 sm:grid-cols-3" : "grid-cols-2", className)}>
      {items.map((it) => (
        <div key={it.label} className="min-w-0">
          <dt className="text-[11px] font-medium uppercase tracking-wider text-fg-4">{it.label}</dt>
          <dd className={cn("mt-0.5 truncate text-[13px] text-fg", it.mono && "font-mono text-[12px]")}>{it.value}</dd>
        </div>
      ))}
    </dl>
  );
}

/* ------------------------------------------------------- dense controls */

export const denseControl = "h-9 rounded-sm border border-line-2 bg-bg-1 px-2.5 text-[13px] text-fg placeholder:text-fg-4 focus-ring focus:border-accent/60 disabled:opacity-50";

export const DenseInput = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(function DenseInput({ className, ...props }, ref) {
  return <input ref={ref} className={cn(denseControl, "w-full", className)} style={{ fontSize: 13 }} {...props} />;
});

export function DenseSelect({ className, children, ...props }: React.SelectHTMLAttributes<HTMLSelectElement>) {
  return (
    <div className={cn("relative inline-flex", className)}>
      <select className={cn(denseControl, "w-full appearance-none pr-8")} style={{ fontSize: 13 }} {...props}>
        {children}
      </select>
      <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-fg-3" />
    </div>
  );
}

export function DenseTextarea({ className, ...props }: React.TextareaHTMLAttributes<HTMLTextAreaElement>) {
  return <textarea className={cn(denseControl, "h-auto w-full py-2 leading-relaxed", className)} style={{ fontSize: 13 }} {...props} />;
}

export function FieldLabel({ children, hint, className }: { children: React.ReactNode; hint?: React.ReactNode; className?: string }) {
  return (
    <div className={cn("mb-1.5 flex items-baseline justify-between gap-2", className)}>
      <span className="text-[12px] font-medium text-fg-2">{children}</span>
      {hint ? <span className="text-[11px] text-fg-4">{hint}</span> : null}
    </div>
  );
}

/** Compact switch for table cells and setting rows. */
export function Toggle({ checked, onChange, disabled, label, size = "sm" }: { checked: boolean; onChange: (v: boolean) => void; disabled?: boolean; label: string; size?: "sm" | "md" }) {
  const dims = size === "sm" ? { track: "h-5 w-9", knob: "h-4 w-4", on: "translate-x-[18px]", off: "translate-x-0.5" } : { track: "h-6 w-11", knob: "h-5 w-5", on: "translate-x-[22px]", off: "translate-x-0.5" };
  return (
    <button type="button" role="switch" aria-checked={checked} aria-label={label} disabled={disabled} onClick={() => onChange(!checked)} className={cn("relative inline-flex shrink-0 items-center rounded-full border transition-colors focus-ring disabled:opacity-50", dims.track, checked ? "border-accent bg-accent" : "border-line-2 bg-surface-3")}>
      <span className={cn("absolute top-1/2 -translate-y-1/2 rounded-full bg-white shadow transition-transform", dims.knob, checked ? dims.on : dims.off)} />
    </button>
  );
}

export function SegmentedControl<T extends string | number>({ value, onChange, items, className, size = "sm" }: { value: T; onChange: (v: T) => void; items: { value: T; label: string }[]; className?: string; size?: "sm" | "xs" }) {
  return (
    <div className={cn("inline-flex rounded-sm border border-line bg-surface p-0.5", className)} role="radiogroup">
      {items.map((it) => (
        <button key={String(it.value)} type="button" role="radio" aria-checked={value === it.value} onClick={() => onChange(it.value)} className={cn("rounded-[6px] font-semibold transition-colors focus-ring", size === "xs" ? "h-7 px-2 text-[11px]" : "h-8 px-3 text-[12px]", value === it.value ? "bg-surface-3 text-fg shadow" : "text-fg-3 hover:text-fg-2")}>
          {it.label}
        </button>
      ))}
    </div>
  );
}

/* --------------------------------------------------------- JSON toggle */

export function JsonToggle({ value, label = "meta" }: { value: unknown; label?: string }) {
  const [open, setOpen] = React.useState(false);
  if (value === null || value === undefined || (typeof value === "object" && Object.keys(value as object).length === 0)) return <span className="text-fg-4">—</span>;
  const keys = typeof value === "object" ? Object.keys(value as object).length : 1;
  return (
    <div className="min-w-0">
      <button type="button" onClick={() => setOpen((o) => !o)} className="inline-flex items-center gap-1 text-[12px] text-fg-3 hover:text-fg focus-ring rounded-xs" aria-expanded={open}>
        <ChevronRight className={cn("h-3 w-3 transition-transform", open && "rotate-90")} />
        {label} <span className="text-fg-4">({keys})</span>
      </button>
      {open ? <pre className="mt-1 max-h-64 max-w-[520px] overflow-auto rounded-xs border border-line bg-bg-1 p-2 font-mono text-[11px] leading-relaxed text-fg-2">{JSON.stringify(value, null, 2)}</pre> : null}
    </div>
  );
}

/* ------------------------------------------------------ confirm dialog */

export function ConfirmDialog({ open, onClose, onConfirm, title, description, confirmLabel = "Confirm", danger, loading, children, disabled }: { open: boolean; onClose: () => void; onConfirm: () => void; title: string; description?: React.ReactNode; confirmLabel?: string; danger?: boolean; loading?: boolean; children?: React.ReactNode; disabled?: boolean }) {
  return (
    <Sheet open={open} onClose={onClose} title={title} side="center">
      {description ? <p className="text-[13px] text-fg-2">{description}</p> : null}
      {children ? <div className="mt-4">{children}</div> : null}
      <div className="mt-6 flex justify-end gap-2">
        <Button variant="ghost" size="sm" onClick={onClose} disabled={loading}>
          Cancel
        </Button>
        <Button variant={danger ? "danger" : "primary"} size="sm" onClick={onConfirm} loading={loading} disabled={disabled}>
          {confirmLabel}
        </Button>
      </div>
    </Sheet>
  );
}

/* ---------------------------------------------------------- misc bits */

export function Mono({ children, className, title }: { children: React.ReactNode; className?: string; title?: string }) {
  return (
    <span className={cn("font-mono text-[12px] text-fg-2", className)} title={title}>
      {children}
    </span>
  );
}

export function Delta({ value, digits = 2, invert }: { value: number | null | undefined; digits?: number; invert?: boolean }) {
  if (value === null || value === undefined || !Number.isFinite(value)) return <span className="text-fg-4">—</span>;
  const good = invert ? value <= 0 : value >= 0;
  return (
    <span className={cn("tabular", value === 0 ? "text-fg-3" : good ? "text-success" : "text-danger")}>
      {value > 0 ? "+" : ""}
      {(value * 100).toFixed(digits)}%
    </span>
  );
}

export function Pagination({ offset, limit, total, onChange }: { offset: number; limit: number; total: number; onChange: (offset: number) => void }) {
  const from = total === 0 ? 0 : offset + 1;
  const to = Math.min(total, offset + limit);
  return (
    <div className="flex items-center justify-between gap-3 border-t border-line px-3 py-2 text-[12px] text-fg-3">
      <span className="tabular">
        {from.toLocaleString("en-US")}–{to.toLocaleString("en-US")} of {total.toLocaleString("en-US")}
      </span>
      <div className="flex gap-1">
        <Button variant="ghost" size="sm" disabled={offset === 0} onClick={() => onChange(Math.max(0, offset - limit))}>
          Previous
        </Button>
        <Button variant="ghost" size="sm" disabled={offset + limit >= total} onClick={() => onChange(offset + limit)}>
          Next
        </Button>
      </div>
    </div>
  );
}