// ===== Penerima Manfaat (Beneficiary) Screens =====
const { useState: useS_P, useMemo: useM_P } = React;
const { MESSAGE_TYPES, STATUS_TYPES } = window.IDSS;

function PenerimaDashboard() {
  const { PENERIMA_CHECKLIST_SUBMISSIONS, PENERIMA_FEEDBACK, PENERIMA_DAPUR_LIST, SEKOLAH_INDUK, SEKOLAH_SATELIT, DAPUR_PRODUCTION_PLAN } = window.IDSS;
  const { KPI, Icon, Donut, BarMini } = window.IDSSUI;

  const allSekolah = [...SEKOLAH_INDUK, ...SEKOLAH_SATELIT];
  const [selectedSekolah, setSelectedSekolah] = useS_P(SEKOLAH_INDUK[4].id);
  const [submissions, setSubmissions] = useS_P(PENERIMA_CHECKLIST_SUBMISSIONS);
  const [feedbacks, setFeedbacks] = useS_P(PENERIMA_FEEDBACK);

  const sekolah = allSekolah.find(s => s.id === selectedSekolah) || SEKOLAH_INDUK[4];
  const today = new Date().toISOString().split('T')[0];

  const todaySubmissions = submissions.filter(s => s.tanggal === today && s.sekolahId === selectedSekolah);
  const todayFeedback = feedbacks.filter(f => f.tanggal === today && f.sekolahId === selectedSekolah);

  const totalMeals = submissions.filter(s => s.sekolahId === selectedSekolah).length;
  const passCount = submissions.filter(s => s.sekolahId === selectedSekolah && s.status === "lulus").length;
  const passRate = totalMeals > 0 ? ((passCount / totalMeals) * 100).toFixed(1) : 0;
  const avgRating = todayFeedback.length > 0 ? (todayFeedback.reduce((s, f) => s + f.rating, 0) / todayFeedback.length).toFixed(1) : 0;

  const recentSubmissions = submissions.filter(s => s.sekolahId === selectedSekolah).slice(-5).reverse();
  const recentFeedbacks = feedbacks.filter(f => f.sekolahId === selectedSekolah).slice(-4).reverse();

  return (
    <>
      <div className="page-header">
        <div>
          <div className="crumbs"><span>Penerima Manfaat</span><span>Dashboard</span></div>
          <h1 className="page-title">{sekolah.nama}</h1>
          <div className="page-sub">📍 {sekolah.segmen} · {sekolah.siswa} siswa</div>
        </div>
      </div>

      <div style={{ marginBottom: 20 }}>
        <label style={{ display: "block", marginBottom: 8, fontWeight: 600, fontSize: 12 }}>Pilih Sekolah / Posyandu</label>
        <select
          value={selectedSekolah}
          onChange={(e) => setSelectedSekolah(e.target.value)}
          style={{
            width: "100%", maxWidth: 400, padding: "10px 12px", border: "1px solid var(--line)", borderRadius: 6,
            fontSize: 13, fontFamily: "inherit", background: "white"
          }}
        >
          {allSekolah.map(s => (
            <option key={s.id} value={s.id}>{s.nama} — {s.segmen}</option>
          ))}
        </select>
      </div>

      {/* ===== NEW: Scheduled meals from DAPUR ===== */}
      {(() => {
        const today = new Date().toISOString().split('T')[0];
        const todayPlan = (DAPUR_PRODUCTION_PLAN || []).find(p => p.tanggal === today);
        const scheduledForThisSchool = todayPlan?.scheduled?.find(s => s.sekolahId === selectedSekolah);

        if (scheduledForThisSchool) {
          return (
            <div style={{
              background: "var(--primary-50)", border: "1.5px solid var(--primary-100)", borderRadius: "var(--radius-lg)",
              padding: 16, marginBottom: 24
            }}>
              <div className="row between" style={{ alignItems: "flex-start", marginBottom: 8 }}>
                <div>
                  <div className="eyebrow" style={{ color: "var(--primary)", marginBottom: 4 }}>Menu dari Dapur (Hari Ini)</div>
                  <div style={{ fontSize: 15, fontWeight: 600, color: "var(--ink)" }}>
                    {scheduledForThisSchool.menu}
                  </div>
                </div>
                <span className="pill ok" style={{ fontSize: 11 }}>✓ Terjadwal</span>
              </div>
              <div className="row between" style={{ fontSize: 12, marginTop: 8, paddingTop: 8, borderTop: "1px solid var(--primary-100)" }}>
                <span><span className="muted">Dapur:</span> <strong>{todayPlan.dapurNama}</strong></span>
                <span><span className="muted">Porsi:</span> <strong>{scheduledForThisSchool.siswa}</strong></span>
                <span><span className="muted">ETA:</span> <strong>{scheduledForThisSchool.estimatedDelivery}</strong></span>
              </div>
            </div>
          );
        }
        return null;
      })()}

      <div className="grid cols-4" style={{ marginBottom: 24 }}>
        <KPI intent="primary" label="Verifikasi Hari Ini" value={todaySubmissions.length} unit="verifikasi"
          delta={`${passCount} lulus`} deltaKind="up"
          spark={<BarMini data={[2,3,2,4,3,todaySubmissions.length]} color="var(--primary)"/>}/>
        <KPI label="Rating Siswa" value={avgRating} unit="/ 5.0"
          delta={`Dari ${todayFeedback.length} siswa`} deltaKind={avgRating >= 4 ? "up" : "flat"}
          spark={<BarMini data={[4.1,4.2,3.9,4.3,4.0,parseFloat(avgRating)]} color="var(--warn)"/>}/>
        <KPI label="Tingkat Kelolos" value={passRate} unit="%"
          delta={`${passCount}/${totalMeals} verifikasi`} deltaKind="up"
          spark={<BarMini data={[85,88,90,92,88,parseFloat(passRate)]} color="var(--accent)"/>}/>
        <KPI label="Total Verifikasi" value={totalMeals} unit="sepanjang masa"
          delta={`${recentSubmissions.length} verifikasi terbaru`} deltaKind="flat"
          spark={<BarMini data={[5,6,6,5,6,totalMeals]} color="var(--info)"/>}/>
      </div>

      <div className="grid cols-12" style={{ marginBottom: 24, gap: 24 }}>
        <div className="card" style={{ gridColumn: "span 7" }}>
          <div className="card-head"><h2 className="h2">Hasil Verifikasi Terbaru</h2><span className="tag">{todaySubmissions.length} hari ini</span></div>
          <div style={{ display: "flex", flexDirection: "column", maxHeight: 400, overflowY: "auto" }}>
            {recentSubmissions.length > 0 ? recentSubmissions.map((s, i) => {
              const dapurInfo = PENERIMA_DAPUR_LIST.find(d => d.id === s.dapur);
              const failCount = s.hasil.filter(r => !r).length;
              return (
                <div key={s.id} style={{
                  display: "grid", gridTemplateColumns: "1fr auto",
                  gap: 14, padding: "12px 16px",
                  borderBottom: i < recentSubmissions.length - 1 ? "1px solid var(--line-2)" : "0",
                  alignItems: "start"
                }}>
                  <div style={{ minWidth: 0 }}>
                    <div className="row gap-xs" style={{ marginBottom: 6 }}>
                      <span className="tag mono" style={{ fontSize: 10 }}>{s.tanggal}</span>
                      <span className="muted" style={{ fontSize: 11 }}>{dapurInfo?.short || "?"}</span>
                    </div>
                    <div style={{ fontWeight: 600, fontSize: 13, marginBottom: 4 }}>{s.menu}</div>
                    <div className="muted" style={{ fontSize: 10 }}>Verifikasi: {s.evaluatorNama}</div>
                    {failCount > 0 && <div className="muted" style={{ fontSize: 11, color: "var(--warn)", marginTop: 4 }}>⚠️ {failCount} item perlu perbaikan</div>}
                    {s.catatan && s.catatan !== "-" && <div className="muted" style={{ fontSize: 10, marginTop: 3, fontStyle: "italic" }}>"{s.catatan}"</div>}
                  </div>
                  <div style={{ textAlign: "right", flexShrink: 0 }}>
                    {s.status === "lulus" ? (
                      <span className="pill ok"><span className="led"/>Lulus</span>
                    ) : (
                      <span className="pill warn"><span className="led"/>Perlu Perbaikan</span>
                    )}
                  </div>
                </div>
              );
            }) : (
              <div style={{ padding: "32px 24px", textAlign: "center", color: "var(--ink-3)" }}>Belum ada verifikasi untuk sekolah ini</div>
            )}
          </div>
        </div>

        <div className="card" style={{ gridColumn: "span 5" }}>
          <div className="card-head"><h2 className="h2">Feedback Siswa Terbaru</h2><span className="tag">{todayFeedback.length} hari ini</span></div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10, padding: 12, maxHeight: 400, overflowY: "auto" }}>
            {recentFeedbacks.length > 0 ? recentFeedbacks.map(f => (
              <div key={f.id} style={{ padding: "12px", background: "var(--bg-2)", borderRadius: 6 }}>
                <div className="row between" style={{ marginBottom: 6, alignItems: "flex-start" }}>
                  <div>
                    <div className="muted" style={{ fontSize: 10, marginBottom: 4 }}>{f.tanggal}</div>
                    <span style={{ fontWeight: 600, fontSize: 12 }}>{f.menu}</span>
                  </div>
                  <div className="row gap-xs">
                    {[...Array(5)].map((_, i) => (
                      <span key={i} style={{ color: i < f.rating ? "var(--warn)" : "var(--line-2)", fontSize: 12 }}>★</span>
                    ))}
                  </div>
                </div>
                <div className="muted" style={{ fontSize: 11, lineHeight: 1.4, marginBottom: 6 }}>{f.feedback}</div>
                <div className="muted" style={{ fontSize: 9 }}>— {f.siswaNama} ({f.siswaKelas})</div>
              </div>
            )) : (
              <div style={{ padding: "32px 12px", textAlign: "center", color: "var(--ink-3)", fontSize: 12 }}>Belum ada feedback</div>
            )}
          </div>
        </div>
      </div>
    </>
  );
}

