const phaseIcons = {
  Planning: '📋',
  Execution: '⚙️',
  Validation: '🧪',
  Documentation: '📖',
  Learning: '🧠',
};

const phaseColors = {
  Planning: 'from-blue-500 to-indigo-500',
  Execution: 'from-green-500 to-emerald-500',
  Validation: 'from-yellow-500 to-orange-500',
  Documentation: 'from-teal-500 to-cyan-500',
  Learning: 'from-purple-500 to-violet-500',
};

export default function WorkflowTimeline({ simulation, currentPhase, isRunning }) {
  const phases = [
    { name: 'Planning', description: 'Product Manager clarifies task, Architect designs system, Planner decomposes work', agents: ['PM', 'Architect', 'Planner'] },
    { name: 'Execution', description: 'Backend implements APIs, Frontend builds UI, DevOps prepares deployment', agents: ['Backend', 'Frontend', 'DevOps'] },
    { name: 'Validation', description: 'QA runs tests, Security scans vulnerabilities, Code Review validates quality', agents: ['QA', 'Security', 'Reviewer'] },
    { name: 'Documentation', description: 'Documentation Agent updates all materials, API docs, and usage guides', agents: ['Docs'] },
    { name: 'Learning', description: 'Knowledge Manager extracts rules and stores experiences for future tasks', agents: ['Knowledge'] },
  ];

  return (
    <div className="space-y-6">
      {/* Workflow Overview */}
      <div className="glass-card p-6">
        <h2 className="text-lg font-bold text-gray-100 mb-2">Workflow Pipeline</h2>
        <p className="text-sm text-gray-400 mb-6">Autonomous execution from planning to learning</p>

        <div className="space-y-4">
          {phases.map((phase, index) => {
            const isActive = currentPhase === index;
            const isDone = simulation ? index < simulation.phases?.length : currentPhase > index;
            const isPending = currentPhase < index && !simulation;

            return (
              <div key={phase.name} className="relative">
                {/* Connector Line */}
                {index < phases.length - 1 && (
                  <div className={`absolute left-5 top-12 w-0.5 h-4 transition-all duration-500 ${
                    isDone || isActive ? 'bg-gradient-to-b from-indigo-500 to-purple-500' : 'bg-gray-800'
                  }`} />
                )}

                <div className={`flex gap-4 p-4 rounded-xl transition-all duration-300 ${
                  isActive ? 'bg-indigo-500/10 border border-indigo-500/30 shadow-lg shadow-indigo-500/10' :
                  isDone ? 'bg-green-500/5 border border-green-500/20' :
                  'bg-gray-900/40 border border-gray-800/30'
                }`}>
                  {/* Phase Icon */}
                  <div className={`w-10 h-10 rounded-xl flex items-center justify-center text-lg flex-shrink-0 ${
                    isActive ? 'bg-indigo-500/20 animate-pulse' :
                    isDone ? 'bg-green-500/20' :
                    'bg-gray-800/50'
                  }`}>
                    {isDone ? '✅' : phaseIcons[phase.name]}
                  </div>

                  {/* Phase Content */}
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1">
                      <h3 className={`text-sm font-bold ${
                        isActive ? 'text-indigo-400' :
                        isDone ? 'text-green-400' :
                        'text-gray-400'
                      }`}>
                        {phase.name}
                      </h3>
                      <span className={`text-xs px-2 py-0.5 rounded-full ${
                        isActive ? 'bg-indigo-500/20 text-indigo-300' :
                        isDone ? 'bg-green-500/20 text-green-300' :
                        'bg-gray-800 text-gray-500'
                      }`}>
                        Step {index + 1}
                      </span>
                    </div>
                    <p className="text-xs text-gray-500 mb-2">{phase.description}</p>
                    <div className="flex gap-1.5 flex-wrap">
                      {phase.agents.map(agent => (
                        <span key={agent} className="text-xs px-2 py-0.5 rounded-md bg-gray-800/50 text-gray-400">
                          {agent}
                        </span>
                      ))}
                    </div>
                  </div>

                  {/* Status Indicator */}
                  <div className="flex-shrink-0">
                    {isActive && (
                      <div className="w-3 h-3 rounded-full bg-indigo-500 animate-pulse" />
                    )}
                    {isDone && (
                      <div className="w-3 h-3 rounded-full bg-green-500" />
                    )}
                    {isPending && (
                      <div className="w-3 h-3 rounded-full bg-gray-700" />
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Architecture Diagram */}
      <div className="glass-card p-6">
        <h2 className="text-lg font-bold text-gray-100 mb-4">System Architecture</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="bg-blue-500/5 border border-blue-500/20 rounded-xl p-4 text-center">
            <div className="text-2xl mb-2">📡</div>
            <h3 className="text-sm font-bold text-blue-400">Input Layer</h3>
            <p className="text-xs text-gray-500 mt-1">Task reception & parsing</p>
          </div>
          <div className="bg-purple-500/5 border border-purple-500/20 rounded-xl p-4 text-center">
            <div className="text-2xl mb-2">🧠</div>
            <h3 className="text-sm font-bold text-purple-400">Processing Layer</h3>
            <p className="text-xs text-gray-500 mt-1">Agent orchestration & execution</p>
          </div>
          <div className="bg-green-500/5 border border-green-500/20 rounded-xl p-4 text-center">
            <div className="text-2xl mb-2">📦</div>
            <h3 className="text-sm font-bold text-green-400">Output Layer</h3>
            <p className="text-xs text-gray-500 mt-1">Validated deliverables</p>
          </div>
        </div>

        <div className="mt-4 flex items-center justify-center gap-2">
          <div className="h-0.5 w-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded" />
          <div className="h-0.5 w-16 bg-gradient-to-r from-purple-500 to-green-500 rounded" />
        </div>

        <div className="mt-4 grid grid-cols-2 md:grid-cols-4 gap-3">
          {[
            { icon: '🔄', label: 'Orchestrator', color: 'text-indigo-400' },
            { icon: '💾', label: 'Knowledge DB', color: 'text-violet-400' },
            { icon: '📊', label: 'Metrics', color: 'text-cyan-400' },
            { icon: '🔐', label: 'Security Gate', color: 'text-red-400' },
          ].map(item => (
            <div key={item.label} className="bg-gray-800/30 rounded-lg p-3 text-center">
              <div className="text-lg">{item.icon}</div>
              <span className={`text-xs font-medium ${item.color}`}>{item.label}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}