// Shared UI bits for Golda operator platform
const { useState, useEffect, useMemo } = React;

function RiskBadge({ risk }) {
  const map = {
    Critical: { cls: "b-critical", icon: I.bolt },
    High: { cls: "b-high", icon: I.arrowUp },
    Normal: { cls: "b-normal", icon: I.dash },
    Low: { cls: "b-low", icon: I.arrowDown }
  };
  const m = map[risk] || map.Normal;
  return <span className={`badge ${m.cls}`}>{m.icon}{risk}</span>;
}

function StageBadge({ stage }) {
  const map = {
    REO: "b-new",
    "Supply Date": "b-progress",
    PICKUP: "b-wait-internal",
    BOOKED: "b-progress",
    "ON BOARD": "b-resolved",
    ATD: "b-closed"
  };
  return <span className={`badge ${map[stage] || "b-soft"}`}><span className="dot"/>{stage}</span>;
}

function AutomationBadge({ level }) {
  const m = {
    "Auto-send": "b-resolved",
    "Draft & ask": "b-new",
    "Observe": "b-closed"
  }[level] || "b-soft";
  return <span className={`badge ${m}`}>{level}</span>;
}

function Avatar({ name, size = 22 }) {
  const initials = name.split(" ").map(p => p[0]).slice(0,2).join("");
  return (
    <span style={{
      width: size, height: size, borderRadius: "50%",
      background: "var(--accent-bg-strong)", color: "var(--st-info-fg)",
      display: "inline-grid", placeItems: "center",
      fontWeight: 600, fontSize: size * 0.42, flexShrink: 0
    }}>{initials}</span>
  );
}

function GoldaPill() {
  return (
    <span className="row" style={{ gap: 6 }}>
      <span className="golda-avatar" style={{ width: 18, height: 18, fontSize: 9 }}>G</span>
      <span style={{ fontSize: 12, color: "var(--text-secondary)" }}>Golda</span>
    </span>
  );
}

function ConfidenceMeter({ value }) {
  // Only render a real, model-provided value — never a fabricated default. The score reflects
  // how much structured data was extracted from the email, so label it as such (not as
  // confidence in the recommendation).
  if (typeof value !== "number" || !isFinite(value)) return null;
  return (
    <div className="confidence">
      <span style={{ fontSize: 11, color: "var(--text-tertiary)", textTransform: "uppercase", letterSpacing: ".04em", fontWeight: 600 }}>Extraction confidence</span>
      <div className="conf-track"><div className="conf-fill" style={{ width: `${value*100}%` }}/></div>
      <span style={{ fontVariantNumeric: "tabular-nums", fontWeight: 600 }}>{Math.round(value*100)}%</span>
    </div>
  );
}

function FieldIcon({ state }) {
  if (state === "ok") return I.ok;
  if (state === "missing") return I.miss;
  if (state === "conflict") return I.conflict;
  if (state === "pending") return I.pending;
  return null;
}

function GuardStrip({ guards }) {
  return (
    <div className="guard-strip">
      {guards.map(g => (
        <span key={g.name} className={`guard-chip ${g.state}`}>
          {g.state === "pass" ? "✓" : g.state === "warn" ? "!" : "✕"} {g.name}
        </span>
      ))}
    </div>
  );
}

Object.assign(window, { RiskBadge, StageBadge, AutomationBadge, Avatar, GoldaPill, ConfidenceMeter, FieldIcon, GuardStrip });