import { useState } from 'react'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { atomDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'
import Modal from 'react-modal'

const CodeEditor = ({ language }) => {
  const [code, setCode] = useState('// کد خود را اینجا بنویسید\nconsole.log("سلام دنیا")')
  const [output, setOutput] = useState('')
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [projectType, setProjectType] = useState('nodejs')

  const runCode = () => {
    try {
      const result = eval(code)
      setOutput(JSON.stringify(result, null, 2))
    } catch (error) {
      setOutput(`خطا: ${error.message}`)
    }
  }

  const generateProject = () => {
    setIsModalOpen(true)
  }

  return (
    <div className="bg-white rounded-lg shadow-md p-4">
      <div className="flex justify-between mb-4">
        <h2 className="text-xl font-bold">
          {language === 'fa' ? 'ویرایشگر کد هوشمند' : 'Smart Code Editor'}
        </h2>
        <div className="flex space-x-2">
          <button 
            onClick={runCode}
            className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
          >
            {language === 'fa' ? 'اجرای کد' : 'Run Code'}
          </button>
          <button 
            onClick={generateProject}
            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
          >
            {language === 'fa' ? 'ساخت پروژه جدید' : 'New Project'}
          </button>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <SyntaxHighlighter 
            language="javascript" 
            style={atomDark}
            className="rounded-lg h-96"
            showLineNumbers
          >
            {code}
          </SyntaxHighlighter>
          <textarea
            className="w-full mt-2 p-2 border rounded font-mono"
            value={code}
            onChange={(e) => setCode(e.target.value)}
            rows={5}
            dir="ltr"
          />
        </div>
        <div>
          <h3 className="font-bold mb-2">
            {language === 'fa' ? 'خروجی برنامه' : 'Program Output'}
          </h3>
          <pre className="bg-gray-800 text-green-400 p-4 rounded-lg h-96 overflow-auto">
            {output || (language === 'fa' ? 'خروجی اینجا نمایش داده می‌شود' : 'Output will appear here')}
          </pre>
        </div>
      </div>

      <Modal
        isOpen={isModalOpen}
        onRequestClose={() => setIsModalOpen(false)}
        contentLabel="Project Generator"
        className="modal"
        overlayClassName="overlay"
      >
        <div className="bg-white p-6 rounded-lg max-w-md mx-auto mt-20">
          <h2 className="text-xl font-bold mb-4">
            {language === 'fa' ? 'ساخت پروژه جدید' : 'Create New Project'}
          </h2>
          
          <div className="mb-4">
            <label className="block mb-2">
              {language === 'fa' ? 'نوع پروژه' : 'Project Type'}
            </label>
            <select 
              className="w-full p-2 border rounded"
              value={projectType}
              onChange={(e) => setProjectType(e.target.value)}
            >
              <option value="nodejs">Node.js</option>
              <option value="react">React</option>
              <option value="nextjs">Next.js</option>
              <option value="python">Python</option>
            </select>
          </div>

          <div className="flex justify-end space-x-2">
            <button 
              onClick={() => setIsModalOpen(false)}
              className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400"
            >
              {language === 'fa' ? 'انصراف' : 'Cancel'}
            </button>
            <button 
              onClick={() => {
                // Generate project structure
                setIsModalOpen(false)

              className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
            >
              {language === 'fa' ? 'تولید پروژه' : 'Generate Project'}
            </button>
          </div>
        </div>
      </Modal>
    </div>
  )
}

export default CodeEditor