// TARA — Halaman 3: Distributor
const CORRIDORS = [
  { route: "Surabaya → Kupang", from: "Jatim → NTT", eff: 82, best: true },
  { route: "Makassar → Kupang", from: "Sulsel → NTT", eff: 71 },
  { route: "Makassar → Jayapura", from: "Sulsel → Papua", eff: 64 },
  { route: "Surabaya → Ambon", from: "Jatim → Maluku", eff: 58 },
];

function DistributorView({ onNav }) {
  return (
    <>
      <div className="page-head">
        <div>
          <div className="title">Distributor</div>
          <div className="desc">Optimasi koridor distribusi: defisit wilayah timur dibaca sebagai <b style={{ fontWeight: 600, color: "var(--fg2)" }}>peluang muatan &amp; potensi volume kirim</b>, bukan kewajiban intervensi.</div>
        </div>
      </div>

      <ContextHeader vintage="Februari 2026" items={[
        { icon: "route", label: "Koridor", value: "Jawa Timur → NTT" },
        { icon: "wheat", label: "Komoditas", value: "Beras" },
        { icon: "calendar", label: "Musim Tanam", value: "MT2 2026" },
      ]} />

      <Recommendation
        tone="blue"
        headline="Rute distribusi optimal tersedia — hemat 18%"
        badge={{ tone: "green", icon: "circle-check-big", label: "Rute Direkomendasikan" }}
        sub="Koridor Surabaya → Kupang memberi efisiensi tertinggi: ETA 5–7 hari, kapasitas 3.200 ton/trip, frekuensi 2× per minggu — menghubungkan surplus Jatim ke 23 kabupaten defisit NTT."
        confidence={88}
        confLabel="Data rute & kapasitas mutakhir"
        vintage="Feb 2026"
        facts={[
          { icon: "piggy-bank", label: "Penghematan", value: "18%" },
          { icon: "timer", label: "ETA", value: "5–7 hari" },
          { icon: "container", label: "Kapasitas", value: "3.200 ton/trip" },
          { icon: "repeat", label: "Frekuensi", value: "2×/minggu" },
        ]}
      />

      <div className="section-gap">
        <div className="two-col">
          <Panel icon="git-compare-arrows" title="Neraca Koridor Utama" sub="Surplus siap kirim vs kebutuhan wilayah tujuan">
            <div className="cards-2" style={{ marginBottom: 16 }}>
              <div className="stat-card" style={{ borderColor: "var(--success-border)", background: "var(--success-bg)" }}>
                <div className="sc-top"><span className="ic"><Icon name="arrow-up-from-line" size={14} /></span>Surplus Jatim Siap Kirim</div>
                <div className="sc-val" style={{ color: "var(--success-fg)" }}>+45.200<span className="u">ton</span></div>
                <div className="sc-sub">Teralokasi untuk koridor timur</div>
              </div>
              <div className="stat-card" style={{ borderColor: "var(--blue-200)", background: "var(--blue-50)" }}>
                <div className="sc-top"><span className="ic"><Icon name="package-plus" size={14} /></span>Peluang Muatan (NTT)</div>
                <div className="sc-val" style={{ color: "var(--primary-deep)" }}>23<span className="u">kabupaten</span></div>
                <div className="sc-sub">Potensi volume kirim rutin · permintaan terverifikasi</div>
              </div>
            </div>
            <div className="bar-item">
              <div className="bi-top"><span>Pemenuhan permintaan koridor</span><span className="v"><b>62%</b> tercakup trip terjadwal</span></div>
              <div className="bar-track"><span style={{ width: "62%", background: "var(--blue-accent-2)" }} /></div>
              <div className="bar-note">62% kebutuhan koridor tercakup oleh trip terjadwal saat ini; sisanya (38%) memerlukan penambahan frekuensi atau armada — yaitu ruang muatan tambahan yang dapat diisi.</div>
            </div>
          </Panel>

          <Panel icon="receipt-text" title="Detail Rute Terpilih" sub="Surabaya → Kupang">
            <div style={{ display: "grid", gap: 0 }}>
              {[
                { ic: "map-pin", k: "Asal → Tujuan", v: "Pel. Tanjung Perak → Pel. Tenau" },
                { ic: "timer", k: "Estimasi waktu (ETA)", v: "5–7 hari" },
                { ic: "container", k: "Kapasitas per trip", v: "3.200 ton" },
                { ic: "repeat", k: "Frekuensi", v: "2× per minggu" },
                { ic: "banknote", k: "Estimasi biaya logistik", v: "Rp 1.180 / kg" },
                { ic: "piggy-bank", k: "Penghematan vs alternatif", v: "18%" },
              ].map((row, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "11px 2px", borderBottom: i < 5 ? "1px solid var(--border-3)" : "none" }}>
                  <Icon name={row.ic} size={15} style={{ opacity: .55 }} />
                  <span style={{ flex: 1, font: "var(--t-body)", color: "var(--fg3)" }}>{row.k}</span>
                  <span style={{ font: "600 13px/18px var(--font-sans)", color: i === 5 ? "var(--success-fg)" : "var(--fg1)" }}>{row.v}</span>
                </div>
              ))}
            </div>
          </Panel>
        </div>

        <div>
          <SecEyebrow icon="map">Peta Koridor Distribusi</SecEyebrow>
          <div className="map-card">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 12, flexWrap: "wrap", gap: 12 }}>
              <div>
                <div className="panel-title"><span className="ic"><Icon name="route" size={16} /></span>Koridor Surabaya → Kupang &amp; rute pendukung</div>
                <div className="panel-sub">Garis tebal = koridor utama terpilih · garis tipis = koridor sekunder dari Indeks Efisiensi</div>
              </div>
              <div className="map-legend">
                <span className="lg"><span className="sw" style={{ background: "#0857C3", height: 3, width: 18, borderRadius: 2 }} />Koridor utama</span>
                <span className="lg"><span className="sw" style={{ background: "#307FE2", height: 2, width: 18, borderRadius: 2, opacity: .6 }} />Koridor sekunder</span>
              </div>
            </div>
            <CorridorMiniMap />
          </div>
        </div>

        <div>
          <SecEyebrow icon="bar-chart-3">Perbandingan Efisiensi Koridor</SecEyebrow>
          <Panel icon="" title="Indeks Efisiensi Rute" sub="Mempertimbangkan jarak, biaya, kapasitas & frekuensi">
            <div className="corridor">
              {CORRIDORS.map((c) => (
                <div key={c.route} className="corr-row">
                  <div className="cr-name">
                    <div className="cr-head">{c.route}{c.best && <span className="cr-opt"><span className="ic"><Icon name="check" size={10} color="var(--success-fg)" /></span>Optimal</span>}</div>
                    <div className="cr-sub">{c.from}</div>
                  </div>
                  <div className="bar-track" style={{ height: 10 }}>
                    <span style={{ width: c.eff + "%", background: c.best ? "var(--success-solid)" : "var(--blue-300)" }} />
                  </div>
                  <span className="cr-eff" style={{ color: c.best ? "var(--success-fg)" : "var(--fg2)" }}>{c.eff}%</span>
                </div>
              ))}
            </div>
          </Panel>
        </div>

        <div>
          <SecEyebrow icon="bell-ring">Peringatan Dini Koridor</SecEyebrow>
          <EarlyWarningCard mode="calm" region="koridor Jatim → NTT" />
        </div>

        <Note icon="info">
          Indeks efisiensi adalah <b>skor relatif antar-koridor</b> untuk membantu prioritisasi armada. Keputusan penjadwalan akhir tetap mempertimbangkan kontrak, kondisi pelabuhan, dan cuaca pelayaran terkini.
        </Note>

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

Object.assign(window, { DistributorView });