/* ============================================================
   Vela — shared UI atoms (window.UI)
   ============================================================ */
(function () {
  // ---- Euro formatting (Spanish convention: 392.000 €) ----
  const fmtEur = (n) => (n || 0).toLocaleString("es-ES") + " €";
  const fmtEurK = (n) => {
    if (n >= 1000000) return (n / 1000000).toLocaleString("es-ES", { maximumFractionDigits: 2 }) + " M €";
    if (n >= 1000) return Math.round(n / 1000) + "k €";
    return n + " €";
  };

  // ---- case status ----
  const CASE_COLOR = {
    DRAFT:        { c: "var(--ink-3)", bg: "rgba(107,119,144,.12)" },
    COLLECTING:   { c: "var(--blue)",  bg: "var(--blue-soft)" },
    UNDER_REVIEW: { c: "var(--gold)",  bg: "var(--gold-soft)" },
    COMPLETED:    { c: "var(--green)", bg: "var(--green-soft)" },
    CANCELLED:    { c: "var(--red)",   bg: "var(--red-soft)" },
  };
  function CaseStatus({ status, dot }) {
    const s = window.VELA.STATUS[status];
    const col = CASE_COLOR[status] || CASE_COLOR.DRAFT;
    return (
      <span className="chip" style={{ background: col.bg, color: col.c }}>
        {dot && <span className="chip-dot" style={{ background: col.c }} />}
        {s ? s.label : status}
      </span>
    );
  }

  // ---- document item status ----
  const DOC_COLOR = {
    waiting:   { c: "var(--ink-3)", bg: "rgba(107,119,144,.10)", icon: "clock" },
    received:  { c: "var(--blue)",  bg: "var(--blue-soft)",  icon: "sync" },
    validated: { c: "var(--green)", bg: "var(--green-soft)", icon: "check" },
    conflict:  { c: "var(--amber)", bg: "var(--amber-soft)", icon: "warn" },
    error:     { c: "var(--red)",   bg: "var(--red-soft)",   icon: "alert" },
  };
  function DocStatus({ status, mini }) {
    const s = DOC_COLOR[status] || DOC_COLOR.waiting;
    const label = window.VELA.DOC[status] ? window.VELA.DOC[status].label : status;
    if (mini) return <span style={{ width: 8, height: 8, borderRadius: "50%", background: s.c, flexShrink: 0 }} />;
    return (
      <span className="chip" style={{ background: s.bg, color: s.c }}>
        <Icon name={s.icon} size={12} stroke={2.4} />{label}
      </span>
    );
  }

  // ---- avatar ----
  function Avatar({ initials, size = 38, tone = "ink", style }) {
    const tones = {
      ink:  { bg: "var(--ink)", c: "var(--ink-inv)" },
      gold: { bg: "var(--gold-soft)", c: "var(--gold)" },
      soft: { bg: "#E7EDF6", c: "var(--ink-2)" },
      green:{ bg: "var(--green-soft)", c: "var(--green)" },
    };
    const t = tones[tone] || tones.ink;
    return (
      <div style={{
        width: size, height: size, borderRadius: size * 0.32, background: t.bg, color: t.c,
        display: "flex", alignItems: "center", justifyContent: "center",
        fontWeight: 700, fontSize: size * 0.36, letterSpacing: "-.01em", flexShrink: 0, ...style,
      }}>{initials}</div>
    );
  }

  // ---- progress bar ----
  function Progress({ value, color = "var(--gold)", height = 6, delay = 0 }) {
    return (
      <div style={{ background: "var(--line)", borderRadius: 999, height, overflow: "hidden" }}>
        <div style={{ width: value + "%", height: "100%", background: color, borderRadius: 999,
          transformOrigin: "left", animation: `growBar .8s cubic-bezier(.2,.7,.3,1) ${delay}s both` }} />
      </div>
    );
  }

  // ---- collection progress (received+ / total) ----
  function caseProgress(c) {
    let total = 0, done = 0;
    c.participants.forEach((p) => p.docs.forEach((doc) => {
      total++;
      if (doc.status === "validated" || doc.status === "received" || doc.status === "conflict") done++;
    }));
    return { done, total, pct: total ? Math.round(done / total * 100) : 0 };
  }
  function validatedProgress(c) {
    let total = 0, v = 0;
    c.participants.forEach((p) => p.docs.forEach((doc) => { total++; if (doc.status === "validated") v++; }));
    return { v, total, pct: total ? Math.round(v / total * 100) : 0 };
  }

  function templateOf(key) { return window.VELA.TEMPLATES.find((t) => t.key === key); }

  window.UI = { fmtEur, fmtEurK, CaseStatus, DocStatus, Avatar, Progress, caseProgress, validatedProgress, templateOf, CASE_COLOR, DOC_COLOR };
})();