import type { ReactNode } from "react";

export function KpiCard({
  label,
  value,
  hint,
  tone = "default",
}: {
  label: string;
  value: number | string;
  hint?: string;
  tone?: "default" | "ok" | "warn" | "danger";
}) {
  const tones = {
    default: "border-[var(--line)]",
    ok: "border-[var(--ok)]/30 bg-[var(--ok-soft)]",
    warn: "border-[var(--warn)]/30 bg-[var(--warn-soft)]",
    danger: "border-[var(--danger)]/30 bg-[var(--danger-soft)]",
  };
  return (
    <div className={`rounded-sm border bg-[var(--panel)] p-4 ${tones[tone]}`}>
      <p className="text-xs uppercase tracking-wide text-[var(--muted)]">{label}</p>
      <p className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
        {value}
      </p>
      {hint ? <p className="mt-1 text-xs text-[var(--muted)]">{hint}</p> : null}
    </div>
  );
}

export function Panel({
  title,
  children,
  action,
}: {
  title: string;
  children: ReactNode;
  action?: ReactNode;
}) {
  return (
    <section className="rounded-sm border border-[var(--line)] bg-[var(--panel)]">
      <div className="flex items-center justify-between gap-3 border-b border-[var(--line)] px-4 py-3">
        <h2 className="font-[family-name:var(--font-display)] text-lg text-[var(--ink)]">
          {title}
        </h2>
        {action}
      </div>
      <div className="p-4">{children}</div>
    </section>
  );
}

export function Badge({
  children,
  tone = "neutral",
}: {
  children: ReactNode;
  tone?: "neutral" | "ok" | "warn" | "danger" | "navy";
}) {
  const map = {
    neutral: "bg-[var(--surface)] text-[var(--muted)] border-[var(--line)]",
    ok: "bg-[var(--ok-soft)] text-[var(--ok)] border-[var(--ok)]/20",
    warn: "bg-[var(--warn-soft)] text-[var(--warn)] border-[var(--warn)]/25",
    danger: "bg-[var(--danger-soft)] text-[var(--danger)] border-[var(--danger)]/25",
    navy: "bg-[var(--navy)]/10 text-[var(--navy)] border-[var(--navy)]/20",
  };
  return (
    <span
      className={`inline-flex items-center rounded-sm border px-2 py-0.5 text-xs font-medium ${map[tone]}`}
    >
      {children}
    </span>
  );
}

export function StatusDot({ tone }: { tone: "ok" | "warn" | "danger" | "muted" }) {
  const colors = {
    ok: "bg-[var(--ok)]",
    warn: "bg-[var(--warn)]",
    danger: "bg-[var(--danger)]",
    muted: "bg-[var(--muted)]",
  };
  return (
    <span className={`inline-block h-2 w-2 rounded-full ${colors[tone]}`} />
  );
}