import { useState } from 'react';
import { api } from '../api';

export default function SimulationForm({ onSimulationCreated }) {
    const [formData, setFormData] = useState({
        mesh_resolution: 32,
        diffusion_coefficient: 0.1,
        source_term: 1.0,
        time_final: 1.0,
        num_steps: 50
    });
    const [name, setName] = useState('');
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [error, setError] = useState(null);

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData(prev => ({
            ...prev,
            [name]: name === 'mesh_resolution' || name === 'num_steps' 
                ? parseInt(value) 
                : parseFloat(value)
        }));
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        setIsSubmitting(true);
        setError(null);

        try {
            const simulation = await api.createSimulation(name || 'Simulation sans nom', formData);
            onSimulationCreated(simulation);
            setName('');
        } catch (err) {
            setError('Erreur lors de la création de la simulation');
        } finally {
            setIsSubmitting(false);
        }
    };

    return (
        <div className="simulation-form">
            <h2>Nouvelle Simulation</h2>
            {error && <div className="error">{error}</div>}
            
            <form onSubmit={handleSubmit}>
                <div className="form-group">
                    <label>Nom de la simulation</label>
                    <input
                        type="text"
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                        placeholder="Ma simulation"
                    />
                </div>
                
                <div className="form-group">
                    <label>Résolution du maillage: {formData.mesh_resolution}</label>
                    <input
                        type="range"
                        name="mesh_resolution"
                        min="8"
                        max="128"
                        step="8"
                        value={formData.mesh_resolution}
                        onChange={handleChange}
                    />
                </div>
                
                <div className="form-group">
                    <label>Coefficient de diffusion D: {formData.diffusion_coefficient}</label>
                    <input
                        type="range"
                        name="diffusion_coefficient"
                        min="0.01"
                        max="1.0"
                        step="0.01"
                        value={formData.diffusion_coefficient}
                        onChange={handleChange}
                    />
                </div>
                
                <div className="form-group">
                    <label>Terme source Q: {formData.source_term}</label>
                    <input
                        type="range"
                        name="source_term"
                        min="0.1"
                        max="5.0"
                        step="0.1"
                        value={formData.source_term}
                        onChange={handleChange}
                    />
                </div>
                
                <div className="form-group">
                    <label>Temps final: {formData.time_final}</label>
                    <input
                        type="range"
                        name="time_final"
                        min="0.1"
                        max="5.0"
                        step="0.1"
                        value={formData.time_final}
                        onChange={handleChange}
                    />
                </div>
                
                <div className="form-group">
                    <label>Nombre de pas de temps: {formData.num_steps}</label>
                    <input
                        type="range"
                        name="num_steps"
                        min="10"
                        max="200"
                        step="10"
                        value={formData.num_steps}
                        onChange={handleChange}
                    />
                </div>
                
                <button type="submit" disabled={isSubmitting}>
                    {isSubmitting ? 'Lancement...' : 'Lancer la simulation'}
                </button>
            </form>
        </div>
    );
}