// assets/js/pages/admin/modals/EditClaimModal.js

const EditClaimModal = ({ state, handlers }) => {
  const {
    showEditClaimModal,
    setShowEditClaimModal,
    selectedClaimToEdit,
    loading,
  } = state;
  const { handleUpdateClaim } = handlers;

  return (
    <Modal
      isOpen={showEditClaimModal}
      onClose={() => setShowEditClaimModal(false)}
      title="✏️ Edit Klaim"
      size="large"
    >
      {selectedClaimToEdit && (
        <form onSubmit={handleUpdateClaim} className="space-y-4">
          <div className="bg-blue-500/10 border border-blue-500/30 p-4 rounded-lg mb-4">
            <div className="grid grid-cols-2 gap-2 text-sm text-slate-300">
              <div>
                <strong className="text-blue-400">Barang:</strong>{" "}
                {selectedClaimToEdit.item_name}
              </div>
              <div>
                <strong className="text-blue-400">Pengklaim:</strong>{" "}
                {selectedClaimToEdit.user_name}
              </div>
            </div>
          </div>

          <div>
            <label className="block font-semibold mb-2 text-slate-300">
              Deskripsi Klaim *
            </label>
            <textarea
              name="description"
              defaultValue={selectedClaimToEdit.description}
              required
              rows="4"
              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"
            />
          </div>

          <div>
            <label className="block font-semibold mb-2 text-slate-300">
              No. Kontak *
            </label>
            <input
              type="text"
              name="contact"
              defaultValue={selectedClaimToEdit.contact}
              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"
            />
          </div>

          <div>
            <label className="block font-semibold mb-2 text-slate-300">
              Alasan Edit *
            </label>
            <textarea
              name="reason"
              required
              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="Jelaskan alasan edit klaim..."
            />
          </div>

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