/* =========================================================
   ui.jsx — primitives, icons, logo
   ========================================================= */

/* ---------- Logo ---------- */
const Logo = ({ size = 36, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 100 100" fill="none" stroke={color}>
    {/* arc arrows around */}
    <g strokeWidth="2.4" strokeLinecap="round" fill="none">
      <path d="M22 32 A 32 32 0 0 1 44 16" />
      <path d="M56 16 A 32 32 0 0 1 78 32" />
      <path d="M84 44 A 32 32 0 0 1 84 56" />
      <path d="M78 68 A 32 32 0 0 1 56 84" />
      <path d="M44 84 A 32 32 0 0 1 22 68" />
      <path d="M16 56 A 32 32 0 0 1 16 44" />
      {/* arrow heads */}
      <path d="M44 16 l-3 -4 M44 16 l-4 3" />
      <path d="M78 32 l-1 -5 M78 32 l-5 1" />
      <path d="M84 56 l-5 0 M84 56 l-3 4" />
      <path d="M56 84 l5 0 M56 84 l1 -5" />
      <path d="M22 68 l5 -1 M22 68 l-1 -5" />
      <path d="M16 44 l3 -4 M16 44 l5 -1" />
    </g>
    {/* satellites */}
    <g fill={color}>
      <circle cx="50" cy="12" r="3.5" />
      <circle cx="83" cy="32" r="3.5" />
      <circle cx="83" cy="68" r="3.5" />
      <circle cx="50" cy="88" r="3.5" />
      <circle cx="17" cy="68" r="3.5" />
      <circle cx="17" cy="32" r="3.5" />
    </g>
    {/* central C with dot */}
    <g fill="none" stroke={color} strokeWidth="3.2" strokeLinecap="round">
      <path d="M62 38 A 16 16 0 1 0 62 62" />
    </g>
    <circle cx="62" cy="50" r="2.6" fill={color} />
  </svg>
);

/* ---------- Tiny icons ---------- */
const Icon = ({ name, size = 16, color = "currentColor" }) => {
  const s = { width: size, height: size };
  const stroke = { fill: "none", stroke: color, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "home": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M2.5 7 L8 2.5 L13.5 7 V13 H10 V9.5 H6 V13 H2.5 Z" /></svg>
    );
    case "calc": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><rect x="3" y="2" width="10" height="12" rx="1.5"/><rect x="5" y="4" width="6" height="2.5"/><circle cx="6" cy="9" r=".6" fill={color}/><circle cx="8" cy="9" r=".6" fill={color}/><circle cx="10" cy="9" r=".6" fill={color}/><circle cx="6" cy="11.5" r=".6" fill={color}/><circle cx="8" cy="11.5" r=".6" fill={color}/><circle cx="10" cy="11.5" r=".6" fill={color}/></svg>
    );
    case "ledger": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M3 2 H11 L13 4 V14 H3 Z"/><path d="M5.5 5.5 H10.5"/><path d="M5.5 8 H10.5"/><path d="M5.5 10.5 H9"/></svg>
    );
    case "hardhat": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M2 11 H14 V12.5 H2 Z"/><path d="M3.5 11 C 3.5 7 5 5 8 5 C 11 5 12.5 7 12.5 11"/><path d="M7 5 V3 H9 V5"/></svg>
    );
    case "inbox": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M2.5 9 V13 H13.5 V9 L11.5 3 H4.5 Z"/><path d="M2.5 9 H6 L7 10.5 H9 L10 9 H13.5"/></svg>
    );
    case "folder": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M2 5 V12.5 H14 V6 H8 L6.5 4.5 H2 Z"/></svg>
    );
    case "client": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><circle cx="8" cy="6" r="2.5"/><path d="M3 13.5 C3 11 5 10 8 10 C11 10 13 11 13 13.5"/></svg>
    );
    case "receipt": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M3.5 2 V14 L5 13 L6.5 14 L8 13 L9.5 14 L11 13 L12.5 14 V2 Z"/><path d="M5.5 5.5 H10.5"/><path d="M5.5 8 H10.5"/><path d="M5.5 10.5 H8.5"/></svg>
    );
    case "rules": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M3 3 H13"/><path d="M3 6 H13"/><path d="M3 9 H13"/><path d="M3 12 H10"/><rect x="11.5" y="11" width="2.5" height="2.5" fill={color} stroke="none"/></svg>
    );
    case "search": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><circle cx="7" cy="7" r="4"/><path d="M10 10 L13 13"/></svg>
    );
    case "bell": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M4 11 V8 C 4 5.5 5.8 4 8 4 C 10.2 4 12 5.5 12 8 V11 H4 Z"/><path d="M3 11 H13"/><path d="M7 13 C 7 13.8 7.5 14 8 14 C 8.5 14 9 13.8 9 13"/></svg>
    );
    case "chev": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M6 4 L10 8 L6 12"/></svg>
    );
    case "check": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M3.5 8.5 L6.5 11.5 L12.5 4.5"/></svg>
    );
    case "x": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M4 4 L12 12 M12 4 L4 12"/></svg>
    );
    case "plus": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M8 3 V13 M3 8 H13"/></svg>
    );
    case "paperclip": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M11 5 L6 10 C 5 11 5 12.5 6 13.5 C 7 14.5 8.5 14.5 9.5 13.5 L13 10 C 14.5 8.5 14.5 6 13 4.5 C 11.5 3 9 3 7.5 4.5 L3.5 8.5"/></svg>
    );
    case "send": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M2 8 L14 3 L11 14 L8 9 Z"/><path d="M8 9 L14 3"/></svg>
    );
    case "mail": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><rect x="2" y="3.5" width="12" height="9" rx="1.5"/><path d="M2 4.5 L8 9 L14 4.5"/></svg>
    );
    case "wa": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M3 13 L4 10.5 C 3.4 9.7 3 8.7 3 7.5 C 3 5 5 3 7.5 3 C 10 3 12 5 12 7.5 C 12 10 10 12 7.5 12 C 6.6 12 5.8 11.8 5.2 11.4 Z"/></svg>
    );
    case "doc": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M3.5 2 H10 L12.5 4.5 V14 H3.5 Z"/><path d="M10 2 V4.5 H12.5"/><path d="M5.5 8 H10.5"/><path d="M5.5 10.5 H10.5"/></svg>
    );
    case "image": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><rect x="2" y="3" width="12" height="10" rx="1"/><circle cx="6" cy="7" r="1"/><path d="M2 11 L6 8 L9 10.5 L11 9 L14 11.5"/></svg>
    );
    case "pdf": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M3.5 2 H10 L12.5 4.5 V14 H3.5 Z"/><text x="5.5" y="11" fontFamily="Geist Mono" fontSize="3.2" fill={color} stroke="none">PDF</text></svg>
    );
    case "drive": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M6 3 H10 L14 10 L12 13.5 H4 L2 10 Z"/><path d="M6 3 L2 10"/><path d="M10 3 L14 10"/></svg>
    );
    case "qb": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><circle cx="8" cy="8" r="5.5"/><path d="M6 6.5 C 6 5.5 7 5 8 5 C 9 5 9.5 5.5 9.5 6.5 V9.5 C 9.5 10.5 9 11 8 11 C 7 11 6 10.5 6 9.5 V8 H8"/></svg>
    );
    case "stack": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M8 2 L14 5 L8 8 L2 5 Z"/><path d="M2 8 L8 11 L14 8"/><path d="M2 11 L8 14 L14 11"/></svg>
    );
    case "play": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M4 3 L13 8 L4 13 Z" fill={color}/></svg>
    );
    case "pause": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><rect x="4.5" y="3" width="2.5" height="10" fill={color} stroke="none"/><rect x="9" y="3" width="2.5" height="10" fill={color} stroke="none"/></svg>
    );
    case "clock": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><circle cx="8" cy="8" r="5.5"/><path d="M8 5 V8 L10 9.5"/></svg>
    );
    case "thumb": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M3 7 H5 V13 H3 Z"/><path d="M5 7 L8 3 V5 H12 L11 13 H5 Z"/></svg>
    );
    case "voice": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><rect x="6" y="2" width="4" height="8" rx="2"/><path d="M3.5 8 C 3.5 11 5.5 12.5 8 12.5 C 10.5 12.5 12.5 11 12.5 8"/><path d="M8 12.5 V14.5"/></svg>
    );
    case "settings": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><circle cx="8" cy="8" r="2"/><path d="M8 1.5 V3 M8 13 V14.5 M1.5 8 H3 M13 8 H14.5 M3.4 3.4 L4.5 4.5 M11.5 11.5 L12.6 12.6 M3.4 12.6 L4.5 11.5 M11.5 4.5 L12.6 3.4"/></svg>
    );
    case "trend": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M2 12 L6 8 L9 10 L14 4"/><path d="M14 4 H11 M14 4 V7"/></svg>
    );
    case "alert": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M8 2 L14 13 H2 Z"/><path d="M8 6 V9 M8 11 V11.5"/></svg>
    );
    case "lock": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><rect x="3" y="7" width="10" height="7" rx="1"/><path d="M5 7 V5 C 5 3.5 6.5 2.5 8 2.5 C 9.5 2.5 11 3.5 11 5 V7"/></svg>
    );
    case "eye": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M1.5 8 C 3 5 5.5 3.5 8 3.5 C 10.5 3.5 13 5 14.5 8 C 13 11 10.5 12.5 8 12.5 C 5.5 12.5 3 11 1.5 8 Z"/><circle cx="8" cy="8" r="1.5"/></svg>
    );
    case "pen": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M2.5 13.5 L3.5 10.5 L11 3 L13 5 L5.5 12.5 Z"/><path d="M9.5 4.5 L11.5 6.5"/></svg>
    );
    case "ask": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><circle cx="8" cy="8" r="5.5"/><path d="M6.5 6.5 C 6.5 5.5 7 5 8 5 C 9 5 9.5 5.5 9.5 6.5 C 9.5 7.5 8 7.5 8 9"/><path d="M8 11 V11.3"/></svg>
    );
    case "warehouse": return (
      <svg {...s} viewBox="0 0 16 16" {...stroke}><path d="M2 7 L8 3 L14 7 V13 H2 Z"/><path d="M5 13 V9 H11 V13"/><path d="M5 11 H11"/></svg>
    );
    default: return null;
  }
};

