// TARA — shared primitives, formatters, design-system components
const { useState, useRef } = React;

/* ---------- Icon (Lucide) ---------- */
const Icon = ({ name, size = 16, color, style }) => (
  <img
    src={`https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/${name}.svg`}
    width={size} height={size}
    style={{ display: "block", ...(style || {}) }}
    alt=""
  />
);

/* ---------- TARA brand mark (seedling tile) ---------- */
function TaraMark({ size = 32, variant = "primary", style }) {
  const tile = variant === "reversed" ? "#FFFFFF" : "var(--primary-deep)";
  const ink  = variant === "reversed" ? "var(--primary-deep)" : "#FFFFFF";
  const leaf = variant === "reversed" ? "var(--primary-mid)" : "var(--primary-light)";
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" aria-hidden="true"
      style={{ display: "block", flex: "0 0 auto", ...(style || {}) }}>
      <rect x="3" y="3" width="42" height="42" rx="11.5" fill={tile} />
      <path d="M21.7 18.6 L22.5 32.2 A1.55 1.55 0 0 0 25.5 32.2 L26.3 18.6 Z" fill={ink} />
      <path d="M24 21C17.6 21 13.8 17.4 13.8 11.3 20.2 11.3 24 14.9 24 21Z" fill={ink} />
      <path d="M24 21C30.4 21 34.2 17.4 34.2 11.3 27.8 11.3 24 14.9 24 21Z" fill={leaf} />
    </svg>
  );
}

/* ---------- formatters (locale id-ID: thousands with '.') ---------- */
const fmtID = (n) => n.toLocaleString("id-ID");

/* ---------- Confidence ring ---------- */
function ConfidenceRing({ value, size = 76, stroke = 7, track = "#E2E8F0", color = "var(--primary-deep)", textColor }) {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const off = c * (1 - value / 100);
  return (
    <div className="ring" style={{ width: size, height: size }}>
      <svg width={size} height={size}>
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={track} strokeWidth={stroke} />
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={color} strokeWidth={stroke}
          strokeDasharray={c} strokeDashoffset={off} strokeLinecap="round" />
      </svg>
      <span className="pct" style={textColor ? { color: textColor } : undefined}>{value}%</span>
    </div>
  );
}

/* ---------- Risk scale /5 ---------- */
const riskTone = (score) => (score < 2.5 ? "green" : score < 3.5 ? "amber" : "red");
const riskLabel = (score) => (score < 2.5 ? "Rendah" : score < 3.5 ? "Sedang" : "Tinggi");

function RiskScale({ score, showNum = true, showPill = false }) {
  const tone = riskTone(score);
  const pct = Math.max(0, Math.min(100, (score / 5) * 100));
  return (
    <div className="risk-scale">
      <div className="risk-track" title={score.toFixed(1).replace(".", ",") + " dari 5"}>
        <div className={"risk-fill " + tone} style={{ width: pct + "%" }} />
        {[1, 2, 3, 4].map((i) => (
          <span key={i} className="risk-tick" style={{ left: i * 20 + "%" }} />
        ))}
      </div>
      {showNum && <span className="risk-num">{score.toFixed(1).replace(".", ",")}<span className="of"> / 5</span></span>}
      {showPill && <span className={"risk-pill " + tone}>{riskLabel(score)}</span>}
    </div>
  );
}

/* ---------- Status badge ---------- */
function StatusBadge({ tone, icon, children }) {
  return (
    <span className={"status-badge " + tone}>
      {icon && <span className="ic"><Icon name={icon} size={15} /></span>}
      {children}
    </span>
  );
}

/* ---------- Recommendation block (decision-first, dominant) ---------- */
function Recommendation({ tone = "green", eyebrow = "Rekomendasi Keputusan", icon = "circle-check-big",
  headline, badge, sub, facts = [], confidence, confLabel, confNote, vintage }) {
  return (
    <div className={"reco tone-" + tone}>
      <div className="reco-main">
        <div className="reco-rail" />
        <div className="reco-eyebrow"><span className="ic"><Icon name="sparkles" size={14} /></span>{eyebrow}</div>
        <div className="reco-headline">
          <h2>{headline}</h2>
          {badge && <StatusBadge tone={badge.tone} icon={badge.icon}>{badge.label}</StatusBadge>}
        </div>
        {sub && <p className="reco-sub">{sub}</p>}
        {facts.length > 0 && (
          <div className="reco-facts">
            {facts.map((f, i) => (
              <span key={i} className="reco-fact">
                {f.icon && <span className="ic"><Icon name={f.icon} size={13} /></span>}
                {f.label} <b>{f.value}</b>
              </span>
            ))}
          </div>
        )}
      </div>
      <div className="reco-side">
        <div className="conf">
          <ConfidenceRing value={confidence}
            color={tone === "green" ? "var(--success-solid)" : tone === "amber" ? "var(--warning-solid)" : tone === "red" ? "#DC2626" : "var(--primary-deep)"} />
          <div className="conf-meta">
            <div className="k">Confidence</div>
            <div className="v">{confLabel || "Tingkat keyakinan model"}</div>
          </div>
        </div>
        {confNote && <div className="conf-note"><span className="ic"><Icon name="info" size={12} /></span>{confNote}</div>}
        <div className="reco-vintage"><span className="ic"><Icon name="database" size={13} /></span>Vintage data: {vintage}<VintageNote align="right" /></div>
      </div>
    </div>
  );
}

