const CreateLostItemModal = ({ state, handlers }) => {
  const {
    showCreateLostItemModal,
    setShowCreateLostItemModal,
    categories,
    users,
    loading,
  } = state;

  const { handleCreateLostItem } = handlers;

  if (!showCreateLostItemModal) return null;

  return (
    <Modal
      isOpen={showCreateLostItemModal}
      onClose={() => setShowCreateLostItemModal(false)}
      title="➕ Tambah Laporan Barang Hilang"
      size="large"
    >
      <form onSubmit={handleCreateLostItem} className="space-y-6">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-slate-300 mb-2 font-semibold">
              User ID (Pelapor) <span className="text-red-500">*</span>
            </label>
            <select
              name="user_id"
              required
              className="w-full px-4 py-2 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
            >
              <option value="">Pilih User</option>
              {users &&
                users.map((user) => (
                  <option key={user.id} value={user.id}>
                    {user.name} (#{user.id})
                  </option>
                ))}
            </select>
            <p className="text-xs text-slate-400 mt-1">
              Pilih user yang melaporkan kehilangan
            </p>
          </div>

          <div>
            <label className="block text-slate-300 mb-2 font-semibold">
              Nama Barang <span className="text-red-500">*</span>
            </label>
            <input
              type="text"
              name="name"
              required
              className="w-full px-4 py-2 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
              placeholder="Contoh: HP Samsung Galaxy"
            />
          </div>

          <div>
            <label className="block text-slate-300 mb-2 font-semibold">
              Kategori <span className="text-red-500">*</span>
            </label>
            <select
              name="category_id"
              required
              className="w-full px-4 py-2 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
            >
              <option value="">Pilih Kategori</option>
              {categories &&
                categories.map((cat) => (
                  <option key={cat.id} value={cat.id}>
                    {cat.name}
                  </option>
                ))}
            </select>
          </div>

          <div>
            <label className="block text-slate-300 mb-2 font-semibold">
              Warna
            </label>
            <input
              type="text"
              name="color"
              className="w-full px-4 py-2 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
              placeholder="Contoh: Hitam, Biru"
            />
          </div>

          <div>
            <label className="block text-slate-300 mb-2 font-semibold">
              Tanggal Hilang <span className="text-red-500">*</span>
            </label>
            <input
              type="date"
              name="date_lost"
              required
              max={new Date().toISOString().split("T")[0]}
              className="w-full px-4 py-2 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
            />
          </div>

          <div>
            <label className="block text-slate-300 mb-2 font-semibold">
              Lokasi Hilang
            </label>
            <input
              type="text"
              name="location"
              className="w-full px-4 py-2 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
              placeholder="Contoh: Perpustakaan Lantai 2"
            />
          </div>

          <div className="col-span-2">
            <label className="block text-slate-300 mb-2 font-semibold">
              Deskripsi <span className="text-red-500">*</span>
            </label>
            <textarea
              name="description"
              required
              rows="4"
              className="w-full px-4 py-2 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
              placeholder="Jelaskan ciri-ciri barang yang hilang secara detail..."
            />
            <p className="text-xs text-slate-400 mt-1">
              Deskripsi ini akan digunakan untuk auto-matching dengan barang
              yang ditemukan
            </p>
          </div>
        </div>

        <div className="bg-blue-500/10 border border-blue-500/30 rounded-lg p-4">
          <p className="text-sm text-blue-300">
            ℹ️ <strong>Info:</strong> Setelah laporan dibuat, sistem akan
            otomatis mencari kecocokan dengan barang yang telah ditemukan. User
            akan mendapat notifikasi jika ada barang yang cocok.
          </p>
        </div>

        <div className="flex gap-3 justify-end pt-4 border-t border-slate-700">
          <button
            type="button"
            onClick={() => setShowCreateLostItemModal(false)}
            className="px-6 py-2 bg-slate-700 text-white rounded-lg hover:bg-slate-600 transition"
            disabled={loading}
          >
            Batal
          </button>
          <button
            type="submit"
            className="px-6 py-2 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-lg hover:from-green-700 hover:to-green-800 transition shadow-lg disabled:opacity-50"
            disabled={loading}
          >
            {loading ? "Memproses..." : "➕ Tambah Laporan"}
          </button>
        </div>
      </form>
    </Modal>
  );
};