ScenarioSelector.tsx

/**
 * Scenario selector component - dropdown to load predefined scenarios.
 */
import { useSimulationStore } from '../../store/simulationStore';

export default function ScenarioSelector() {
  const {
    scenarios,
    selectedScenarioId,
    loadScenario,
    isLoading,
    isRunning,
  } = useSimulationStore();

  const handleScenarioChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const scenarioId = e.target.value;
    if (scenarioId && scenarioId !== 'custom') {
      loadScenario(scenarioId);
    }
  };

  const currentScenario = scenarios.find((s) => s.id === selectedScenarioId);

  return (
    <div className="space-y-3">
      <div>
        <label
          htmlFor="scenario-select"
          className="block text-sm font-medium text-gray-700 mb-2"
        >
          Scénario prédéfini
        </label>
        <select
          id="scenario-select"
          value={selectedScenarioId || 'custom'}
          onChange={handleScenarioChange}
          disabled={isLoading || isRunning}
          className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm disabled:bg-gray-100 disabled:cursor-not-allowed"
        >
          <option value="custom">Configuration personnalisée</option>
          {scenarios.map((scenario) => (
            <option key={scenario.id} value={scenario.id}>
              {scenario.name}
            </option>
          ))}
        </select>
      </div>

      {/* Scenario description */}
      {currentScenario && (
        <div className="bg-blue-50 border border-blue-200 rounded-md p-3">
          <h4 className="text-sm font-medium text-blue-900 mb-1">
            {currentScenario.name}
          </h4>
          <p className="text-xs text-blue-700">{currentScenario.description}</p>
        </div>
      )}

      {/* Custom configuration indicator */}
      {!selectedScenarioId && (
        <div className="bg-gray-50 border border-gray-200 rounded-md p-3">
          <p className="text-xs text-gray-600">
            Configuration personnalisée - Modifiez les paramètres ci-dessous
          </p>
        </div>
      )}
    </div>
  );
}