import { useState } from 'react'
import VoiceControl from './VoiceControl'

const AgentWorkflow = ({ language }) => {
  const [tasks, setTasks] = useState([])
  const [activeTask, setActiveTask] = useState(null)
  const [output, setOutput] = useState('')

  const handleCommand = (command) => {
    const newTask = {
      id: tasks.length + 1,
      command,
      status: 'pending',
      steps: []
    }
    
    setTasks([...tasks, newTask])
    setActiveTask(newTask.id)
    
    // Simulate task execution
    setTimeout(() => {
      setTasks(prev => prev.map(task => 
        task.id === newTask.id 
          ? { ...task, status: 'completed', steps: [
              { id: 1, action: 'parse', result: 'success' },
              { id: 2, action: 'plan', result: 'success' },
              { id: 3, action: 'execute', result: 'success' }
            ]} 
          : task
      ))
      
      setOutput(language === 'fa' 
        ? `وظیفه "${command}" با موفقیت انجام شد.\n\nفایل‌های تولید شده:\n- پروژه جدید React\n- تنظیمات اولیه\n- مثال کامپوننت\n\nدستور بعدی را بگویید یا بنویسید.` 
        : `Task "${command}" completed successfully.\n\nGenerated files:\n- New React project\n- Initial setup\n- Example component\n\nSay or type your next command.`)
    }, 2000)
  }

  return (
    <div className="bg-white rounded-lg shadow-md p-4">
      <h2 className="text-xl font-bold mb-4">
        {language === 'fa' ? 'عامل هوشمند برنامه‌نویسی' : 'AI Programming Agent'}
      </h2>
      
      <VoiceControl language={language} onCommand={handleCommand} />
      
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
        <div className="md:col-span-1">
          <h3 className="font-bold mb-2">
            {language === 'fa' ? 'وظایف اخیر' : 'Recent Tasks'}
          </h3>
          <div className="border rounded-lg p-2 h-64 overflow-y-auto">
            {tasks.length === 0 ? (
              <p className="text-gray-500 text-center py-8">
                {language === 'fa' ? 'هیچ وظیفه‌ای ثبت نشده است' : 'No tasks recorded'}
              </p>
            ) : (
              <ul className="space-y-2">
                {tasks.map(task => (
                  <li 
                    key={task.id} 
                    className={`p-2 rounded cursor-pointer ${activeTask === task.id ? 'bg-blue-100' : 'hover:bg-gray-100'}`}
                    onClick={() => setActiveTask(task.id)}
                  >
                    <div className="flex justify-between">
                      <span className="truncate">{task.command}</span>
                      <span className={`px-2 py-1 text-xs rounded-full ${
                        task.status === 'completed' ? 'bg-green-100 text-green-800' :
                        task.status === 'failed' ? 'bg-red-100 text-red-800' :
                        'bg-yellow-100 text-yellow-800'
                      }`}>
                        {task.status}
                      </span>
                    </div>
                  </li>
                ))}
              </ul>
            )}
          </div>
        </div>
        
        <div className="md:col-span-2">
          <h3 className="font-bold mb-2">
            {language === 'fa' ? 'جزئیات وظیفه' : 'Task Details'}
          </h3>
          <div className="border rounded-lg p-4 h-64 overflow-y-auto">
            {activeTask ? (
              <>
                <h4 className="font-semibold mb-2">
                  {language === 'fa' ? 'دستور:' : 'Command:'} {tasks.find(t => t.id === activeTask)?.command}
                </h4>
                <div className="mb-4">
                  <h5 className="font-medium mb-1">
                    {language === 'fa' ? 'مراحل اجرا:' : 'Execution Steps:'}
                  </h5>
                  <ul className="space-y-1">
                    {tasks.find(t => t.id === activeTask)?.steps.map(step => (
                      <li key={step.id} className="flex items-center">
                        <span className={`inline-block w-2 h-2 rounded-full mr-2 ${
                          step.result === 'success' ? 'bg-green-500' : 'bg-red-500'
                        }`}></span>
                        {step.action} - {step.result}
                      </li>
                    ))}
                  </ul>
                </div>
                <div>
                  <h5 className="font-medium mb-1">
                    {language === 'fa' ? 'خروجی:' : 'Output:'}
                  </h5>
                  <pre className="bg-gray-100 p-2 rounded text-sm whitespace-pre-wrap">
                    {output || (language === 'fa' 
                      ? 'هیچ خروجی‌ای نمایش داده نشده است' 
                      : 'No output displayed')}
                  </pre>
                </div>
              </>
            ) : (
              <p className="text-gray-500 text-center py-8">
                {language === 'fa' 
                  ? 'لطفاً یک وظیفه را انتخاب کنید' 
                  : 'Please select a task'}
              </p>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}

export default AgentWorkflow