// Recursive MLS — shared field atoms (provenance + lifecycle chips, field-type glyphs).
// Used by BOTH the Add/Edit workspace and Field Studio so the visual language never drifts.
const { useState: _uS } = React;

function ProvChip({ prov, size = "sm", withLabel = true }) {
  const F = window.RC_FIELDS; const c = F.chip(prov);
  const pad = size === "xs" ? "1px 6px" : "2px 8px";
  const fs = size === "xs" ? 9.5 : 10.5;
  return (
    <span title={c.label + " field"} style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: pad, borderRadius: 999,
      background: c.bg, color: c.fg, fontSize: fs, fontWeight: 700, letterSpacing: ".3px", lineHeight: 1, whiteSpace: "nowrap" }}>
      <span style={{ width: 6, height: 6, borderRadius: "50%", background: c.dot, flex: "none" }} />
      {withLabel && c.short}
    </span>
  );
}

function LifeChip({ life }) {
  const F = window.RC_FIELDS; const l = F.LIFE[life] || F.LIFE.active;
  return (
    <span style={{ display: "inline-flex", alignItems: "center", fontSize: 10.5, fontWeight: 600, letterSpacing: ".2px",
      padding: "2px 8px", borderRadius: 999, background: l.bg, color: l.fg, lineHeight: 1.3, whiteSpace: "nowrap" }}>{l.label}</span>
  );
}

// small % population meter used in the field catalog
function PopBar({ pct }) {
  const col = pct >= 70 ? "#1f8a5b" : pct >= 30 ? "#9a6a12" : "#c0612f";
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 96 }}>
      <div style={{ flex: 1, height: 5, borderRadius: 3, background: "#eeede7", overflow: "hidden" }}>
        <div style={{ width: pct + "%", height: "100%", background: col }} />
      </div>
      <span style={{ fontFamily: "'Space Mono', monospace", fontSize: 11, color: "#8a8e88", width: 30, textAlign: "right" }}>{pct}%</span>
    </div>
  );
}

// suggestion / provenance-of-value chip for the autofill review state
function SourceChip({ origin }) {
  const map = {
    record: { label: "Public record · verify", icon: "landmark", fg: "#6b706a", bg: "#f0efe9" },
    prior: { label: "From 2023 listing", icon: "history", fg: "#1f8a5b", bg: "#e8f4ee" },
    ai: { label: "AI suggestion", icon: "sparkles", fg: "#9a6a12", bg: "#fbf2dc" },
    photo: { label: "From photo", icon: "image", fg: "#9a6a12", bg: "#fbf2dc" },
  };
  const m = map[origin]; if (!m) return null;
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 10.5, fontWeight: 600, color: m.fg, background: m.bg, borderRadius: 999, padding: "2px 8px", lineHeight: 1.3 }}>
      <Icon name={m.icon} size={11} color={m.fg} /> {m.label}
    </span>
  );
}

Object.assign(window, { ProvChip, LifeChip, PopBar, SourceChip });