"use client";
import { Loader2, X } from "lucide-react";
import { useEffect, useId, type ReactNode } from "react";

export const cx = (...a: (string | false | null | undefined)[]) => a.filter(Boolean).join(" ");

export function Card({ title, subtitle, actions, children, className, id }: { title?: ReactNode; subtitle?: ReactNode; actions?: ReactNode; children: ReactNode; className?: string; id?: string }) {
  return (
    <section id={id} className={cx("rounded-lg border border-line bg-bg-elev print-card", className)}>
      {(title || actions) && (
        <header className="flex items-start justify-between gap-3 border-b border-line px-4 py-3">
          <div>
            {title && <h2 className="text-sm font-semibold text-fg">{title}</h2>}
            {subtitle && <p className="mt-0.5 text-xs text-fg-muted">{subtitle}</p>}
          </div>
          {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
        </header>
      )}
      <div className="p-4">{children}</div>
    </section>
  );
}

export function Tile({ label, value, sub, tone }: { label: string; value: ReactNode; sub?: ReactNode; tone?: "up" | "down" | "warn" | "muted" }) {
  const t = tone === "up" ? "text-up" : tone === "down" ? "text-down" : tone === "warn" ? "text-warn" : tone === "muted" ? "text-fg-muted" : "text-fg";
  return (
    <div className="rounded-lg border border-line bg-bg-elev px-4 py-3">
      <div className="text-xs uppercase tracking-wide text-fg-dim">{label}</div>
      <div className={cx("mt-1 text-xl font-semibold num", t)}>{value}</div>
      {sub && <div className="mt-0.5 text-xs text-fg-muted">{sub}</div>}
    </div>
  );
}

type BtnProps = React.ButtonHTMLAttributes<HTMLButtonElement> & { variant?: "primary" | "ghost" | "danger" | "outline"; size?: "sm" | "md"; loading?: boolean };
export function Button({ variant = "outline", size = "md", loading, className, children, disabled, ...rest }: BtnProps) {
  const v =
    variant === "primary" ? "bg-accent text-white hover:bg-accent/90 border-transparent" :
    variant === "danger" ? "bg-down text-white hover:bg-down/90 border-transparent" :
    variant === "ghost" ? "border-transparent hover:bg-bg-sub text-fg-muted hover:text-fg" :
    "border-line-strong bg-bg-sub hover:bg-line text-fg";
  const s = size === "sm" ? "h-7 px-2.5 text-xs" : "h-9 px-3.5 text-sm";
  return (
    <button {...rest} disabled={disabled || loading} className={cx("inline-flex items-center justify-center gap-1.5 rounded-md border font-medium transition disabled:cursor-not-allowed disabled:opacity-50", v, s, className)}>
      {loading && <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden />}
      {children}
    </button>
  );
}

export function Field({ label, hint, children, htmlFor }: { label: ReactNode; hint?: ReactNode; children: ReactNode; htmlFor?: string }) {
  return (
    <label htmlFor={htmlFor} className="block text-xs">
      <span className="mb-1 block font-medium text-fg-muted">{label}</span>
      {children}
      {hint && <span className="mt-1 block text-[11px] text-fg-dim">{hint}</span>}
    </label>
  );
}

const inputCls = "h-9 w-full rounded-md border border-line-strong bg-bg px-2.5 text-sm text-fg placeholder:text-fg-dim focus:border-accent";
export function Input(props: React.InputHTMLAttributes<HTMLInputElement>) {
  return <input {...props} className={cx(inputCls, props.type === "number" && "num", props.className)} />;
}
export function Select(props: React.SelectHTMLAttributes<HTMLSelectElement>) {
  return <select {...props} className={cx(inputCls, props.className)} />;
}
export function Textarea(props: React.TextareaHTMLAttributes<HTMLTextAreaElement>) {
  return <textarea {...props} className={cx("w-full rounded-md border border-line-strong bg-bg px-2.5 py-2 font-mono text-xs text-fg focus:border-accent", props.className)} />;
}

export function Badge({ children, tone = "muted", className }: { children: ReactNode; tone?: "up" | "down" | "warn" | "muted" | "accent" | "live"; className?: string }) {
  const t = {
    up: "bg-up/15 text-up border-up/30",
    down: "bg-down/15 text-down border-down/30",
    warn: "bg-warn/15 text-warn border-warn/30",
    muted: "bg-bg-sub text-fg-muted border-line-strong",
    accent: "bg-accent-soft text-accent border-accent/40",
    live: "bg-live text-white border-live",
  }[tone];
  return <span className={cx("inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-[11px] font-medium uppercase tracking-wide", t, className)}>{children}</span>;
}

export function Dot({ ok, className }: { ok: boolean | null | undefined; className?: string }) {
  return <span aria-hidden className={cx("inline-block h-2 w-2 rounded-full", ok === true ? "bg-up" : ok === false ? "bg-down" : "bg-fg-dim", className)} />;
}

export function Spinner({ label = "Loading…" }: { label?: string }) {
  return (
    <div className="flex items-center gap-2 py-6 text-sm text-fg-muted" role="status">
      <Loader2 className="h-4 w-4 animate-spin" aria-hidden /> {label}
    </div>
  );
}

export function Empty({ title, children }: { title: string; children?: ReactNode }) {
  return (
    <div className="rounded-md border border-dashed border-line-strong px-4 py-6 text-center">
      <div className="text-sm font-medium text-fg-muted">{title}</div>
      {children && <div className="mt-1 text-xs text-fg-dim">{children}</div>}
    </div>
  );
}

export function ErrorBox({ error }: { error: unknown }) {
  const msg = error instanceof Error ? error.message : String(error);
  return <div role="alert" className="rounded-md border border-down/40 bg-down/10 px-3 py-2 text-xs text-down">{msg}</div>;
}

export function Table({ children, className }: { children: ReactNode; className?: string }) {
  return (
    <div className={cx("overflow-x-auto scroll-thin", className)}>
      <table className="w-full border-collapse text-xs">{children}</table>
    </div>
  );
}
export function Th({ children, className, align = "left", scope = "col" }: { children?: ReactNode; className?: string; align?: "left" | "right" | "center"; scope?: "col" | "row" }) {
  return <th scope={scope} className={cx("border-b border-line px-2 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-fg-dim", align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left", className)}>{children}</th>;
}
export function Td({ children, className, align = "left", num, title }: { children?: ReactNode; className?: string; align?: "left" | "right" | "center"; num?: boolean; title?: string }) {
  return <td title={title} className={cx("border-b border-line/60 px-2 py-1.5 align-middle", align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left", num && "num", className)}>{children}</td>;
}

export function Dialog({ open, onClose, title, children, footer }: { open: boolean; onClose: () => void; title: string; children: ReactNode; footer?: ReactNode }) {
  const id = useId();
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" onClick={onClose}>
      <div role="dialog" aria-modal="true" aria-labelledby={id} className="w-full max-w-md rounded-lg border border-line-strong bg-bg-elev shadow-xl" onClick={(e) => e.stopPropagation()}>
        <header className="flex items-center justify-between border-b border-line px-4 py-3">
          <h2 id={id} className="text-sm font-semibold">{title}</h2>
          <button onClick={onClose} aria-label="Close" className="rounded p-1 text-fg-muted hover:bg-bg-sub hover:text-fg"><X className="h-4 w-4" /></button>
        </header>
        <div className="px-4 py-3 text-sm">{children}</div>
        {footer && <footer className="flex justify-end gap-2 border-t border-line px-4 py-3">{footer}</footer>}
      </div>
    </div>
  );
}

export function PageHeader({ title, subtitle, actions }: { title: string; subtitle?: ReactNode; actions?: ReactNode }) {
  return (
    <div className="mb-4 flex flex-wrap items-end justify-between gap-3">
      <div>
        <h1 className="text-lg font-semibold text-fg">{title}</h1>
        {subtitle && <p className="mt-0.5 text-xs text-fg-muted">{subtitle}</p>}
      </div>
      {actions && <div className="flex items-center gap-2">{actions}</div>}
    </div>
  );
}

export function KV({ items }: { items: [ReactNode, ReactNode][] }) {
  return (
    <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
      {items.map(([k, v], i) => (
        <div key={i} className="contents">
          <dt className="text-fg-dim">{k}</dt>
          <dd className="num break-all text-fg">{v}</dd>
        </div>
      ))}
    </dl>
  );
}