/* UI base — design system ASCEND (claro, navy + dourado). Espelha ds.css. Exporta p/ window. */
const C = {
  bg: "#F6F5F1", bgAlt: "#F0EDE4", card: "#FFFFFF", tint: "#FAF8F2",
  line: "#E7E3D8", lineSoft: "#F1EEE6",
  ink: "#16233F", ink2: "#525868", ink3: "#9A9FAC",
  // "cobalt" = acento primário do sistema → agora DOURADO (ação/destaque)
  cobalt: "#B8912A", cobaltDeep: "#8A6A1C", cobaltSoft: "#F7F0DA",
  gold: "#B8912A", gold2: "#CFA63E", goldHi: "#EAD08A", goldSoft: "#F7F0DA",
  green: "#1E9E6A", greenSoft: "#E5F4ED",
  amber: "#C8881E", amberSoft: "#FBF1DE",
  red: "#dc2626", redSoft: "#fdeced",
  navy: "#16233F", navy2: "#27406e", navyDeep: "#0E1A30",
};

function LIcon({ name, size = 20, color, stroke = 2, style }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = `<i data-lucide="${name}" style="stroke-width:${stroke}"></i>`;
      window.lucide.createIcons();
    }
  });
  return <span ref={ref} className="licon" style={{ fontSize: size, color: color || "currentColor", lineHeight: 0, display: "inline-flex", ...style }} />;
}

const initials = (nome) => window.OE.iniciais(nome);

function Avatar({ nome, cor, size = 38 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: 11, flex: "none", display: "grid", placeItems: "center",
      background: "rgba(22,35,63,.08)", color: C.navy2, fontWeight: 800, fontSize: size * 0.34,
    }}>{initials(nome)}</div>
  );
}

// progress ring
function Ring({ value, size = 92, stroke = 9, color = C.cobalt, label, textColor, trackColor }) {
  const r = (size - stroke) / 2, c = 2 * Math.PI * r;
  return (
    <div style={{ position: "relative", width: size, height: size, flex: "none" }}>
      <svg width={size} height={size}>
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={trackColor || C.lineSoft} strokeWidth={stroke} />
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={color} strokeWidth={stroke}
          strokeLinecap="round" strokeDasharray={c} strokeDashoffset={c * (1 - value / 100)}
          transform={`rotate(-90 ${size / 2} ${size / 2})`} style={{ transition: "stroke-dashoffset .6s ease" }} />
      </svg>
      <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", textAlign: "center" }}>
        <div>
          <div style={{ fontSize: size * 0.27, fontWeight: 800, color: textColor || C.ink, lineHeight: 1 }}>{value}<span style={{ fontSize: size * 0.15 }}>%</span></div>
          {label && <div style={{ fontSize: 10, color: C.ink3, fontWeight: 700, marginTop: 2 }}>{label}</div>}
        </div>
      </div>
    </div>
  );
}

function Bar({ value, color = C.cobalt, h = 8 }) {
  return (
    <div style={{ height: h, background: C.lineSoft, borderRadius: 999, overflow: "hidden" }}>
      <div style={{ height: "100%", width: value + "%", background: color, borderRadius: 999, transition: "width .5s ease" }} />
    </div>
  );
}

function Pill({ children, tone = "gray", icon }) {
  const map = {
    gray: [C.ink2, C.lineSoft], cobalt: [C.cobaltDeep, C.cobaltSoft],
    green: [C.green, C.greenSoft], amber: [C.amber, C.amberSoft], red: [C.red, C.redSoft],
  };
  const [fg, bg] = map[tone] || map.gray;
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "4px 11px", borderRadius: 999, background: bg, color: fg, fontSize: 12, fontWeight: 700, whiteSpace: "nowrap" }}>
      {icon && <LIcon name={icon} size={13} stroke={2.4} />}{children}
    </span>
  );
}

function Btn({ children, onClick, variant = "primary", icon, size = "md", style, disabled }) {
  const base = {
    display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8, fontFamily: "inherit",
    fontWeight: 700, border: "1px solid transparent", borderRadius: 11, cursor: disabled ? "not-allowed" : "pointer",
    fontSize: size === "sm" ? 13 : 14, padding: size === "sm" ? "8px 13px" : "11px 18px", transition: "all .14s ease",
    opacity: disabled ? 0.5 : 1, ...style,
  };
  const variants = {
    primary: { background: "linear-gradient(150deg,#CFA63E,#B8912A 70%,#9c7a22)", color: "#fff", boxShadow: "0 8px 18px -6px rgba(184,145,42,.55),inset 0 1px 0 rgba(255,255,255,.35)" },
    soft: { background: C.cobaltSoft, color: C.cobaltDeep },
    ghost: { background: "#fff", color: C.ink2, borderColor: C.line },
    quiet: { background: "transparent", color: C.ink3 },
    green: { background: C.green, color: "#fff" },
    navy: { background: "linear-gradient(150deg,#27406e,#16233F)", color: "#fff", boxShadow: "0 8px 16px -6px rgba(22,35,63,.5)" },
  };
  return (
    <button onClick={disabled ? undefined : onClick} style={{ ...base, ...variants[variant] }}>
      {icon && <LIcon name={icon} size={size === "sm" ? 15 : 17} stroke={2.2} />}{children}
    </button>
  );
}

function Card({ children, style, pad = 22 }) {
  return <div style={{ background: C.card, border: `1px solid ${C.line}`, borderRadius: 16, padding: pad, ...style }}>{children}</div>;
}

function SectionTitle({ children, sub, icon }) {
  return (
    <div style={{ marginBottom: 16 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
        {icon && <span style={{ color: C.cobalt }}><LIcon name={icon} size={18} stroke={2.2} /></span>}
        <h2 style={{ margin: 0, fontSize: 17, fontWeight: 800, letterSpacing: "-.01em", color: C.ink }}>{children}</h2>
      </div>
      {sub && <div style={{ fontSize: 13, color: C.ink3, marginTop: 4, marginLeft: icon ? 27 : 0 }}>{sub}</div>}
    </div>
  );
}

Object.assign(window, { C, LIcon, Avatar, Ring, Bar, Pill, Btn, Card, SectionTitle, initials });