// resources/js/Components/Modals/NewRoomModal.tsx
import React, { useState } from 'react';
import axios from 'axios';
import { toast } from 'react-hot-toast';

interface Props {
    onClose: () => void;
    onSaved: () => void;
}

export default function NewRoomModal({ onClose, onSaved }: Props) {
    const [form, setForm] = useState({
        room_symbol: '',
        room_name: '',
        lines: 1,
        racks_per_line: 1,
        shelves_per_rack: 1,
        positions_per_shelf: 1,
    });
    const [loading, setLoading] = useState(false);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
        setForm({ ...form, [e.target.name]: e.target.type === 'number'
                ? parseInt(e.target.value)
                : e.target.value });

    const save = async () => {
        setLoading(true);
        const id = toast.loading('Creating room…');
        try {
            await axios.post('/api/stock-rooms', form, { withCredentials: true });
            toast.dismiss(id);
            toast.success('Room created!');
            onSaved();
        } catch (err: any) {
            toast.dismiss(id);
            toast.error(err.response?.data?.message || 'Error creating room');
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="modal-box max-w-6xl flex flex-col space-x-6 p-6 relative">
                <h3 className="text-xl font-bold">New Room</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {['room_symbol','room_name'].map((field) => (
                        <div key={field} className="form-control">
                            <label className="label"><span className="label-text">{field.replace('_',' ')}</span></label>
                            <input
                                name={field}
                                type="text"
                                value={(form as any)[field]}
                                onChange={handleChange}
                                className="input input-bordered"
                            />
                        </div>
                    ))}
                    {['lines','racks_per_line','shelves_per_rack','positions_per_shelf'].map((field) => (
                        <div key={field} className="form-control">
                            <label className="label"><span className="label-text">{field.replace(/_/g,' ')}</span></label>
                            <input
                                name={field}
                                type="number"
                                min={1}
                                value={(form as any)[field]}
                                onChange={handleChange}
                                className="input input-bordered"
                            />
                        </div>
                    ))}
                </div>
                <div className="flex justify-end space-x-2">
                    <button onClick={onClose} className="btn btn-outline" disabled={loading}>Cancel</button>
                    <button onClick={save} className="btn btn-primary" disabled={loading}>
                        {loading ? 'Saving…' : 'Create'}
                    </button>
                </div>
            </div>

    );
}