/* ---------- Vintage multi-source note (hover/focus tooltip) ---------- */
function VintageNote({ align = "right", dir = "up" }) {
  return (
    <span className={"vintage-info " + align + " " + dir} tabIndex={0} aria-label="Tentang vintage data">
      <Icon name="info" size={12} />
      <span className="vintage-pop">
        <b>Vintage lintas-sumber.</b> TARA menyatukan data dari beberapa sumber dengan tanggal pembaruan berbeda — mis. Bapanas Mar 2026, OJK Q4 2025 — dan menandai setiap vintage secara transparan, bukan menyamarkannya.
      </span>
    </span>
  );
}

/* ---------- Context header bar ---------- */
function ContextHeader({ items, vintage }) {
  return (
    <div className="ctx-bar">
      {items.map((it, i) => (
        <div key={i} className="ctx">
          <span className="ic"><Icon name={it.icon} size={15} /></span>
          <div className="ctx-col">
            <span className="lbl">{it.label}</span>
            <span className="val">{it.value}</span>
          </div>
        </div>
      ))}
      <div className="spacer" />
      <div className="vintage"><span className="dot" />Data per {vintage}<VintageNote align="right" /></div>
    </div>
  );
}

/* ---------- Section eyebrow ---------- */
function SecEyebrow({ icon, children }) {
  return <div className="sec-eyebrow">{icon && <span className="ic"><Icon name={icon} size={15} /></span>}{children}</div>;
}

/* ---------- Stat card ---------- */
function StatCard({ icon, label, value, unit, sub, trend }) {
  return (
    <div className="stat-card">
      <div className="sc-top"><span className="ic"><Icon name={icon} size={14} /></span>{label}</div>
      <div className="sc-val">{value}{unit && <span className="u">{unit}</span>}</div>
      {sub && <div className="sc-sub">{trend && <span className={"sc-trend " + trend.dir}>{trend.text} </span>}{sub}</div>}
    </div>
  );
}

/* ---------- Panel ---------- */
function Panel({ icon, title, sub, action, children, style }) {
  return (
    <div className="panel" style={style}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16, gap: 12 }}>
        <div>
          <div className="panel-title">{icon && <span className="ic"><Icon name={icon} size={16} /></span>}{title}</div>
          {sub && <div className="panel-sub">{sub}</div>}
        </div>
        {action}
      </div>
      {children}
    </div>
  );
}

/* ---------- Note (positioning / regulatory) ---------- */
function Note({ icon = "info", children }) {
  return <div className="note"><span className="ic"><Icon name={icon} size={16} /></span><div>{children}</div></div>;
}

/* ---------- Source attribution ---------- */
function Sources({ list }) {
  return (
    <div className="sources">
      <span className="src-lbl"><span className="ic"><Icon name="git-merge" size={13} /></span>Sumber Data</span>
      <div className="src-chips">
        {list.map((s, i) => (
          <span key={i} className="src"><span className="dot" />{s.name}{s.fresh && <span className="fresh">· {s.fresh}</span>}</span>
        ))}
      </div>
    </div>
  );
}

