// web/js/components/FoundOptionModal.js
const FoundOptionModal = ({ isOpen, onClose, onSelectOption }) => {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-80 backdrop-blur-sm p-4">
      <div className="bg-slate-900 rounded-2xl border border-slate-700 shadow-2xl max-w-lg w-full overflow-hidden animate-fade-in-up">
        {/* Header Modal */}
        <div className="p-6 border-b border-slate-800">
          <h3 className="text-xl font-bold text-white text-center">
            🧐 Bagaimana proses pengembaliannya?
          </h3>
          <p className="text-slate-400 text-center text-sm mt-2">
            Pilih metode yang Anda inginkan untuk memproses barang temuan ini.
          </p>
        </div>

        {/* Pilihan Opsi */}
        <div className="p-6 space-y-4">
          {/* OPSI 1: Langsung ke Pemilik (Direct) */}
          <button
            onClick={() => onSelectOption("direct")}
            className="w-full group relative flex items-center p-4 bg-gradient-to-r from-blue-900/40 to-slate-900 border-2 border-blue-500/30 hover:border-blue-500 rounded-xl transition-all hover:shadow-lg hover:shadow-blue-500/20 text-left"
          >
            <div className="bg-blue-500/20 p-3 rounded-full mr-4 group-hover:bg-blue-500 group-hover:text-white transition-colors text-blue-400">
              ⚡
            </div>
            <div>
              <h4 className="font-bold text-white group-hover:text-blue-400 transition">
                Langsung ke Pemilik (Cepat)
              </h4>
              <p className="text-xs text-slate-400 mt-1">
                Anda mengisi form, notifikasi langsung ke pemilik untuk
                <span className="text-green-400 font-bold ml-1">
                  Approve/Reject.
                </span>
              </p>
              <span className="text-[10px] text-blue-300 font-mono mt-1 block">
                *Tanpa perantara Manager
              </span>
            </div>
          </button>

          {/* OPSI 2: Via Manager (Standard) */}
          <button
            onClick={() => onSelectOption("manager")}
            className="w-full group relative flex items-center p-4 bg-gradient-to-r from-purple-900/40 to-slate-900 border-2 border-purple-500/30 hover:border-purple-500 rounded-xl transition-all hover:shadow-lg hover:shadow-purple-500/20 text-left"
          >
            <div className="bg-purple-500/20 p-3 rounded-full mr-4 group-hover:bg-purple-500 group-hover:text-white transition-colors text-purple-400">
              🛡️
            </div>
            <div>
              <h4 className="font-bold text-white group-hover:text-purple-400 transition">
                Verifikasi Manager (Aman)
              </h4>
              <p className="text-xs text-slate-400 mt-1">
                Laporan diperiksa Manager/Posko dulu sebelum diteruskan ke
                pemilik.
              </p>
            </div>
          </button>
        </div>

        {/* Footer / Tombol Batal */}
        <div className="p-4 bg-slate-950/50 border-t border-slate-800 text-center">
          <button
            onClick={onClose}
            className="text-slate-500 hover:text-white text-sm font-medium transition px-4 py-2 hover:bg-slate-800 rounded-lg"
          >
            Batal
          </button>
        </div>
      </div>
    </div>
  );
};