/* ---------- Atoms ---------- */
const Btn = ({ children, variant="default", size="md", icon, kbd, onClick, ...rest }) => {
  const cls = ["btn"];
  if (variant !== "default") cls.push(variant);
  if (size !== "md") cls.push(size);
  return (
    <button className={cls.join(" ")} onClick={onClick} {...rest}>
      {icon && <Icon name={icon} size={14} />}
      {children}
      {kbd && <span className="kbd">{kbd}</span>}
    </button>
  );
};

const Pill = ({ children, tone, dot, className="", icon, ...rest }) => (
  <span className={`pill ${tone||""} ${className}`} {...rest}>
    {dot && <span className="pip" />}
    {icon && <Icon name={icon} size={11} />}
    {children}
  </span>
);

const Tag = ({ children }) => <span className="tag">{children}</span>;

const Card = ({ children, head, eyebrow, right, pad=true, elev=false, className="", style }) => {
  const cls = ["card"];
  if (elev) cls.push("elev");
  if (!head && pad) cls.push("pad");
  if (className) cls.push(className);
  return (
    <div className={cls.join(" ")} style={style}>
      {head && (
        <div className="card-head">
          <div className="heading-stack">
            {eyebrow && <span className="eyebrow">{eyebrow}</span>}
            <h3>{head}</h3>
          </div>
          {right && <div className="right">{right}</div>}
        </div>
      )}
      {head && pad ? <div style={{padding: "0 20px 20px"}}>{children}</div> : children}
    </div>
  );
};