/* ---------- Cross-role early-warning dataset (consistent across pages) ---------- */
const WARNINGS = [
  {
    id: "demak-banjir",
    icon: "waves",
    level: "Tinggi",
    levelClass: "tinggi",
    featured: true,
    title: "Peringatan Banjir — Kab. Demak",
    region: "Kab. Demak, Jawa Tengah",
    season: "MT2 2026",
    vintage: "Feb 2026",
    summary: "Proyeksi luapan sungai dan rob pesisir pada puncak MT2, diperberat alih fungsi sawah ke tambak. Sinyal ini tidak meniadakan pembiayaan — ia mengubah resep tiap peran agar wilayah tetap terlindungi, bukan dikecualikan.",
    roles: {
      bank:        { action: "Syaratkan AUTP wajib, pencairan bertahap (tranche), dan tenor adaptif — KUR tetap disalurkan dengan syarat.", link: "bank" },
      pemda:       { action: "Pra-posisi cadangan beras di simpul terdekat dan siagakan anggaran bantuan tanggap darurat." },
      distributor: { action: "Antisipasi penurunan pasokan dari wilayah ini; siapkan substitusi muatan dari koridor surplus lain." },
      koperasi:    { action: "Percepat/sesuaikan jadwal tanam anggota dan siapkan klaim AUTP kolektif sejak dini." },
    },
  },
  {
    id: "ntt-kekeringan",
    icon: "sun",
    level: "Tinggi",
    levelClass: "tinggi",
    title: "Peringatan Kekeringan — Sentra NTT",
    region: "23 kabupaten, Nusa Tenggara Timur",
    season: "MT2 2026",
    vintage: "Feb 2026",
    summary: "Defisit curah hujan memperdalam kebutuhan pangan koridor timur. Sinyal dibaca sebagai prioritas penyaluran surplus, bukan wilayah yang dilepas.",
    roles: {
      bank:        { action: "Tahan ekspansi KUR padi lahan tadah hujan; arahkan ke komoditas tahan kering + AUTP." },
      pemda:       { action: "Prioritaskan alokasi surplus Jatim dan percepat realisasi subsidi distribusi." },
      distributor: { action: "Naikkan frekuensi koridor Surabaya→Kupang; baca defisit sebagai peluang muatan.", link: "distributor" },
      koperasi:    { action: "Dorong diversifikasi ke komoditas tahan kering untuk musim berikutnya." },
    },
  },
  {
    id: "opt-wereng",
    icon: "bug",
    level: "Sedang",
    levelClass: "sedang",
    title: "Peringatan OPT Wereng — Sentra Pantura",
    region: "Beberapa sentra padi Pantura",
    season: "MT2 2026",
    vintage: "Feb 2026",
    summary: "Populasi wereng batang cokelat meningkat terbatas dan masih terkendali. Dipantau agar mitigasi mendahului eskalasi.",
    roles: {
      bank:        { action: "Pertahankan plafon; jadikan kepatuhan pengendalian OPT sebagai syarat ringan." },
      pemda:       { action: "Aktifkan gerakan pengendalian dini dan distribusi agens hayati." },
      distributor: { action: "Pantau potensi penyusutan volume gabah dari sentra terdampak." },
      koperasi:    { action: "Sosialisasikan jadwal tanam serempak dan pemantauan petak anggota." },
    },
  },
];
const getWarning = (id) => WARNINGS.find((w) => w.id === id);

/* ---------- Early-warning secondary card (calm ↔ acute escalation) ---------- */
function EarlyWarningCard({ mode, region, warning, role, onNav, note }) {
  if (mode === "calm") {
    return (
      <div className="ew-card calm">
        <div className="ew-dot"><Icon name="shield-check" size={16} /></div>
        <div className="ew-c-text">
          <div className="ew-c-title">Tidak ada peringatan dini aktif</div>
          <div className="ew-c-sub">Risiko {region} terpantau Rendah · pemantauan rutin berjalan</div>
        </div>
        <span className="ew-c-status">Aman</span>
      </div>
    );
  }
  const r = warning.roles[role] || {};
  return (
    <div className="ew-card acute">
      <div className="ewa-head">
        <div className="ewa-icon"><Icon name={warning.icon} size={18} /></div>
        <div className="ewa-htext">
          <div className="ewa-eyebrow">Peringatan dini aktif · naik ke prioritas</div>
          <div className="ewa-title">{warning.title} · {warning.season}</div>
        </div>
        <span className="ewa-level">Tingkat: {warning.level}</span>
      </div>
      <div className="ewa-body">
        <div className="ewa-role-label">{note || "Terjemahan untuk peran ini"}</div>
        <div className="ewa-action"><span className="ic"><Icon name="clipboard-check" size={15} /></span>{r.action}</div>
        <button className="ewa-foot" onClick={() => onNav && onNav("peringatan")}>
          Lihat semua peringatan &amp; terjemahan lintas-peran<span className="ic"><Icon name="arrow-right" size={14} color="var(--primary-mid)" /></span>
        </button>
      </div>
    </div>
  );
}

Object.assign(window, {
  Icon, TaraMark, fmtID, ConfidenceRing, RiskScale, riskTone, riskLabel, StatusBadge,
  Recommendation, ContextHeader, VintageNote, SecEyebrow, StatCard, Panel, Note, Sources,
  WARNINGS, getWarning, EarlyWarningCard,
});