/* ============================================================
   SKYVIDYA — shared components + inline icon set
   ============================================================ */
const { useState, useEffect, useRef, useMemo } = React;

/* ---- Icon set (Lucide-style, 1.5 stroke) ---- */
const ICONS = {
  dashboard: "M3 3h7v9H3zM14 3h7v5h-7zM14 12h7v9h-7zM3 16h7v5H3z",
  map: "M9 4 3 6v15l6-2 6 2 6-2V4l-6 2-6-2zM9 4v15M15 6v15",
  table: "M3 5h18v14H3zM3 10h18M3 15h18M9 5v14",
  file: "M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 3v5h6M8 13h8M8 17h6",
  layers: "M12 2 2 7l10 5 10-5zM2 12l10 5 10-5M2 17l10 5 10-5",
  search: "M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM21 21l-4.3-4.3",
  send: "M22 2 11 13M22 2l-7 20-4-9-9-4z",
  sparkles: "M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9zM19 3v4M21 5h-4M5 17v2M6 18H4",
  chevR: "M9 6l6 6-6 6", chevD: "M6 9l6 6 6-6", chevL: "M15 6l-6 6 6 6",
  x: "M18 6 6 18M6 6l12 12",
  alert: "M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01",
  check: "M20 6 9 17l-5-5",
  trendDown: "M22 17 13.5 8.5l-5 5L2 7M22 17h-6M22 17v-6",
  trendUp: "M22 7 13.5 15.5l-5-5L2 17M22 7h-6M22 7v6",
  flat: "M5 12h14",
  gem: "M6 3h12l4 6-10 12L2 9zM2 9h20M12 3 8 9l4 12 4-12-4-6",
  sliders: "M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6",
  target: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z",
  download: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3",
  share: "M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M16 6l-4-4-4 4M12 2v13",
  plus: "M12 5v14M5 12h14",
  info: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 16v-4M12 8h.01",
  panel: "M3 4h18v16H3zM15 4v16",
  cpu: "M5 5h14v14H5zM9 9h6v6H9zM9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3",
  crop: "M6 2v14a2 2 0 0 0 2 2h14M18 22V8a2 2 0 0 0-2-2H2",
  scan: "M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2M3 12h18",
  drop: "M12 2.7S5 10 5 14a7 7 0 0 0 14 0c0-4-7-11.3-7-11.3z",
  filter: "M22 3H2l8 9.5V19l4 2v-8.5z",
  refresh: "M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16",
  arrowR: "M5 12h14M13 6l6 6-6 6",
  sun: "M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10zM12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4",
  moon: "M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z",
  globe: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20",
  bell: "M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0",
  activity: "M22 12h-4l-3 9L9 3l-3 9H2",
  user: "M20 21a8 8 0 1 0-16 0M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8",
  play: "M6 4l14 8-14 8z",
  mouse: "M12 2a6 6 0 0 0-6 6v8a6 6 0 0 0 12 0V8a6 6 0 0 0-6-6zM12 6v4",
};
function Icon({ name, size = 16, stroke = 1.6, color, fill, style, className }) {
  const d = ICONS[name];
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill || "none"}
      stroke={color || "currentColor"} strokeWidth={stroke} strokeLinecap="round"
      strokeLinejoin="round" style={style} className={className} aria-hidden="true">
      {d.split("M").filter(Boolean).map((seg, i) => <path key={i} d={"M" + seg} />)}
    </svg>
  );
}

/* ---- Trend tag ---- */
function TrendTag({ tendencia, label }) {
  const map = {
    down:    { cls: "down",  icon: "trendDown", txt: label || "deteriorando" },
    up:      { cls: "up",    icon: "trendUp",   txt: label || "melhorando" },
    stable:  { cls: "flat",  icon: "flat",      txt: label || "estável" },
    anomaly: { cls: "warnc", icon: "alert",     txt: label || "anomalia" },
  };
  const t = map[tendencia] || map.stable;
  return (
    <span className={"trend " + t.cls}>
      <Icon name={t.icon} size={13} />{t.txt}
    </span>
  );
}

/* ---- Tier badge with tooltip ---- */
const TIER_CRIT = {
  A: "Score ≥ 85 · franquia/gatilho reduzidos",
  B: "Score 60–84 · condições padrão",
  C: "Score < 60 · recusar ou termo especial",
};
function TierBadge({ tier }) {
  return (
    <span className="tip-wrap">
      <span className={"tier tier-" + tier}>{tier}</span>
      <span className="tip">Nível {tier} — {TIER_CRIT[tier]}</span>
    </span>
  );
}

/* ---- Score pill ---- */
function ScorePill({ score, width = 46 }) {
  const color = SKY.scoreColor(score);
  return (
    <span className="score-pill">
      <span className="score-bar" style={{ width }}>
        <i style={{ width: score + "%", background: color }} />
      </span>
      <span className="score-val" style={{ color }}>{score}</span>
    </span>
  );
}

/* ---- Action tag ---- */
function ActionTag({ acao }) {
  const cls = { Operar:"act-operar", Monitorar:"act-monitorar", Restringir:"act-restringir", Investigar:"act-investigar" }[acao] || "act-operar";
  const icon = { Operar:"check", Monitorar:"info", Restringir:"alert", Investigar:"alert" }[acao];
  return <span className={"action-tag " + cls}><Icon name={icon} size={11} />{acao}</span>;
}

/* ---- Section card wrapper ---- */
function Panel({ title, right, brackets, accent, children, style, bodyPad = true }) {
  return (
    <div className={"card" + (accent ? " accent-l" : "") + (brackets ? " brackets" : "")} style={style}>
      {title && (
        <div className="card-head">
          <span className="ctitle">{title}</span>
          {right}
        </div>
      )}
      <div style={{ padding: bodyPad ? 18 : 0 }}>{children}</div>
    </div>
  );
}

Object.assign(window, { Icon, ICONS, TrendTag, TierBadge, ScorePill, ActionTag, Panel });

/* ---- Theme toggle (shared by landing + observatory) ---- */
function getTheme() {
  return document.documentElement.dataset.theme || "dark";
}
function setTheme(t) {
  document.documentElement.dataset.theme = t;
  try { localStorage.setItem("sky-theme", t); } catch (e) {}
  window.dispatchEvent(new CustomEvent("sky-theme", { detail: t }));
}
function ThemeToggle({ compact }) {
  const [theme, setT] = useState(getTheme());
  useEffect(() => {
    const h = (e) => setT(e.detail);
    window.addEventListener("sky-theme", h);
    return () => window.removeEventListener("sky-theme", h);
  }, []);
  const next = theme === "dark" ? "light" : "dark";
  return (
    <button className={"theme-toggle" + (compact ? " compact" : "")} onClick={() => setTheme(next)}
      title={theme === "dark" ? "Mudar para modo claro" : "Mudar para modo escuro"} aria-label="Alternar tema">
      <span className="tt-track">
        <span className="tt-ico tt-sun"><Icon name="sun" size={13} /></span>
        <span className="tt-ico tt-moon"><Icon name="moon" size={13} /></span>
        <span className="tt-knob" />
      </span>
    </button>
  );
}

Object.assign(window, { ThemeToggle, getTheme, setTheme });