import { useState, useEffect } from "react";
import { api } from "@/services/api";
import { CheckCircle, XCircle, Camera } from "lucide-react";

export default function HasilValidasiPublik({ sppgId }) {
  const [laporan, setLaporan] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    api.filter("LaporanHarian", { sppg_id: sppgId, status: "Divalidasi" })
      .then((data) => {
        setLaporan(data);
        setLoading(false);
      });
  }, [sppgId]);

  if (loading) return (
    <div className="flex justify-center py-8"><div className="w-5 h-5 border-2 border-primary/20 border-t-primary rounded-full animate-spin" /></div>
  );

  if (!laporan.length) return (
    <div className="text-center py-8 text-sm text-muted-foreground">Belum ada laporan yang tervalidasi.</div>
  );

  return (
    <div className="space-y-3">
      {laporan.map((l) => {
        const sesuai = l.hasil_validasi === "Sesuai";
        return (
          <div key={l.id} className={`rounded-xl border p-4 ${sesuai ? "bg-emerald-50 border-emerald-200" : "bg-red-50 border-red-200"}`}>
            <div className="flex items-start justify-between gap-3 flex-wrap">
              <div className="flex items-center gap-3">
                {sesuai
                  ? <CheckCircle className="w-5 h-5 text-emerald-600 flex-shrink-0 mt-0.5" />
                  : <XCircle className="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" />
                }
                <div>
                  <p className="text-sm font-bold text-foreground">{l.jenis} — {l.tanggal}</p>
                  <span className={`text-xs font-semibold px-2 py-0.5 rounded-full ${sesuai ? "bg-emerald-200 text-emerald-800" : "bg-red-200 text-red-800"}`}>
                    {l.hasil_validasi}
                  </span>
                </div>
              </div>
            </div>

            {/* Detail menu */}
            {(l.menu_pagi || l.menu_siang) && (
              <div className="mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground">
                {l.menu_pagi && <span>🌅 {l.menu_pagi}</span>}
                {l.menu_siang && <span>☀️ {l.menu_siang}</span>}
                {l.jumlah_omprengan && <span>🍱 {l.jumlah_omprengan} omprengan</span>}
              </div>
            )}

            {/* Catatan validator */}
            {l.catatan_validator && (
              <div className="mt-3 bg-white/70 rounded-lg p-3">
                <p className="text-xs font-semibold text-muted-foreground mb-1">Catatan Validator:</p>
                <p className="text-sm text-foreground">{l.catatan_validator}</p>
              </div>
            )}

            {/* Foto bukti validator */}
            {l.foto_bukti_validator && (
              <div className="mt-3 flex items-center gap-2">
                <Camera className="w-3.5 h-3.5 text-muted-foreground" />
                <a href={l.foto_bukti_validator} target="_blank" rel="noreferrer" className="text-xs text-primary hover:underline">
                  Lihat Foto Bukti Verifikasi →
                </a>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}