import { useState } from 'react';

export default function SimulationPanel({ isRunning, onRun, onReset, sampleTasks }) {
  const [task, setTask] = useState('');
  const [selectedPreset, setSelectedPreset] = useState('');

  const handleRun = () => {
    const taskToRun = task.trim() || selectedPreset || sampleTasks[0];
    onRun(taskToRun);
  };

  return (
    <div className="glass-card p-5 space-y-4">
      <div className="flex items-center gap-2">
        <div className="w-8 h-8 rounded-lg bg-indigo-500/10 flex items-center justify-center text-sm">▶️</div>
        <h2 className="text-sm font-bold text-gray-200">Simulation Control</h2>
      </div>

      {/* Task Input */}
      <div>
        <label className="text-xs text-gray-500 mb-1.5 block">Task Description</label>
        <textarea
          value={task}
          onChange={(e) => setTask(e.target.value)}
          placeholder="Enter a software task..."
          className="w-full bg-gray-800/50 border border-gray-700/50 rounded-lg px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:outline-none focus:border-indigo-500/50 focus:ring-1 focus:ring-indigo-500/25 resize-none h-20"
          disabled={isRunning}
        />
      </div>

      {/* Preset Tasks */}
      <div>
        <label className="text-xs text-gray-500 mb-1.5 block">Preset Tasks</label>
        <div className="space-y-1.5">
          {sampleTasks.map((t, i) => (
            <button
              key={i}
              onClick={() => { setSelectedPreset(t); setTask(''); }}
              disabled={isRunning}
              className={`w-full text-left text-xs px-3 py-2 rounded-lg transition-all ${
                selectedPreset === t
                  ? 'bg-indigo-500/15 border border-indigo-500/30 text-indigo-300'
                  : 'bg-gray-800/30 border border-gray-800/50 text-gray-400 hover:bg-gray-800/50 hover:text-gray-300'
              }`}
            >
              {t}
            </button>
          ))}
        </div>
      </div>

      {/* Action Buttons */}
      <div className="flex gap-2">
        <button
          onClick={handleRun}
          disabled={isRunning}
          className={`flex-1 py-2.5 rounded-lg text-sm font-medium transition-all ${
            isRunning
              ? 'bg-gray-800 text-gray-500 cursor-not-allowed'
              : 'bg-indigo-600 text-white hover:bg-indigo-500 shadow-lg shadow-indigo-500/25'
          }`}
        >
          {isRunning ? (
            <span className="flex items-center justify-center gap-2">
              <span className="w-3 h-3 border-2 border-gray-500 border-t-transparent rounded-full animate-spin" />
              Running...
            </span>
          ) : (
            '▶ Run Simulation'
          )}
        </button>
        <button
          onClick={onReset}
          className="px-4 py-2.5 rounded-lg text-sm font-medium bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-gray-300 transition-all"
        >
          ↺
        </button>
      </div>

      {isRunning && (
        <div className="bg-indigo-500/5 border border-indigo-500/20 rounded-lg p-3">
          <div className="flex items-center gap-2 mb-2">
            <div className="w-2 h-2 rounded-full bg-indigo-500 animate-pulse" />
            <span className="text-xs text-indigo-400 font-medium">Simulation in progress...</span>
          </div>
          <div className="w-full bg-gray-800 rounded-full h-1.5">
            <div className="bg-gradient-to-r from-indigo-500 to-purple-500 h-1.5 rounded-full animate-pulse" style={{ width: '60%' }} />
          </div>
        </div>
      )}
    </div>
  );
}