"use client";
import clsx from "clsx";
import { AlertTriangle, CheckCircle2, CircleDashed, Info, XCircle, type LucideIcon } from "lucide-react";
import Link from "next/link";
import type { ReactNode } from "react";
import { isApiError } from "@/lib/api";

// ---------------------------------------------------------------- page header
export function PageHeader({ title, subtitle, actions }: { title: string; subtitle?: ReactNode; actions?: ReactNode }) {
  return (
    <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
      <div>
        <h1 className="section-title">{title}</h1>
        {subtitle && <p className="mt-0.5 text-sm text-ink-2">{subtitle}</p>}
      </div>
      {actions && <div className="flex flex-wrap items-center gap-2">{actions}</div>}
    </div>
  );
}

export function Card({ title, children, className, actions, id }: { title?: ReactNode; children: ReactNode; className?: string; actions?: ReactNode; id?: string }) {
  return (
    <section className={clsx("card", className)} id={id}>
      {(title || actions) && (
        <div className="card-title">
          <div>{title}</div>
          {actions && <div className="flex items-center gap-2">{actions}</div>}
        </div>
      )}
      {children}
    </section>
  );
}

// ---------------------------------------------------------------- status badge
type Tone = "ok" | "warn" | "serious" | "crit" | "neutral" | "accent";

const TONE: Record<Tone, string> = {
  ok: "bg-ok-soft text-ok-ink",
  warn: "bg-warn-soft text-warn-ink",
  serious: "bg-serious-soft text-serious-ink",
  crit: "bg-crit-soft text-crit-ink",
  neutral: "bg-surface-2 text-ink-2",
  accent: "bg-accent-soft text-accent-ink",
};
const TONE_ICON: Record<Tone, LucideIcon> = { ok: CheckCircle2, warn: AlertTriangle, serious: AlertTriangle, crit: XCircle, neutral: CircleDashed, accent: Info };

export function toneFor(status: string | null | undefined): Tone {
  switch ((status ?? "").toLowerCase()) {
    case "ok":
    case "active":
    case "succeeded":
    case "ready":
    case "running":
    case "verified":
    case "allowed":
    case "success":
      return status?.toLowerCase() === "running" ? "accent" : "ok";
    case "warning":
    case "planned":
    case "queued":
    case "paused":
    case "pending_configuration":
    case "pending":
    case "stale":
    case "expired":
    case "cancelled":
      return "warn";
    case "degraded":
    case "failed":
    case "error":
    case "dead":
    case "denied":
    case "unsupported":
    case "critical":
      return "crit";
    case "serious":
    case "high":
      return "serious";
    default:
      return "neutral";
  }
}

export function StatusBadge({ status, label, icon = true, className }: { status: string | null | undefined; label?: string; icon?: boolean; className?: string }) {
  const tone = toneFor(status);
  const Icon = TONE_ICON[tone];
  const text = label ?? (status ?? "unknown").replace(/_/g, " ");
  return (
    <span className={clsx("pill", TONE[tone], className)}>
      {icon && <Icon className="h-3 w-3" aria-hidden />}
      {text}
    </span>
  );
}

export function SeverityBadge({ severity }: { severity: string | null | undefined }) {
  const s = (severity ?? "").toLowerCase();
  const tone: Tone = s === "error" || s === "critical" || s === "high" ? "crit" : s === "warning" || s === "medium" ? "warn" : s === "info" || s === "low" ? "accent" : "neutral";
  const Icon = TONE_ICON[tone];
  return (
    <span className={clsx("pill", TONE[tone])}>
      <Icon className="h-3 w-3" aria-hidden />
      {s || "—"}
    </span>
  );
}

// ---------------------------------------------------------------- KPI tile
export function KpiTile({ label, value, sub, tone, href, className }: { label: string; value: ReactNode; sub?: ReactNode; tone?: Tone; href?: string; className?: string }) {
  const body = (
    <>
      <div className="text-xs text-ink-2">{label}</div>
      <div className={clsx("mt-1 text-2xl font-semibold tracking-tight", tone === "crit" ? "text-crit-ink" : tone === "warn" ? "text-warn-ink" : tone === "ok" ? "text-ok-ink" : "text-ink-1")}>
        {value}
      </div>
      {sub && <div className="mt-0.5 text-xs text-ink-3">{sub}</div>}
    </>
  );
  const cls = clsx("card min-w-0", href && "transition hover:border-accent/60", className);
  return href ? (
    <Link href={href} className={cls}>
      {body}
    </Link>
  ) : (
    <div className={cls}>{body}</div>
  );
}