/* AgentChip: avatar with initials, tone color, optional running dot */
const AgentChip = ({ name, tone="ink", running=false, idle=false, role }) => {
  const initials = name.split(" ").map(w => w[0]).slice(0,2).join("");
  const cls = ["agent-chip", tone];
  if (idle) cls.push("idle");
  return (
    <span className={cls.join(" ")}>
      <span className="avatar">{initials}</span>
      <span>{name}</span>
      {role && <span className="muted" style={{fontSize:11}}>· {role}</span>}
      {running && <span className="dot" />}
    </span>
  );
};

const KV = ({ rows }) => (
  <div className="kv">
    {rows.flatMap(([k, v], i) => [
      <div key={`k-${i}`}>{k}</div>,
      <div key={`v-${i}`}>{v}</div>,
    ])}
  </div>
);

const Evidence = ({ kind="DOC", title, meta }) => {
  const iconMap = { PDF:"pdf", DOC:"doc", IMG:"image", DWG:"doc", WA:"wa", MAIL:"mail", VOICE:"voice", DRIVE:"drive", QB:"qb", XLS:"doc" };
  return (
    <div className="evidence">
      <div className={"thumb " + (kind === "IMG" ? "ph-concrete" : "")}>
        <Icon name={iconMap[kind] || "doc"} size={18} />
      </div>
      <div style={{minWidth:0, flex:1}}>
        <div className="title" style={{whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis"}}>{title}</div>
        <div className="meta">{meta.map((m,i) => <span key={i}>{m}</span>)}</div>
      </div>
    </div>
  );
};

const Confidence = ({ pct, tone }) => (
  <span className="row" style={{gap:8, alignItems:"center"}}>
    <span className={"meter " + (tone||"")}><span style={{width: pct + "%"}}/></span>
    <span className="mono" style={{fontSize:11, color:"var(--ink-3)"}}>{pct}%</span>
  </span>
);

const Stamp = ({ tone, children }) => <span className={"stamp " + (tone||"")}>{children}</span>;

const Tick = ({ checked }) => (
  <span className={"tickbox " + (checked ? "checked" : "")}>
    {checked && <Icon name="check" size={12} />}
  </span>
);

/* timestamp helper, just for display */
const ts = (h, m, ampm="AM") => `${h}:${String(m).padStart(2,"0")} ${ampm}`;

/* expose */
Object.assign(window, {
  Logo, Icon, Btn, Pill, Tag, Card, AgentChip, KV, Evidence, Confidence, Stamp, Tick, ts
});