// primitives.jsx — small, reusable bits for the Ground Truth UI kit.
// Lucide icons rendered as inline SVG so the kit is fully offline.

const { useState } = React;

/* ============================================================
 * Icon — small SVG library, Lucide-inspired (2px stroke, round caps)
 * Pass name + size. Defaults to current text color.
 * ============================================================ */
const ICONS = {
  home:        <><path d="M3 12L12 4l9 8"/><path d="M5 10v10h14V10"/></>,
  zap:         <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" fill="none"/>,
  target:      <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.4" fill="currentColor"/></>,
  sparkles:    <path d="M9.94 6.06L8 12l-6 2l6 2l1.94 5.94L12 22l2.06-1.06L16 16l6-2l-6-2l-1.94-5.94L12 2z"/>,
  newspaper:   <><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 8h10M7 12h6M7 16h10"/></>,
  building:    <><path d="M3 21V7l9-4 9 4v14"/><path d="M9 21v-8h6v8"/></>,
  trending:    <><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></>,
  users:       <><circle cx="9" cy="7" r="3"/><path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"/><circle cx="17" cy="9" r="2.5"/><path d="M14 21v-1.5a3 3 0 0 1 2-2.8"/></>,
  userCircle:  <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="10" r="3.5"/><path d="M5.5 19a7 7 0 0 1 13 0"/></>,
  clock:       <><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 16 14"/></>,
  settings:    <><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.2l2-1.5-2-3.5-2.4 1a7 7 0 0 0-2.1-1.2L14 3h-4l-.4 2.6a7 7 0 0 0-2.1 1.2l-2.4-1-2 3.5 2 1.5A7 7 0 0 0 5 12c0 .4 0 .8.1 1.2l-2 1.5 2 3.5 2.4-1a7 7 0 0 0 2.1 1.2L10 21h4l.4-2.6a7 7 0 0 0 2.1-1.2l2.4 1 2-3.5-2-1.5c.1-.4.1-.8.1-1.2z"/></>,
  bell:        <><path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M14 21a2 2 0 0 1-4 0"/></>,
  message:     <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>,
  search:      <><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></>,
  chevronDown: <polyline points="6 9 12 15 18 9"/>,
  chevronUp:   <polyline points="6 15 12 9 18 15"/>,
  chevronRight:<polyline points="9 6 15 12 9 18"/>,
  check:       <polyline points="20 6 9 17 4 12"/>,
  x:           <><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></>,
  arrowRight:  <><line x1="3" y1="12" x2="21" y2="12"/><polyline points="13 5 21 12 13 19"/></>,
  mail:        <><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="22 6 12 13 2 6"/></>,
  calendar:    <><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="16" y1="2" x2="16" y2="6"/></>,
  alertTri:    <><path d="M10.3 3.86l-8.7 15A2 2 0 0 0 3.27 22h17.46A2 2 0 0 0 22.4 18.86l-8.7-15a2 2 0 0 0-3.4 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></>,
  alertOct:    <><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></>,
  minus:       <line x1="5" y1="12" x2="19" y2="12"/>,
  trendingDown:<><polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/></>,
  user:        <><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></>,
  link:        <><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1"/><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></>,
  send:        <><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></>,
  filter:      <polygon points="22 3 2 3 10 12.5 10 19 14 21 14 12.5 22 3"/>,
  panelRight:  <><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="15" y1="3" x2="15" y2="21"/></>,
  layoutList:  <><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><line x1="14" y1="4" x2="21" y2="4"/><line x1="14" y1="9" x2="21" y2="9"/><line x1="14" y1="15" x2="21" y2="15"/><line x1="14" y1="20" x2="21" y2="20"/></>,
  buildings:   <><path d="M3 21V7l9-4 9 4v14"/><path d="M9 21v-8h6v8"/></>,
  refresh:     <><polyline points="23 4 23 10 17 10"/><path d="M20.49 15A9 9 0 1 1 18 8.5l5 4.5"/></>,
  panel:       <><rect x="3" y="3" width="18" height="18" rx="2"/></>,
  externalLink:<><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></>,
  fileText:    <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></>,
  clockExp:    <><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 16 14"/></>,
};

