// TARA — Halaman 5: Peringatan Dini (konsolidasi lintas-peran)
// Prinsip: satu sinyal risiko → keputusan berbeda per peran.

const ROLE_LABELS = {
  bank:        { name: "Bank", icon: "landmark" },
  pemda:       { name: "Pemerintah Daerah", icon: "building-2" },
  distributor: { name: "Distributor", icon: "truck" },
  koperasi:    { name: "Koperasi Tani", icon: "users" },
};
const ROLE_ORDER = ["bank", "pemda", "distributor", "koperasi"];

function WarnRoleCell({ roleKey, data, onNav }) {
  const meta = ROLE_LABELS[roleKey];
  const linked = !!data.link;
  const Tag = linked ? "button" : "div";
  return (
    <Tag className={"wc-role" + (linked ? " linked" : "")} onClick={linked ? () => onNav(data.link) : undefined}>
      <div className="wcr-top">
        <span className="wcr-icon"><Icon name={meta.icon} size={14} /></span>
        <span className="wcr-name">{meta.name}</span>
      </div>
      <div className="wcr-action"><span className="ic"><Icon name="corner-down-right" size={13} /></span>{data.action}</div>
      {linked && <span className="wcr-link">Buka dashboard {meta.name}<span className="ic"><Icon name="arrow-right" size={12} /></span></span>}
    </Tag>
  );
}

function WarnCard({ w, onNav }) {
  return (
    <div className={"warn-card lvl-" + w.levelClass + (w.featured ? " featured" : "")}>
      <div className="wc-head">
        <span className="wc-icon"><Icon name={w.icon} size={20} /></span>
        <div className="wc-head-text">
          <div className="wc-title">{w.title}</div>
          <div className="wc-meta">
            <span><Icon name="map-pin" size={12} style={{ display: "inline", verticalAlign: "-2px", marginRight: 4, opacity: .6 }} />{w.region}</span>
            <span className="sep" /><span>{w.season}</span>
            <span className="sep" /><span>Vintage {w.vintage}</span>
          </div>
        </div>
        <span className="wc-level">Tingkat: {w.level}</span>
      </div>

      <div className="wc-summary">{w.summary}</div>

      <div className="wc-roles-label"><span className="ic"><Icon name="git-fork" size={13} /></span>Satu sinyal → terjemahan keputusan per peran</div>
      <div className="wc-roles">
        {ROLE_ORDER.map((rk) => <WarnRoleCell key={rk} roleKey={rk} data={w.roles[rk]} onNav={onNav} />)}
      </div>
    </div>
  );
}

function EarlyWarningView({ onNav }) {
  const featured = WARNINGS.find((w) => w.featured);
  const others = WARNINGS.filter((w) => !w.featured);
  const tinggi = WARNINGS.filter((w) => w.levelClass === "tinggi").length;

  return (
    <>
      <div className="page-head">
        <div>
          <div className="title">Peringatan Dini</div>
          <div className="desc">Konsolidasi sinyal risiko aktif lintas-wilayah. Tiap peringatan diterjemahkan menjadi <b style={{ fontWeight: 600, color: "var(--fg2)" }}>aksi konkret per peran</b> — sinyal yang sama, keputusan berbeda.</div>
        </div>
      </div>

      <ContextHeader vintage="Februari 2026" items={[
        { icon: "bell-ring", label: "Peringatan aktif", value: WARNINGS.length + " sinyal" },
        { icon: "triangle-alert", label: "Tingkat tinggi", value: tinggi + " wilayah" },
        { icon: "calendar", label: "Musim Tanam", value: "MT2 2026" },
      ]} />

      <div className="section-gap">
        <div>
          <SecEyebrow icon="siren">Peringatan Aktif Unggulan</SecEyebrow>
          <WarnCard w={featured} onNav={onNav} />
        </div>

        <div>
          <SecEyebrow icon="list">Peringatan Aktif Lainnya</SecEyebrow>
          <div className="warn-list">
            {others.map((w) => <WarnCard key={w.id} w={w} onNav={onNav} />)}
          </div>
        </div>

        <Note icon="shield-check">
          Setiap peringatan berpasangan dengan resep aksi — <b>tidak ada indikator risiko yang berdiri telanjang tanpa aksi.</b> TARA melihat wilayah rentan untuk melindunginya, bukan untuk mengecualikannya.
        </Note>

        <Sources list={[
          { name: "BMKG", fresh: "Feb 2026" },
          { name: "SIAP TANAM", fresh: "Feb 2026" },
          { name: "Bapanas", fresh: "Mar 2026" },
          { name: "Pusat Proteksi Tanaman", fresh: "Feb 2026" },
        ]} />
      </div>
    </>
  );
}

Object.assign(window, { EarlyWarningView });