// ===== Smart Agro Food Collection Center Screens =====
const { useState: useS_A, useMemo: useM_A } = React;
const { MESSAGE_TYPES, STATUS_TYPES } = window.IDSS;

function AgroDashboard({ scenario }) {
  const { DAPUR_LIST, PREDIKSI_PANEN, NERACA } = window.IDSS;
  const { KPI, Sparkline, Icon, BarMini } = window.IDSSUI;

  const [refreshKey, setRefreshKey] = useS_App(0); // Trigger local re-render on refresh

  const tersuplai = DAPUR_LIST.filter(d => d.status === STATUS_TYPES.TERSUPLAI).length;
  const menunggu = DAPUR_LIST.filter(d => d.status === STATUS_TYPES.MENUNGGU).length;
  const kritis = DAPUR_LIST.filter(d => d.status === STATUS_TYPES.KRITIS).length;
  const totalJiwa = DAPUR_LIST.reduce((s,d)=>s+d.jiwa,0);

  const defisitItems = NERACA.filter(n => n.status === "defisit");
  const berlebihItems = NERACA.filter(n => n.status === "berlebih");

  const sparkA = [82,84,83,85,87,86,88,90,89,91,92,94,93,95];
  const sparkB = [12,14,11,16,15,13,15,18,16,14,12,11,13,15];

  // ===== BUTTON HANDLERS =====
  const handleRefresh = () => setRefreshKey(k => k + 1);

  const handleExportCSV = () => {
    const headers = ["Komoditas", "Kebutuhan", "Tersedia", "Terpenuhi", "Status"];
    const rows = NERACA.map(n => [
      n.komoditas,
      n.kebutuhan,
      n.tersedia,
      n.tersedia + (n.isFulfilled ? n.fulfilled : 0),
      n.status
    ]);
    const csv = [headers, ...rows].map(r => r.map(v => `"${v}"`).join(",")).join("\n");
    const blob = new Blob([csv], { type: "text/csv" });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `SAFCC-Neraca-${new Date().toISOString().split('T')[0]}.csv`;
    a.click();
  };

  // Phase 2: Listen for SUPPLIER fulfillment broadcasts
  React.useEffect(() => {
    const handleSupplierUpdate = (event) => {
      if (event.data?.type === MESSAGE_TYPES.SUPPLIER_FULFILLMENT_SUBMITTED) {
        const fulfillment = event.data.payload || event.data.fulfillment;
        // Update request status in SAFCC_REQUESTS
        const { SAFCC_REQUESTS } = window.IDSS;
        const request = SAFCC_REQUESTS.find(r => r.id === fulfillment.requestId);
        if (request) {
          request.supplierFulfillment = fulfillment;
          request.status = fulfillment.persentase >= 100 ? "ready_to_ship" : "partial";
        }
      }
    };

    window.addEventListener("message", handleSupplierUpdate);
    return () => window.removeEventListener("message", handleSupplierUpdate);
  }, []);

  // Phase 2 Stage 3: Calculate live NERACA based on fulfillments
  const calculateLiveNeraca = () => {
    const { SUPPLIER_FULFILLMENT_SUBMISSIONS } = window.IDSS;
    const today = new Date().toISOString().split('T')[0];
    const fulfillments = (SUPPLIER_FULFILLMENT_SUBMISSIONS || []).filter(f => f.tanggalSubmit === today);

    return NERACA.map(item => {
      // Sum fulfillments for this komoditas today
      const fulfilled = fulfillments
        .filter(f => f.komoditas === item.komoditas)
        .reduce((sum, f) => sum + f.jumlahDiberikan, 0);

      // Calculate actual available + fulfilled
      const tersediaAkual = item.tersedia + fulfilled;
      const selisih = tersediaAkual - item.kebutuhan;
      const statusAkual = tersediaAkual >= item.kebutuhan ? "cukup" : "defisit";

      return {
        ...item,
        tersedia: tersediaAkual,
        selisih: selisih,
        status: statusAkual,
        fulfilled: fulfilled,
        isFulfilled: fulfilled > 0
      };
    });
  };

  const liveNeraca = calculateLiveNeraca();

  return (
    <>
      <div className="page-header">
        <div>
          <div className="crumbs"><span>Smart Agro</span><span>Dashboard</span><span>Pilot Cianjur</span></div>
          <h1 className="page-title">Operasional Hari Ini</h1>
          <div className="page-sub">📍 {new Date().toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })} · SAFCC Cianjur</div>
        </div>
        <div className="row gap-sm">
          <button className="btn" onClick={handleRefresh}><Icon name="refresh" size={14}/> Refresh data</button>
          <button className="btn" onClick={handleExportCSV}><Icon name="download" size={14}/> Ekspor laporan</button>
        </div>
      </div>

      {scenario === "krisis" && (
        <div className="alert danger fade-up" style={{ marginBottom: 20 }}>
          <div style={{ color: "var(--danger)" }}><Icon name="bell" size={18}/></div>
          <div>
            <div className="alert-title">Skenario aktif: Krisis pasokan</div>
            <div className="alert-body">3 komoditas defisit signifikan (ayam, bayam, minyak). Sistem merekomendasikan substitusi menu &amp; aktivasi supplier cadangan.</div>
          </div>
        </div>
      )}

      <div className="grid cols-4" style={{ marginBottom: 24 }}>
        <KPI intent="primary" label="Dapur Tersuplai" value={tersuplai} unit={`/ ${DAPUR_LIST.length} dapur`} delta="+2 vs kemarin" deltaKind="up"
          spark={<Sparkline data={sparkA} color="var(--primary)"/>}/>
        <KPI label="Menunggu Pengiriman" value={menunggu} unit="dapur" delta="ETA < 90 min" deltaKind="flat"
          spark={<Sparkline data={[3,2,4,3,5,4,3,2,3,2,3,2,2,2]} color="var(--warn)"/>}/>
        <KPI label="Status Kritis" value={kritis} unit="dapur" delta="butuh aksi segera" deltaKind="down"
          spark={<Sparkline data={[1,0,1,0,0,1,0,1,1,2,1,1,1,1]} color="var(--danger)"/>}/>
        <KPI label="Total Kapasitas Disuplai" value={totalJiwa.toLocaleString("id-ID")} unit="jiwa/hari (Sekolah + Posyandu)" delta="+1.4% w/w" deltaKind="up"
          spark={<Sparkline data={sparkB.map(x => x*1000+totalJiwa-15000)} color="var(--accent)"/>}/>
      </div>

      <div className="grid cols-12" style={{ marginBottom: 24 }}>
        <div className="card" style={{ gridColumn: "span 8" }}>
          <div className="card-head">
            <div>
              <h2 className="h2">Status Suplai Dapur</h2>
              <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>{DAPUR_LIST.length} titik dapur · {DAPUR_LIST.filter(d=>d.tipe==="induk").length} induk · {DAPUR_LIST.filter(d=>d.tipe==="satelit").length} satelit</div>
            </div>
            <div className="row gap-xs">
              <span className="pill ok"><span className="led"/>Tersuplai {tersuplai}</span>
              <span className="pill warn"><span className="led"/>Menunggu {menunggu}</span>
              <span className="pill danger"><span className="led"/>Kritis {kritis}</span>
            </div>
          </div>
          <div style={{ maxHeight: 360, overflowY: "auto" }}>
            <table className="data">
              <thead><tr>
                <th>Dapur</th><th>Tipe</th><th className="num">Jiwa</th><th className="num">Sekolah</th><th className="num">Posyandu</th><th>Pengisian</th><th className="num">Last delivery</th><th>Status</th>
              </tr></thead>
              <tbody>
                {DAPUR_LIST.map(d => (
                  <tr key={d.id}>
                    <td>
                      <div style={{ fontWeight: 600 }}>{d.nama}</div>
                      <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)" }}>{d.id}</div>
                    </td>
                    <td><span className="tag">{d.tipe === "induk" ? "Induk" : "Satelit"}</span></td>
                    <td className="num"><strong>{d.jiwa.toLocaleString("id-ID")}</strong></td>
                    <td className="num">{d.sekolahTerlayani || "—"}</td>
                    <td className="num">{d.posyanduTerlayani || "—"}</td>
                    <td style={{ minWidth: 160 }}>
                      <div className="row gap-xs" style={{ alignItems: "center" }}>
                        <div style={{ flex: 1 }}><BarMini value={d.isi} max={100} kind={d.isi < 30 ? "danger" : d.isi < 70 ? "warn" : "accent"}/></div>
                        <span className="mono" style={{ fontSize: 11, width: 32, textAlign: "right" }}>{d.isi}%</span>
                      </div>
                    </td>
                    <td className="num">{d.lastDelivery}</td>
                    <td>
                      {d.status === STATUS_TYPES.TERSUPLAI && <span className="pill ok"><span className="led"/>Tersuplai</span>}
                      {d.status === STATUS_TYPES.MENUNGGU && <span className="pill warn"><span className="led"/>Menunggu</span>}
                      {d.status === STATUS_TYPES.KRITIS && <span className="pill danger"><span className="led"/>Kritis</span>}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div className="card" style={{ gridColumn: "span 4" }}>
          <div className="card-head">
            <h2 className="h2">Neraca Komoditas</h2>
            <span className="tag">5 teratas (live)</span>
          </div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 0, maxHeight: 380, overflowY: "auto", paddingRight: 4 }}>
            {liveNeraca.slice(0, 5).map((n, idx) => {
              const ratio = n.tersedia / n.kebutuhan;
              const pct = Math.min(150, ratio * 100);
              const kind = n.status === "defisit" ? "danger" : "accent";
              const statusText = n.status === "defisit"
                ? `Defisit ${Math.abs(n.selisih).toLocaleString("id-ID")}`
                : `Cukup +${n.selisih.toLocaleString("id-ID")}`;

              return (
                <div key={n.komoditas} style={{ paddingBottom: 12, marginBottom: 12, borderBottom: idx < 4 ? "1px solid var(--line)" : "none" }}>
                  <div className="row between" style={{ marginBottom: 2 }}>
                    <span style={{ fontSize: 12.5, fontWeight: 500 }}>{n.komoditas}</span>
                    <span className={`pill ${n.status === "defisit" ? "danger" : "ok"}`} style={{ fontSize: 10 }}>
                      {statusText}
                    </span>
                  </div>
                  <div className="row between" style={{ marginBottom: 6, fontSize: 11 }}>
                    <span className="muted">{n.tersedia.toLocaleString("id-ID")} / {n.kebutuhan.toLocaleString("id-ID")} {n.satuan}</span>
                    {n.isFulfilled && (
                      <span style={{ color: "var(--accent-700)", fontWeight: 600 }}>
                        +{n.fulfilled} (fulfillment)
                      </span>
                    )}
                  </div>
                  <div className={`bar ${kind}`}><span style={{ width: `${Math.min(100, pct)}%` }}/></div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <div className="grid cols-12">
        <div className="card" style={{ gridColumn: "span 7" }}>
          <div className="card-head"><h2 className="h2">Prediksi Panen Mendatang</h2><a href="#" onClick={e=>e.preventDefault()} style={{ fontSize: 12, color: "var(--primary)" }}>Lihat semua →</a></div>
          <table className="data">
            <thead><tr><th>Komoditas</th><th>Lokasi</th><th>Target panen</th><th>Prediksi</th><th className="num">Δ (hari)</th><th>Status</th></tr></thead>
            <tbody>
              {PREDIKSI_PANEN.slice(0,5).map(p => (
                <tr key={p.id}>
                  <td style={{ fontWeight: 600 }}>{p.komoditas}</td>
                  <td className="muted">{p.lokasi}</td>
                  <td className="mono" style={{ fontSize: 11.5 }}>{p.target}</td>
                  <td className="mono" style={{ fontSize: 11.5 }}>{p.prediksi}</td>
                  <td className="num" style={{ color: p.delay > 3 ? "var(--danger)" : p.delay > 0 ? "var(--warn)" : "var(--accent-700)" }}>
                    {p.delay > 0 ? `+${p.delay}` : p.delay}
                  </td>
                  <td>
                    {p.status === "tepat-waktu" && <span className="pill ok"><span className="led"/>Tepat waktu</span>}
                    {p.status === "lebih-cepat" && <span className="pill info"><span className="led"/>Lebih cepat</span>}
                    {p.status === "delay-rendah" && <span className="pill warn"><span className="led"/>Delay rendah</span>}
                    {p.status === "delay-sedang" && <span className="pill warn"><span className="led"/>Delay sedang</span>}
                    {p.status === "delay-tinggi" && <span className="pill danger"><span className="led"/>Delay tinggi</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="card" style={{ gridColumn: "span 5" }}>
          <div className="card-head"><h2 className="h2">Defisit / Berlebih Saat Ini</h2></div>
          <div className="card-body">
            <div className="grid cols-2">
              <div>
                <div className="eyebrow" style={{ color: "var(--danger)" }}>Defisit · {defisitItems.length}</div>
                <div style={{ marginTop: 10, display: "flex", flexDirection: "column", gap: 6 }}>
                  {defisitItems.map(d => {
                    const gap = d.kebutuhan - d.tersedia;
                    return (
                      <div key={d.komoditas} className="row between" style={{ padding: "6px 10px", background: "var(--danger-100)", borderRadius: 4, fontSize: 12 }}>
                        <span style={{ fontWeight: 500 }}>{d.komoditas}</span>
                        <span className="mono" style={{ fontWeight: 600, color: "var(--danger)" }}>−{gap} {d.satuan}</span>
                      </div>
                    );
                  })}
                </div>
              </div>
              <div>
                <div className="eyebrow" style={{ color: "var(--accent-700)" }}>Berlebih · {berlebihItems.length}</div>
                <div style={{ marginTop: 10, display: "flex", flexDirection: "column", gap: 6 }}>
                  {berlebihItems.map(d => {
                    const gap = d.tersedia - d.kebutuhan;
                    return (
                      <div key={d.komoditas} className="row between" style={{ padding: "6px 10px", background: "var(--accent-100)", borderRadius: 4, fontSize: 12 }}>
                        <span style={{ fontWeight: 500 }}>{d.komoditas}</span>
                        <span className="mono" style={{ fontWeight: 600, color: "var(--accent-700)" }}>+{gap} {d.satuan}</span>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>

            <div className="alert info" style={{ marginTop: 16 }}>
              <div style={{ color: "var(--info)" }}><Icon name="bell" size={16}/></div>
              <div>
                <div className="alert-title">Rekomendasi sistem</div>
                <div className="alert-body">Aktivasi supplier cadangan untuk Ayam &amp; Bayam. Redistribusi kelebihan Wortel ke Dapur Satelit Bogor.</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Food Safety Compliance Summary */}
      <div className="grid cols-12" style={{ marginBottom: 24 }}>
        <div className="card" style={{ gridColumn: "span 8" }}>
          <div className="card-head">
            <h2 className="h2">Status Keamanan Pangan Supplier</h2>
            <span className="tag">Real-time monitoring</span>
          </div>
          <div className="card-body">
            <table className="data">
              <thead><tr>
                <th>Supplier</th>
                <th>Komoditas</th>
                <th className="num">Skor Audit</th>
                <th style={{ textAlign: "center" }}>Sertifikasi</th>
                <th style={{ textAlign: "center" }}>Status</th>
              </tr></thead>
              <tbody>
                {[
                  { nama: "Kelompok Tani Maju Bersama", komoditas: "Sayuran", skor: 4.6, cert: "Valid", status: "ok" },
                  { nama: "Koperasi Petani Sayuran", komoditas: "Wortel", skor: 4.8, cert: "Valid", status: "ok" },
                  { nama: "PT Agro Lestari", komoditas: "Bayam", skor: 4.9, cert: "Valid", status: "ok" },
                  { nama: "PT Karya Unggas", komoditas: "Ayam Karkas", skor: 4.7, cert: "Expired", status: "warn" },
                  { nama: "UMKM Tahu Nikmat", komoditas: "Tahu", skor: 3.8, cert: "Pending", status: "danger" }
                ].map((item, i) => (
                  <tr key={i}>
                    <td style={{ fontWeight: 500 }}>{item.nama}</td>
                    <td>{item.komoditas}</td>
                    <td className="num"><span style={{ fontWeight: 700, color: "var(--primary)" }}>{item.skor}</span> / 5</td>
                    <td style={{ textAlign: "center" }}>
                      <span className={`pill ${item.status === "ok" ? "ok" : item.status === "warn" ? "warn" : "danger"}`} style={{ fontSize: 11 }}>
                        {item.cert}
                      </span>
                    </td>
                    <td style={{ textAlign: "center" }}>
                      <span className={`pill ${item.status}`} style={{ fontSize: 11 }}>
                        {item.status === "ok" ? "✓ Aman" : item.status === "warn" ? "⚠ Perlu Follow-up" : "✗ Tidak Aman"}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div className="card" style={{ gridColumn: "span 4" }}>
          <div className="card-head">
            <h2 className="h2">Compliance Score</h2>
          </div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div style={{ textAlign: "center" }}>
              <svg viewBox="0 0 100 100" style={{ width: 120, height: 120, margin: "0 auto" }}>
                <circle cx="50" cy="50" r="45" fill="none" stroke="var(--line)" strokeWidth="4"/>
                <circle cx="50" cy="50" r="45" fill="none" stroke="var(--accent)" strokeWidth="4"
                  strokeDasharray={`${3.14 * 90 * 0.92} ${3.14 * 90}`} strokeLinecap="round" transform="rotate(-90 50 50)"/>
                <text x="50" y="50" textAnchor="middle" dominantBaseline="central" style={{ fontSize: 32, fontWeight: 700, fill: "var(--ink)" }}>92%</text>
              </svg>
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
              <div style={{ padding: 12, background: "var(--accent-100)", borderRadius: "var(--radius)", textAlign: "center" }}>
                <div className="muted" style={{ fontSize: 10, marginBottom: 4 }}>Supplier Compliant</div>
                <div style={{ fontSize: 18, fontWeight: 700, color: "var(--accent)" }}>4/5</div>
              </div>
              <div style={{ padding: 12, background: "var(--warn-100)", borderRadius: "var(--radius)", textAlign: "center" }}>
                <div className="muted" style={{ fontSize: 10, marginBottom: 4 }}>Need Attention</div>
                <div style={{ fontSize: 18, fontWeight: 700, color: "var(--warn)" }}>1/5</div>
              </div>
            </div>

            <div style={{ paddingTop: 12, borderTop: "1px solid var(--line)", fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5 }}>
              <b>Aksi:</b> Follow-up dengan PT Karya Unggas untuk renovasi sertifikasi. Verifikasi ulang UMKM Tahu sebelum pengiriman berikutnya.
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

function AgroPanen() {
  const { PREDIKSI_PANEN } = window.IDSS;
  const { Icon } = window.IDSSUI;
  const [selectedDrilldown, setSelectedDrilldown] = useS_A(PREDIKSI_PANEN[2].komoditas);

  // Lag-correlation data untuk setiap komoditas (realistis)
  const lagCorrelationData = {
    "Bayam Segar": { peakLag: 5, peakCorr: 6.8, sigma: 2.2, ampDelay: 3, delayText: "+3 hari" },
    "Ayam Segar": { peakLag: 9, peakCorr: 2.5, sigma: 3.5, ampDelay: 2, delayText: "+2 hari" },
    "Telur Ayam": { peakLag: 8, peakCorr: 1.8, sigma: 4.0, ampDelay: 1, delayText: "+1 hari" },
    "Wortel": { peakLag: 7, peakCorr: 7.2, sigma: 3.0, ampDelay: 7, delayText: "+7 hari" },
    "Beras": { peakLag: 11, peakCorr: 6.5, sigma: 3.8, ampDelay: 5, delayText: "+5 hari" },
    "Minyak Goreng": { peakLag: 12, peakCorr: 1.2, sigma: 4.5, ampDelay: 0, delayText: "tepat" },
    "Tahu": { peakLag: 6, peakCorr: 5.8, sigma: 2.8, ampDelay: 4, delayText: "+4 hari" },
    "Tempe": { peakLag: 6, peakCorr: 5.9, sigma: 2.9, ampDelay: 4, delayText: "+4 hari" }
  };

  const currentData = lagCorrelationData[selectedDrilldown] || lagCorrelationData["Wortel"];
  const drilldownRecord = PREDIKSI_PANEN.find(p => p.komoditas === selectedDrilldown) || PREDIKSI_PANEN[2];

  const handleExportPanenCSV = () => {
    const headers = ["Komoditas", "Lokasi", "Target Panen", "Prediksi", "Delay (hari)", "Volume (kg)", "Confidence"];
    const rows = PREDIKSI_PANEN.map(p => [
      p.komoditas,
      p.lokasi,
      p.target,
      p.prediksi,
      p.delay,
      p.volume,
      p.confidence
    ]);
    const csv = [headers, ...rows].map(r => r.map(v => `"${v}"`).join(",")).join("\n");
    const blob = new Blob([csv], { type: "text/csv" });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `Prediksi-Panen-${new Date().toISOString().split('T')[0]}.csv`;
    a.click();
  };

  return (
    <>
      <div className="page-header">
        <div>
          <div className="crumbs"><span>Smart Agro</span><span>Submodul</span><span>Time Delay Prediksi Panen</span></div>
          <h1 className="page-title">Time Delay Prediksi Panen</h1>
          <div className="page-sub">Estimasi keterlambatan panen menggunakan time-delay neural network terhadap data agroklimat dari petani mitra.</div>
        </div>
        <div className="row gap-sm">
          <button className="btn"><Icon name="refresh" size={14}/> Re-run model</button>
          <button className="btn primary" onClick={handleExportPanenCSV}><Icon name="download" size={14}/> Export CSV</button>
        </div>
      </div>

      <div className="grid cols-12" style={{ marginBottom: 24 }}>
        <div className="card" style={{ gridColumn: "span 12" }}>
          <div className="card-head"><h2 className="h2">Hasil Prediksi (6 komoditas terjadwal)</h2><span className="tag mono">model: TDNN-LSTM v2.1</span></div>
          <div style={{ overflowX: "auto" }}>
            <table className="data">
              <thead><tr>
                <th>Komoditas</th><th>Lokasi</th><th>Target</th><th>Prediksi</th><th className="num">Δ hari</th><th className="num">Volume (kg)</th><th className="num">Confidence</th><th>Status</th>
              </tr></thead>
              <tbody>
                {PREDIKSI_PANEN.map(p => (
                  <tr key={p.id}>
                    <td style={{ fontWeight: 600 }}>{p.komoditas}</td>
                    <td className="muted">{p.lokasi}</td>
                    <td className="mono" style={{ fontSize: 11.5 }}>{p.target}</td>
                    <td className="mono" style={{ fontSize: 11.5 }}>{p.prediksi}</td>
                    <td className="num" style={{ fontWeight: 600, color: p.delay > 3 ? "var(--danger)" : p.delay > 0 ? "var(--warn)" : "var(--accent-700)" }}>
                      {p.delay > 0 ? `+${p.delay}` : p.delay}
                    </td>
                    <td className="num">{p.volume.toLocaleString("id-ID")}</td>
                    <td className="num">{(p.confidence*100).toFixed(0)}%</td>
                    <td>
                      {p.status === "tepat-waktu" && <span className="pill ok"><span className="led"/>Tepat</span>}
                      {p.status === "lebih-cepat" && <span className="pill info"><span className="led"/>Cepat</span>}
                      {p.status === "delay-rendah" && <span className="pill warn"><span className="led"/>Rendah</span>}
                      {p.status === "delay-sedang" && <span className="pill warn"><span className="led"/>Sedang</span>}
                      {p.status === "delay-tinggi" && <span className="pill danger"><span className="led"/>Tinggi</span>}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div className="grid cols-12" style={{ marginBottom: 24 }}>
        <div className="card" style={{ gridColumn: "span 6" }}>
          <div className="card-head"><h2 className="h2">Variabel Input Model</h2></div>
          <div className="card-body" style={{ fontSize: 12.5 }}>
            <div style={{ padding: 12, background: "var(--primary-50)", border: "1px solid var(--primary-100)", borderRadius: 6, marginBottom: 12 }}>
              <div className="eyebrow" style={{ color: "var(--primary)", marginBottom: 6 }}>Cara baca prediksi ini</div>
              <div style={{ fontSize: 12, color: "var(--ink-2)", lineHeight: 1.6 }}>
                Sistem memantau <b>cuaca, suhu, kelembaban, dan tahap pertumbuhan tanaman</b> selama 2 minggu terakhir
                untuk memperkirakan apakah panen akan tepat waktu atau terlambat. Semakin tinggi <b>tingkat keyakinan</b>,
                semakin akurat prediksinya. Gunakan informasi ini untuk menyiapkan supplier cadangan
                sebelum keterlambatan benar-benar terjadi.
              </div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {[
                ["Curah hujan 14 hari", "127 mm", "↑ 18%"],
                ["Suhu min rata-rata", "21.4 °C", "= normal"],
                ["Kelembaban relatif", "84%", "↑ 6%"],
                ["Tahap fenologi", "Generatif-akhir", ""],
                ["Anomali ENSO", "Netral", "= 0.1 SST"]
              ].map(([k,v,d], i) => (
                <div key={i} className="row between" style={{ padding: "8px 10px", background: "var(--bg-2)", borderRadius: 4 }}>
                  <span style={{ color: "var(--ink-2)" }}>{k}</span>
                  <span><span className="mono" style={{ fontWeight: 600 }}>{v}</span> <span className="muted" style={{ fontSize: 11 }}>{d}</span></span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="card" style={{ gridColumn: "span 6" }}>
          <div className="card-head"><h2 className="h2">Performa Model (TDNN-LSTM)</h2><span className="tag mono">30 hari terakhir</span></div>
          <div className="card-body" style={{ fontSize: 12.5 }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 6 }}>Akurasi prediksi delay</div>
                <div className="row between" style={{ marginBottom: 4 }}>
                  <span style={{ color: "var(--ink-2)" }}>Mean Absolute Error (MAE)</span>
                  <span className="mono" style={{ fontWeight: 600, color: "var(--accent-700)" }}>0.94 hari</span>
                </div>
                <div className="row between" style={{ marginBottom: 4 }}>
                  <span style={{ color: "var(--ink-2)" }}>Root Mean Square Error</span>
                  <span className="mono" style={{ fontWeight: 600, color: "var(--accent-700)" }}>1.28 hari</span>
                </div>
                <div className="row between">
                  <span style={{ color: "var(--ink-2)" }}>Akurasi tepat waktu</span>
                  <span className="mono" style={{ fontWeight: 600, color: "var(--accent)" }}>87.5%</span>
                </div>
              </div>
              <div className="hr"/>
              <div>
                <div className="eyebrow" style={{ marginBottom: 6 }}>Prediksi per komoditas</div>
                {[
                  { k: "Bayam Segar", acc: 92, conf: 88 },
                  { k: "Wortel", acc: 85, conf: 82 },
                  { k: "Beras", acc: 81, conf: 78 },
                  { k: "Ayam Segar", acc: 88, conf: 85 }
                ].map(item => (
                  <div key={item.k} style={{ marginBottom: 8 }}>
                    <div className="row between" style={{ marginBottom: 2 }}>
                      <span style={{ fontSize: 11.5, color: "var(--ink-2)" }}>{item.k}</span>
                      <span className="mono" style={{ fontSize: 11, fontWeight: 600 }}>{item.acc}%</span>
                    </div>
                    <div className="bar" style={{ height: 6 }}>
                      <span style={{ width: `${item.acc}%`, background: "var(--accent)", display: "block", height: "100%", borderRadius: 2 }}/>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="row between" style={{ width: "100%", alignItems: "center" }}>
            <h2 className="h2">Drill-down: {selectedDrilldown} — {drilldownRecord.lokasi}</h2>
            <div className="row gap-xs">
              <select
                value={selectedDrilldown}
                onChange={(e) => setSelectedDrilldown(e.target.value)}
                style={{
                  padding: "6px 10px",
                  fontSize: 12,
                  border: "1px solid var(--line)",
                  borderRadius: 6,
                  background: "white",
                  color: "var(--ink)",
                  cursor: "pointer"
                }}>
                {PREDIKSI_PANEN.map(p => (
                  <option key={p.id} value={p.komoditas}>{p.komoditas}</option>
                ))}
              </select>
              <span className={`pill ${currentData.ampDelay > 5 ? "danger" : currentData.ampDelay > 2 ? "warn" : "ok"}`}>
                <span className="led"/>{currentData.ampDelay > 5 ? "Delay tinggi" : currentData.ampDelay > 2 ? "Delay sedang" : "Tepat"} · {currentData.delayText}
              </span>
            </div>
          </div>
        </div>
        <div className="card-body">
          <div className="grid cols-12" style={{ gap: 24 }}>
            <div style={{ gridColumn: "span 7" }}>
              <div className="eyebrow" style={{ marginBottom: 8 }}>Lag-correlation curah hujan vs delay panen</div>
              <svg viewBox="0 0 600 220" style={{ width: "100%", height: 220 }}>
                <defs>
                  <linearGradient id={`grad${selectedDrilldown.replace(/\s/g, '')}`} x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0%" stopColor="oklch(0.58 0.18 25)" stopOpacity="0.25"/>
                    <stop offset="100%" stopColor="oklch(0.58 0.18 25)" stopOpacity="0"/>
                  </linearGradient>
                </defs>
                {/* axes */}
                <line x1="40" y1="180" x2="580" y2="180" stroke="var(--line)"/>
                <line x1="40" y1="20" x2="40" y2="180" stroke="var(--line)"/>
                {[0,2,4,6,8].map((y,i) => (
                  <g key={i}>
                    <text x="32" y={180 - i*38 + 4} textAnchor="end" fontSize="10" fill="var(--ink-3)" fontFamily="var(--font-mono)">{y}</text>
                    <line x1="40" x2="580" y1={180-i*38} y2={180-i*38} stroke="var(--line-2)"/>
                  </g>
                ))}
                {[1,3,5,7,9,11,13,14].map((d,i) => (
                  <text key={i} x={40 + (d/14)*540} y="195" textAnchor="middle" fontSize="10" fill="var(--ink-3)" fontFamily="var(--font-mono)">k={d}</text>
                ))}
                {/* curve: lag vs corr */}
                {(() => {
                  const pts = Array.from({length: 60}, (_, i) => {
                    const x = i / 59;
                    const corr = Math.exp(-Math.pow((x*14 - currentData.peakLag)/currentData.sigma, 2)) * currentData.peakCorr;
                    return [40 + x * 540, 180 - corr * 19];
                  });
                  const path = pts.map((p,i) => (i===0?"M":"L") + p[0].toFixed(1) + "," + p[1].toFixed(1)).join(" ");
                  const area = path + ` L580,180 L40,180 Z`;
                  const gradId = `grad${selectedDrilldown.replace(/\s/g, '')}`;
                  return <><path d={area} fill={`url(#${gradId})`}/><path d={path} fill="none" stroke="oklch(0.58 0.18 25)" strokeWidth="2"/></>;
                })()}
                {/* peak marker */}
                <circle cx={40 + (currentData.peakLag/14)*540} cy={180 - currentData.peakCorr*19} r="4" fill="oklch(0.58 0.18 25)"/>
                <text x={40 + (currentData.peakLag/14)*540} y={180 - currentData.peakCorr*19 - 10} textAnchor="middle" fontSize="10" fontWeight="600" fill="oklch(0.45 0.18 25)">peak lag = {currentData.peakLag} hari</text>
              </svg>
            </div>

            <div style={{ gridColumn: "span 5" }}>
              <div className="eyebrow" style={{ marginBottom: 8 }}>Aksi rekomendasi</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                {[
                  { t: "Aktivasi supplier cadangan", d: "PT Hijau Lestari (Pangalengan) — siap pasok H+1", k: "primary" },
                  { t: "Substitusi parsial menu", d: "Ganti wortel dgn labu siam pada menu Selasa-Rabu", k: "info" },
                  { t: "Komunikasi ke Dapur Induk", d: "Notifikasi otomatis ke 3 dapur induk + 9 satelit", k: "warn" },
                  { t: "Buffer stock", d: "Pertahankan stok minimum 540 kg (3 hari operasi)", k: "ok" }
                ].map((a,i) => (
                  <div key={i} style={{ padding: 10, border: "1px solid var(--line)", borderRadius: 6, background: "var(--surface)" }}>
                    <div className="row between">
                      <div style={{ fontWeight: 600, fontSize: 12.5 }}>{a.t}</div>
                      <span className={`pill ${a.k}`}><span className="led"/>{a.k === "primary" ? "Prioritas" : a.k === "info" ? "Pertimbangan" : a.k === "warn" ? "Komunikasi" : "Strategis"}</span>
                    </div>
                    <div className="muted" style={{ fontSize: 11.5, marginTop: 4 }}>{a.d}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

function AgroSupplier() {
  const { Icon } = window.IDSSUI;
  const { KOMODITAS, SUPPLIER_LIST } = window.IDSS;

  // Daftar komoditas dari SUPPLIER_LIST
  const commodities = Array.from(new Set(SUPPLIER_LIST.flatMap(s => s.komoditas))).sort();
  const defaultCommodity = commodities.length > 0 ? commodities[0] : "Sayuran";

  // State untuk commodity selection
  const [selectedCommodity, setSelectedCommodity] = useS_A(defaultCommodity);
  const [showCommodityFilter, setShowCommodityFilter] = useS_A(false);

  // State untuk request komoditas
  const [safccRequests, setSafccRequests] = useS_A(window.IDSS.SAFCC_REQUESTS);
  const [showRequestForm, setShowRequestForm] = useS_A(false);
  const defaultKomoditas = KOMODITAS && KOMODITAS.length > 0 ? KOMODITAS[0].nama : defaultCommodity;
  const [formData, setFormData] = useS_A({
    komoditas: defaultKomoditas,
    jumlahDiminta: 500,
    deadline: "2026-05-22",
    dapur: "Induk"
  });
  const [formErrors, setFormErrors] = useS_A({});
  const [showRequestSuccess, setShowRequestSuccess] = useS_A(false);

  // Get suppliers untuk komoditas tertentu dari SUPPLIER_LIST
  const getSuppliersForCommodity = (komoditas) => {
    return SUPPLIER_LIST
      .filter(s => s.komoditas.includes(komoditas) && s.status === "aktif")
      .map(s => ({
        id: s.id,
        nama: s.nama,
        alamat: s.lokasi,
        harga: Math.round(4000 + Math.random() * 8000), // Dummy price
        mutu: s.rating,
        waktu: 0.8 + (Math.random() * 0.4),
        jumlah: s.anggota * 10
      }));
  };

  // Get klasifikasi dari KOMODITAS
  const getKlasifikasi = (namaKomoditas) => {
    const kom = KOMODITAS.find(k => k.nama === namaKomoditas);
    return kom ? kom.kategori.toLowerCase().replace(/\s+/g, "_") : "lainnya";
  };

  // Handle submit request komoditas
  const handleSubmitRequest = () => {
    const errors = {};

    // Validasi komoditas
    if (!formData.komoditas?.trim()) {
      errors.komoditas = "Pilih komoditas";
    }

    // Validasi jumlah
    const jumlah = Number(formData.jumlahDiminta);
    if (isNaN(jumlah) || jumlah <= 0) {
      errors.jumlahDiminta = "Jumlah harus angka positif";
    } else if (jumlah > 100000) {
      errors.jumlahDiminta = "Jumlah tidak boleh lebih dari 100.000 kg";
    }

    // Validasi deadline
    if (!formData.deadline) {
      errors.deadline = "Tentukan deadline";
    } else if (new Date(formData.deadline) <= new Date()) {
      errors.deadline = "Deadline harus tanggal masa depan";
    }

    // Validasi dapur
    if (!formData.dapur) {
      errors.dapur = "Pilih dapur tujuan";
    }

    setFormErrors(errors);

    if (Object.keys(errors).length > 0) {
      window.showToast("Periksa kembali form anda", "warn");
      return;
    }

    const newRequest = {
      id: `REQ${String(safccRequests.length + 1).padStart(3, "0")}`,
      tanggalPermintaan: new Date().toISOString().split("T")[0],
      komoditas: formData.komoditas,
      klasifikasi: getKlasifikasi(formData.komoditas),
      jumlahDiminta: parseInt(formData.jumlahDiminta),
      satuanDiminta: "kg",
      deadline: formData.deadline,
      dapur: formData.dapur,
      status: STATUS_TYPES.PENDING
    };

    const updatedRequests = [...safccRequests, newRequest];
    setSafccRequests(updatedRequests);
    window.IDSS.SAFCC_REQUESTS = updatedRequests;

    // C1: Audit log
    window.AuditLog?.log('request_create', {
      komoditas: formData.komoditas,
      jumlah: formData.jumlahDiminta,
      dapur: formData.dapur,
      deadline: formData.deadline
    });

    // Broadcast update to other components
    window.MessageBus?.send(MESSAGE_TYPES.SAFCC_REQUESTS_UPDATED, { requests: updatedRequests });

    setShowRequestForm(false);
    setFormErrors({});
    window.showToast("✅ Request komoditas berhasil dibuat", "success");

    setTimeout(() => {
      setFormData({
        komoditas: defaultKomoditas,
        jumlahDiminta: 500,
        deadline: "2026-05-22",
        dapur: "Induk"
      });
    }, 500);
  };

  // Dummy data supplier per komoditas (realistic)
  const commoditySupplierData = {
    "Bayam Segar": [
      { id: "S001", nama: "PT Hijau Lestari", alamat: "Cipanas, Cianjur", harga: 8500, mutu: 4.2, waktu: 0.9, jumlah: 850 },
      { id: "S002", nama: "Koperasi SS", alamat: "Sukabumi", harga: 9200, mutu: 3.8, waktu: 0.8, jumlah: 620 },
      { id: "S003", nama: "CV Tani Makmur", alamat: "Bogor", harga: 7800, mutu: 3.5, waktu: 1.0, jumlah: 740 },
      { id: "S004", nama: "UD Berkah Tani", alamat: "Bandung", harga: 9800, mutu: 4.5, waktu: 0.7, jumlah: 580 },
      { id: "S005", nama: "Mitra Petani", alamat: "Garut", harga: 8200, mutu: 4.0, waktu: 0.85, jumlah: 720 }
    ],
    "Ayam Segar": [
      { id: "S001", nama: "PT Charoen Pokphand", alamat: "Bekasi", harga: 28500, mutu: 4.6, waktu: 0.95, jumlah: 1200 },
      { id: "S002", nama: "PT Japfa Comfeed", alamat: "Tambun", harga: 29800, mutu: 4.4, waktu: 0.88, jumlah: 950 },
      { id: "S003", nama: "CV Daging Segar", alamat: "Jakarta", harga: 27200, mutu: 3.9, waktu: 1.0, jumlah: 850 },
      { id: "S004", nama: "Peternakan Mandiri", alamat: "Purwakarta", harga: 31500, mutu: 4.8, waktu: 0.75, jumlah: 720 },
      { id: "S005", nama: "UD Ayam Kampung", alamat: "Tangerang", harga: 26800, mutu: 3.7, waktu: 1.0, jumlah: 680 }
    ],
    "Telur Ayam": [
      { id: "S001", nama: "PT Japfa Hatchery", alamat: "Bekasi", harga: 1850, mutu: 4.5, waktu: 0.92, jumlah: 8000 },
      { id: "S002", nama: "CV Telur Segar", alamat: "Tanggerang", harga: 1920, mutu: 4.2, waktu: 0.85, jumlah: 6500 },
      { id: "S003", nama: "Peternakan Sejati", alamat: "Karawang", harga: 1780, mutu: 3.8, waktu: 1.0, jumlah: 7200 },
      { id: "S004", nama: "PT Indo Ternak", alamat: "Bogor", harga: 2100, mutu: 4.7, waktu: 0.78, jumlah: 5800 },
      { id: "S005", nama: "Citra Peternakan", alamat: "Subang", harga: 1820, mutu: 4.0, waktu: 0.88, jumlah: 6800 }
    ],
    "Wortel": [
      { id: "S001", nama: "PT Hijau Lestari", alamat: "Cipanas, Cianjur", harga: 6500, mutu: 4.3, waktu: 0.88, jumlah: 920 },
      { id: "S002", nama: "CV Sayuran Segar", alamat: "Bandung", harga: 6800, mutu: 4.0, waktu: 0.82, jumlah: 780 },
      { id: "S003", nama: "Koperasi Petani", alamat: "Garut", harga: 6200, mutu: 3.6, waktu: 0.95, jumlah: 850 },
      { id: "S004", nama: "UD Organik Sehat", alamat: "Bogor", harga: 7200, mutu: 4.6, waktu: 0.75, jumlah: 620 },
      { id: "S005", nama: "Mitra Sayur", alamat: "Sukabumi", harga: 6400, mutu: 3.9, waktu: 0.9, jumlah: 780 }
    ],
    "Beras": [
      { id: "S001", nama: "PT Bulog Divre Jabar", alamat: "Bandung", harga: 8200, mutu: 4.4, waktu: 0.92, jumlah: 5000 },
      { id: "S002", nama: "CV Beras Premium", alamat: "Karawang", harga: 8500, mutu: 4.1, waktu: 0.85, jumlah: 4500 },
      { id: "S003", nama: "Koperasi Tani", alamat: "Subang", harga: 7900, mutu: 3.8, waktu: 0.98, jumlah: 5200 },
      { id: "S004", nama: "PT Supra Beras", alamat: "Jakarta", harga: 9100, mutu: 4.6, waktu: 0.78, jumlah: 4000 },
      { id: "S005", nama: "UD Hasil Panen", alamat: "Bogor", harga: 8000, mutu: 4.0, waktu: 0.9, jumlah: 4800 }
    ],
    "Minyak Goreng": [
      { id: "S001", nama: "PT Sinar Mas", alamat: "Jakarta", harga: 15800, mutu: 4.5, waktu: 0.9, jumlah: 2000 },
      { id: "S002", nama: "PT Wilmar", alamat: "Bekasi", harga: 16200, mutu: 4.2, waktu: 0.85, jumlah: 1800 },
      { id: "S003", nama: "CV Minyak Asli", alamat: "Tangerang", harga: 15200, mutu: 3.9, waktu: 1.0, jumlah: 1600 },
      { id: "S004", nama: "PT Golden Agri", alamat: "Riau (Jakarta)", harga: 16800, mutu: 4.7, waktu: 0.75, jumlah: 1500 },
      { id: "S005", nama: "Distributor Lokal", alamat: "Jakarta", harga: 15500, mutu: 4.0, waktu: 0.95, jumlah: 1700 }
    ],
    "Tahu": [
      { id: "S001", nama: "Pabrik Tahu Sokaraja", alamat: "Pekalongan", harga: 3500, mutu: 4.3, waktu: 0.88, jumlah: 1200 },
      { id: "S002", nama: "CV Tahu Segar", alamat: "Bandung", harga: 3800, mutu: 4.0, waktu: 0.82, jumlah: 950 },
      { id: "S003", nama: "Tahu Setia", alamat: "Bogor", harga: 3200, mutu: 3.7, waktu: 0.95, jumlah: 1100 },
      { id: "S004", nama: "PT Tahu Lezat", alamat: "Jakarta", harga: 4100, mutu: 4.5, waktu: 0.75, jumlah: 800 },
      { id: "S005", nama: "UD Tahu Bersih", alamat: "Tangerang", harga: 3600, mutu: 3.9, waktu: 0.9, jumlah: 1050 }
    ],
    "Tempe": [
      { id: "S001", nama: "Pabrik Tempe Baros", alamat: "Delanggu, Klaten", harga: 4200, mutu: 4.4, waktu: 0.87, jumlah: 1100 },
      { id: "S002", nama: "CV Tempe Segar", alamat: "Bandung", harga: 4500, mutu: 4.1, waktu: 0.80, jumlah: 900 },
      { id: "S003", nama: "Tempe Berkualitas", alamat: "Bogor", harga: 3900, mutu: 3.8, waktu: 0.93, jumlah: 1000 },
      { id: "S004", nama: "PT Tempe Organik", alamat: "Jakarta", harga: 5000, mutu: 4.6, waktu: 0.73, jumlah: 750 },
      { id: "S005", nama: "UD Tempe Langganan", alamat: "Tangerang", harga: 4100, mutu: 4.0, waktu: 0.88, jumlah: 950 }
    ]
  };

  // Get suppliers untuk commodity yang dipilih dari SUPPLIER_LIST
  const SUPPLIERS = useM_A(() => {
    const suppliers = getSuppliersForCommodity(selectedCommodity);
    return suppliers.length > 0 ? suppliers : getSuppliersForCommodity(commodities[0] || selectedCommodity);
  }, [selectedCommodity, commodities]);

  // Default AHP weights (read from window.tweaks if provided)
  const defaultW = window.__ahpWeights || { harga: 0.30, mutu: 0.35, waktu: 0.20, jumlah: 0.15 };
  const [w, setW] = useS_A(defaultW);

  // Subscribe to tweak updates
  React.useEffect(() => {
    const h = (e) => {
      if (e.data && e.data.type === "__ahp_weights" && e.data.weights) setW(e.data.weights);
    };
    window.addEventListener("message", h);
    return () => window.removeEventListener("message", h);
  }, []);

  // Score each supplier
  const norm = (arr, key, invert) => {
    const vals = arr.map(s => s[key]);
    const max = Math.max(...vals), min = Math.min(...vals);
    return arr.map(s => {
      if (invert) return (max - s[key]) / (max - min || 1);
      return (s[key] - min) / (max - min || 1);
    });
  };

  const scoreData = useM_A(() => {
    if (!SUPPLIERS || SUPPLIERS.length === 0) return [];
    const hN = norm(SUPPLIERS, "harga", true);
    const mN = norm(SUPPLIERS, "mutu", false);
    const wN = norm(SUPPLIERS, "waktu", false);
    const jN = norm(SUPPLIERS, "jumlah", false);
    return SUPPLIERS.map((s, i) => {
      const score = hN[i]*w.harga + mN[i]*w.mutu + wN[i]*w.waktu + jN[i]*w.jumlah;
      return { ...s, hN: hN[i], mN: mN[i], wN: wN[i], jN: jN[i], score };
    }).sort((a,b) => b.score - a.score);
  }, [w, SUPPLIERS]);

  const winner = scoreData.length > 0 ? scoreData[0] : null;
  const totalW = w.harga + w.mutu + w.waktu + w.jumlah;
  const cr = 0.058; // simulated consistency ratio
  const lambdaMax = 4.157;

  return (
    <>
      {showRequestSuccess && (
        <div className="alert ok fade-up" style={{ marginBottom: 16, animation: "slideDown 0.3s ease" }}>
          <div style={{ color: "var(--accent)", fontSize: 18, lineHeight: 1 }}>✓</div>
          <div>
            <div className="alert-title">Permintaan komoditas berhasil dibuat</div>
            <div className="alert-body">Request baru telah ditambahkan dan akan ditampilkan ke semua supplier.</div>
          </div>
        </div>
      )}

      <div className="page-header">
        <div>
          <div className="crumbs"><span>Smart Agro</span><span>Submodul</span><span>Request & Pemilihan Supplier</span></div>
          <h1 className="page-title">Request Komoditas & Pemilihan Supplier</h1>
          <div className="page-sub">Buat permintaan komoditas baru dan pilih supplier terbaik berdasarkan AHP.</div>
        </div>
        <div className="row gap-sm">
          <button className="btn primary" onClick={() => setShowRequestForm(true)}><Icon name="play" size={14}/> + Request komoditas baru</button>
          <div style={{ position: "relative" }}>
            <button className="btn" onClick={() => setShowCommodityFilter(!showCommodityFilter)}><Icon name="filter" size={14}/> Ganti komoditas</button>
            {showCommodityFilter && (
              <div style={{
                position: "absolute", top: "100%", left: 0, right: 0, marginTop: 8,
                padding: 12, background: "var(--bg-2)", borderRadius: 8, border: "1px solid var(--line)",
                boxShadow: "var(--shadow)",
                zIndex: 10,
                animation: "slideDownSmooth 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)",
                transformOrigin: "top"
              }}>
                <style>{`
                  @keyframes slideDownSmooth {
                    from {
                      opacity: 0;
                      max-height: 0;
                      transform: scaleY(0.85);
                    }
                    to {
                      opacity: 1;
                      max-height: 500px;
                      transform: scaleY(1);
                    }
                  }
                `}</style>
                <div className="eyebrow" style={{ marginBottom: 8 }}>Pilih komoditas</div>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(130px, 1fr))", gap: 6 }}>
                  {commodities.map(c => (
                    <button key={c} onClick={() => { setSelectedCommodity(c); setShowCommodityFilter(false); }}
                      style={{
                        padding: "10px 12px", fontSize: 12, fontWeight: 500, borderRadius: 6,
                        background: selectedCommodity === c ? "var(--primary)" : "var(--bg)",
                        color: selectedCommodity === c ? "white" : "var(--ink)",
                        border: `1.5px solid ${selectedCommodity === c ? "var(--primary)" : "var(--line)"}`,
                        transition: "all 0.15s ease-out",
                        cursor: "pointer",
                        whiteSpace: "nowrap",
                        textAlign: "center"
                      }}>
                      {c}
                    </button>
                  ))}
                </div>
              </div>
            )}
          </div>
          <button className="btn primary"><Icon name="play" size={14}/> Tetapkan supplier</button>
        </div>
      </div>

      {showRequestForm && (
        <div style={{
          position: "fixed", inset: 0, background: "rgba(0,0,0,0.15)", zIndex: 100,
          display: "flex", flexDirection: "column", alignItems: "center", paddingTop: 40,
          cursor: "pointer"
        }} onClick={(e) => {
          if (e.target === e.currentTarget) setShowRequestForm(false);
        }}>
          <div className="card" style={{ width: "95%", maxWidth: 600, maxHeight: "90vh", overflowY: "auto", cursor: "default" }}>
            <div className="card-head" style={{ position: "sticky", top: 0, background: "var(--surface)", borderBottom: "1px solid var(--line)", zIndex: 10 }}>
              <h2 className="h2">Request Komoditas Baru</h2>
              <button onClick={() => setShowRequestForm(false)} style={{ background: "none", border: "none", fontSize: 20, cursor: "pointer", color: "var(--ink-3)" }}>×</button>
            </div>
            <div className="card-body" style={{ paddingBottom: 20 }}>
              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <div>
                  <label style={{ display: "block", fontSize: 12.5, fontWeight: 600, marginBottom: 6, color: formErrors.komoditas ? "var(--danger)" : "var(--ink-2)" }}>
                    Komoditas {formErrors.komoditas && `— ${formErrors.komoditas}`}
                  </label>
                  <select
                    value={formData.komoditas}
                    onChange={(e) => { setFormData({...formData, komoditas: e.target.value}); setFormErrors({...formErrors, komoditas: null}); }}
                    style={{
                      width: "100%",
                      padding: "10px 12px",
                      fontSize: 13,
                      border: formErrors.komoditas ? "1px solid var(--danger)" : "1px solid var(--line)",
                      borderRadius: 6,
                      background: "var(--bg)",
                      color: "var(--ink)",
                      cursor: "pointer"
                    }}>
                    {KOMODITAS && KOMODITAS.map(k => (
                      <option key={k.id} value={k.nama}>{k.nama}</option>
                    ))}
                  </select>
                </div>

                <div>
                  <label style={{ display: "block", fontSize: 12.5, fontWeight: 600, marginBottom: 6, color: formErrors.jumlahDiminta ? "var(--danger)" : "var(--ink-2)" }}>
                    Jumlah Diminta {formErrors.jumlahDiminta && `— ${formErrors.jumlahDiminta}`}
                  </label>
                  <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                    <input
                      type="number"
                      value={formData.jumlahDiminta}
                      onChange={(e) => { setFormData({...formData, jumlahDiminta: parseInt(e.target.value) || 0}); setFormErrors({...formErrors, jumlahDiminta: null}); }}
                      min="1"
                      style={{
                        flex: 1,
                        padding: "10px 12px",
                        fontSize: 13,
                        border: formErrors.jumlahDiminta ? "1px solid var(--danger)" : "1px solid var(--line)",
                        borderRadius: 6,
                        background: "var(--bg)",
                        color: "var(--ink)"
                      }}/>
                    <span style={{ fontSize: 13, color: "var(--ink-2)", minWidth: 30 }}>kg</span>
                  </div>
                </div>

                <div>
                  <label style={{ display: "block", fontSize: 12.5, fontWeight: 600, marginBottom: 6, color: formErrors.deadline ? "var(--danger)" : "var(--ink-2)" }}>
                    Deadline {formErrors.deadline && `— ${formErrors.deadline}`}
                  </label>
                  <input
                    type="date"
                    value={formData.deadline}
                    onChange={(e) => { setFormData({...formData, deadline: e.target.value}); setFormErrors({...formErrors, deadline: null}); }}
                    style={{
                      width: "100%",
                      padding: "10px 12px",
                      fontSize: 13,
                      border: formErrors.deadline ? "1px solid var(--danger)" : "1px solid var(--line)",
                      borderRadius: 6,
                      background: "var(--bg)",
                      color: "var(--ink)"
                    }}/>
                </div>

                <div>
                  <label style={{ display: "block", fontSize: 12.5, fontWeight: 600, marginBottom: 6, color: formErrors.dapur ? "var(--danger)" : "var(--ink-2)" }}>
                    Dapur Tujuan {formErrors.dapur && `— ${formErrors.dapur}`}
                  </label>
                  <select
                    value={formData.dapur}
                    onChange={(e) => { setFormData({...formData, dapur: e.target.value}); setFormErrors({...formErrors, dapur: null}); }}
                    style={{
                      width: "100%",
                      padding: "10px 12px",
                      fontSize: 13,
                      border: formErrors.dapur ? "1px solid var(--danger)" : "1px solid var(--line)",
                      borderRadius: 6,
                      background: "var(--bg)",
                      color: "var(--ink)",
                      cursor: "pointer"
                    }}>
                    <option value="">Pilih dapur</option>
                    <option value="Induk">Dapur Induk</option>
                    <option value="Satelit">Dapur Satelit</option>
                  </select>
                </div>

                <div style={{ padding: 12, background: "var(--primary-50)", border: "1px solid var(--primary-100)", borderRadius: 6 }}>
                  <div className="eyebrow" style={{ color: "var(--primary)", marginBottom: 4, fontSize: 11 }}>Informasi Request</div>
                  <div style={{ fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5 }}>
                    <div><b>Komoditas:</b> {formData.komoditas}</div>
                    <div><b>Klasifikasi:</b> {getKlasifikasi(formData.komoditas)}</div>
                    <div><b>Jumlah:</b> {formData.jumlahDiminta} kg</div>
                    <div><b>Deadline:</b> {formData.deadline}</div>
                  </div>
                </div>

                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                  <button className="btn" onClick={() => setShowRequestForm(false)}>Batal</button>
                  <button className="btn primary" onClick={handleSubmitRequest}>Kirim Request</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      <div style={{ marginBottom: 16, padding: 12, background: "var(--primary-50)", borderRadius: 8, border: "1px solid var(--primary-100)" }}>
        <div className="eyebrow" style={{ marginBottom: 4, color: "var(--primary)" }}>Komoditas Aktif</div>
        <div style={{ fontSize: 14, fontWeight: 600, color: "var(--ink)" }}>📦 {selectedCommodity}</div>
        <div style={{ fontSize: 11.5, color: "var(--ink-2)", marginTop: 4 }}>Data supplier dan scoring AHP berubah sesuai komoditas yang dipilih.</div>
      </div>

      <div className="grid cols-12" style={{ marginBottom: 24 }}>
        <div className="card" style={{ gridColumn: "span 5" }}>
          <div className="card-head">
            <h2 className="h2">Bobot Kriteria</h2>
            <span className={`tag mono ${Math.abs(totalW - 1.0) < 0.001 ? "" : "warn"}`}>Σw = {totalW.toFixed(2)}</span>
          </div>
          <div className="card-body">
            <div style={{ fontSize: 11.5, color: "var(--ink-3)", marginBottom: 12 }}>
              Sesuaikan bobot untuk eksperimen sensitivitas. Total akan dinormalisasi otomatis agar selalu = 1.0
            </div>
            {[
              ["harga", "Harga", "minimasi"],
              ["mutu", "Mutu", "maksimasi"],
              ["waktu", "Waktu", "maksimasi"],
              ["jumlah", "Jumlah", "maksimasi"]
            ].map(([k, label, dir]) => (
              <div key={k} style={{ marginBottom: 12 }}>
                <div className="row between" style={{ marginBottom: 4 }}>
                  <span style={{ fontWeight: 500, fontSize: 12.5 }}>{label} <span className="muted" style={{ fontSize: 11 }}>· {dir}</span></span>
                  <span className="mono" style={{ fontSize: 12, fontWeight: 600 }}>{(w[k]*100).toFixed(1)}%</span>
                </div>
                <input
                  type="range"
                  min="0"
                  max="1"
                  step="0.01"
                  value={w[k]}
                  onChange={(e) => {
                    const newVal = parseFloat(e.target.value);
                    const others = Object.keys(w).filter(key => key !== k);
                    const otherSum = others.reduce((sum, key) => sum + w[key], 0);
                    const newWeights = { ...w, [k]: newVal };

                    if (otherSum > 0) {
                      const normFactor = (1 - newVal) / otherSum;
                      others.forEach(key => { newWeights[key] = w[key] * normFactor; });
                    }
                    setW(newWeights);
                  }}
                  style={{
                    width: "100%",
                    height: 6,
                    borderRadius: 3,
                    background: "var(--line)",
                    outline: "none",
                    cursor: "pointer",
                    accentColor: "var(--primary)"
                  }}
                />
              </div>
            ))}

            <div className="hr"/>

            <div className="eyebrow" style={{ marginBottom: 8 }}>Validasi konsistensi</div>
            <div className="grid cols-3" style={{ gap: 8, fontSize: 11.5 }}>
              <div style={{ padding: 8, background: "var(--bg-2)", borderRadius: 4 }}>
                <div className="muted">λmax</div>
                <div className="mono" style={{ fontWeight: 600, fontSize: 13 }}>{lambdaMax.toFixed(3)}</div>
              </div>
              <div style={{ padding: 8, background: "var(--bg-2)", borderRadius: 4 }}>
                <div className="muted">CI</div>
                <div className="mono" style={{ fontWeight: 600, fontSize: 13 }}>{((lambdaMax - 4)/3).toFixed(3)}</div>
              </div>
              <div style={{ padding: 8, background: "var(--accent-100)", borderRadius: 4 }}>
                <div className="muted" style={{ color: "var(--accent-700)" }}>CR</div>
                <div className="mono" style={{ fontWeight: 600, fontSize: 13, color: "var(--accent-700)" }}>{cr.toFixed(3)} ✓</div>
              </div>
            </div>
            <div className="muted" style={{ fontSize: 11, marginTop: 8 }}>CR &lt; 0.10 → matriks konsisten, hasil dapat dipakai.</div>
          </div>
        </div>

        <div className="card" style={{ gridColumn: "span 7" }}>
          <div className="card-head"><h2 className="h2">Matriks Perbandingan Berpasangan</h2><span className="tag">skala Saaty 1–9</span></div>
          <div className="card-body">
            <table className="data" style={{ fontSize: 13 }}>
              <thead><tr>
                <th></th><th className="num">Harga</th><th className="num">Mutu</th><th className="num">Waktu</th><th className="num">Jumlah</th><th className="num">Bobot</th>
              </tr></thead>
              <tbody>
                {(() => {
                  const labels = ["Harga","Mutu","Waktu","Jumlah"];
                  const matrix = [
                    [1, 1/2, 2, 3],
                    [2, 1, 3, 4],
                    [1/2, 1/3, 1, 2],
                    [1/3, 1/4, 1/2, 1]
                  ];
                  const weights = [w.harga, w.mutu, w.waktu, w.jumlah];
                  return labels.map((l, i) => (
                    <tr key={l}>
                      <td style={{ fontWeight: 600 }}>{l}</td>
                      {matrix[i].map((v, j) => (
                        <td key={j} className="num" style={{ background: i === j ? "var(--bg-2)" : "transparent", color: i === j ? "var(--ink-3)" : "inherit" }}>
                          {v >= 1 ? v.toFixed(0) : `1/${Math.round(1/v)}`}
                        </td>
                      ))}
                      <td className="num" style={{ fontWeight: 700, color: "var(--primary)" }}>{(weights[i]*100).toFixed(1)}%</td>
                    </tr>
                  ));
                })()}
              </tbody>
            </table>

            <div className="hr" style={{ margin: "16px 0" }}/>

            <div className="eyebrow" style={{ marginBottom: 10 }}>Undang Pakar untuk Validasi</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 8, alignItems: "flex-end" }}>
              <div>
                <div className="muted" style={{ fontSize: 10.5, marginBottom: 4, fontWeight: 600, textTransform: "uppercase", letterSpacing: 0.4 }}>Ahli</div>
                <input
                  type="email"
                  placeholder="nama@institusi.ac.id"
                  style={{
                    width: "100%", padding: "8px 10px", border: "1px solid var(--line)",
                    borderRadius: 6, fontSize: 12, background: "var(--bg)", color: "var(--ink)",
                    fontFamily: "var(--font-mono)"
                  }}
                />
              </div>
              <button className="btn" style={{ padding: "8px 14px", fontSize: 12 }}>
                <Icon name="mail" size={12}/> Kirim
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className="card" style={{ marginBottom: 24 }}>
        <div className="card-head">
          <h2 className="h2">Status Pemenuhan dari Supplier</h2>
        </div>
        <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {(() => {
            const { SAFCC_REQUESTS, SUPPLIER_FULFILLMENT_SUBMISSIONS } = window.IDSS;
            const fulfillments = SUPPLIER_FULFILLMENT_SUBMISSIONS || [];
            const activeRequests = SAFCC_REQUESTS.filter(r => r.status !== "shipped");

            if (activeRequests.length === 0) {
              return <div className="muted">Tidak ada permintaan aktif</div>;
            }

            return activeRequests.map(req => {
              const fulfillment = fulfillments.find(f => f.requestId === req.id);
              const persentase = fulfillment ? parseInt(fulfillment.persentase) : 0;
              const statusColor = persentase >= 100 ? "ok" : persentase > 0 ? "info" : "warn";

              return (
                <div key={req.id} style={{
                  padding: 12,
                  border: "1px solid var(--line)",
                  borderRadius: "var(--radius-lg)",
                  display: "flex",
                  flexDirection: "column",
                  gap: 8
                }}>
                  <div className="row between" style={{ alignItems: "center" }}>
                    <div>
                      <div style={{ fontWeight: 600, fontSize: 13 }}>{req.komoditas}</div>
                      <div className="muted" style={{ fontSize: 11 }}>Untuk Dapur {req.dapur} • Deadline {new Date(req.deadline).toLocaleDateString("id-ID")}</div>
                    </div>
                    <div style={{ textAlign: "right" }}>
                      <div style={{ fontWeight: 600, color: "var(--primary)" }}>
                        {fulfillment?.jumlahDiberikan || 0}/{req.jumlahDiminta} kg
                      </div>
                      <div className={`pill ${statusColor}`} style={{ fontSize: 11, marginTop: 4 }}>
                        {persentase}%
                      </div>
                    </div>
                  </div>
                  {fulfillment && (
                    <div className="muted" style={{ fontSize: 11, fontStyle: "italic" }}>
                      "{fulfillment.catatan || "—"}"
                    </div>
                  )}
                </div>
              );
            });
          })()}
        </div>
      </div>

      {scoreData.length === 0 ? (
        <div className="alert warn" style={{ marginBottom: 24 }}>
          <div style={{ color: "var(--warn)" }}>⚠</div>
          <div>
            <div className="alert-title">Tidak ada supplier tersedia</div>
            <div className="alert-body">Tidak ada supplier yang menyediakan komoditas "{selectedCommodity}" saat ini.</div>
          </div>
        </div>
      ) : (
      <div className="card" style={{ marginBottom: 24 }}>
        <div className="card-head"><h2 className="h2">Skor Akhir Supplier</h2>{winner && <span className="pill ok"><span className="led"/>Rekomendasi: {winner.nama}</span>}</div>
        <table className="data">
          <thead><tr>
            <th style={{ width: 30 }}>#</th><th>Supplier</th><th>Lokasi</th>
            <th className="num">Harga (Rp/kg)</th><th className="num">Mutu</th><th className="num">Waktu</th><th className="num">Jumlah</th>
            <th className="num">Skor AHP</th><th>Visualisasi</th>
          </tr></thead>
          <tbody>
            {scoreData.map((s, i) => (
              <tr key={s.id} style={{ background: i === 0 ? "color-mix(in oklab, var(--accent-100) 50%, transparent)" : "transparent" }}>
                <td className="mono" style={{ fontWeight: 700, color: i === 0 ? "var(--accent-700)" : "var(--ink-3)" }}>{i+1}</td>
                <td>
                  <div style={{ fontWeight: 600 }}>{s.nama}</div>
                  <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)" }}>{s.id}</div>
                </td>
                <td className="muted">{s.alamat}</td>
                <td className="num">{s.harga.toLocaleString("id-ID")}</td>
                <td className="num">{s.mutu.toFixed(1)}</td>
                <td className="num">{s.waktu.toFixed(1)}</td>
                <td className="num">{s.jumlah.toFixed(1)}</td>
                <td className="num" style={{ fontWeight: 700, fontSize: 13, color: i === 0 ? "var(--accent-700)" : "var(--ink)" }}>{s.score.toFixed(3)}</td>
                <td style={{ minWidth: 140 }}>
                  <div className="bar accent"><span style={{ width: `${s.score*100}%` }}/></div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      )}

      <div className="grid cols-2">
        <div className="card">
          <div className="card-head"><h2 className="h2">Perbandingan Radial</h2></div>
          <div className="card-body">
            <svg viewBox="0 0 320 280" style={{ width: "100%", height: 280 }}>
              {(() => {
                const cx = 160, cy = 140, R = 100;
                const axes = ["Harga","Mutu","Waktu","Jumlah"];
                const colors = ["oklch(0.50 0.16 255)","oklch(0.62 0.14 145)","oklch(0.65 0.16 30)","oklch(0.55 0.14 290)","oklch(0.55 0.10 200)"];
                return (
                  <>
                    {[0.25,0.5,0.75,1].map((r,i) => (
                      <circle key={i} cx={cx} cy={cy} r={R*r} fill="none" stroke="var(--line)" strokeWidth="0.8"/>
                    ))}
                    {axes.map((a, i) => {
                      const ang = (i / 4) * Math.PI * 2 - Math.PI/2;
                      const x = cx + Math.cos(ang) * (R + 14);
                      const y = cy + Math.sin(ang) * (R + 14);
                      return (
                        <g key={a}>
                          <line x1={cx} y1={cy} x2={cx + Math.cos(ang)*R} y2={cy + Math.sin(ang)*R} stroke="var(--line)"/>
                          <text x={x} y={y+4} textAnchor="middle" fontSize="11" fill="var(--ink-2)" fontWeight="600">{a}</text>
                        </g>
                      );
                    })}
                    {scoreData.map((s, idx) => {
                      const dims = [s.hN, s.mN, s.wN, s.jN];
                      const pts = dims.map((d, i) => {
                        const ang = (i / 4) * Math.PI * 2 - Math.PI/2;
                        return [cx + Math.cos(ang)*R*d, cy + Math.sin(ang)*R*d];
                      });
                      const path = pts.map((p,i) => (i===0?"M":"L") + p[0].toFixed(1) + "," + p[1].toFixed(1)).join(" ") + "Z";
                      return <path key={s.id} d={path} fill={colors[idx]} fillOpacity={idx===0?0.22:0.05} stroke={colors[idx]} strokeWidth={idx===0?2:1} strokeOpacity={idx===0?1:0.4}/>;
                    })}
                  </>
                );
              })()}
            </svg>
            <div className="row wrap gap-xs" style={{ marginTop: 8, justifyContent: "center" }}>
              {scoreData.map((s, idx) => {
                const colors = ["oklch(0.50 0.16 255)","oklch(0.62 0.14 145)","oklch(0.65 0.16 30)","oklch(0.55 0.14 290)","oklch(0.55 0.10 200)"];
                return (
                  <span key={s.id} className="tag" style={{ fontSize: 10.5 }}>
                    <span style={{ width: 8, height: 8, borderRadius: 2, background: colors[idx], display: "inline-block", marginRight: 4 }}/>
                    {s.nama}
                  </span>
                );
              })}
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h2 className="h2">Sensitivitas Bobot</h2></div>
          <div className="card-body">
            <div style={{ fontSize: 12, color: "var(--ink-3)", marginBottom: 10 }}>
              Bagaimana ranking berubah jika satu kriteria didominasi (90% bobot)?
            </div>
            <table className="data" style={{ fontSize: 13 }}>
              <thead><tr><th>Skenario</th><th>#1</th><th>#2</th><th>#3</th></tr></thead>
              <tbody>
                <tr><td>Harga dominan</td><td>UD Berkah Tani</td><td>Koperasi SS</td><td>CV Tani Makmur</td></tr>
                <tr><td>Mutu dominan</td><td>PT Hijau Lestari</td><td>CV Tani Makmur</td><td>Mitra Petani</td></tr>
                <tr><td>Waktu dominan</td><td>PT Hijau Lestari</td><td>Koperasi SS</td><td>CV Tani Makmur</td></tr>
                <tr><td>Jumlah dominan</td><td>CV Tani Makmur</td><td>PT Hijau Lestari</td><td>Mitra Petani</td></tr>
                <tr style={{ background: "var(--primary-50)" }}><td><b>Bobot saat ini</b></td><td><b>{scoreData[0]?.nama || "—"}</b></td><td>{scoreData[1]?.nama || "—"}</td><td>{scoreData[2]?.nama || "—"}</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div className="card" style={{ marginTop: 24 }}>
        <div className="card-head"><h2 className="h2">Daftar Request Komoditas (Aktif)</h2><span className="pill primary"><span className="led"/>{safccRequests.filter(r => r.status !== "shipped").length} aktif</span></div>
        <div style={{ maxHeight: 360, overflowY: "auto" }}>
          <table className="data">
            <thead><tr>
              <th>ID</th><th>Komoditas</th><th className="num">Jumlah</th><th>Deadline</th><th>Dapur</th><th>Tgl Request</th><th>Status</th>
            </tr></thead>
            <tbody>
              {safccRequests.filter(r => r.status !== "shipped").map(req => (
                <tr key={req.id}>
                  <td className="mono" style={{ fontSize: 11, color: "var(--ink-3)", fontWeight: 600 }}>{req.id}</td>
                  <td style={{ fontWeight: 600 }}>{req.komoditas} <span className="tag" style={{ fontSize: 10.5, marginLeft: 6 }}>{req.klasifikasi}</span></td>
                  <td className="num">{req.jumlahDiminta} {req.satuanDiminta}</td>
                  <td className="mono" style={{ fontSize: 12 }}>{req.deadline}</td>
                  <td>{req.dapur}</td>
                  <td className="mono" style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{req.tanggalPermintaan}</td>
                  <td>
                    {req.status === "pending" && <span className="pill warn"><span className="led"/>Menunggu</span>}
                    {req.status === "partial" && <span className="pill info"><span className="led"/>Partial</span>}
                    {req.status === "ready_to_ship" && <span className="pill ok"><span className="led"/>Siap Kirim</span>}
                    {req.status === "shipped" && <span className="pill accent"><span className="led"/>Dikirim</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="muted" style={{ fontSize: 11.5, marginTop: 8, padding: "0 16px 16px" }}>Request ini akan ditampilkan ke semua supplier dan mereka dapat menerima atau menolak. Status akan diperbaharui ketika supplier mengirimkan hasil penerimaan.</div>
      </div>
    </>
  );
}

function AgroEWS({ role }) {
  const { AGRO_EWS_TAHAPAN, AGRO_EWS_KRITERIA, AGRO_EWS_HARIINI, AGRO_EWS_KOMODITAS_LIST, AGRO_EWS_DATA_KOMODITAS, AGRO_ALERTS_AKTIF } = window.IDSS;
  const { Pipeline, Icon, ScoreInput, Donut } = window.IDSSUI;

  const [activeId, setActiveId] = React.useState("A1");
  const [showDropdown, setShowDropdown] = React.useState(false);
  const [komoditas, setKomoditas] = React.useState(AGRO_EWS_KOMODITAS_LIST[0]);
  const tahap = AGRO_EWS_TAHAPAN.find(t => t.id === activeId);

  // All SAFCC stages use commodity-specific data
  const hariIniData = AGRO_EWS_DATA_KOMODITAS[activeId][komoditas];

  // Override batas kritis for all stages based on komoditas
  const kriteria = React.useMemo(() => {
    const base = AGRO_EWS_KRITERIA[activeId];
    if (hariIniData && hariIniData.batasOverride) {
      return base.map(k => hariIniData.batasOverride[k.id]
        ? { ...k, batasKritis: hariIniData.batasOverride[k.id] }
        : k);
    }
    return base;
  }, [activeId, komoditas]);

  const [allScores, setAllScores] = React.useState({});
  const [scores, setScores] = React.useState({});

  React.useEffect(() => {
    setScores(Object.fromEntries(kriteria.map((k,i) => [k.id, hariIniData.skor[i]])));
  }, [activeId, komoditas]);

  const updScore = (kid, v) => {
    setScores(s => ({ ...s, [kid]: v }));
    setAllScores(s => ({
      ...s,
      [activeId]: { ...(s[activeId] || {}), [kid]: v }
    }));
  };

  const weightedScore = React.useMemo(() => {
    return kriteria.reduce((acc, k) => acc + (scores[k.id] || 0) * k.bobot, 0);
  }, [scores, activeId]);

  const hasMinimalScore = Object.values(scores).some(score => score === 1);
  const fuzzyLabel = hasMinimalScore ? "KRITIS" : (weightedScore >= 4.3 ? "AMAN" : weightedScore >= 3.5 ? "WASPADA" : weightedScore >= 2.5 ? "BERESIKO" : "KRITIS");
  const fuzzyColor = hasMinimalScore ? "var(--danger)" : (weightedScore >= 4.3 ? "var(--accent)" : weightedScore >= 3.5 ? "var(--warn)" : "var(--danger)");

  const handleExportAgroEWSReport = () => {
    const headers = ["Tahap", "Komoditas", "Kriteria", "Skor", "Bobot", "Weighted"];
    const rows = AGRO_EWS_TAHAPAN.map(t => {
      const stageKriteria = AGRO_EWS_KRITERIA[t.id] || [];
      const stageData = AGRO_EWS_DATA_KOMODITAS[t.id]?.[komoditas];
      return stageKriteria.map((k, i) => [
        t.nama,
        komoditas,
        k.nama,
        stageData?.skor?.[i] || "-",
        k.bobot,
        (stageData?.skor?.[i] || 0) * k.bobot
      ]);
    }).flat();
    const csv = [headers, ...rows].map(r => r.map(v => `"${v}"`).join(",")).join("\n");
    const blob = new Blob([csv], { type: "text/csv" });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `SAFCC-EWS-Report-${new Date().toISOString().split('T')[0]}.csv`;
    a.click();
  };

  const sigma = 0.42;
  const normalPdf = (x) => (1 / (sigma * Math.sqrt(2 * Math.PI))) * Math.exp(-0.5 * Math.pow((x - weightedScore) / sigma, 2));
  const mcDist = React.useMemo(() => {
    const bins = [[1.0, 1.7], [1.7, 2.4], [2.4, 3.1], [3.1, 3.8], [3.8, 4.5], [4.5, 5.0]];
    const probs = bins.map(([lo, hi]) => {
      const steps = 10;
      let sum = 0;
      for (let i = 0; i < steps; i++) {
        const x = lo + ((hi - lo) / steps) * (i + 0.5);
        sum += normalPdf(x) * ((hi - lo) / steps);
      }
      return sum;
    });
    const total = probs.reduce((a, b) => a + b, 0);
    return probs.map(p => Math.round((p / total) * 100));
  }, [weightedScore]);

  return (
    <>
      <div className="page-header">
        <div>
          <div className="crumbs"><span>Smart Agro</span><span>Submodul</span><span>Keamanan Pangan</span></div>
          <h1 className="page-title">Keamanan Pangan — Preprocessing & Penerimaan</h1>
        </div>
        <div className="row gap-sm">
          <button className="btn"><Icon name="refresh" size={14}/> Re-simulasi (n=10.000)</button>
          <button className="btn primary" onClick={handleExportAgroEWSReport}><Icon name="download" size={14}/> Ekspor laporan</button>
        </div>
      </div>

      <Pipeline tahapan={AGRO_EWS_TAHAPAN} hariIni={AGRO_EWS_HARIINI} activeId={activeId} onPick={setActiveId}/>

      <div className="row gap-sm" style={{ margin: "20px 0 16px", flexWrap: "wrap" }}>
        <h2 className="h1" style={{ fontSize: 20 }}>{tahap.idx}. {tahap.nama}</h2>
        <span className="tag">{tahap.fase === "bahan" ? "Bahan baku" : "Makanan jadi"}</span>
        <span className="muted" style={{ fontSize: 12.5 }}>{tahap.deskripsi}</span>
        <div className="row gap-xs" style={{ marginLeft: "auto", alignItems: "center", position: "relative" }}>
          <span className="muted" style={{ fontSize: 11.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: 0.4 }}>Komoditas:</span>
          <div style={{ position: "relative" }}>
            <button
              onClick={() => setShowDropdown(s => !s)}
              style={{
                padding: "8px 14px",
                fontSize: 12,
                fontWeight: 600,
                background: "linear-gradient(135deg, var(--primary), var(--primary-700))",
                color: "white",
                border: "0",
                borderRadius: 6,
                cursor: "pointer",
                display: "flex",
                alignItems: "center",
                gap: 8,
                transition: "all 0.2s",
                boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
              }}>
              {komoditas}
              <Icon name="arrow" size={14} style={{ transform: showDropdown ? "rotate(-90deg)" : "rotate(90deg)", transition: "transform 0.3s ease" }}/>
            </button>
            {showDropdown && (
              <div style={{
                position: "absolute",
                top: 42,
                left: 0,
                minWidth: 240,
                background: "white",
                border: "1px solid var(--line)",
                borderRadius: 8,
                boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
                zIndex: 30,
                maxHeight: 350,
                overflowY: "auto",
                animation: "slideDown 0.2s ease"
              }}>
                {AGRO_EWS_KOMODITAS_LIST.map((k, idx) => (
                  <button
                    key={k}
                    onClick={() => {
                      setKomoditas(k);
                      setShowDropdown(false);
                    }}
                    style={{
                      width: "100%",
                      padding: "10px 14px",
                      fontSize: 12,
                      textAlign: "left",
                      background: komoditas === k ? "var(--primary-50)" : "transparent",
                      border: "0",
                      cursor: "pointer",
                      color: komoditas === k ? "var(--primary)" : "var(--ink-2)",
                      borderBottom: idx < AGRO_EWS_KOMODITAS_LIST.length - 1 ? "1px solid var(--line-2)" : "0",
                      transition: "all 0.15s",
                      fontWeight: komoditas === k ? 600 : 400
                    }}>
                      {komoditas === k && "✓ "}
                      {k}
                  </button>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>

      <div className="grid cols-12">
        <div className="card" style={{ gridColumn: "span 7" }}>
          <div className="card-head"><h2 className="h2">Input Skoring Kriteria (1–5)</h2><span className="tag mono">5 = baik · 1 = kritis</span></div>
          <div className="card-body" style={{ paddingTop: 8 }}>
            <table className="data" style={{ fontSize: 13 }}>
              <thead><tr>
                <th>Kriteria</th><th>Batas kritis (asumsi)</th><th className="num">Bobot</th><th>Skor</th>
              </tr></thead>
              <tbody>
                {kriteria.map(k => (
                  <tr key={k.id}>
                    <td style={{ fontWeight: 600 }}>{k.nama}</td>
                    <td className="muted" style={{ fontSize: 11.5 }}>{k.batasKritis}</td>
                    <td className="num">{(k.bobot*100).toFixed(0)}%</td>
                    <td><ScoreInput value={scores[k.id]} onChange={v => updScore(k.id, v)}/></td>
                  </tr>
                ))}
                <tr style={{ background: "var(--primary-50)", fontWeight: 700 }}>
                  <td colSpan="2" style={{ color: "var(--primary)", textAlign: "right" }}>SKOR TERTIMBANG</td>
                  <td className="num" style={{ color: "var(--primary)" }}>Σw=1.00</td>
                  <td><span className="mono" style={{ fontWeight: 700, fontSize: 14, color: "var(--primary)" }}>{weightedScore.toFixed(2)}</span> <span className="muted">/ 5</span></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div className="card" style={{ gridColumn: "span 5" }}>
          <div className="card-head"><h2 className="h2">Output FIS</h2><span className="tag mono">Mamdani · 3.125 rules (5^5)</span></div>
          <div className="card-body">
            <div className="row" style={{ gap: 18, alignItems: "center", marginBottom: 16 }}>
              <Donut value={weightedScore} max={5} size={108} stroke={10} color={fuzzyColor} label={fuzzyLabel}/>
              <div style={{ flex: 1 }}>
                <div className="eyebrow" style={{ color: fuzzyColor }}>Status defuzzifikasi</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 600, color: fuzzyColor, marginTop: 2 }}>{fuzzyLabel}</div>
                <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>Centroid output: <b className="mono" style={{ color: "var(--ink)" }}>{weightedScore.toFixed(2)}</b></div>
              </div>
            </div>

            <div className="eyebrow" style={{ marginBottom: 8 }}>Membership pada output sets</div>
            {[
              { name: "AMAN",     val: Math.max(0, Math.min(1, (weightedScore - 3.8)/1.0)), color: "var(--accent)" },
              { name: "WASPADA",  val: Math.max(0, 1 - Math.abs(weightedScore - 3.5)/1.0), color: "var(--warn)" },
              { name: "BERESIKO", val: Math.max(0, 1 - Math.abs(weightedScore - 2.5)/1.0), color: "oklch(0.65 0.16 30)" },
              { name: "KRITIS",   val: Math.max(0, Math.min(1, (2.0 - weightedScore)/1.0)), color: "var(--danger)" }
            ].map(m => (
              <div key={m.name} style={{ marginBottom: 6 }}>
                <div className="row between" style={{ marginBottom: 3 }}>
                  <span style={{ fontSize: 11.5, fontWeight: 500, color: "var(--ink-2)" }}>{m.name}</span>
                  <span className="mono" style={{ fontSize: 11 }}>{(m.val*100).toFixed(0)}%</span>
                </div>
                <div className="bar"><span style={{ width: `${m.val*100}%`, background: m.color }}/></div>
              </div>
            ))}

            <div className="hr" style={{ margin: "12px 0" }}/>

            <div className="eyebrow" style={{ marginBottom: 10 }}>Alert &amp; Rekomendasi</div>
            {(() => {
              const alertConfig = {
                AMAN: {
                  icon: "✓", color: "var(--accent)", bgColor: "var(--accent-50)",
                  action: "Pertahankan standar saat ini",
                  frequency: "Monitoring rutin harian",
                  responsible: "Koordinator SAFCC"
                },
                WASPADA: {
                  icon: "!", color: "var(--warn)", bgColor: "var(--warn-50)",
                  action: "Tingkatkan pengawasan & terapkan preventif",
                  frequency: "Monitoring intensif (2× per hari)",
                  responsible: "Supervisor + QC"
                },
                BERESIKO: {
                  icon: "⚠", color: "oklch(0.45 0.17 55)", bgColor: "oklch(0.95 0.05 55)",
                  action: "Segera implementasikan tindakan korektif",
                  frequency: "Monitoring real-time (per shift)",
                  responsible: "Kepala SAFCC + Tim QC"
                },
                KRITIS: {
                  icon: "✕", color: "var(--danger)", bgColor: "var(--danger-50)",
                  action: "AKSI DARURAT: Hentikan operasi jika diperlukan",
                  frequency: "Monitoring berkelanjutan (24/7)",
                  responsible: "Kepala SAFCC + Management"
                }
              };
              const config = alertConfig[fuzzyLabel];
              return (
                <div style={{ padding: 12, background: config.bgColor, borderRadius: 6, borderLeft: `4px solid ${config.color}` }}>
                  <div style={{ display: "flex", gap: 10, marginBottom: 8 }}>
                    <span style={{ fontSize: 20, color: config.color, fontWeight: 700, width: 24, textAlign: "center" }}>{config.icon}</span>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 11.5, fontWeight: 600, color: config.color, marginBottom: 2 }}>Aksi yang Direkomendasikan</div>
                      <div style={{ fontSize: 12, color: "var(--ink)", fontWeight: 500 }}>{config.action}</div>
                    </div>
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, fontSize: 11.5 }}>
                    <div>
                      <div className="muted" style={{ fontSize: 10, fontWeight: 600, marginBottom: 3 }}>Frekuensi Monitoring</div>
                      <div style={{ fontWeight: 500, color: "var(--ink)" }}>{config.frequency}</div>
                    </div>
                    <div>
                      <div className="muted" style={{ fontSize: 10, fontWeight: 600, marginBottom: 3 }}>Penanggung Jawab</div>
                      <div style={{ fontWeight: 500, color: "var(--ink)" }}>{config.responsible}</div>
                    </div>
                  </div>
                </div>
              );
            })()}
          </div>
        </div>
      </div>

      <div className="grid cols-12" style={{ marginTop: 24 }}>
        <div className="card" style={{ gridColumn: "span 6" }}>
          <div className="card-head"><h2 className="h2">Distribusi Monte Carlo (n=10.000)</h2><span className="tag mono">σ = 0.42</span></div>
          <div className="card-body">
            <svg viewBox="0 0 520 220" style={{ width: "100%", height: 220 }}>
              <defs>
                <linearGradient id="gradDangerAg" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" stopColor="var(--danger)" stopOpacity="1"/>
                  <stop offset="100%" stopColor="var(--danger)" stopOpacity="0.6"/>
                </linearGradient>
                <linearGradient id="gradWarnAg" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" stopColor="oklch(0.65 0.16 30)" stopOpacity="1"/>
                  <stop offset="100%" stopColor="oklch(0.65 0.16 30)" stopOpacity="0.6"/>
                </linearGradient>
                <linearGradient id="gradAccentAg" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" stopColor="var(--accent)" stopOpacity="1"/>
                  <stop offset="100%" stopColor="var(--accent)" stopOpacity="0.6"/>
                </linearGradient>
                <filter id="shadowAg"><feDropShadow dx="0" dy="2" stdDeviation="3" floodOpacity="0.2"/></filter>
              </defs>
              {(() => {
                const labels = ["1.0–1.7", "1.7–2.4", "2.4–3.1", "3.1–3.8", "3.8–4.5", "4.5–5.0"];
                const gradients = ["url(#gradDangerAg)", "url(#gradWarnAg)", "url(#gradWarnAg)", "url(#gradWarnAg)", "url(#gradAccentAg)", "url(#gradAccentAg)"];
                const maxVal = Math.max(...mcDist);
                return (
                  <>
                    <line x1="45" y1="185" x2="505" y2="185" stroke="var(--line)" strokeWidth="1.5"/>
                    {mcDist.map((v, i) => {
                      const x = 45 + i * 77;
                      const h = (v / maxVal) * 160;
                      return (
                        <g key={i} filter="url(#shadowAg)">
                          <rect x={x+3} y={185-h} width="60" height={h} fill={gradients[i]} rx="4" strokeWidth="1" stroke={gradients[i]}/>
                          <text x={x+33} y={180-h} textAnchor="middle" fontSize="13" fontWeight="700" fill="var(--ink)" fontFamily="var(--font-mono)">{v}%</text>
                          <text x={x+33} y="205" textAnchor="middle" fontSize="11" fontWeight="600" fill="var(--ink-2)" fontFamily="var(--font-mono)">{labels[i]}</text>
                        </g>
                      );
                    })}
                    <line x1={45 + ((weightedScore - 1) / 4) * 460} y1="10" x2={45 + ((weightedScore - 1) / 4) * 460} y2="185" stroke="var(--primary)" strokeWidth="2.5" strokeDasharray="5 4" opacity="0.9"/>
                  </>
                );
              })()}
            </svg>
            <div style={{ marginTop: 12 }}>
              <div className="muted" style={{ fontSize: 11.5, marginBottom: 6 }}>
                Probabilitas tahap dalam status BERESIKO atau lebih buruk: <b className="mono" style={{ color: "var(--danger)" }}>{mcDist[0]+mcDist[1]+mcDist[2]}%</b>
              </div>
              <div style={{ padding: 10, background: "var(--bg-2)", borderRadius: 6, fontSize: 11.5, lineHeight: 1.5 }}>
                <div className="eyebrow" style={{ marginBottom: 4, fontSize: 10 }}>Rekomendasi</div>
                {(mcDist[0]+mcDist[1]+mcDist[2]) >= 50 ? (
                  <span><b style={{ color: "var(--danger)" }}>Tingkatkan pengawasan</b> — lebih dari setengah skenario dalam risiko. Audit supply chain dari petani.</span>
                ) : (mcDist[0]+mcDist[1]+mcDist[2]) >= 20 ? (
                  <span><b style={{ color: "var(--warn)" }}>Monitor secara berkala</b> — risiko sedang. Terapkan kontrol pada area yang kurang stabil.</span>
                ) : (
                  <span><b style={{ color: "var(--accent)" }}>Status terjaga</b> — probabilitas risiko rendah. Pertahankan standar preprocessing & penerimaan.</span>
                )}
              </div>
            </div>
          </div>
        </div>

        <div className="card" style={{ gridColumn: "span 6" }}>
          <div className="card-head"><h2 className="h2">Heatmap 6 Tahapan × 5 Kriteria</h2><span className="tag">snapshot hari ini</span></div>
          <div className="card-body">
            <div style={{ display: "grid", gridTemplateColumns: "90px repeat(5, 1fr)", gap: 3, alignItems: "center" }}>
              <div></div>
              {["K1","K2","K3","K4","K5"].map(k => (
                <div key={k} className="mono" style={{ fontSize: 9.5, color: "var(--ink-3)", textAlign: "center", fontWeight: 600 }}>{k}</div>
              ))}
              {AGRO_EWS_TAHAPAN.map(t => (
                <React.Fragment key={t.id}>
                  <div style={{ fontSize: 10.5, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{t.idx}. {t.nama}</div>
                  {AGRO_EWS_KRITERIA[t.id].map((k, i) => {
                    const s = allScores[t.id]?.[k.id] ?? AGRO_EWS_HARIINI[t.id].skor[i];
                    const colors = {
                      5: ["var(--accent-100)", "var(--accent-700)"],
                      4: ["color-mix(in oklab, var(--accent-100) 70%, white)", "var(--accent-700)"],
                      3: ["var(--warn-100)", "oklch(0.45 0.17 55)"],
                      2: ["color-mix(in oklab, var(--danger-100) 60%, white)", "var(--danger)"],
                      1: ["var(--danger-100)", "var(--danger)"]
                    };
                    return (
                      <div key={k.id} className="heatmap-cell" style={{ background: colors[s][0], color: colors[s][1], aspectRatio: "2.5/1", border: t.id === activeId ? "1.5px solid var(--primary)" : "0", display: "grid", placeItems: "center", fontSize: 12, fontWeight: 600 }}>
                        {s}
                      </div>
                    );
                  })}
                </React.Fragment>
              ))}
            </div>
            <div className="hr"/>
            <div className="row gap-sm" style={{ fontSize: 11.5 }}>
              <span className="muted">Legenda:</span>
              {[5,4,3,2,1].map(s => {
                const c = { 5: "var(--accent)", 4: "var(--accent)", 3: "var(--warn)", 2: "var(--danger)", 1: "var(--danger)" }[s];
                return <span key={s} className="row gap-xs"><span style={{ width: 12, height: 12, background: c, borderRadius: 2, opacity: s/5 }}/>{s}</span>;
              })}
            </div>
          </div>
        </div>
      </div>

      <div className="card" style={{ marginTop: 24 }}>
        <div className="card-head"><h2 className="h2">Alert &amp; Tindakan dari SAFCC</h2><span className="pill warn"><span className="led"/>{AGRO_ALERTS_AKTIF.length} alert aktif</span></div>
        <table className="data">
          <thead><tr><th>Tahap</th><th>Alert</th><th>Komoditas</th><th className="num">Waktu</th><th>Tindakan</th><th>Status</th></tr></thead>
          <tbody>
            {AGRO_ALERTS_AKTIF.map(a => (
              <tr key={a.id}>
                <td><span className="tag mono">{a.tahap}</span></td>
                <td style={{ fontWeight: 500 }}>{a.judul}</td>
                <td className="muted">{a.komoditas}</td>
                <td className="num" style={{ fontSize: 11.5, fontFamily: "var(--font-mono)" }}>{a.waktu}</td>
                <td style={{ fontSize: 12 }}>{a.aksi}</td>
                <td><span className={`pill ${a.level === "danger" ? "danger" : "warn"}`}><span className="led"/>{a.level === "danger" ? "Kritis" : "Peringatan"}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

// ===== AgroPenerimaan — Validasi & score incoming deliveries dengan AHP =====
function AgroPenerimaan() {
  const { Icon } = window.IDSSUI;
  const { SAFCC_REQUESTS, SUPPLIER_LIST, SUPPLIER_PENGIRIMAN } = window.IDSS;

  const [deliveries, setDeliveries] = useS_A(SUPPLIER_PENGIRIMAN);
  const [requests, setRequests] = useS_A(SAFCC_REQUESTS);
  const [selectedRequest, setSelectedRequest] = useS_A(null);
  const [selectedSupplier, setSelectedSupplier] = useS_A(null);
  const [volumeReceived, setVolumeReceived] = useS_A(0);
  const [showForm, setShowForm] = useS_A(false);
  const [successMsg, setSuccessMsg] = useS_A(null);

  // Get AHP weights dari tweaks
  const ahpWeights = window.__ahpWeights || { harga: 0.30, mutu: 0.35, waktu: 0.20, jumlah: 0.15 };

  // Calculate AHP score for supplier (normalized 0-1)
  const calculateAHPScore = (supplier, suppliers) => {
    const norm = (arr, key, invert) => {
      const vals = arr.map(s => s[key]);
      const max = Math.max(...vals), min = Math.min(...vals);
      return arr.map(s => {
        if (invert) return (max - s[key]) / (max - min || 1);
        return (s[key] - min) / (max - min || 1);
      });
    };

    const hN = norm(suppliers, "rating", false); // using rating as proxy for quality
    const idx = suppliers.findIndex(s => s.id === supplier.id);

    // Simplified: use supplier's acceptanceRate as quality indicator
    const qualityScore = supplier.acceptanceRate;
    const ahpScore = qualityScore * ahpWeights.mutu + (1 - (supplier.totalKiriman / 100)) * ahpWeights.waktu + 0.5 * (ahpWeights.harga + ahpWeights.jumlah);

    return Math.max(0, Math.min(1, ahpScore));
  };

  // Convert AHP score (0-1) to SAFCC score (1-5)
  const convertToSAFCCScore = (ahpScore) => {
    return Math.round((1 + ahpScore * 4) * 10) / 10;
  };

  const handleConfirmReceive = () => {
    if (!selectedRequest || !selectedSupplier || volumeReceived <= 0) {
      window.showToast("Pastikan request, supplier, dan volume sudah dipilih", "warn", 3000);
      return;
    }

    const supplier = SUPPLIER_LIST.find(s => s.id === selectedSupplier);
    const ahpScore = calculateAHPScore(supplier, SUPPLIER_LIST.filter(s => s.type === supplier.type));
    const skorSAFCC = convertToSAFCCScore(ahpScore);

    const newDelivery = {
      id: `SH${String(deliveries.length + 1).padStart(2, "0")}`,
      tanggal: new Date().toISOString().split("T")[0],
      komoditas: selectedRequest.komoditas,
      volume: volumeReceived,
      volumeDiterima: Math.round(volumeReceived * 0.95),
      volumeDitolak: Math.round(volumeReceived * 0.05),
      satuan: "kg",
      supplier: supplier.id,
      supplierId: supplier.id,
      status: "diterima",
      skorSAFCC: skorSAFCC,
      tepatWaktu: true,
      acceptance: 0.95
    };

    const updatedDeliveries = [...deliveries, newDelivery];
    setDeliveries(updatedDeliveries);
    window.IDSS.SUPPLIER_PENGIRIMAN = updatedDeliveries;

    // Update request status
    const updatedRequests = requests.map(r =>
      r.id === selectedRequest.id ? { ...r, status: "fulfilled" } : r
    );
    setRequests(updatedRequests);
    window.IDSS.SAFCC_REQUESTS = updatedRequests;

    // Broadcast updates
    window.postMessage({ type: "__supplier_pengiriman_updated", deliveries: updatedDeliveries }, "*");
    window.MessageBus?.send(MESSAGE_TYPES.SAFCC_REQUESTS_UPDATED, { requests: updatedRequests });

    setSuccessMsg(`✓ Penerimaan ${selectedRequest.komoditas} dari ${supplier.nama} tercatat (Skor SAFCC: ${skorSAFCC})`);
    setTimeout(() => {
      setSuccessMsg(null);
      setShowForm(false);
      setSelectedRequest(null);
      setSelectedSupplier(null);
      setVolumeReceived(0);
    }, 2000);
  };

  const pendingRequests = requests.filter(r => r.status === "pending");
  const selectedReq = selectedRequest ? requests.find(r => r.id === selectedRequest) : null;
  const compatibleSuppliers = selectedReq ? SUPPLIER_LIST : [];

  return (
    <>
      {successMsg && (
        <div className="alert ok fade-up" style={{ marginBottom: 16 }}>
          <div style={{ color: "var(--accent)", fontSize: 18 }}>✓</div>
          <div>
            <div className="alert-title">Penerimaan tercatat</div>
            <div className="alert-body">{successMsg}</div>
          </div>
        </div>
      )}

      <div className="page-header">
        <div>
          <div className="crumbs"><span>Smart Agro</span><span>Operasional</span><span>Penerimaan Bahan</span></div>
          <h1 className="page-title">Penerimaan & Validasi Bahan Baku</h1>
        </div>
      </div>

      <div className="grid cols-12" style={{ marginBottom: 24, gap: 24 }}>
        {/* Left: Pending Requests */}
        <div className="card" style={{ gridColumn: "span 6" }}>
          <div className="card-head">
            <h2 className="h2">Permintaan Tertunda</h2>
            <span className="tag">{pendingRequests.length}</span>
          </div>
          <div className="card-body" style={{ maxHeight: 400, overflowY: "auto" }}>
            {pendingRequests.length === 0 ? (
              <div className="muted">Tidak ada permintaan tertunda</div>
            ) : (
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                {pendingRequests.map(req => (
                  <button
                    key={req.id}
                    onClick={() => setSelectedRequest(req.id)}
                    style={{
                      padding: 12,
                      background: selectedRequest === req.id ? "var(--primary-50)" : "var(--bg-2)",
                      border: `1px solid ${selectedRequest === req.id ? "var(--primary-100)" : "var(--line)"}`,
                      borderRadius: 6,
                      cursor: "pointer",
                      textAlign: "left",
                      transition: "all 0.2s"
                    }}
                  >
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{req.komoditas}</div>
                    <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>
                      {req.jumlahDiminta} kg · Deadline: {req.deadline}
                    </div>
                  </button>
                ))}
              </div>
            )}
          </div>
        </div>

        {/* Right: Validation Form */}
        <div className="card" style={{ gridColumn: "span 6" }}>
          <div className="card-head">
            <h2 className="h2">Validasi Penerimaan</h2>
          </div>
          <div className="card-body">
            {!selectedRequest ? (
              <div className="muted">Pilih permintaan terlebih dahulu</div>
            ) : (
              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 8 }}>Komoditas yang diminta</div>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>{selectedReq.komoditas}</div>
                  <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>
                    {selectedReq.jumlahDiminta} kg diperlukan
                  </div>
                </div>

                <div>
                  <div className="eyebrow" style={{ marginBottom: 8 }}>Supplier (AHP-based)</div>
                  <select
                    value={selectedSupplier || ""}
                    onChange={(e) => setSelectedSupplier(e.target.value)}
                    style={{
                      width: "100%",
                      padding: 10,
                      borderRadius: 6,
                      border: "1px solid var(--line)",
                      fontSize: 13,
                      fontFamily: "var(--font-sans)"
                    }}
                  >
                    <option value="">-- Pilih supplier --</option>
                    {compatibleSuppliers.map(s => {
                      const ahpScore = calculateAHPScore(s, SUPPLIER_LIST);
                      const safccScore = convertToSAFCCScore(ahpScore);
                      return (
                        <option key={s.id} value={s.id}>
                          {s.nama} (Rating: {s.rating}, Est. Skor SAFCC: {safccScore})
                        </option>
                      );
                    })}
                  </select>
                </div>

                <div>
                  <div className="eyebrow" style={{ marginBottom: 8 }}>Volume diterima (kg)</div>
                  <input
                    type="number"
                    value={volumeReceived}
                    onChange={(e) => setVolumeReceived(Math.max(0, parseInt(e.target.value) || 0))}
                    max={selectedReq.jumlahDiminta}
                    style={{
                      width: "100%",
                      padding: 10,
                      borderRadius: 6,
                      border: "1px solid var(--line)",
                      fontSize: 13,
                      fontFamily: "var(--font-sans)"
                    }}
                  />
                  <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>
                    Max: {selectedReq.jumlahDiminta} kg
                  </div>
                </div>

                {selectedSupplier && (
                  <div style={{
                    padding: 12,
                    background: "var(--primary-50)",
                    borderRadius: 6,
                    border: "1px solid var(--primary-100)"
                  }}>
                    <div className="muted" style={{ fontSize: 11, marginBottom: 6 }}>Skor SAFCC otomatis</div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 700, color: "var(--primary)" }}>
                      {convertToSAFCCScore(calculateAHPScore(SUPPLIER_LIST.find(s => s.id === selectedSupplier), SUPPLIER_LIST))}
                    </div>
                    <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>
                      Berdasarkan AHP: rating, acceptance rate, delivery track record
                    </div>
                  </div>
                )}

                <button
                  onClick={handleConfirmReceive}
                  className="btn primary"
                  style={{ width: "100%" }}
                >
                  <Icon name="play" size={14}/> Konfirmasi penerimaan
                </button>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Recent Deliveries */}
      <div className="card">
        <div className="card-head">
          <h2 className="h2">Riwayat Penerimaan Hari Ini</h2>
          <span className="tag">{deliveries.filter(d => d.tanggal === new Date().toISOString().split("T")[0]).length}</span>
        </div>
        <table className="data">
          <thead><tr>
            <th>Tanggal</th>
            <th>Komoditas</th>
            <th className="num">Volume</th>
            <th className="num">Skor SAFCC</th>
            <th>Supplier</th>
            <th>Status</th>
          </tr></thead>
          <tbody>
            {deliveries.slice(-5).reverse().map(d => {
              const supplier = SUPPLIER_LIST.find(s => s.id === d.supplier || s.id === d.supplierId);
              return (
                <tr key={d.id}>
                  <td style={{ fontFamily: "var(--font-sans)", fontSize: 13 }}>{d.tanggal}</td>
                  <td style={{ fontFamily: "var(--font-sans)", fontSize: 13 }}>{d.komoditas}</td>
                  <td className="num" style={{ fontFamily: "var(--font-sans)", fontSize: 13 }}>{d.volume} kg</td>
                  <td className="num" style={{ fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 600, color: "var(--primary)" }}>{d.skorSAFCC}</td>
                  <td style={{ fontFamily: "var(--font-sans)", fontSize: 13 }}>{supplier?.nama || "—"}</td>
                  <td><span className="pill ok"><span className="led"/>Diterima</span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </>
  );
}

window.AgroDashboard = AgroDashboard;
window.AgroPanen = AgroPanen;
window.AgroSupplier = AgroSupplier;
window.AgroPenerimaan = AgroPenerimaan;
window.AgroEWS = AgroEWS;