// TARA — Halaman 2: Pemerintah Daerah
const NTT_TARGETS = [
  { kab: "Kab. Timor Tengah Selatan", need: 8200, urg: "Tinggi", cov: "Terpenuhi", covTone: "green" },
  { kab: "Kab. Sumba Timur", need: 6400, urg: "Tinggi", cov: "Terpenuhi", covTone: "green" },
  { kab: "Kab. Belu", need: 4100, urg: "Sedang", cov: "Sebagian", covTone: "amber", note: "Sebagian via rute darat \u2192 jadwalkan kapal tambahan untuk menutup sisa" },
  { kab: "Kab. Manggarai Timur", need: 3500, urg: "Sedang", cov: "Belum Terpenuhi", covTone: "red", note: "Kendala rute laut musim ombak \u2192 mobilisasi armada tambahan & rerouting via Pel. Ende" },
];
const URG_TONE = { Tinggi: "red", Sedang: "amber", Rendah: "green" };

const PROV_RISK = [
  { name: "Risiko Defisit Pangan", score: 1.6, desc: "Surplus besar, stok aman" },
  { name: "Risiko Inflasi Pangan", score: 2.4, desc: "Harga terkendali di atas HPP" },
  { name: "Risiko Distribusi Antarwilayah", score: 2.8, desc: "Ketergantungan rute laut" },
];

