// ===== Supplier Kelompok Tani — 4 Halaman Lengkap =====
const { useState: useS_Sup, useMemo: useMemo_Sup } = React;
const { MESSAGE_TYPES } = window.IDSS;

// Mapping komoditas spesifik ke kategori criteria
const KOMODITAS_MAPPING = {
  "Sayur Kangkung": "Sayuran",
  "Bayam Segar": "Sayuran",
  "Bayam": "Sayuran",
  "Wortel": "Sayuran",
  "Buncis": "Sayuran",
  "Beras": "Beras",
  "Ayam Karkas": "Ayam Karkas",
  "Telur Ayam": "Telur",
  "Tahu Putih": "Protein Nabati",
  "Tempe": "Protein Nabati",
  "Pisang Cavendish": "Pisang",
  "Pisang": "Pisang",
  "Telur": "Telur"
};

// FIS Scoring Function
function calculateFISScore(criteria) {
  if (!criteria || criteria.length === 0) return 0;
  const sum = criteria.reduce((acc, c) => acc + (c.nilai || 0), 0);
  return (sum / criteria.length).toFixed(2);
}

function getFISStatus(score) {
  score = parseFloat(score);
  if (score >= 4.3) return { label: "AMAN", class: "ok" };
  if (score >= 3.5) return { label: "WASPADA", class: "warn" };
  if (score >= 2.5) return { label: "BERESIKO", class: "warn" };
  return { label: "KRITIS", class: "danger" };
}

