"use client";

import { useEffect, useState } from "react";
import type { Compat } from "@/lib/types";

export function Pill({ tone = "neutral", children, title }: { tone?: "neutral" | "good" | "warn" | "bad" | "accent" | "violet"; children: React.ReactNode; title?: string }) {
  const map: Record<string, string> = {
    neutral: "bg-surface-3 text-ink-2 border-border-strong",
    good: "bg-[#12301f] text-[#5fd39a] border-[#1f4a31]",
    warn: "bg-[#33260a] text-[#f0b23a] border-[#5a4210]",
    bad: "bg-[#3a1717] text-[#ff8a8a] border-[#5a2b2b]",
    accent: "bg-[#12294a] text-[#7db3ff] border-[#1e3f6e]",
    violet: "bg-[#241f4a] text-[#b9b0ff] border-[#3a3380]",
  };
  return (
    <span className={`pill ${map[tone]}`} title={title}>
      {children}
    </span>
  );
}

export function StatusPill({ status }: { status: string }) {
  const s = status || "unloaded";
  if (s === "ready") return <Pill tone="good"><Dot className="bg-good" /> Loaded</Pill>;
  if (s === "unloaded") return <Pill tone="neutral"><Dot className="bg-ink-3" /> Unloaded</Pill>;
  if (s === "error") return <Pill tone="bad"><Dot className="bg-bad" /> Error</Pill>;
  if (s === "unloading" || s === "unloading_previous") return <Pill tone="warn"><Dot className="bg-warn pulse" /> Unloading…</Pill>;
  return <Pill tone="accent"><Dot className="bg-accent pulse" /> {s === "queued" ? "Queued" : s === "warming" ? "Warming up" : "Loading…"}</Pill>;
}

export function CompatPill({ status, reason }: { status: Compat | string | null; reason?: string | null }) {
  const t = reason || undefined;
  switch (status) {
    case "compatible": return <Pill tone="good" title={t}>Compatible</Pill>;
    case "compatible_with_restrictions": return <Pill tone="accent" title={t}>Restricted</Pill>;
    case "experimental": return <Pill tone="violet" title={t}>Experimental</Pill>;
    case "not_recommended": return <Pill tone="warn" title={t}>Not recommended</Pill>;
    case "incompatible": return <Pill tone="bad" title={t}>Incompatible</Pill>;
    default: return <Pill title={t}>Unknown</Pill>;
  }
}

export function SizePill({ cls }: { cls: string | null }) {
  const tone = cls === "TOO_LARGE" ? "bad" : cls === "XL" ? "warn" : cls === "LARGE" ? "accent" : "neutral";
  return <Pill tone={tone}>{cls || "—"}</Pill>;
}

export function Dot({ className = "" }: { className?: string }) {
  return <span className={`inline-block h-1.5 w-1.5 rounded-full ${className}`} />;
}

export function StatTile({ label, value, sub, accent, children }: { label: string; value: React.ReactNode; sub?: React.ReactNode; accent?: string; children?: React.ReactNode }) {
  return (
    <div className="card p-4 flex flex-col gap-1 min-w-0">
      <div className="label">{label}</div>
      <div className="text-[22px] font-semibold tracking-tight num truncate" style={accent ? { color: accent } : undefined}>{value}</div>
      {sub && <div className="text-xs text-ink-3 truncate">{sub}</div>}
      {children}
    </div>
  );
}

export function Meter({ value, max, tone = "accent", height = 6 }: { value: number; max: number; tone?: "accent" | "good" | "warn" | "bad"; height?: number }) {
  const pct = max > 0 ? Math.max(0, Math.min(100, (value / max) * 100)) : 0;
  const color = { accent: "var(--color-accent)", good: "var(--color-good)", warn: "var(--color-warn)", bad: "var(--color-bad)" }[tone];
  return (
    <div className="w-full rounded-full bg-surface-3 overflow-hidden" style={{ height }} role="meter" aria-valuenow={value} aria-valuemin={0} aria-valuemax={max}>
      <div className="h-full rounded-full transition-[width] duration-500" style={{ width: `${pct}%`, background: color }} />
    </div>
  );
}

