Basdat/web/js/components/DirectClaimModal.js

const DirectClaimModal = ({ isOpen, onClose, onSubmit, loading, lostItem }) => {
  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-2xl w-full max-h-[90vh] overflow-y-auto">
        <div className="sticky top-0 bg-gradient-to-r from-blue-900 to-slate-900 p-6 border-b border-slate-700 z-10">
          <h3 className="text-2xl font-bold text-white flex items-center gap-3">
            <span className="text-3xl">⚡</span>
            Klaim Langsung ke Pemilik
          </h3>
          <p className="text-slate-300 mt-2 text-sm">
            Formulir ini akan langsung dikirim ke pemilik barang untuk
            disetujui/ditolak
          </p>
        </div>

        {lostItem && (
          <div className="p-6 bg-blue-900/20 border-b border-slate-700">
            <h4 className="text-lg font-bold text-white mb-3">
              📦 Barang yang Akan Diklaim:
            </h4>
            <div className="bg-slate-800/50 rounded-lg p-4 space-y-2 text-sm">
              <p className="text-white">
                <span className="font-semibold">Nama:</span> {lostItem.name}
              </p>
              <p className="text-slate-300">
                <span className="font-semibold">Kategori:</span>{" "}
                {lostItem.category}
              </p>
              {lostItem.color && (
                <p className="text-slate-300">
                  <span className="font-semibold">Warna:</span> {lostItem.color}
                </p>
              )}
              <p className="text-slate-300">
                <span className="font-semibold">Lokasi Hilang:</span>{" "}
                {lostItem.location}
              </p>
              <p className="text-slate-300">
                <span className="font-semibold">Deskripsi:</span>{" "}
                {lostItem.description}
              </p>
            </div>
          </div>
        )}

        <form onSubmit={onSubmit} className="p-6 space-y-6">
          <div className="bg-orange-900/20 border border-orange-500/30 rounded-lg p-4">
            <p className="text-orange-300 text-sm flex items-center gap-2">
              <span className="text-xl">⚠️</span>
              <span>
                <strong>Penting:</strong> Pastikan ini adalah barang yang
                benar-benar Anda temukan. Pemilik akan langsung menerima
                notifikasi.
              </span>
            </p>
          </div>

          <div>
            <label className="block text-sm font-semibold text-slate-300 mb-2">
              📝 Deskripsi Barang yang Anda Temukan *
            </label>
            <textarea
              name="description"
              required
              rows="5"
              placeholder="Jelaskan detail barang yang Anda temukan (warna, kondisi, ciri khusus, dll)"
              className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
            ></textarea>
            <p className="text-xs text-slate-500 mt-1">
              Berikan detail yang cukup agar pemilik yakin ini barangnya
            </p>
          </div>

          <div>
            <label className="block text-sm font-semibold text-slate-300 mb-2">
              📞 Nomor Kontak Anda *
            </label>
            <input
              type="text"
              name="contact"
              required
              placeholder="Contoh: 081234567890"
              className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
            <p className="text-xs text-slate-500 mt-1">
              Pemilik akan menghubungi Anda untuk koordinasi pengambilan
            </p>
          </div>

          <div>
            <label className="block text-sm font-semibold text-slate-300 mb-2">
              📎 URL Bukti (Opsional)
            </label>
            <input
              type="text"
              name="proof_url"
              placeholder="https://example.com/foto-barang.jpg"
              className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
            <p className="text-xs text-slate-500 mt-1">
              Link foto atau dokumen pendukung (jika ada)
            </p>
          </div>

          <div className="bg-green-900/20 border border-green-500/30 rounded-lg p-4">
            <h5 className="font-bold text-green-300 mb-2 flex items-center gap-2">
              <span className="text-xl">✅</span>
              Alur Setelah Submit:
            </h5>
            <ol className="text-sm text-slate-300 space-y-1 list-decimal list-inside">
              <li>Notifikasi langsung terkirim ke pemilik</li>
              <li>Pemilik akan melihat detail klaim Anda</li>
              <li>Pemilik bisa Approve/Reject klaim</li>
              <li>Jika Approved, Anda koordinasi pengambilan</li>
              <li>Setelah serah terima, pemilik konfirmasi case closed</li>
            </ol>
          </div>

          <div className="flex gap-3 pt-4 border-t border-slate-700">
            <button
              type="button"
              onClick={onClose}
              disabled={loading}
              className="flex-1 px-6 py-3 bg-slate-800 text-slate-300 rounded-lg font-semibold hover:bg-slate-700 transition disabled:opacity-50"
            >
              Batal
            </button>
            <button
              type="submit"
              disabled={loading}
              className="flex-1 px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-lg font-semibold hover:from-blue-700 hover:to-blue-800 transition disabled:opacity-50 shadow-lg shadow-blue-500/30"
            >
              {loading ? "⏳ Mengirim..." : "⚡ Kirim ke Pemilik"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

window.DirectClaimModal = DirectClaimModal;