function PenerimaChecklist() {
  const { PENERIMA_CHECKLIST_CRITERIA, PENERIMA_DAPUR_LIST, PENERIMA_MENU_BY_SEGMEN, SEKOLAH_INDUK, SEKOLAH_SATELIT, DAPUR_PRODUCTION_PLAN } = window.IDSS;
  const { Icon } = window.IDSSUI;

  const allSekolah = [...SEKOLAH_INDUK, ...SEKOLAH_SATELIT];
  const [selectedSekolah, setSelectedSekolah] = useS_P(SEKOLAH_INDUK[4].id);
  const [submissions, setSubmissions] = useS_P(window.IDSS.PENERIMA_CHECKLIST_SUBMISSIONS);

  const sekolah = allSekolah.find(s => s.id === selectedSekolah) || SEKOLAH_INDUK[4];
  const suggestedMenus = PENERIMA_MENU_BY_SEGMEN[sekolah.segmen] || [];

  // Use localStorage for form persistence
  const [selectedDapur, setSelectedDapur] = window.useLocalStorage("penerimaChecklist_dapur", "");
  const [menu, setMenu] = window.useLocalStorage("penerimaChecklist_menu", "");
  const [pejabatNama, setPejabatNama] = window.useLocalStorage("penerimaChecklist_nama", "");
  const [pejabatJabatan, setPejabatJabatan] = window.useLocalStorage("penerimaChecklist_jabatan", "");
  const [results, setResults] = window.useLocalStorage("penerimaChecklist_results", new Array(6).fill(null));
  const [submitted, setSubmitted] = useS_P(false);
  const [submitSuccess, setSubmitSuccess] = useS_P(false);
  const [alasanPenolakan, setAlasanPenolakan] = window.useLocalStorage("penerimaChecklist_alasan", {});
  const [formErrors, setFormErrors] = useS_P({});

  const allChecked = results.every(r => r !== null);
  const allPass = results.every(r => r === true);
  const failCount = results.filter(r => r === false).length;

  const handleCheck = (idx, value) => {
    const newResults = [...results];
    newResults[idx] = value;
    setResults(newResults);
    if (value === true) {
      const criterionId = PENERIMA_CHECKLIST_CRITERIA[idx].id;
      const { [criterionId]: _, ...rest } = alasanPenolakan;
      setAlasanPenolakan(rest);
    }
  };

  const handleSubmit = () => {
    const errors = {};

    if (!selectedDapur) errors.dapur = "Pilih dapur tujuan";
    if (!menu?.trim()) errors.menu = "Masukkan nama menu";
    if (menu?.length > 100) errors.menu = "Menu maksimal 100 karakter";
    if (!pejabatNama?.trim()) errors.nama = "Masukkan nama pejabat";
    if (pejabatNama?.length > 50) errors.nama = "Nama maksimal 50 karakter";
    if (!pejabatJabatan?.trim()) errors.jabatan = "Masukkan jabatan";
    if (!allChecked) errors.criteria = "Jawab semua pertanyaan verifikasi";

    setFormErrors(errors);

    if (Object.keys(errors).length > 0) {
      window.showToast("⚠️ Lengkapi form dengan benar", "warn");
      return;
    }

    setSubmitted(true);
    const newSubmission = {
      id: `CS${Date.now()}`,
      tanggal: new Date().toISOString().split('T')[0],
      sekolahId: selectedSekolah,
      dapur: selectedDapur,
      menu: menu,
      hasil: results,
      status: allPass ? STATUS_TYPES.LULUS : failCount >= 3 ? STATUS_TYPES.MAJOR : STATUS_TYPES.MINOR,
      catatan: "-",
      evaluatorNama: pejabatNama,
      evaluatorJabatan: pejabatJabatan
    };

    // 1. Add to PENERIMA_CHECKLIST_SUBMISSIONS (keep for history)
    setSubmissions([...submissions, newSubmission]);

    // 2. Create DAPUR_QUALITY_FEEDBACK object
    const sekolahName = allSekolah.find(s => s.id === selectedSekolah)?.nama || "Sekolah";
    const qualityFeedback = {
      id: `DQF${Date.now()}`,
      tanggal: new Date().toISOString().split('T')[0],
      dapurId: selectedDapur,
      sekolahId: selectedSekolah,
      sekolahNama: sekolahName,
      menu: menu,
      verifikasi: {
        kemasan: results[0],
        aroma: results[1],
        warna: results[2],
        tekstur: results[3],
        suhu: results[4],
        etiket: results[5]
      },
      passedCount: results.filter(r => r === true).length,
      totalCount: results.length,
      status: allPass ? STATUS_TYPES.LULUS : failCount >= 3 ? STATUS_TYPES.MAJOR : STATUS_TYPES.MINOR,
      catatan: "-",
      pejabat: pejabatNama,
      alasanPenolakan: alasanPenolakan
    };

    // 3. Update window.IDSS (persistent)
    window.IDSS.DAPUR_QUALITY_FEEDBACK = [
      ...(window.IDSS.DAPUR_QUALITY_FEEDBACK || []),
      qualityFeedback
    ];

    // 4. Broadcast to DAPUR via MessageBus
    window.MessageBus?.send(MESSAGE_TYPES.QUALITY_FEEDBACK_SUBMITTED, qualityFeedback);

    // C1: Audit log
    window.AuditLog?.log('feedback_submit', {
      menu: menu,
      status: status,
      dapurId: selectedDapur,
      pejabat: pejabatNama
    });

    setSubmitSuccess(true);
    window.showToast("✅ Verifikasi makanan berhasil disimpan", "success");
    setTimeout(() => {
      setMenu("");
      setSelectedDapur("");
      setPejabatNama("");
      setPejabatJabatan("");
      setResults(new Array(6).fill(null));
      setAlasanPenolakan({});
      setSubmitted(false);
      setFormErrors({});
      // Clear localStorage setelah sukses
      window.Storage.remove("penerimaChecklist_dapur");
      window.Storage.remove("penerimaChecklist_menu");
      window.Storage.remove("penerimaChecklist_nama");
      window.Storage.remove("penerimaChecklist_jabatan");
      window.Storage.remove("penerimaChecklist_results");
      window.Storage.remove("penerimaChecklist_alasan");
      setTimeout(() => setSubmitSuccess(false), 2000);
    }, 1500);
  };

  const recentHistory = submissions.filter(h => h.sekolahId === selectedSekolah).slice(-6).reverse();

  return (
    <>
      <div className="page-header">
        <div>
          <div className="crumbs"><span>Verifikasi Makanan</span><span>Form Pejabat Sekolah</span></div>
          <h1 className="page-title">Checklist Kelayakan Makanan</h1>
          <div className="page-sub">📍 {sekolah.nama} · {sekolah.segmen}</div>
        </div>
      </div>

      {submitSuccess && (
        <div className="alert ok fade-up" style={{ marginBottom: 20 }}>
          <Icon name="checkmark" size={18} style={{ color: "var(--ok)" }}/>
          <div>
            <div className="alert-title">Verifikasi berhasil disimpan</div>
            <div className="alert-body">Data telah ditambahkan ke sistem</div>
          </div>
        </div>
      )}

      <div style={{ marginBottom: 20 }}>
        <label style={{ display: "block", marginBottom: 8, fontWeight: 600, fontSize: 12 }}>Pilih Sekolah / Posyandu</label>
        <select
          value={selectedSekolah}
          onChange={(e) => setSelectedSekolah(e.target.value)}
          style={{
            width: "100%", maxWidth: 400, padding: "10px 12px", border: "1px solid var(--line)", borderRadius: 6,
            fontSize: 13, fontFamily: "inherit", background: "white"
          }}
        >
          {allSekolah.map(s => (
            <option key={s.id} value={s.id}>{s.nama} — {s.segmen}</option>
          ))}
        </select>
      </div>

      {/* ===== NEW: Show expected menu from DAPUR_PRODUCTION_PLAN ===== */}
      {(() => {
        const today = "2026-05-18";
        const todayPlan = (DAPUR_PRODUCTION_PLAN || []).find(p => p.tanggal === today);
        const expectedDelivery = todayPlan?.scheduled?.find(s => s.sekolahId === selectedSekolah);

        if (expectedDelivery) {
          const received = menu.toLowerCase().trim();
          const expected = expectedDelivery.menu.toLowerCase().trim();
          const matches = received && received === expected;
          const hasInput = received.length > 0;

          return (
            <div style={{
              background: matches ? "var(--accent-50)" : hasInput ? "var(--warn-50)" : "var(--bg-2)",
              border: `1.5px solid ${matches ? "var(--accent)" : hasInput ? "var(--warn)" : "var(--line)"}`,
              borderRadius: "var(--radius-lg)", padding: 14, marginBottom: 24
            }}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                <div>
                  <div className="muted" style={{ fontSize: 11, marginBottom: 4 }}>Menu yang Seharusnya (dari DAPUR)</div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink)" }}>
                    {expectedDelivery.menu}
                  </div>
                </div>
                <div>
                  <div className="muted" style={{ fontSize: 11, marginBottom: 4 }}>Menu yang Diterima</div>
                  <div style={{
                    fontSize: 13, fontWeight: 600,
                    color: matches ? "var(--accent-700)" : hasInput ? "var(--ink-2)" : "var(--ink-3)"
                  }}>
                    {hasInput ? menu : "—"}
                  </div>
                </div>
              </div>
              {hasInput && (
                <div style={{ marginTop: 10, paddingTop: 10, borderTop: `1px solid ${matches ? "var(--accent-100)" : "var(--warn-100)"}`, fontSize: 12 }}>
                  {matches ? (
                    <span style={{ color: "var(--accent-700)" }}>✓ Sesuai dengan jadwal dari dapur</span>
                  ) : (
                    <span style={{ color: "var(--warn)" }}>⚠ Berbeda dengan menu yang dijadwalkan</span>
                  )}
                </div>
              )}
            </div>
          );
        }
        return null;
      })()}

      <div className="grid cols-12" style={{ marginBottom: 24, gap: 24 }}>
        <div className="card" style={{ gridColumn: "span 7" }}>
          <div className="card-head"><h2 className="h2">Form Verifikasi</h2></div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div>
              <label style={{ display: "block", marginBottom: 6, fontWeight: 600, fontSize: 12, color: formErrors.dapur ? "var(--danger)" : "inherit" }}>
                Asal Dapur {formErrors.dapur && `— ${formErrors.dapur}`}
              </label>
              <select
                value={selectedDapur}
                onChange={(e) => { setSelectedDapur(e.target.value); setFormErrors({...formErrors, dapur: null}); }}
                style={{
                  width: "100%", padding: "10px 12px", border: formErrors.dapur ? "1px solid var(--danger)" : "1px solid var(--line)", borderRadius: 6,
                  fontSize: 13, fontFamily: "inherit", background: "white"
                }}
              >
                <option value="">Pilih dapur...</option>
                {PENERIMA_DAPUR_LIST.map(d => (
                  <option key={d.id} value={d.id}>{d.short} — {d.pic}</option>
                ))}
              </select>
            </div>

            <div>
              <label style={{ display: "block", marginBottom: 6, fontWeight: 600, fontSize: 12, color: formErrors.menu ? "var(--danger)" : "inherit" }}>
                Menu Makanan {formErrors.menu && `— ${formErrors.menu}`}
              </label>
              <input
                type="text"
                value={menu}
                onChange={(e) => { setMenu(e.target.value); setFormErrors({...formErrors, menu: null}); }}
                placeholder="Cth: Nasi Kuning + Ayam Goreng + Kangkung"
                style={{
                  width: "100%", padding: "10px 12px", border: formErrors.menu ? "1px solid var(--danger)" : "1px solid var(--line)", borderRadius: 6,
                  fontSize: 13, fontFamily: "inherit"
                }}
              />
            </div>

            <div style={{ borderTop: "1px solid var(--line)", paddingTop: 12 }}>
              <div style={{ fontWeight: 600, fontSize: 12, marginBottom: 12 }}>Identitas Pejabat Sekolah</div>
              <label style={{ display: "block", marginBottom: 4, fontSize: 11, color: formErrors.nama ? "var(--danger)" : "var(--ink-2)" }}>
                Nama {formErrors.nama && `— ${formErrors.nama}`}
              </label>
              <input
                type="text"
                value={pejabatNama}
                onChange={(e) => { setPejabatNama(e.target.value); setFormErrors({...formErrors, nama: null}); }}
                placeholder="Nama lengkap"
                style={{
                  width: "100%", padding: "10px 12px", border: formErrors.nama ? "1px solid var(--danger)" : "1px solid var(--line)", borderRadius: 6,
                  fontSize: 13, fontFamily: "inherit", marginBottom: 10
                }}
              />
              <label style={{ display: "block", marginBottom: 4, fontSize: 11, color: formErrors.jabatan ? "var(--danger)" : "var(--ink-2)" }}>
                Jabatan {formErrors.jabatan && `— ${formErrors.jabatan}`}
              </label>
              <input
                type="text"
                value={pejabatJabatan}
                onChange={(e) => { setPejabatJabatan(e.target.value); setFormErrors({...formErrors, jabatan: null}); }}
                placeholder="Jabatan (Kepala Sekolah, Guru, Petugas Posyandu, dll)"
                style={{
                  width: "100%", padding: "10px 12px", border: formErrors.jabatan ? "1px solid var(--danger)" : "1px solid var(--line)", borderRadius: 6,
                  fontSize: 13, fontFamily: "inherit"
                }}
              />
            </div>

            <div style={{ borderTop: "1px solid var(--line)", paddingTop: 12 }}>
              <label style={{ display: "block", marginBottom: 12, fontWeight: 600, fontSize: 12, color: formErrors.criteria ? "var(--danger)" : "inherit" }}>
                Verifikasi Kualitas Makanan {formErrors.criteria && `— ${formErrors.criteria}`}
              </label>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                {PENERIMA_CHECKLIST_CRITERIA.map((crit, idx) => (
                  <div key={crit.id} style={{
                    padding: 10, background: "var(--bg-2)", borderRadius: 6,
                    border: results[idx] !== null ? `1px solid ${results[idx] ? "var(--ok)" : "var(--danger)"}` : "1px solid var(--line-2)"
                  }}>
                    <div className="row between" style={{ alignItems: "flex-start" }}>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontWeight: 600, fontSize: 12, marginBottom: 2 }}>{crit.nama}</div>
                        <div className="muted" style={{ fontSize: 10 }}>{crit.deskripsi}</div>
                      </div>
                      <div className="row gap-xs" style={{ marginLeft: 12, flexShrink: 0 }}>
                        <button
                          onClick={() => handleCheck(idx, true)}
                          style={{
                            width: 32, height: 32, borderRadius: 4, border: "1px solid var(--ok)",
                            background: results[idx] === true ? "var(--ok)" : "transparent",
                            color: results[idx] === true ? "#fff" : "var(--ok)",
                            cursor: "pointer", fontWeight: 700, fontSize: 14
                          }}
                        >
                          ✓
                        </button>
                        <button
                          onClick={() => handleCheck(idx, false)}
                          style={{
                            width: 32, height: 32, borderRadius: 4, border: "1px solid var(--danger)",
                            background: results[idx] === false ? "var(--danger)" : "transparent",
                            color: results[idx] === false ? "#fff" : "var(--danger)",
                            cursor: "pointer", fontWeight: 700, fontSize: 14
                          }}
                        >
                          ✕
                        </button>
                      </div>
                    </div>
                    {results[idx] === false && (
                      <div style={{ marginTop: 8, paddingTop: 8, borderTop: "1px solid var(--line-2)" }}>
                        <div style={{ fontSize: 11, fontWeight: 600, color: "var(--fg-2)", marginBottom: 6 }}>Pilih alasan penolakan:</div>
                        <div className="row gap-xs" style={{ flexWrap: "wrap" }}>
                          {crit.alasanOpsi?.map((alasan) => (
                            <button
                              key={alasan}
                              onClick={() => setAlasanPenolakan({ ...alasanPenolakan, [crit.id]: alasan })}
                              style={{
                                padding: "5px 10px", borderRadius: 4, fontSize: 11,
                                border: alasanPenolakan[crit.id] === alasan ? "1.5px solid var(--primary)" : "1px solid var(--line)",
                                background: alasanPenolakan[crit.id] === alasan ? "var(--primary-50)" : "transparent",
                                color: alasanPenolakan[crit.id] === alasan ? "var(--primary)" : "var(--fg)",
                                cursor: "pointer", fontWeight: alasanPenolakan[crit.id] === alasan ? 600 : 400,
                                transition: "all 150ms"
                              }}
                            >
                              {alasan}
                            </button>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>

            <div className="row between" style={{ alignItems: "center", borderTop: "1px solid var(--line)", paddingTop: 12 }}>
              <div>
                {allChecked && (
                  <div style={{ fontSize: 12 }}>
                    {allPass ? (
                      <span style={{ color: "var(--ok)", fontWeight: 600 }}>✓ Semua item lulus</span>
                    ) : (
                      <span style={{ color: "var(--warn)", fontWeight: 600 }}>⚠️ {failCount} item perlu perbaikan</span>
                    )}
                  </div>
                )}
              </div>
              <button
                onClick={handleSubmit}
                disabled={submitted}
                className="btn primary"
                style={{
                  opacity: allChecked ? 1 : 0.5,
                  cursor: allChecked ? "pointer" : "not-allowed"
                }}
              >
                {submitted ? "Menyimpan..." : "Simpan Verifikasi"}
              </button>
            </div>
          </div>
        </div>

        <div className="card" style={{ gridColumn: "span 5" }}>
          <div className="card-head"><h2 className="h2">Riwayat Verifikasi</h2></div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12, maxHeight: 500, overflowY: "auto", padding: "12px" }}>
            {recentHistory.length > 0 ? recentHistory.map(h => {
              return (
                <div key={h.id} style={{ padding: "12px", background: "var(--bg-2)", borderRadius: 6 }}>
                  <div className="row between" style={{ marginBottom: 8, alignItems: "flex-start" }}>
                    <div>
                      <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-3)", marginBottom: 4 }}>{h.tanggal}</div>
                      <div style={{ fontSize: 13, fontWeight: 600 }}>{h.menu}</div>
                    </div>
                    {h.status === "lulus" ? (
                      <span className="pill ok" style={{ fontSize: 10 }}><span className="led"/>Lulus</span>
                    ) : (
                      <span className="pill warn" style={{ fontSize: 10 }}><span className="led"/>Perbaikan</span>
                    )}
                  </div>
                  <div className="muted" style={{ fontSize: 11 }}>{h.evaluatorNama}</div>
                </div>
              );
            }) : (
              <div style={{ padding: "20px 12px", textAlign: "center", color: "var(--ink-3)", fontSize: 12 }}>Belum ada verifikasi</div>
            )}
          </div>
        </div>
      </div>
    </>
  );
}

function PenerimaFeedback() {
  const { PENERIMA_DAPUR_LIST, PENERIMA_MENU_BY_SEGMEN, SEKOLAH_INDUK, SEKOLAH_SATELIT } = window.IDSS;
  const { Icon } = window.IDSSUI;

  const allSekolah = [...SEKOLAH_INDUK, ...SEKOLAH_SATELIT];
  const [selectedSekolah, setSelectedSekolah] = useS_P(SEKOLAH_INDUK[4].id);
  const [feedbacks, setFeedbacks] = useS_P(window.IDSS.PENERIMA_FEEDBACK);

  const sekolah = allSekolah.find(s => s.id === selectedSekolah) || SEKOLAH_INDUK[4];
  const suggestedMenus = PENERIMA_MENU_BY_SEGMEN[sekolah.segmen] || [];
  const maxStars = ["Siswa SD", "TK/PAUD/RA", "Anak Balita"].includes(sekolah.segmen) ? 3 : 5;

  const [selectedDapur, setSelectedDapur] = useS_P("");
  const [menu, setMenu] = useS_P("");
  const [siswaNama, setSiswaNama] = useS_P("");
  const [siswaKelas, setSiswaKelas] = useS_P("");
  const [rating, setRating] = useS_P(0);
  const [ratingRasa, setRatingRasa] = useS_P(0);
  const [ratingTampilan, setRatingTampilan] = useS_P(0);
  const [ratingPorsi, setRatingPorsi] = useS_P(0);
  const [feedback, setFeedback] = useS_P("");
  const [submitted, setSubmitted] = useS_P(false);
  const [submitSuccess, setSubmitSuccess] = useS_P(false);

  const allFilled = selectedDapur && menu.trim() && siswaNama.trim() && siswaKelas.trim() && rating > 0 && ratingRasa > 0 && ratingTampilan > 0 && ratingPorsi > 0;

  const handleSubmit = () => {
    if (!allFilled) {
      window.showToast("Lengkapi semua data: pilih dapur, input menu, identitas siswa, dan berikan rating", "warn", 3000);
      return;
    }
    setSubmitted(true);
    const newFeedback = {
      id: `FB${Date.now()}`,
      tanggal: new Date().toISOString().split('T')[0],
      sekolahId: selectedSekolah,
      dapur: selectedDapur,
      menu: menu,
      rating: rating,
      ratingRasa: ratingRasa,
      ratingTampilan: ratingTampilan,
      ratingPorsi: ratingPorsi,
      feedback: feedback,
      siswaNama: siswaNama,
      siswaKelas: siswaKelas
    };
    setFeedbacks([...feedbacks, newFeedback]);
    setSubmitSuccess(true);
    setTimeout(() => {
      setMenu("");
      setSelectedDapur("");
      setSiswaNama("");
      setSiswaKelas("");
      setRating(0);
      setRatingRasa(0);
      setRatingTampilan(0);
      setRatingPorsi(0);
      setFeedback("");
      setSubmitted(false);
      setTimeout(() => setSubmitSuccess(false), 2000);
    }, 1500);
  };

  const StarRating = ({ value, onChange, label, maxStars = 5 }) => (
    <div style={{ marginBottom: 10 }}>
      <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 6 }}>{label}</div>
      <div className="row gap-xs">
        {Array.from({ length: maxStars }, (_, i) => i + 1).map(star => (
          <button
            key={star}
            onClick={() => onChange(star)}
            style={{
              width: 32, height: 32, borderRadius: 4, border: "none", background: "transparent",
              cursor: "pointer", fontSize: 18, color: star <= value ? "var(--warn)" : "var(--line-2)",
              transition: "all 0.1s"
            }}
          >
            ★
          </button>
        ))}
      </div>
    </div>
  );

  const recentHistory = feedbacks.filter(f => f.sekolahId === selectedSekolah).slice(-5).reverse();

  return (
    <>
      <div className="page-header">
        <div>
          <div className="crumbs"><span>Penilaian & Feedback</span><span>Form Siswa</span></div>
          <h1 className="page-title">Rating & Saran Perbaikan Makanan</h1>
          <div className="page-sub">📍 {sekolah.nama} · {sekolah.segmen}</div>
        </div>
      </div>

      {submitSuccess && (
        <div className="alert ok fade-up" style={{ marginBottom: 20 }}>
          <Icon name="checkmark" size={18} style={{ color: "var(--ok)" }}/>
          <div>
            <div className="alert-title">Feedback berhasil dikirim</div>
            <div className="alert-body">Terima kasih atas masukan Anda!</div>
          </div>
        </div>
      )}

      <div style={{ marginBottom: 20 }}>
        <label style={{ display: "block", marginBottom: 8, fontWeight: 600, fontSize: 12 }}>Pilih Sekolah / Posyandu</label>
        <select
          value={selectedSekolah}
          onChange={(e) => setSelectedSekolah(e.target.value)}
          style={{
            width: "100%", maxWidth: 400, padding: "10px 12px", border: "1px solid var(--line)", borderRadius: 6,
            fontSize: 13, fontFamily: "inherit", background: "white"
          }}
        >
          {allSekolah.map(s => (
            <option key={s.id} value={s.id}>{s.nama} — {s.segmen}</option>
          ))}
        </select>
      </div>

      <div className="grid cols-12" style={{ marginBottom: 24, gap: 24 }}>
        <div className="card" style={{ gridColumn: "span 7" }}>
          <div className="card-head"><h2 className="h2">Form Feedback</h2></div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div>
              <label style={{ display: "block", marginBottom: 8, fontWeight: 600, fontSize: 12 }}>Asal Dapur</label>
              <select
                value={selectedDapur}
                onChange={(e) => setSelectedDapur(e.target.value)}
                style={{
                  width: "100%", padding: "10px 12px", border: "1px solid var(--line)", borderRadius: 6,
                  fontSize: 13, fontFamily: "inherit", background: "white"
                }}
              >
                <option value="">Pilih dapur...</option>
                {PENERIMA_DAPUR_LIST.map(d => (
                  <option key={d.id} value={d.id}>{d.short} — {d.pic}</option>
                ))}
              </select>
            </div>

            <div>
              <label style={{ display: "block", marginBottom: 8, fontWeight: 600, fontSize: 12 }}>Menu Makanan</label>
              <input
                type="text"
                value={menu}
                onChange={(e) => setMenu(e.target.value)}
                placeholder="Cth: Nasi Kuning + Ayam Goreng + Kangkung"
                style={{
                  width: "100%", padding: "10px 12px", border: "1px solid var(--line)", borderRadius: 6,
                  fontSize: 13, fontFamily: "inherit"
                }}
              />
            </div>

            <div style={{ borderTop: "1px solid var(--line)", paddingTop: 12 }}>
              <div style={{ fontWeight: 600, fontSize: 12, marginBottom: 12 }}>Identitas Siswa / Penerima</div>
              <input
                type="text"
                value={siswaNama}
                onChange={(e) => setSiswaNama(e.target.value)}
                placeholder="Nama lengkap"
                style={{
                  width: "100%", padding: "10px 12px", border: "1px solid var(--line)", borderRadius: 6,
                  fontSize: 13, fontFamily: "inherit", marginBottom: 10
                }}
              />
              <input
                type="text"
                value={siswaKelas}
                onChange={(e) => setSiswaKelas(e.target.value)}
                placeholder="Kelas / Tingkat (Kelas 3A, Balita, dll)"
                style={{
                  width: "100%", padding: "10px 12px", border: "1px solid var(--line)", borderRadius: 6,
                  fontSize: 13, fontFamily: "inherit"
                }}
              />
            </div>

            <div style={{ borderTop: "1px solid var(--line)", paddingTop: 12 }}>
              <label style={{ display: "block", marginBottom: 12, fontWeight: 600, fontSize: 12 }}>Rating Keseluruhan</label>
              <div className="row gap-xs" style={{ marginBottom: 12 }}>
                {Array.from({ length: maxStars }, (_, i) => i + 1).map(star => (
                  <button
                    key={star}
                    onClick={() => setRating(star)}
                    style={{
                      width: 36, height: 36, borderRadius: 6, border: "1px solid var(--line)",
                      background: star <= rating ? "var(--warn-50)" : "transparent",
                      cursor: "pointer", fontSize: 22, color: star <= rating ? "var(--warn)" : "var(--line-2)",
                      transition: "all 0.1s"
                    }}
                  >
                    ★
                  </button>
                ))}
              </div>
              {rating > 0 && <div className="muted" style={{ fontSize: 11, marginBottom: 12 }}>{rating}.0 dari {maxStars} bintang</div>}
            </div>

            <StarRating label="Rasa Makanan" value={ratingRasa} onChange={setRatingRasa} maxStars={maxStars}/>
            <StarRating label="Tampilan Makanan" value={ratingTampilan} onChange={setRatingTampilan} maxStars={maxStars}/>
            <StarRating label="Porsi / Jumlah" value={ratingPorsi} onChange={setRatingPorsi} maxStars={maxStars}/>

            <div>
              <label style={{ display: "block", marginBottom: 8, fontWeight: 600, fontSize: 12 }}>Catatan & Saran (Opsional)</label>
              <textarea
                value={feedback}
                onChange={(e) => setFeedback(e.target.value)}
                placeholder="Berikan saran untuk perbaikan kualitas makanan..."
                style={{
                  width: "100%", padding: "10px 12px", border: "1px solid var(--line)", borderRadius: 6,
                  fontSize: 13, fontFamily: "inherit", minHeight: 70, resize: "vertical"
                }}
              />
            </div>

            <button
              onClick={handleSubmit}
              disabled={submitted}
              className="btn primary"
              style={{
                opacity: allFilled ? 1 : 0.5,
                cursor: allFilled ? "pointer" : "not-allowed"
              }}
            >
              {submitted ? "Mengirim..." : "Kirim Feedback"}
            </button>
          </div>
        </div>

        <div className="card" style={{ gridColumn: "span 5" }}>
          <div className="card-head"><h2 className="h2">Feedback Terbaru</h2></div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12, maxHeight: 500, overflowY: "auto", padding: "12px" }}>
            {recentHistory.length > 0 ? recentHistory.map(f => {
              const dapurInfo = PENERIMA_DAPUR_LIST.find(d => d.id === f.dapur);
              return (
                <div key={f.id} style={{ padding: "12px", background: "var(--bg-2)", borderRadius: 6 }}>
                  <div className="row between" style={{ marginBottom: 8, alignItems: "flex-start" }}>
                    <div>
                      <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-3)", marginBottom: 4 }}>{f.tanggal} · {dapurInfo?.short}</div>
                      <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 4 }}>{f.menu}</div>
                      <div className="muted" style={{ fontSize: 11 }}>{f.siswaNama}</div>
                    </div>
                    <div className="row gap-xs">
                      {[...Array(5)].map((_, i) => (
                        <span key={i} style={{ color: i < f.rating ? "var(--warn)" : "var(--line-2)", fontSize: 13, lineHeight: 1 }}>★</span>
                      ))}
                    </div>
                  </div>
                  {f.feedback && <div className="muted" style={{ fontSize: 11, lineHeight: 1.4 }}>{f.feedback}</div>}
                </div>
              );
            }) : (
              <div style={{ padding: "20px 12px", textAlign: "center", color: "var(--ink-3)", fontSize: 12 }}>Belum ada feedback</div>
            )}
          </div>
        </div>
      </div>
    </>
  );
}

window.PenerimaDashboard = PenerimaDashboard;
window.PenerimaChecklist = PenerimaChecklist;
window.PenerimaFeedback = PenerimaFeedback;