export function Progress({ value }: { value: number }) {
  return <Meter value={Math.round(value * 100)} max={100} />;
}

/** Tiny SVG sparkline (single series, no axes) with a hover tooltip. */
export function Sparkline({ data, color = "var(--series-1)", height = 44, max, unit = "" }: { data: number[]; color?: string; height?: number; max?: number; unit?: string }) {
  const [hover, setHover] = useState<number | null>(null);
  const w = 240;
  if (!data.length) return <div style={{ height }} className="text-xs text-ink-3 flex items-center">no data yet</div>;
  const mx = max ?? Math.max(...data, 1);
  const mn = 0;
  const pts = data.map((v, i) => {
    const x = (i / Math.max(1, data.length - 1)) * w;
    const y = height - 3 - ((v - mn) / (mx - mn || 1)) * (height - 6);
    return [x, y];
  });
  const path = pts.map((p, i) => `${i ? "L" : "M"}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(" ");
  const area = `${path} L${w},${height} L0,${height} Z`;
  return (
    <div className="relative w-full" style={{ height }}>
      <svg viewBox={`0 0 ${w} ${height}`} preserveAspectRatio="none" className="w-full h-full block"
        onMouseMove={(e) => {
          const r = (e.target as SVGElement).closest("svg")!.getBoundingClientRect();
          const i = Math.round(((e.clientX - r.left) / r.width) * (data.length - 1));
          setHover(Math.max(0, Math.min(data.length - 1, i)));
        }}
        onMouseLeave={() => setHover(null)}>
        <path d={area} fill={color} opacity={0.12} />
        <path d={path} fill="none" stroke={color} strokeWidth={2} vectorEffect="non-scaling-stroke" strokeLinejoin="round" />
        {hover != null && (
          <>
            <line x1={pts[hover][0]} x2={pts[hover][0]} y1={0} y2={height} stroke="var(--color-border-strong)" strokeWidth={1} vectorEffect="non-scaling-stroke" />
            <circle cx={pts[hover][0]} cy={pts[hover][1]} r={3.5} fill={color} stroke="var(--color-surface)" strokeWidth={2} vectorEffect="non-scaling-stroke" />
          </>
        )}
      </svg>
      {hover != null && (
        <div className="absolute -top-1 right-0 text-[11px] num text-ink-2 bg-surface-2 border border-border px-1.5 py-0.5 rounded">
          {data[hover].toFixed(unit === "%" ? 0 : 1)}{unit}
        </div>
      )}
    </div>
  );
}

export function Spinner({ size = 14 }: { size?: number }) {
  return (
    <svg className="spin" width={size} height={size} viewBox="0 0 24 24" fill="none" aria-label="loading">
      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeOpacity="0.25" strokeWidth="3" />
      <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
    </svg>
  );
}

export function PageHeader({ title, sub, actions }: { title: string; sub?: React.ReactNode; actions?: React.ReactNode }) {
  return (
    <div className="flex flex-wrap items-start justify-between gap-3 mb-5">
      <div>
        <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
        {sub && <div className="text-sm text-ink-3 mt-0.5">{sub}</div>}
      </div>
      {actions && <div className="flex items-center gap-2 flex-wrap">{actions}</div>}
    </div>
  );
}

export function Empty({ title, sub, action }: { title: string; sub?: string; action?: React.ReactNode }) {
  return (
    <div className="card p-10 text-center">
      <div className="text-sm font-medium">{title}</div>
      {sub && <div className="text-xs text-ink-3 mt-1">{sub}</div>}
      {action && <div className="mt-4">{action}</div>}
    </div>
  );
}

export function Modal({ open, onClose, title, children, width = 520 }: { open: boolean; onClose: () => void; title: string; children: React.ReactNode; width?: number }) {
  useEffect(() => {
    if (!open) return;
    const h = (e: KeyboardEvent) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/60 p-0 sm:p-6" onClick={onClose} role="dialog" aria-modal="true">
      <div className="card w-full sm:max-w-[var(--w)] max-h-[90vh] overflow-auto rounded-b-none sm:rounded-b-[12px]" style={{ ["--w" as string]: `${width}px` }} onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center justify-between px-5 py-3 border-b border-border">
          <div className="font-medium">{title}</div>
          <button className="btn btn-ghost btn-sm" onClick={onClose} aria-label="Close">✕</button>
        </div>
        <div className="p-5">{children}</div>
      </div>
    </div>
  );
}

export function Toggle({ checked, onChange, label }: { checked: boolean; onChange: (v: boolean) => void; label?: string }) {
  return (
    <label className="inline-flex items-center gap-2 cursor-pointer select-none">
      <span role="switch" aria-checked={checked} tabIndex={0} onKeyDown={(e) => (e.key === " " || e.key === "Enter") && onChange(!checked)}
        onClick={() => onChange(!checked)}
        className={`relative inline-block w-9 h-5 rounded-full transition-colors ${checked ? "bg-accent" : "bg-surface-3 border border-border-strong"}`}>
        <span className={`absolute top-0.5 h-4 w-4 rounded-full bg-white transition-transform ${checked ? "translate-x-4" : "translate-x-0.5"}`} />
      </span>
      {label && <span className="text-sm">{label}</span>}
    </label>
  );
}

export function Tabs<T extends string>({ tabs, value, onChange }: { tabs: { id: T; label: string; count?: number }[]; value: T; onChange: (v: T) => void }) {
  return (
    <div className="flex gap-1 border-b border-border overflow-x-auto">
      {tabs.map((t) => (
        <button key={t.id} onClick={() => onChange(t.id)}
          className={`px-3 py-2 text-sm whitespace-nowrap border-b-2 -mb-px transition-colors ${value === t.id ? "border-accent text-ink" : "border-transparent text-ink-3 hover:text-ink-2"}`}>
          {t.label}{t.count != null && <span className="ml-1.5 text-xs text-ink-3 num">{t.count}</span>}
        </button>
      ))}
    </div>
  );
}

export function useToast() {
  const [toasts, setToasts] = useState<{ id: number; text: string; tone: "good" | "bad" | "neutral" }[]>([]);
  const push = (text: string, tone: "good" | "bad" | "neutral" = "neutral") => {
    const id = Date.now() + Math.random();
    setToasts((t) => [...t, { id, text, tone }]);
    setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 4500);
  };
  const view = (
    <div className="fixed bottom-4 right-4 z-[60] flex flex-col gap-2 max-w-sm">
      {toasts.map((t) => (
        <div key={t.id} className={`card px-4 py-2.5 text-sm shadow-xl ${t.tone === "bad" ? "border-[#5a2b2b]" : t.tone === "good" ? "border-[#1f4a31]" : ""}`}>{t.text}</div>
      ))}
    </div>
  );
  return { push, view };
}

export function KV({ k, v, mono }: { k: string; v: React.ReactNode; mono?: boolean }) {
  return (
    <div className="flex justify-between gap-4 py-1.5 border-b border-border last:border-0 text-sm">
      <span className="text-ink-3 shrink-0">{k}</span>
      <span className={`text-right truncate ${mono ? "mono text-xs" : ""}`}>{v ?? "—"}</span>
    </div>
  );
}

export function Code({ children }: { children: string }) {
  const [copied, setCopied] = useState(false);
  return (
    <div className="relative group">
      <pre className="bg-bg border border-border rounded-lg p-3 text-xs overflow-auto mono leading-relaxed">{children}</pre>
      <button className="btn btn-sm btn-ghost absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100"
        onClick={() => { navigator.clipboard.writeText(children); setCopied(true); setTimeout(() => setCopied(false), 1200); }}>
        {copied ? "Copied" : "Copy"}
      </button>
    </div>
  );
}