// assets/js/pages/admin/modals/CreateClaimModal.js

const CreateClaimModal = ({ state, handlers }) => {
  const {
    showCreateClaimModal,
    setShowCreateClaimModal,
    items,
    users,
    loading,
  } = state;
  const { handleCreateClaim } = handlers;

  return (
    <Modal
      isOpen={showCreateClaimModal}
      onClose={() => setShowCreateClaimModal(false)}
      title="➕ Tambah Klaim Manual"
      size="large"
    >
      <form onSubmit={handleCreateClaim} className="space-y-4">
        <div className="bg-blue-500/10 border border-blue-500/30 p-4 rounded-lg mb-4">
          <p className="text-sm text-blue-300">
            ℹ️ Fitur ini untuk menambahkan klaim manual oleh admin, misalnya
            jika user melaporkan secara offline.
          </p>
        </div>

        <div>
          <label className="block font-semibold mb-2 text-slate-300">
            Pilih Barang *
          </label>
          <select
            name="item_id"
            required
            className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
          >
            <option value="">-- Pilih Barang --</option>
            {items
              .filter(
                (item) =>
                  item.status === "unclaimed" || item.status === "pending_claim"
              )
              .map((item) => (
                <option key={item.id} value={item.id}>
                  {item.name} - {item.location} (
                  {Helpers.formatDate(item.date_found)})
                </option>
              ))}
          </select>
        </div>

        <div>
          <label className="block font-semibold mb-2 text-slate-300">
            Pilih User Pengklaim *
          </label>
          <select
            name="user_id"
            required
            className="w-full px-4 py-3 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.email})
                </option>
              ))}
          </select>
          <p className="text-xs text-slate-400 mt-1">
            User yang akan menjadi pengklaim barang ini
          </p>
        </div>

        <div>
          <label className="block font-semibold mb-2 text-slate-300">
            Deskripsi Klaim *
          </label>
          <textarea
            name="description"
            required
            rows="4"
            className="w-full px-4 py-3 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 yang diklaim oleh user..."
          />
        </div>

        <div>
          <label className="block font-semibold mb-2 text-slate-300">
            No. Kontak *
          </label>
          <input
            type="text"
            name="contact"
            required
            className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
            placeholder="08123456789"
          />
        </div>

        <div>
          <label className="block font-semibold mb-2 text-slate-300">
            Catatan Admin (Opsional)
          </label>
          <textarea
            name="admin_notes"
            rows="2"
            className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
            placeholder="Catatan internal untuk admin..."
          />
        </div>

        <button
          type="submit"
          disabled={loading}
          className="w-full px-4 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-xl hover:from-green-700 hover:to-green-800 transition font-semibold shadow-lg disabled:from-slate-600 disabled:to-slate-700"
        >
          {loading ? "⏳ Menyimpan..." : "✅ Simpan Klaim"}
        </button>
      </form>
    </Modal>
  );
};