function Icon({ name, size = 14, className = "", strokeWidth = 2 }) {
  const path = ICONS[name];
  if (!path) return null;
  return (
    <svg
      width={size} height={size} viewBox="0 0 24 24"
      fill="none" stroke="currentColor"
      strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
      className={className} style={{ flexShrink: 0 }}
    >{path}</svg>
  );
}

/* ============================================================
 * Button
 * ============================================================ */
function Button({ children, variant = "primary", size = "default", onClick, disabled, className = "", ...rest }) {
  const variantClass = {
    primary: "",                 // default
    secondary: "btn-secondary",
    outline: "btn-outline",
    ghost: "btn-ghost",
    ai: "btn-ai",
  }[variant];
  const sizeClass = { default: "", sm: "btn-sm", xs: "btn-xs" }[size];
  return (
    <button
      type="button"
      className={`btn ${variantClass} ${sizeClass} ${className}`.trim()}
      onClick={onClick} disabled={disabled}
      {...rest}
    >{children}</button>
  );
}

/* ============================================================
 * Badge / pill helpers
 * ============================================================ */
function Pill({ category, children }) {
  return <span className={`pill pill-${category}`}>{children ?? category}</span>;
}

function HealthPill({ health }) {
  const arrows = { growing: "↑", stable: "→", declining: "↓", at_risk: "↓" };
  const labels = { growing: "Growing", stable: "Stable", declining: "Declining", at_risk: "At Risk" };
  return <span className={`health-pill health-${health}`}>{labels[health]} {arrows[health]}</span>;
}

function SevDot({ severity, pulse }) {
  const colorMap = {
    critical: "var(--severity-critical)",
    high: "var(--severity-high)",
    medium: "var(--severity-medium)",
    low: "var(--severity-low)",
  };
  return (
    <span
      className={`sev-dot ${pulse ? "pulse" : ""}`}
      style={{
        background: colorMap[severity],
        width: 8, height: 8, borderRadius: 999, display: "inline-block",
        flexShrink: 0,
      }}
    />
  );
}

/* ============================================================
 * Checkbox (controlled)
 * ============================================================ */
function Checkbox({ checked, onChange }) {
  return (
    <button
      type="button"
      role="checkbox" aria-checked={checked}
      onClick={(e) => { e.stopPropagation(); onChange?.(!checked); }}
      className={`checkbox ${checked ? "checked" : ""}`}
      style={{ padding: 0 }}
    />
  );
}

/* ============================================================
 * Input with optional leading icon
 * ============================================================ */
function Input({ icon, placeholder, value, onChange, ...rest }) {
  if (icon) {
    return (
      <span className="input-wrap" style={{ width: "100%" }}>
        <Icon name={icon} className="lead-icon" />
        <input
          className="input" placeholder={placeholder}
          value={value} onChange={(e) => onChange?.(e.target.value)}
          {...rest}
        />
      </span>
    );
  }
  return (
    <input className="input" placeholder={placeholder}
           value={value} onChange={(e) => onChange?.(e.target.value)} {...rest} />
  );
}

/* ============================================================
 * Currency formatter (compact, mono-friendly)
 * ============================================================ */
function fmtCurrency(amount, full = false) {
  if (amount == null) return "—";
  if (full) {
    return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 }).format(amount);
  }
  if (Math.abs(amount) >= 1_000_000) return `$${(amount / 1_000_000).toFixed(1)}M`;
  if (Math.abs(amount) >= 1_000) return `$${Math.round(amount / 1_000)}K`;
  return `$${amount}`;
}

/* ============================================================
 * Export to window for cross-script use
 * ============================================================ */
Object.assign(window, {
  Icon, Button, Pill, HealthPill, SevDot, Checkbox, Input,
  fmtCurrency,
});