// ---------------------------------------------------------------- misc
export function Banner({ tone = "accent", children, className }: { tone?: Tone; children: ReactNode; className?: string }) {
  const Icon = TONE_ICON[tone];
  const border = { ok: "border-ok/50", warn: "border-warn/60", serious: "border-serious/60", crit: "border-crit/60", neutral: "border-border", accent: "border-accent/40" }[tone];
  return (
    <div className={clsx("banner flex items-start gap-2", TONE[tone].split(" ")[0], border, className)}>
      <Icon className="mt-0.5 h-4 w-4 shrink-0" aria-hidden />
      <div className="min-w-0 flex-1">{children}</div>
    </div>
  );
}

export function ErrorState({ error, retry }: { error: unknown; retry?: () => void }) {
  const msg = isApiError(error) ? `${error.message} (${error.code}, HTTP ${error.status})` : error instanceof Error ? error.message : "Unknown error";
  const rid = isApiError(error) ? error.request_id : null;
  const forbidden = isApiError(error) && error.status === 403;
  return (
    <div className="banner flex items-start gap-2 border-crit/60 bg-crit-soft text-crit-ink">
      <XCircle className="mt-0.5 h-4 w-4 shrink-0" aria-hidden />
      <div className="min-w-0 flex-1">
        <div className="font-medium">{forbidden ? "Not allowed" : "Could not load"}</div>
        <div className="text-xs break-words">{msg}</div>
        {rid && <div className="mt-0.5 font-mono text-[11px] opacity-80">request_id {rid}</div>}
      </div>
      {retry && (
        <button className="btn btn-sm" onClick={retry}>
          Retry
        </button>
      )}
    </div>
  );
}

export function Empty({ children = "Nothing here yet." }: { children?: ReactNode }) {
  return <div className="rounded-md border border-dashed border-border p-6 text-center text-sm text-ink-3">{children}</div>;
}

export function Skeleton({ rows = 4, className }: { rows?: number; className?: string }) {
  return (
    <div className={clsx("flex flex-col gap-2", className)} aria-busy="true" aria-label="Loading">
      {Array.from({ length: rows }).map((_, i) => (
        <div key={i} className="skeleton h-4" style={{ width: `${90 - (i % 3) * 15}%` }} />
      ))}
    </div>
  );
}

export function Field({ label, children, hint, className }: { label: string; children: ReactNode; hint?: ReactNode; className?: string }) {
  return (
    <label className={clsx("block min-w-0", className)}>
      <span className="label">{label}</span>
      {children}
      {hint && <span className="mt-0.5 block text-[11px] text-ink-3">{hint}</span>}
    </label>
  );
}

export function KV({ items, className }: { items: [ReactNode, ReactNode][]; className?: string }) {
  return (
    <dl className={clsx("grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 text-sm", className)}>
      {items.map(([k, v], i) => (
        <div key={i} className="contents">
          <dt className="text-ink-2 whitespace-nowrap">{k}</dt>
          <dd className="min-w-0 break-words text-ink-1">{v ?? "—"}</dd>
        </div>
      ))}
    </dl>
  );
}

export function Mono({ children, className }: { children: ReactNode; className?: string }) {
  return <span className={clsx("font-mono text-[12.5px]", className)}>{children}</span>;
}

export function Tabs<T extends string>({ value, onChange, items }: { value: T; onChange: (v: T) => void; items: { value: T; label: string }[] }) {
  return (
    <div role="tablist" className="inline-flex rounded-md border border-border bg-surface-2 p-0.5">
      {items.map((it) => (
        <button
          key={it.value}
          role="tab"
          aria-selected={value === it.value}
          className={clsx("rounded px-2.5 py-1 text-xs font-medium", value === it.value ? "bg-surface-1 text-ink-1 shadow-sm" : "text-ink-2 hover:text-ink-1")}
          onClick={() => onChange(it.value)}
        >
          {it.label}
        </button>
      ))}
    </div>
  );
}