import { useState } from 'react'
import { FiFolder, FiFile, FiPlus, FiTrash2, FiEdit, FiSave } from 'react-icons/fi'

export default function ProjectManager() {
  const [projects, setProjects] = useState([
    {
      id: 1,
      name: 'React App',
      files: [
        { id: 1, name: 'index.js', content: '// Main entry point\nimport React from "react";' },
        { id: 2, name: 'App.js', content: 'function App() {\n  return <div>Hello</div>;\n}' }
      ]
    },
    {
      id: 2,
      name: 'Python Scripts',
      files: [
        { id: 1, name: 'main.py', content: '# Main script\nprint("Hello World")' }
      ]
    }
  ])
  const [selectedProject, setSelectedProject] = useState(null)
  const [selectedFile, setSelectedFile] = useState(null)
  const [newProjectName, setNewProjectName] = useState('')
  const [newFileName, setNewFileName] = useState('')
  const [fileContent, setFileContent] = useState('')
  const [isEditing, setIsEditing] = useState(false)

  const handleCreateProject = () => {
    if (!newProjectName.trim()) return

    const newProject = {
      id: Date.now(),
      name: newProjectName,
      files: []
    }

    setProjects([...projects, newProject])
    setNewProjectName('')
  }

  const handleCreateFile = () => {
    if (!newFileName.trim() || !selectedProject) return

    const newFile = {
      id: Date.now(),
      name: newFileName,
      content: ''
    }

    const updatedProjects = projects.map(project =>
      project.id === selectedProject.id
        ? { ...project, files: [...project.files, newFile] }
        : project
    )

    setProjects(updatedProjects)
    setNewFileName('')
  }

  const handleSelectFile = (file) => {
    setSelectedFile(file)
    setFileContent(file.content)
    setIsEditing(false)
  }

  const handleSaveFile = () => {
    if (!selectedFile || !selectedProject) return

    const updatedProjects = projects.map(project => {
      if (project.id === selectedProject.id) {
        const updatedFiles = project.files.map(file =>
          file.id === selectedFile.id
            ? { ...file, content: fileContent }
            : file
        )
        return { ...project, files: updatedFiles }
      }
      return project
    })

    setProjects(updatedProjects)
    setIsEditing(false)
  }

  const handleDeleteProject = (projectId) => {
    setProjects(projects.filter(project => project.id !== projectId))
    if (selectedProject?.id === projectId) {
      setSelectedProject(null)
      setSelectedFile(null)
    }
  }

  const handleDeleteFile = (fileId) => {
    if (!selectedProject) return

    const updatedProjects = projects.map(project => {
      if (project.id === selectedProject.id) {
        return {
          ...project,
          files: project.files.filter(file => file.id !== fileId)
        }
      }
      return project
    })

    setProjects(updatedProjects)
    if (selectedFile?.id === fileId) {
      setSelectedFile(null)
      setFileContent('')
    }
  }

  return (
    <div className="grid grid-cols-1 lg:grid-cols-4 gap-6 h-[calc(100vh-200px)]">
      <div className="lg:col-span-1 bg-white rounded-lg shadow-md p-4 overflow-y-auto">
        <div className="space-y-4">