import React from 'react';

const TASK_OPTIONS = [
  { value: 'easy',   label: 'Easy — Monday Morning',  color: '#22c55e' },
  { value: 'medium', label: 'Medium — Demo Day Prep',  color: '#f59e0b' },
  { value: 'hard',   label: 'Hard — Series B Crisis',  color: '#ef4444' },
];

export default function SimulationControls({
  taskId, currentTime, currentStep, maxSteps, totalReward,
  done, onReset, onTaskChange, loading,
  isAutoRunning, onAutoRun,
}) {
  const progressPct = maxSteps > 0 ? (currentStep / maxSteps) * 100 : 0;
  const task = TASK_OPTIONS.find(t => t.value === taskId) || TASK_OPTIONS[0];

  return (
    <div className="sim-controls">

      {/* ── Left: brand + task ── */}
      <div className="sim-controls-left">
        <div className="brand">
          <span className="brand-icon">⚡</span>
          <div className="brand-text">
            <span className="brand-name">ExecOps AI</span>
            <span className="brand-sub">CEO Simulation</span>
          </div>
        </div>

        <div className="divider-v" />

        <select
          className="task-select"
          value={taskId}
          onChange={e => onTaskChange(e.target.value)}
          disabled={isAutoRunning || loading}
          style={{ borderColor: `${task.color}55` }}
        >
          {TASK_OPTIONS.map(t => (
            <option key={t.value} value={t.value}>{t.label}</option>
          ))}
        </select>

        <button
          className="btn btn-reset"
          onClick={onReset}
          disabled={isAutoRunning || loading}
          title="Reset to initial state"
        >
          ↺ Reset
        </button>
      </div>

      {/* ── Center: time + steps ── */}
      <div className="sim-controls-center">
        <div className="time-display">
          <span className="stat-label">CEO TIME</span>
          <span className="time-value">{currentTime}</span>
        </div>

        <div className="step-display">
          <span className="stat-label">STEPS</span>
          <span className="step-value">
            {currentStep} <span className="step-sep">/</span> {maxSteps}
          </span>
          <div className="step-bar">
            <div
              className="step-bar-fill"
              style={{
                width: `${progressPct}%`,
                background: progressPct >= 100
                  ? '#22c55e'
                  : `linear-gradient(90deg, #3b82f6, #8b5cf6)`,
              }}
            />
          </div>
        </div>

        <div className="reward-display">
          <span className="stat-label">REWARD</span>
          <span
            className="reward-value"
            style={{ color: totalReward >= 0 ? '#22c55e' : '#ef4444' }}
          >
            {totalReward >= 0 ? '+' : ''}{totalReward.toFixed(3)}
          </span>
        </div>
      </div>

      {/* ── Right: auto-run + status ── */}
      <div className="sim-controls-right">
        {/* Auto-run button */}
        <button
          className={`btn-autorun ${isAutoRunning ? 'running' : ''}`}
          onClick={onAutoRun}
          disabled={loading && !isAutoRunning}
          title={isAutoRunning ? 'Stop simulation' : 'Watch AI play through this scenario'}
        >
          {isAutoRunning ? (
            <>
              <span className="autorun-icon">■</span>
              <span>Stop</span>
            </>
          ) : (
            <>
              <span className="autorun-icon">▶</span>
              <span>Watch AI Play</span>
            </>
          )}
        </button>

        <div className={`status-badge ${done ? 'done' : isAutoRunning ? 'auto' : 'active'}`}>
          {done ? '✓ COMPLETE' : isAutoRunning ? '◈ AI RUNNING' : '● READY'}
        </div>
      </div>
    </div>
  );
}