'use client';

import React, { useState } from 'react';
import { api } from '@/lib/api';
import Swal from 'sweetalert2';
import BackendSearchableSelect from './BackendSearchableSelect';

interface ClaimCylinderModalProps {
    isOpen: boolean;
    onClose: () => void;
    selectedCylinderIds: string[];
    onSuccess: () => void;
}

const ClaimCylinderModal: React.FC<ClaimCylinderModalProps> = ({
    isOpen,
    onClose,
    selectedCylinderIds,
    onSuccess,
}) => {
    const [selectedUser, setSelectedUser] = useState('');
    const [loading, setLoading] = useState(false);

    const handleSubmit = async () => {
        if (!selectedUser) {
            Swal.fire('Error', 'Please select a user to claim for.', 'error');
            return;
        }

        setLoading(true);
        try {
            await api.patch('/cylinders/bulk/claim', {
                cylinderIds: selectedCylinderIds,
                claimBy: selectedUser,
            });

            Swal.fire('Success', 'Cylinders claimed successfully!', 'success');
            onSuccess();
            onClose();
        } catch (error: any) {
            Swal.fire('Error', error.message || 'Failed to claim cylinders.', 'error');
        } finally {
            setLoading(false);
        }
    };

    if (!isOpen) return null;

    return (
        <div
            className="fixed inset-0 z-50 flex justify-center items-center"
            style={{ backgroundColor: 'rgba(146, 140, 140, 0.3)' }}
        >
            <div className="bg-white p-8 rounded-2xl shadow-xl max-w-md w-full">
                <h2 className="text-2xl font-bold text-gray-800 mb-6">
                    Claim Cylinders for User
                </h2>

                <div className="mb-6">
                    <BackendSearchableSelect
                        id="user"
                        name="user"
                        value={selectedUser}
                        onChange={(e) => setSelectedUser(e.target.value)}
                        label="Select a plant user"
                        apiEndpoint="/cylinders/plants"
                        labelKey="name"
                        valueKey="id"
                        defaultOption={{ value: '', label: 'Select a user' }}
                    />
                </div>

                <div className="flex justify-end space-x-4">
                    <button
                        onClick={onClose}
                        className="bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-2.5 px-6 rounded-lg transition-all"
                    >
                        Cancel
                    </button>
                    <button
                        onClick={handleSubmit}
                        disabled={loading}
                        className="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2.5 px-6 rounded-lg shadow-md transition-all disabled:opacity-50"
                    >
                        {loading ? 'Claiming...' : 'Claim'}
                    </button>
                </div>
            </div>
        </div>
    );
};

export default ClaimCylinderModal;