"use client";

import clsx from "clsx";
import type { ReactNode } from "react";
import { TYPE_COLORS } from "@/lib/format";

export function Panel({ title, sub, right, children, className, pad = true }: { title?: ReactNode; sub?: ReactNode; right?: ReactNode; children: ReactNode; className?: string; pad?: boolean }) {
  return (
    <section className={clsx("panel flex flex-col min-w-0", className)}>
      {(title || right) && (
        <header className="flex items-center gap-3 px-4 py-3 border-b border-line">
          <div className="min-w-0">
            {title && <h2 className="text-[11px] uppercase tracking-[0.18em] text-fg-2 font-medium">{title}</h2>}
            {sub && <p className="text-xs text-dim truncate">{sub}</p>}
          </div>
          {right && <div className="ml-auto shrink-0 text-xs text-dim">{right}</div>}
        </header>
      )}
      <div className={clsx("min-w-0 flex-1", pad && "p-4")}>{children}</div>
    </section>
  );
}

export function Kpi({ label, value, hint, accent = "cyan", spark }: { label: string; value: ReactNode; hint?: ReactNode; accent?: "cyan" | "amber" | "green" | "violet" | "pink" | "red" | "fg"; spark?: number[] }) {
  const color = { cyan: "text-cyan", amber: "text-amber", green: "text-green", violet: "text-violet", pink: "text-pink", red: "text-red", fg: "text-fg" }[accent];
  return (
    <div className="panel p-4 relative overflow-hidden">
      <div className="text-[11px] uppercase tracking-[0.18em] text-dim">{label}</div>
      <div className={clsx("mono text-3xl font-semibold mt-1 tabular-nums", color)}>{value}</div>
      {hint && <div className="text-xs text-fg-2 mt-1">{hint}</div>}
      {spark && spark.length > 1 && <Spark values={spark} className="absolute right-3 bottom-3 h-8 w-24 opacity-70" />}
    </div>
  );
}

export function Spark({ values, className, color = "currentColor" }: { values: number[]; className?: string; color?: string }) {
  const max = Math.max(1, ...values);
  const w = 100;
  const h = 30;
  const pts = values.map((v, i) => `${(i / Math.max(1, values.length - 1)) * w},${h - (v / max) * (h - 2) - 1}`).join(" ");
  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" className={className}>
      <polyline points={pts} fill="none" stroke={color} strokeWidth="1.5" vectorEffect="non-scaling-stroke" />
    </svg>
  );
}

export function Tag({ children, color, className, title }: { children: ReactNode; color?: string; className?: string; title?: string }) {
  const c = color ?? "#6b7a8c";
  return (
    <span title={title} className={clsx("inline-flex items-center rounded-md px-1.5 py-0.5 text-[10.5px] font-medium mono leading-4 whitespace-nowrap", className)} style={{ color: c, background: `${c}1f`, border: `1px solid ${c}33` }}>
      {children}
    </span>
  );
}

export function TypeTag({ type }: { type: string }) {
  return <Tag color={TYPE_COLORS[type] ?? "#6b7a8c"}>{type}</Tag>;
}

export function SurfaceChips({ provenance }: { provenance?: { surface: string; confidence: number; detail?: string }[] | null }) {
  if (!provenance?.length) return <span className="text-dim">—</span>;
  const best = new Map<string, { confidence: number; detail?: string }>();
  for (const p of provenance) if (!best.has(p.surface) || best.get(p.surface)!.confidence < p.confidence) best.set(p.surface, p);
  const colors: Record<string, string> = { network: "#38e1ff", dom: "#43e69a", visual: "#ff7ad9", media: "#9d7bff", accessibility: "#ffb347", navigation: "#6b7a8c" };
  return (
    <span className="inline-flex gap-1 flex-wrap">
      {[...best.entries()].map(([s, p]) => (
        <Tag key={s} color={colors[s] ?? "#6b7a8c"} title={p.detail}>
          {s} {Math.round(p.confidence * 100)}
        </Tag>
      ))}
    </span>
  );
}

export function Bar({ value, color = "#38e1ff", className }: { value: number; color?: string; className?: string }) {
  return (
    <div className={clsx("h-1.5 rounded-full bg-white/5 overflow-hidden", className)}>
      <div className="h-full rounded-full transition-all" style={{ width: `${Math.max(0, Math.min(100, value * 100))}%`, background: color }} />
    </div>
  );
}

export function Empty({ children }: { children: ReactNode }) {
  return <div className="text-sm text-dim py-10 text-center">{children}</div>;
}

export function Skeleton({ rows = 4 }: { rows?: number }) {
  return (
    <div className="space-y-2">
      {Array.from({ length: rows }).map((_, i) => (
        <div key={i} className="skeleton h-4" style={{ width: `${70 + ((i * 13) % 30)}%` }} />
      ))}
    </div>
  );
}

export function Table({ head, children, dense }: { head: ReactNode[]; children: ReactNode; dense?: boolean }) {
  return (
    <div className="overflow-auto scrollbar-thin -mx-4 px-4">
      <table className={clsx("w-full text-sm", dense ? "text-[12.5px]" : "")}>
        <thead>
          <tr className="text-left text-[10.5px] uppercase tracking-widest text-dim">
            {head.map((h, i) => (
              <th key={i} className="px-2 py-2 font-medium border-b border-line whitespace-nowrap">
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody className="[&>tr]:border-b [&>tr]:border-line/60 [&>tr:hover]:bg-white/[0.025] [&>tr>td]:px-2 [&>tr>td]:py-1.5 [&>tr>td]:align-top">{children}</tbody>
      </table>
    </div>
  );
}

export function Metric({ label, value }: { label: string; value: ReactNode }) {
  return (
    <div className="flex items-baseline justify-between gap-3 text-sm border-b border-line/60 py-1.5">
      <span className="text-dim">{label}</span>
      <span className="mono text-fg">{value}</span>
    </div>
  );
}

export function StatusPill({ status }: { status: string }) {
  const map: Record<string, string> = { running: "#ffb347", healthy: "#ffb347", queued: "#6b7a8c", done: "#43e69a", stopped: "#6b7a8c", failed: "#ff5c7a", auth_required: "#ff5c7a", crashed: "#ff5c7a", degraded: "#ff5c7a" };
  return (
    <Tag color={map[status] ?? "#6b7a8c"}>
      {status === "running" || status === "healthy" ? <span className="relative inline-block h-1.5 w-1.5 rounded-full bg-amber text-amber live-dot mr-1" /> : null}
      {status}
    </Tag>
  );
}