// ===== 1. SUPPLIER DASHBOARD =====
function SupplierDashboard() {
  const data = window.IDSS;
  const { PETANI_LIST, KELOMPOK_TANI_LIST, SUPPLIER_PENGIRIMAN, SUPPLIER_LIST, SAFCC_REQUESTS, SUPPLIER_PENERIMAAN } = data;

  const [selectedRequest, setSelectedRequest] = useS_Sup(null);
  const [fulfillmentForm, setFulfillmentForm] = useS_Sup({ jumlahDiberikan: "", catatan: "" });
  const [fulfillmentHistory, setFulfillmentHistory] = useS_Sup([]);

  const totalPetani = PETANI_LIST.filter(p => p.status === "aktif").length;
  const komoditasAktif = [...new Set(SUPPLIER_LIST.flatMap(s => s.komoditas))].length;

  const permintaanPending = SAFCC_REQUESTS.filter(r => r.status === "pending").length;
  const siapKirim = SAFCC_REQUESTS.filter(r => r.status === "ready_to_ship").length;
  const sudahDikirim = SAFCC_REQUESTS.filter(r => r.status === "shipped").length;

  const bulanIni = SUPPLIER_PENGIRIMAN.filter(s => {
    const date = new Date(s.tanggal);
    return date.getMonth() === 4 && date.getFullYear() === 2026;
  }).length;
  const rataRataSkor = SUPPLIER_PENGIRIMAN.length > 0 ? (SUPPLIER_PENGIRIMAN.reduce((sum, s) => sum + s.skorSAFCC, 0) / SUPPLIER_PENGIRIMAN.length).toFixed(1) : "—";

  const permintaanTerbaru = SAFCC_REQUESTS.sort((a, b) => new Date(b.tanggalPermintaan) - new Date(a.tanggalPermintaan)).slice(0, 5);
  const pengirimanTerbaru = SUPPLIER_PENGIRIMAN.slice(0, 5);

  const { Icon } = window.IDSSUI;

  const handleFulfillmentSubmit = (e) => {
    e.preventDefault();
    if (!selectedRequest || !fulfillmentForm.jumlahDiberikan) return;

    const jumlah = parseInt(fulfillmentForm.jumlahDiberikan);
    const persentase = (jumlah / selectedRequest.jumlahDiminta) * 100;
    let newStatus = "partial";
    if (persentase >= 100) newStatus = "ready_to_ship";
    if (persentase >= 100 && fulfillmentForm.catatan?.toLowerCase().includes("siap")) newStatus = "ready_to_ship";

    const fulfillment = {
      id: `SFS${Date.now()}`,
      requestId: selectedRequest.id,
      tanggalSubmit: new Date().toISOString().split('T')[0],
      komoditas: selectedRequest.komoditas,
      jumlahDiminta: selectedRequest.jumlahDiminta,
      jumlahDiberikan: jumlah,
      persentase: persentase.toFixed(0),
      satuan: selectedRequest.satuanDiminta,
      status: newStatus,
      catatan: fulfillmentForm.catatan,
      dapur: selectedRequest.dapur,
      deadline: selectedRequest.deadline
    };

    // 1. Add to local state for display
    setFulfillmentHistory([...fulfillmentHistory, fulfillment]);

    // 2. Update window.IDSS (persistent)
    window.IDSS.SUPPLIER_FULFILLMENT_SUBMISSIONS = [
      ...(window.IDSS.SUPPLIER_FULFILLMENT_SUBMISSIONS || []),
      fulfillment
    ];

    // 2b. Update corresponding SAFCC_REQUEST status
    const request = window.IDSS.SAFCC_REQUESTS.find(r => r.id === selectedRequest.id);
    if (request && newStatus === "ready_to_ship") {
      request.status = "ready_to_ship";
    }

    // 2c. Decrement NERACA (supply balance tracking)
    const neracaItem = window.IDSS.NERACA.find(n => n.komoditas === fulfillment.komoditas);
    if (neracaItem) {
      neracaItem.tersedia -= fulfillment.jumlahDiberikan;
      if (neracaItem.tersedia < 0) neracaItem.tersedia = 0;
    }

    // 3. Broadcast to AGRO via MessageBus
    window.MessageBus?.send(MESSAGE_TYPES.SUPPLIER_FULFILLMENT_SUBMITTED, fulfillment);

    // C1: Audit log
    window.AuditLog?.log('fulfillment_submit', {
      requestId: selectedRequest.id,
      volume: parseInt(fulfillmentForm.jumlahDiberikan),
      komoditas: selectedRequest.komoditas
    });

    setSelectedRequest(null);
    setFulfillmentForm({ jumlahDiberikan: "", catatan: "" });
  };

  const getStatusColor = (status) => {
    if (status === "pending") return "warn";
    if (status === "ready_to_ship") return "info";
    if (status === "partial") return "warn";
    if (status === "shipped") return "ok";
    return "neutral";
  };

  const getStatusLabel = (status) => {
    if (status === "pending") return "Menunggu";
    if (status === "ready_to_ship") return "Siap Kirim";
    if (status === "partial") return "Sebagian";
    if (status === "shipped") return "Terkirim";
    return status;
  };

  return (
    <div className="col" style={{ gap: 24 }}>
      <div className="page-header">
        <div>
          <h1 className="page-title">Dashboard Supplier</h1>
          <p className="page-sub">Permintaan SAFCC & tracking pengiriman komoditas</p>
        </div>
      </div>

      <div className="grid cols-4">
        <div className="kpi">
          <div className="kpi-label">Permintaan Pending</div>
          <div className="kpi-value" style={{ color: "var(--warn)" }}>{permintaanPending}</div>
          <div className="kpi-unit">dari SAFCC</div>
        </div>

        <div className="kpi">
          <div className="kpi-label">Siap Pengiriman</div>
          <div className="kpi-value" style={{ color: "var(--info)" }}>{siapKirim}</div>
          <div className="kpi-unit">komoditas</div>
        </div>

        <div className="kpi">
          <div className="kpi-label">Sudah Dikirim</div>
          <div className="kpi-value" style={{ color: "var(--accent)" }}>{sudahDikirim}</div>
          <div className="kpi-unit">ke SAFCC</div>
        </div>

        <div className="kpi">
          <div className="kpi-label">Skor SAFCC</div>
          <div className="kpi-value">{rataRataSkor}</div>
          <div className="kpi-unit">rata-rata</div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <h3>Permintaan & Pemenuhan SAFCC</h3>
          <div className="muted" style={{ fontSize: 11 }}>Klik baris untuk input pemenuhan komoditas</div>
        </div>
        <div className="card-body" style={{ padding: 0 }}>
          <table className="data" style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }}>
            <thead>
              <tr>
                <th style={{ textAlign: "left" }}>Komoditas</th>
                <th style={{ textAlign: "center" }}>Diminta</th>
                <th style={{ textAlign: "center" }}>Diberikan</th>
                <th style={{ textAlign: "center" }}>Sisa</th>
                <th style={{ textAlign: "left" }}>Dapur</th>
                <th style={{ textAlign: "center" }}>Deadline</th>
                <th style={{ textAlign: "center" }}>Status</th>
              </tr>
            </thead>
            <tbody>
              {permintaanTerbaru.map(req => {
                const fulfillmentsForReq = fulfillmentHistory.filter(f => f.requestId === req.id);
                const totalDiberikan = fulfillmentsForReq.reduce((sum, f) => sum + parseInt(f.jumlahDiberikan), 0);
                const sisa = req.jumlahDiminta - totalDiberikan;
                const persentase = fulfillmentsForReq.length > 0 ? ((totalDiberikan / req.jumlahDiminta) * 100).toFixed(0) : 0;

                return (
                  <tr
                    key={req.id}
                    onClick={() => setSelectedRequest(req)}
                    style={{ cursor: "pointer", transition: "background 0.2s" }}
                    onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-2)"}
                    onMouseLeave={(e) => e.currentTarget.style.background = ""}
                  >
                    <td style={{ fontWeight: 500 }}>{req.komoditas}</td>
                    <td style={{ textAlign: "center" }}>
                      <div style={{ fontWeight: 600 }}>{req.jumlahDiminta}</div>
                      <div className="muted" style={{ fontSize: 10 }}>{req.satuanDiminta}</div>
                    </td>
                    <td style={{ textAlign: "center", fontWeight: 600, color: "var(--primary)" }}>
                      {totalDiberikan}
                    </td>
                    <td style={{ textAlign: "center", fontWeight: 600, color: sisa > 0 ? "var(--warn)" : "var(--accent)" }}>
                      {sisa} {sisa === 0 && "✓"}
                    </td>
                    <td style={{ fontSize: 12 }}>Dapur {req.dapur}</td>
                    <td style={{ textAlign: "center", fontSize: 11 }}>{new Date(req.deadline).toLocaleDateString("id-ID")}</td>
                    <td style={{ textAlign: "center" }}>
                      <div>
                        <span className={`pill ${persentase >= 100 ? "ok" : persentase > 0 ? "info" : "warn"}`} style={{ fontSize: 10 }}>
                          {persentase}%
                        </span>
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      {selectedRequest && (
        <div style={{ position: "fixed", top: 0, left: 0, right: 0, bottom: 0, background: "rgba(0,0,0,0.5)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000, padding: 20 }}>
          <div className="card" style={{ width: "100%", maxWidth: 500, maxHeight: "90vh", overflowY: "auto" }}>
            <div className="card-head" style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <h3>Input Pemenuhan Permintaan</h3>
              <button onClick={() => setSelectedRequest(null)} style={{ background: "none", border: "none", fontSize: 24, cursor: "pointer", color: "var(--ink-3)" }}>×</button>
            </div>

            <div className="card-body">
              <div style={{ background: "var(--primary-50)", border: "1px solid var(--primary-100)", borderRadius: "var(--radius-lg)", padding: 16, marginBottom: 20 }}>
                <div className="eyebrow" style={{ marginBottom: 8, color: "var(--primary)" }}>Detail Permintaan</div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, fontSize: 13 }}>
                  <div>
                    <div className="muted" style={{ fontSize: 11, marginBottom: 4 }}>Komoditas</div>
                    <div style={{ fontWeight: 600 }}>{selectedRequest.komoditas}</div>
                  </div>
                  <div>
                    <div className="muted" style={{ fontSize: 11, marginBottom: 4 }}>Jumlah Diminta</div>
                    <div style={{ fontWeight: 600 }}>{selectedRequest.jumlahDiminta} {selectedRequest.satuanDiminta}</div>
                  </div>
                  <div>
                    <div className="muted" style={{ fontSize: 11, marginBottom: 4 }}>Untuk Dapur</div>
                    <div style={{ fontWeight: 600 }}>Dapur {selectedRequest.dapur}</div>
                  </div>
                  <div>
                    <div className="muted" style={{ fontSize: 11, marginBottom: 4 }}>Deadline</div>
                    <div style={{ fontWeight: 600 }}>{new Date(selectedRequest.deadline).toLocaleDateString("id-ID")}</div>
                  </div>
                </div>
              </div>

              <form onSubmit={handleFulfillmentSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <div className="field">
                  <label>Jumlah yang Bisa Diberikan</label>
                  <div style={{ display: "flex", gap: 8, alignItems: "flex-end" }}>
                    <input
                      className="input"
                      type="number"
                      placeholder="0"
                      value={fulfillmentForm.jumlahDiberikan}
                      onChange={e => setFulfillmentForm({...fulfillmentForm, jumlahDiberikan: e.target.value})}
                      required
                      style={{ flex: 1 }}
                    />
                    <div style={{ fontWeight: 600, color: "var(--ink-3)", minWidth: 60 }}>{selectedRequest.satuanDiminta}</div>
                  </div>
                  {fulfillmentForm.jumlahDiberikan && (
                    <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 6 }}>
                      Akan memenuhi: <span style={{ fontWeight: 600, color: "var(--primary)" }}>
                        {((parseInt(fulfillmentForm.jumlahDiberikan) / selectedRequest.jumlahDiminta) * 100).toFixed(0)}%
                      </span>
                    </div>
                  )}
                </div>

                <div className="field">
                  <label>Catatan (Opsional)</label>
                  <textarea
                    className="input"
                    placeholder="Contoh: Siap dikirim besok pagi, atau Menunggu hasil panen dari petani"
                    value={fulfillmentForm.catatan}
                    onChange={e => setFulfillmentForm({...fulfillmentForm, catatan: e.target.value})}
                    rows={3}
                    style={{ resize: "vertical" }}
                  />
                </div>

                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                  <button
                    type="button"
                    onClick={() => setSelectedRequest(null)}
                    className="btn"
                    style={{ justifyContent: "center" }}
                  >
                    Batal
                  </button>
                  <button
                    type="submit"
                    className="btn primary"
                    style={{ justifyContent: "center" }}
                  >
                    Submit Pemenuhan
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      )}

      <div className="card">
        <div className="card-head">
          <h3>Riwayat Pengiriman ke SAFCC</h3>
        </div>
        <div className="card-body" style={{ padding: 0 }}>
          <table className="data" style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
            <thead>
              <tr>
                <th style={{ textAlign: "left" }}>Tanggal</th>
                <th style={{ textAlign: "left" }}>Komoditas</th>
                <th style={{ textAlign: "right" }}>Volume</th>
                <th style={{ textAlign: "center" }}>Skor SAFCC</th>
                <th style={{ textAlign: "center" }}>Status</th>
              </tr>
            </thead>
            <tbody>
              {pengirimanTerbaru.map(s => (
                <tr key={s.id}>
                  <td>{new Date(s.tanggal).toLocaleDateString("id-ID")}</td>
                  <td>{s.komoditas}</td>
                  <td style={{ textAlign: "right" }}>{s.volumeDiterima}/{s.volume} kg</td>
                  <td style={{ textAlign: "center", fontWeight: 600, color: "var(--primary)" }}>{s.skorSAFCC}</td>
                  <td style={{ textAlign: "center" }}>
                    <span className={`pill ${s.status === "diterima" ? "ok" : "warn"}`} style={{ fontSize: 10 }}>
                      {s.status === "diterima" ? "Diterima" : "Ditunda"}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

// ===== 2. PENERIMAAN KOMODITAS =====
function SupplierPenerimaan() {
  const data = window.IDSS;
  const { SUPPLIER_LIST } = data;
  const [penerimaan, setPenerimaan] = useS_Sup([
    { id: 1, tanggal: "2026-05-18", komoditas: "Sayur Kangkung", volumeDiterima: 230, volumeReject: 10, petani: "Bapak Asep", kualitas: "A", status: "tercatat" },
    { id: 2, tanggal: "2026-05-17", komoditas: "Beras", volumeDiterima: 576, volumeReject: 24, petani: "Bapak Saripin", kualitas: "A", status: "tercatat" },
    { id: 3, tanggal: "2026-05-16", komoditas: "Ayam Karkas", volumeDiterima: 147, volumeReject: 13, petani: "Bapak Amir", kualitas: "B", status: "tercatat" }
  ]);
  const [form, setForm] = useS_Sup({ tanggal: new Date().toISOString().split('T')[0], komoditas: "", volumeDiterima: "", volumeReject: "", petani: "", kualitas: "A" });

  const allKomoditas = [...new Set(SUPPLIER_LIST.flatMap(s => s.komoditas))].sort();

  const handleSubmit = (e) => {
    e.preventDefault();
    if (form.tanggal && form.komoditas && form.volumeDiterima) {
      setPenerimaan([...penerimaan, { id: Date.now(), ...form, volumeReject: form.volumeReject || "0", status: "tercatat" }]);
      setForm({ tanggal: new Date().toISOString().split('T')[0], komoditas: "", volumeDiterima: "", volumeReject: "", petani: "", kualitas: "A" });
    }
  };

  return (
    <div className="col" style={{ gap: 24 }}>
      <div className="page-header">
        <div>
          <h1 className="page-title">Penerimaan Komoditas</h1>
          <p className="page-sub">Catat penerimaan komoditas dari petani mitra</p>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <h3>Form Penerimaan Komoditas</h3>
        </div>
        <form className="card-body col" onSubmit={handleSubmit} style={{ gap: 16 }}>
          <div className="grid cols-2">
            <div className="field">
              <label>Tanggal</label>
              <input className="input" type="date" value={form.tanggal} onChange={e => setForm({...form, tanggal: e.target.value})} required />
            </div>
            <div className="field">
              <label>Komoditas</label>
              <select className="input" value={form.komoditas} onChange={e => setForm({...form, komoditas: e.target.value})} required>
                <option value="">Pilih komoditas...</option>
                {allKomoditas.map(kom => (
                  <option key={kom} value={kom}>{kom}</option>
                ))}
              </select>
            </div>
            <div className="field">
              <label>Volume Diterima (kg)</label>
              <input className="input" type="number" placeholder="0" value={form.volumeDiterima} onChange={e => setForm({...form, volumeDiterima: e.target.value})} required />
            </div>
            <div className="field">
              <label>Volume Reject (kg)</label>
              <input className="input" type="number" placeholder="0" value={form.volumeReject} onChange={e => setForm({...form, volumeReject: e.target.value})} />
            </div>
            <div className="field">
              <label>Nama Petani</label>
              <input className="input" placeholder="Nama petani" value={form.petani} onChange={e => setForm({...form, petani: e.target.value})} />
            </div>
            <div className="field">
              <label>Kualitas Grade</label>
              <select className="input" value={form.kualitas} onChange={e => setForm({...form, kualitas: e.target.value})}>
                <option value="A">Grade A</option>
                <option value="B">Grade B</option>
                <option value="C">Grade C</option>
                <option value="Reject">Reject</option>
              </select>
            </div>
          </div>
          <button type="submit" className="btn primary" style={{ width: "100%", justifyContent: "center" }}>Catat Penerimaan</button>
        </form>
      </div>

      {penerimaan.length > 0 && (
        <div className="card">
          <div className="card-head">
            <h3>Riwayat Penerimaan Komoditas</h3>
          </div>
          <div className="card-body" style={{ padding: 0 }}>
            <table className="data" style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
              <thead>
                <tr>
                  <th style={{ textAlign: "left" }}>Tanggal</th>
                  <th style={{ textAlign: "left" }}>Komoditas</th>
                  <th style={{ textAlign: "right" }}>Diterima (kg)</th>
                  <th style={{ textAlign: "right" }}>Reject (kg)</th>
                  <th style={{ textAlign: "left" }}>Petani</th>
                  <th style={{ textAlign: "center" }}>Grade</th>
                  <th style={{ textAlign: "center" }}>Status</th>
                </tr>
              </thead>
              <tbody>
                {penerimaan.map(p => (
                  <tr key={p.id}>
                    <td>{new Date(p.tanggal).toLocaleDateString("id-ID")}</td>
                    <td>{p.komoditas}</td>
                    <td style={{ textAlign: "right" }}>{p.volumeDiterima}</td>
                    <td style={{ textAlign: "right" }}>{p.volumeReject}</td>
                    <td>{p.petani}</td>
                    <td style={{ textAlign: "center", fontWeight: 600 }}>{p.kualitas}</td>
                    <td style={{ textAlign: "center" }}>
                      <span className="pill ok" style={{ fontSize: 10 }}>Tercatat</span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}

// ===== 3. KEAMANAN PANGAN (CHECKLIST SEDERHANA) =====
function SupplierEWS() {
  const data = window.IDSS;
  const { SUPPLIER_LIST, SUPPLIER_EWS_KRITERIA, SUPPLIER_EWS_TAHAPAN } = data;

  // Dapatkan semua komoditas spesifik dari supplier
  const allKomoditas = [...new Set(SUPPLIER_LIST.flatMap(s => s.komoditas))].sort();
  const [selectedKom, setSelectedKom] = useS_Sup(allKomoditas[0] || "");
  const [submissions, setSubmissions] = useS_Sup([]);
  const [checklist, setChecklist] = useS_Sup({});

  const tahapanList = SUPPLIER_EWS_TAHAPAN || [];

  // Map komoditas spesifik ke kategori criteria
  const komCategory = KOMODITAS_MAPPING[selectedKom] || "Sayuran";
  const kriteria = SUPPLIER_EWS_KRITERIA[komCategory] || {};

  const handleCheckChange = (tahapId, critId) => {
    const key = `${tahapId}-${critId}`;
    setChecklist({ ...checklist, [key]: !checklist[key] });
  };

  const getRecommendation = () => {
    const allCriteria = tahapanList.flatMap(t => (kriteria[t.id] || []).map(c => c.id));
    const checkedCount = Object.values(checklist).filter(v => v).length;
    const totalCount = allCriteria.length;

    if (totalCount === 0) return { label: "—", class: "neutral", percentage: 0 };

    const percentage = (checkedCount / totalCount) * 100;

    if (percentage >= 80) return { label: "✓ LANJUTKAN", class: "ok", percentage, desc: "Komoditas memenuhi standar keamanan pangan. Dapat diterima dan dikirim ke SAFCC." };
    if (percentage >= 60) return { label: "⚠ PERBAIKI", class: "warn", percentage, desc: "Ada beberapa kriteria yang belum terpenuhi. Perlu perbaikan sebelum pengiriman." };
    return { label: "✗ TOLAK", class: "danger", percentage, desc: "Komoditas tidak memenuhi standar keamanan pangan. Tidak dapat diterima." };
  };

  const handleSubmit = () => {
    const allCriteria = tahapanList.flatMap(t => (kriteria[t.id] || []));
    const checkedCount = Object.values(checklist).filter(v => v).length;
    const recommendation = getRecommendation();

    setSubmissions([...submissions, {
      id: Date.now(),
      tanggal: new Date().toISOString().split('T')[0],
      komoditas: selectedKom,
      checkedCount,
      totalCount: allCriteria.length,
      percentage: recommendation.percentage.toFixed(0),
      recommendation: recommendation.label,
      recommendationClass: recommendation.class,
      desc: recommendation.desc
    }]);
    setChecklist({});
  };

  const recommendation = getRecommendation();

  return (
    <div className="col" style={{ gap: 24 }}>
      <div className="page-header">
        <div>
          <h1 className="page-title">Keamanan Pangan (EWS)</h1>
          <p className="page-sub">Checklist keamanan pangan per komoditas dengan rekomendasi</p>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 16, alignItems: "flex-end" }}>
        <div className="field">
          <label>Pilih Komoditas</label>
          <select className="input" value={selectedKom} onChange={e => setSelectedKom(e.target.value)}>
            {allKomoditas.map(kom => (
              <option key={kom} value={kom}>{kom}</option>
            ))}
          </select>
        </div>

        {recommendation.percentage > 0 && (
          <div style={{
            padding: "12px 16px",
            background: recommendation.class === "ok" ? "var(--accent-100)" : recommendation.class === "warn" ? "var(--warn-100)" : "var(--danger-100)",
            border: `1px solid ${recommendation.class === "ok" ? "var(--accent)" : recommendation.class === "warn" ? "var(--warn)" : "var(--danger)"}`,
            borderRadius: "var(--radius-lg)",
            textAlign: "center",
            minWidth: 200
          }}>
            <div style={{ fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: recommendation.class === "ok" ? "var(--accent-700)" : recommendation.class === "warn" ? "oklch(0.45 0.16 55)" : "var(--danger)", marginBottom: 6 }}>
              {recommendation.label}
            </div>
            <div style={{ fontSize: 28, fontWeight: 700, color: recommendation.class === "ok" ? "var(--accent-700)" : recommendation.class === "warn" ? "oklch(0.45 0.16 55)" : "var(--danger)" }}>
              {Math.round(recommendation.percentage)}%
            </div>
            <div style={{ fontSize: 10, color: recommendation.class === "ok" ? "var(--accent-700)" : recommendation.class === "warn" ? "oklch(0.45 0.16 55)" : "var(--danger)", marginTop: 4, fontWeight: 500 }}>
              Pemenuhan Kriteria
            </div>
          </div>
        )}
      </div>

      <div className="col gap-sm">
        {tahapanList.map(tahap => {
          const tahapCriteria = kriteria[tahap.id] || [];
          const checkedCount = tahapCriteria.filter(c => checklist[`${tahap.id}-${c.id}`]).length;

          return (
            <div key={tahap.id} className="card">
              <div className="card-head">
                <div>
                  <div className="eyebrow">Tahap {tahap.idx}</div>
                  <h3>{tahap.nama}</h3>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div className="eyebrow">Checklist</div>
                  <div style={{ fontSize: 18, fontWeight: 700, color: "var(--primary)" }}>{checkedCount}/{tahapCriteria.length}</div>
                </div>
              </div>

              <div className="card-body">
                <div className="col gap-sm">
                  {tahapCriteria.map(crit => (
                    <label key={crit.id} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 12, alignItems: "flex-start", padding: 12, background: "var(--bg-2)", borderRadius: "var(--radius)", cursor: "pointer" }}>
                      <input
                        type="checkbox"
                        checked={checklist[`${tahap.id}-${crit.id}`] || false}
                        onChange={() => handleCheckChange(tahap.id, crit.id)}
                        style={{ accentColor: "var(--primary)", marginTop: 3, cursor: "pointer", width: 18, height: 18 }}
                      />
                      <div>
                        <div style={{ fontWeight: 600, fontSize: 12.5, marginBottom: 4 }}>{crit.nama}</div>
                        <div className="muted" style={{ fontSize: 11, lineHeight: 1.4 }}>Batas kritis: {crit.batasKritis}</div>
                      </div>
                    </label>
                  ))}
                </div>
              </div>
            </div>
          );
        })}
      </div>

      <button className="btn primary" onClick={handleSubmit} style={{ width: "100%", justifyContent: "center", padding: "11px 14px" }}>
        Submit Keamanan Pangan
      </button>

      {submissions.length > 0 && (
        <div className="card">
          <div className="card-head">
            <h3>Riwayat Keamanan Pangan</h3>
          </div>
          <div className="card-body" style={{ padding: 0 }}>
            <table className="data" style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
              <thead>
                <tr>
                  <th style={{ textAlign: "left" }}>Tanggal</th>
                  <th style={{ textAlign: "left" }}>Komoditas</th>
                  <th style={{ textAlign: "center" }}>Pemenuhan</th>
                  <th style={{ textAlign: "center" }}>Rekomendasi</th>
                </tr>
              </thead>
              <tbody>
                {submissions.map(s => (
                  <tr key={s.id}>
                    <td>{new Date(s.tanggal).toLocaleDateString("id-ID")}</td>
                    <td>{s.komoditas}</td>
                    <td style={{ textAlign: "center", fontWeight: 600, color: "var(--primary)" }}>{Math.round(s.percentage)}%</td>
                    <td style={{ textAlign: "center" }}>
                      <span className={`pill ${s.recommendationClass}`} style={{ fontSize: 10 }}>
                        {s.recommendation}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}

// ===== 4. MANAJEMEN SUPPLIER =====
function SupplierManagement() {
  const data = window.IDSS;
  const { PETANI_LIST, KELOMPOK_TANI_LIST, SUPPLIER_LIST } = data;
  const [selectedType, setSelectedType] = useS_Sup("kelompok-tani");
  const [expandedId, setExpandedId] = useS_Sup(null);
  const [searchKom, setSearchKom] = useS_Sup("");

  const SUPPLIER_TYPES = [
    { id: "kelompok-tani", label: "Kelompok Tani", icon: "farmers", color: "accent" },
    { id: "koperasi", label: "Koperasi", icon: "store", color: "info" },
    { id: "umkm", label: "UMKM", icon: "factory", color: "warn" },
    { id: "pengusaha-besar", label: "Pengusaha Besar (PT)", icon: "building", color: "primary" }
  ];

  const suppliersByType = {
    "kelompok-tani": KELOMPOK_TANI_LIST || [],
    "koperasi": SUPPLIER_LIST?.filter(s => s.type === "koperasi") || [],
    "umkm": SUPPLIER_LIST?.filter(s => s.type === "umkm") || [],
    "pengusaha-besar": SUPPLIER_LIST?.filter(s => s.type === "pengusaha_besar") || []
  };

  let suppliers = suppliersByType[selectedType] || [];

  // Filter berdasarkan search komoditas
  if (searchKom.trim()) {
    suppliers = suppliers.filter(s =>
      s.komoditas.some(k => k.toLowerCase().includes(searchKom.toLowerCase()))
    );
  }

  const renderSupplierCard = (supplier, index) => {
    const isExpanded = expandedId === `${selectedType}-${index}`;

    if (selectedType === "kelompok-tani") {
      const petani = PETANI_LIST.filter(p => p.kelompok === supplier.id);
      const avgExp = petani.length > 0 ? (petani.reduce((s, p) => s + p.pengalaman, 0) / petani.length).toFixed(0) : 0;

      return (
        <div key={supplier.id} className="card" style={{ cursor: "pointer", transition: "all 0.2s ease" }}>
          <div className="card-body" onClick={() => setExpandedId(isExpanded ? null : `${selectedType}-${index}`)}>
            <div className="row between" style={{ alignItems: "flex-start", marginBottom: 12 }}>
              <div style={{ flex: 1 }}>
                <h3 style={{ margin: "0 0 6px 0", fontSize: 14 }}>{supplier.nama}</h3>
                <div className="muted" style={{ fontSize: 11.5, marginBottom: 8 }}>Ketua: {supplier.ketua} • {supplier.anggota} petani</div>
                <div className="row gap-sm" style={{ flexWrap: "wrap", marginBottom: 8 }}>
                  {supplier.komoditas.map(kom => (
                    <span key={kom} className="tag">{kom}</span>
                  ))}
                </div>
                <div className="row gap-sm" style={{ flexWrap: "wrap" }}>
                  {supplier.sertifikasi.map(sert => (
                    <span key={sert} className="pill info" style={{ fontSize: 10 }}>✓ {sert}</span>
                  ))}
                </div>
              </div>
              <div style={{ textAlign: "right" }}>
                <div className="eyebrow" style={{ marginBottom: 4 }}>Pengalaman</div>
                <div style={{ fontSize: 18, fontWeight: 700, color: "var(--primary)" }}>{avgExp} th</div>
              </div>
            </div>

            {isExpanded && (
              <>
                <div className="hr" />
                <div style={{ marginTop: 12 }}>
                  <div className="eyebrow" style={{ marginBottom: 10 }}>Daftar Petani Anggota</div>
                  <table className="data" style={{ width: "100%", fontSize: 12, marginTop: 10 }}>
                    <thead>
                      <tr>
                        <th style={{ textAlign: "left" }}>Nama</th>
                        <th style={{ textAlign: "center" }}>Umur</th>
                        <th style={{ textAlign: "right" }}>Lahan</th>
                        <th style={{ textAlign: "center" }}>Pengalaman</th>
                        <th style={{ textAlign: "center" }}>Status</th>
                      </tr>
                    </thead>
                    <tbody>
                      {petani.map(p => (
                        <tr key={p.id}>
                          <td>{p.nama}</td>
                          <td style={{ textAlign: "center" }}>{p.umur}</td>
                          <td style={{ textAlign: "right" }}>{p.lahan}</td>
                          <td style={{ textAlign: "center" }}>{p.pengalaman} th</td>
                          <td style={{ textAlign: "center" }}>
                            <span className={`pill ${p.status === "aktif" ? "ok" : "warn"}`} style={{ fontSize: 10 }}>
                              {p.status === "aktif" ? "Aktif" : "Nonaktif"}
                            </span>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </>
            )}
          </div>
        </div>
      );
    }

    // Untuk supplier lainnya (Koperasi, UMKM, Pengusaha)
    const pengalaman = 2026 - parseInt(supplier.terbentuk);
    const kapasitas = supplier.totalKiriman ? (supplier.totalKiriman / 6).toFixed(1) : "—";

    return (
      <div key={supplier.id} className="card" style={{ cursor: "pointer", transition: "all 0.2s ease" }}>
        <div className="card-body" onClick={() => setExpandedId(isExpanded ? null : `${selectedType}-${index}`)}>
          <div className="row between" style={{ alignItems: "flex-start", marginBottom: 12 }}>
            <div style={{ flex: 1 }}>
              <h3 style={{ margin: "0 0 6px 0", fontSize: 14 }}>{supplier.nama}</h3>
              <div className="muted" style={{ fontSize: 11.5, marginBottom: 8 }}>Pimpinan: {supplier.leader} • Lokasi: {supplier.lokasi}</div>
              <div className="row gap-sm" style={{ flexWrap: "wrap", marginBottom: 8 }}>
                {supplier.komoditas.map(kom => (
                  <span key={kom} className="tag">{kom}</span>
                ))}
              </div>
              <div className="row gap-sm" style={{ flexWrap: "wrap" }}>
                {supplier.sertifikasi.map(sert => (
                  <span key={sert} className="pill info" style={{ fontSize: 10 }}>✓ {sert}</span>
                ))}
              </div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div className="eyebrow" style={{ marginBottom: 4 }}>Rating</div>
              <div style={{ fontSize: 18, fontWeight: 700, color: "var(--accent)" }}>⭐ {supplier.rating.toFixed(1)}</div>
            </div>
          </div>

          {isExpanded && (
            <>
              <div className="hr" />
              <div style={{ marginTop: 12, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 8 }}>Informasi</div>
                  <div style={{ fontSize: 12, lineHeight: 1.7, color: "var(--ink-3)" }}>
                    <div><b>Pengalaman:</b> {pengalaman} th (sejak {supplier.terbentuk})</div>
                    <div><b>Tim:</b> {supplier.anggota} orang</div>
                    <div><b>Kapasitas:</b> {kapasitas} ton/bln</div>
                    <div><b>Penerimaan:</b> {(supplier.acceptanceRate * 100).toFixed(0)}%</div>
                  </div>
                </div>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 8 }}>Tipe Supplier</div>
                  <div style={{ fontSize: 12, lineHeight: 1.6, color: "var(--ink-3)" }}>
                    {selectedType === "koperasi" && "Fokus pemberdayaan petani lokal & produksi berkelanjutan"}
                    {selectedType === "umkm" && "Produksi berkualitas dengan inovasi lokal"}
                    {selectedType === "pengusaha-besar" && "Standar internasional & quality control ketat"}
                  </div>
                </div>
              </div>
            </>
          )}
        </div>
      </div>
    );
  };

  return (
    <div className="col" style={{ gap: 24 }}>
      <div className="page-header">
        <div>
          <h1 className="page-title">Manajemen Supplier</h1>
          <p className="page-sub">Profil & rating kelompok tani, koperasi, UMKM, dan pengusaha besar</p>
        </div>
      </div>

      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", flex: 1 }}>
          {SUPPLIER_TYPES.map(type => (
            <button
              key={type.id}
              onClick={() => { setSelectedType(type.id); setSearchKom(""); }}
              className={`btn ${selectedType === type.id ? "primary" : ""}`}
              style={{
                background: selectedType === type.id ? "var(--primary)" : "var(--surface)",
                color: selectedType === type.id ? "#fff" : "var(--ink)",
                border: `1px solid ${selectedType === type.id ? "var(--primary)" : "var(--line)"}`,
                cursor: "pointer"
              }}
            >
              {type.label}
            </button>
          ))}
        </div>

        <div className="field" style={{ marginBottom: 0, minWidth: 250 }}>
          <label>Cari Komoditas</label>
          <input
            className="input"
            placeholder="Cari komoditas..."
            value={searchKom}
            onChange={e => setSearchKom(e.target.value)}
            style={{ fontSize: 13 }}
          />
        </div>
      </div>

      <div className="col gap-sm">
        {suppliers.length > 0 ? (
          suppliers.map((supplier, idx) => renderSupplierCard(supplier, idx))
        ) : (
          <div className="card">
            <div className="card-body" style={{ textAlign: "center", padding: 32, color: "var(--ink-3)" }}>
              <div style={{ fontSize: 13 }}>
                {searchKom.trim() ? `Tidak ada supplier dengan komoditas "${searchKom}"` : `Tidak ada supplier ${SUPPLIER_TYPES.find(t => t.id === selectedType)?.label}`}
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.SupplierDashboard = SupplierDashboard;
window.SupplierPenerimaan = SupplierPenerimaan;
window.SupplierEWS = SupplierEWS;
window.SupplierManagement = SupplierManagement;