import { useState, useEffect } from 'react'
import { marked } from 'marked'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

interface FileInfo {
  name: string
  content: string
}

const App = () => {
  const [files, setFiles] = useState<string[]>([])
  const [currentFile, setCurrentFile] = useState<string>('')
  const [markdownContent, setMarkdownContent] = useState<string>('')
  const [theme, setTheme] = useState<'dark' | 'light' | 'system'>('system')

  useEffect(() => {
    loadFiles()
    applyTheme(theme)
  }, [])

  useEffect(() => {
    if (currentFile) {
      loadFile(currentFile)
    }
  }, [currentFile])

  const applyTheme = (theme: 'dark' | 'light' | 'system') => {
    if (theme === 'system') {
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
      document.documentElement.classList.toggle('dark', prefersDark)
    } else {
      document.documentElement.classList.toggle('dark', theme === 'dark')
    }
  }

  const loadFiles = async () => {
    try {
      const response = await fetch('/api')
      if (response.ok) {
        const data = await response.json()
        setFiles(data.files || [])
      }
    } catch (error) {
      console.error('Error loading files:', error)
    }
  }

  const loadFile = async (filename: string) => {
    try {
      const response = await fetch(`/api/${filename}`)
      if (response.ok) {
        const content = await response.text()
        setMarkdownContent(content)
      }
    } catch (error) {
      console.error('Error loading file:', error)
    }
  }

  const createFile = async (filename: string) => {
    try {
      await fetch(`/api/${filename}`, {
        method: 'POST',
        body: '# New Document\n\nWrite your markdown here...',
      })
      setCurrentFile(filename)
      await loadFiles()
    } catch (error) {
      console.error('Error creating file:', error)
    }
  }

  const saveFile = async (filename: string) => {
    try {
      await fetch(`/api/${filename}`, {
        method: 'PUT',
        body: markdownContent,
      })
    } catch (error) {
      console.error('Error saving file:', error)
    }
  }

  const deleteFile = async (filename: string) => {
    try {
      await fetch(`/api/${filename}`, {
        method: 'DELETE',
      })
      setCurrentFile('')
      setMarkdownContent('')
      await loadFiles()
    } catch (error) {
      console.error('Error deleting file:', error)
    }
  }

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <nav className="bg-blue-600 text-white p-4">
        <div className="container mx-auto flex justify-between items-center">
          <h1 className="text-xl font-bold">Markdown Editor</h1>
          <div className="flex items-center space-x-4">
            <select
              value={theme}
              onChange={(e) => {
                const newTheme = e.target.value as 'dark' | 'light' | 'system'
                setTheme(newTheme)
                applyTheme(newTheme)
              }}
              className="bg-blue-700 text-white p-2 rounded"
            >
              <option value="system">System</option>
              <option value="light">Light</option>
              <option value="dark">Dark</option>
            </select>
          </div>
        </div>
      </nav>

      <div className="container mx-auto p-4 flex flex-col lg:flex-row gap-4">
        <div className="w-full lg:w-1/4 bg-white dark:bg-gray-800 rounded-lg shadow p-4">
          <h2 className="text-lg font-semibold mb-4">Files</h2>
          <div className="space-y-2 mb-4">
            {files.map((file) => (
              <div
                key={file}
                className={`p-2 rounded cursor-pointer ${currentFile === file ? 'bg-blue-100 dark:bg-blue-900' : 'hover:bg-gray-100 dark:hover:bg-gray-700'}`}
                onClick={() => setCurrentFile(file)}
              >
                {file}
              </div>
            ))}
          </div>
          <button
            onClick={() => createFile(`document-${Date.now()}.md`)}
            className="w-full bg-green-500 text-white p-2 rounded hover:bg-green-600"
          >
            New Document
          </button>
        </div>

        <div className="flex-1 flex flex-col gap-4">
          <div className="flex justify-between items-center">
            {currentFile && (
              <h2 className="text-lg font-semibold">{currentFile}</h2>
            )}
            {currentFile && (
              <button
                onClick={() => saveFile(currentFile)}
                className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
              >
                Save
              </button>
            )}
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
              <h3 className="text-md font-medium mb-2">Editor</h3>
              <textarea
                value={markdownContent}
                onChange={(e) => setMarkdownContent(e.target.value)}
                className="w-full h-96 p-2 border rounded dark:bg-gray-900 dark:text-white dark:border-gray-700"
                placeholder="Write markdown here..."
              />
            </div>

            <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
              <h3 className="text-md font-medium mb-2">Preview</h3>
              <div className="w-full h-96 p-2 border rounded overflow-auto dark:bg-gray-900 dark:text-white dark:border-gray-700 prose dark:prose-invert">
                <ReactMarkdown remarkPlugins={[remarkGfm]}>
                  {markdownContent}
                </ReactMarkdown>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App