function PemdaView({ onNav }) {
  return (
    <>
      <div className="page-head">
        <div>
          <div className="title">Pemerintah Daerah</div>
          <div className="desc">Penajaman subsidi &amp; intervensi berbasis neraca pangan provinsi.</div>
        </div>
      </div>

      <ContextHeader vintage="Februari 2026" items={[
        { icon: "map-pin", label: "Wilayah", value: "Provinsi Jawa Timur" },
        { icon: "wheat", label: "Komoditas", value: "Padi & Beras" },
        { icon: "calendar", label: "Musim Tanam", value: "MT2 2026" },
      ]} />

      <Recommendation
        tone="blue"
        headline="Surplus tersedia — alokasikan ke wilayah defisit (NTT)"
        badge={{ tone: "blue", icon: "flag", label: "Prioritas Intervensi" }}
        sub="Jawa Timur surplus +1,2 juta ton dengan durasi ketahanan stok di atas 120 hari (aman). Rekomendasi: salurkan kelebihan ke koridor Indonesia Timur melalui Pelabuhan Surabaya."
        confidence={88}
        confLabel="Neraca provinsi konsisten"
        vintage="Feb 2026"
        facts={[
          { icon: "trending-up", label: "Surplus beras", value: "+1,2 juta ton" },
          { icon: "shield-check", label: "Ketahanan stok", value: ">120 hari" },
          { icon: "ship", label: "Titik kirim", value: "Pel. Surabaya" },
        ]}
      />

      <div className="section-gap">
        <div className="two-col">
          <Panel icon="scale" title="Neraca Surplus–Defisit Jawa Timur" sub="Proyeksi beras Musim Tanam 2 2026">
            <div className="cards-2" style={{ marginBottom: 18 }}>
              <div className="stat-card" style={{ borderColor: "var(--success-border)", background: "var(--success-bg)" }}>
                <div className="sc-top">Surplus Provinsi</div>
                <div className="sc-val" style={{ color: "var(--success-fg)" }}>+1,2<span className="u">juta ton</span></div>
                <div className="sc-sub">Siap dialokasikan keluar wilayah</div>
              </div>
              <div className="stat-card">
                <div className="sc-top">Durasi Ketahanan Stok</div>
                <div className="sc-val">&gt;120<span className="u">hari</span></div>
                <div className="sc-sub">Status: aman</div>
              </div>
            </div>
            <div className="bar-item">
              <div className="bi-top"><span>Komposisi neraca beras</span><span className="v">Total proyeksi <b>4,8 juta ton</b></span></div>
              <div className="dual-bar">
                <span className="s" style={{ left: 0, width: "75%", background: "var(--progress-blue-deep)" }} />
                <span className="s" style={{ left: "75%", width: "25%", background: "var(--progress-blue-light)" }} />
              </div>
              <div className="dual-legend">
                <span><span className="dot" style={{ background: "var(--progress-blue-deep)" }} />Konsumsi & cadangan lokal · 3,6 juta ton</span>
                <span><span className="dot" style={{ background: "var(--progress-blue-light)" }} />Surplus dialokasikan · 1,2 juta ton</span>
              </div>
            </div>
          </Panel>

          <Panel icon="activity" title="Indikator Risiko Provinsi" sub="Skala /5 · semakin rendah semakin aman">
            <div style={{ display: "grid", gap: 16 }}>
              {PROV_RISK.map((r) => (
                <div key={r.name}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 7 }}>
                    <div>
                      <div style={{ font: "600 13px/18px var(--font-sans)", color: "var(--fg1)" }}>{r.name}</div>
                      <div style={{ font: "400 11px/15px var(--font-sans)", color: "var(--fg4)", marginTop: 1 }}>{r.desc}</div>
                    </div>
                    <span className={"risk-pill " + riskTone(r.score)}>{riskLabel(r.score)}</span>
                  </div>
                  <RiskScale score={r.score} />
                </div>
              ))}
            </div>
          </Panel>
        </div>

        <div>
          <SecEyebrow icon="map-pinned">Wilayah Tujuan Defisit — Prioritas NTT</SecEyebrow>
          <div className="panel" style={{ padding: 0, overflow: "hidden" }}>
            <table className="tbl">
              <thead>
                <tr><th>Kabupaten Tujuan</th><th>Estimasi Kebutuhan</th><th>Urgensi</th><th style={{ textAlign: "right" }}>Cakupan oleh Surplus Jatim</th></tr>
              </thead>
              <tbody>
                {NTT_TARGETS.map((t) => (
                  <tr key={t.kab}>
                    <td><b style={{ fontWeight: 600 }}>{t.kab}</b><div style={{ font: "var(--t-caption)", color: "var(--fg4)", marginTop: 2 }}>Nusa Tenggara Timur</div></td>
                    <td>{fmtID(t.need)} ton beras</td>
                    <td><span className={"risk-pill " + URG_TONE[t.urg]}>{t.urg}</span></td>
                    <td style={{ textAlign: "right" }}>
                      <span className={"status-badge " + t.covTone} style={{ padding: "4px 10px", font: "700 11px/15px var(--font-sans)" }}>{t.cov}</span>
                      {t.note && <div style={{ font: "var(--t-caption)", color: "var(--fg4)", marginTop: 4, maxWidth: 220, marginLeft: "auto", textWrap: "pretty" }}>{t.note}</div>}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            <div style={{ padding: "12px 16px", borderTop: "1px solid var(--border-3)", background: "var(--bg1)", font: "var(--t-caption)", color: "var(--fg3)", display: "flex", justifyContent: "space-between" }}>
              <span>Menampilkan 4 dari <b style={{ color: "var(--fg1)" }}>23 kabupaten</b> defisit terdeteksi di NTT</span>
              <span>Total estimasi kebutuhan koridor: <b style={{ color: "var(--fg1)" }}>±230.000 ton</b></span>
            </div>
          </div>

          <div className="surplus-link" style={{ marginTop: 12 }}>
            <div className="sl-top">
              <div className="sl-label">Surplus Jawa Timur menutup kebutuhan koridor NTT</div>
              <div className="sl-val"><b>±230.000 ton</b> dari <b>1,2 juta ton</b> surplus · <span className="sl-pct">~19% terpakai</span></div>
            </div>
            <div className="sl-bar"><span style={{ width: "19%" }} /></div>
            <div className="sl-note"><span className="ic"><Icon name="circle-check-big" size={15} color="var(--success-fg)" /></span>Surplus cukup menutup seluruh defisit NTT — sisa <b style={{ marginLeft: 3 }}>±970.000 ton</b> tersedia untuk koridor lain.</div>
          </div>
        </div>

        <div>
          <SecEyebrow icon="target">Instrumen Intervensi</SecEyebrow>
          <div className="cards-3">
            <StatCard icon="wallet" label="Anggaran Intervensi Tersedia" value="Rp 184" unit="miliar" sub="Pos subsidi distribusi & transport" />
            <StatCard icon="route" label="Rute Optimal Direkomendasikan" value="Surabaya → Kupang" sub="Hemat 18% vs alternatif" />
            <StatCard icon="check-check" label="Realisasi Subsidi Terserap" value="71" unit="%" sub="Periode berjalan MT2" trend={{ dir: "up", text: "▲" }} />
          </div>
        </div>

        <div>
          <SecEyebrow icon="bell-ring">Peringatan Dini Wilayah</SecEyebrow>
          <EarlyWarningCard mode="calm" region="Provinsi Jawa Timur" />
        </div>

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

Object.assign(window, { PemdaView });