import React, { useEffect } from 'react'
import { Download, Save, Scissors, ArrowLeft } from 'lucide-react'
import { useNavigate } from 'react-router-dom'
import VideoPreview from '../components/VideoPreview'
import MediaLibrary from '../components/MediaLibrary'
import { useProjectStore } from '../stores/useProjectStore'

const EditorPage: React.FC = () => {
  const { currentProject, saveProject, isSaving } = useProjectStore()
  const navigate = useNavigate()

  const handleSave = async () => {
    if (currentProject) {
      await saveProject()
    }
  }

  const handleExport = () => {
    // TODO: Implement export functionality
    console.log('Export project')
  }

  const handleBack = () => {
    // 返回到首页
    navigate('/')
  }

  // 键盘快捷键支持
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      // ESC键返回
      if (event.key === 'Escape') {
        handleBack()
      }
      // Ctrl+S 保存
      if (event.ctrlKey && event.key === 's') {
        event.preventDefault()
        handleSave()
      }
    }

    window.addEventListener('keydown', handleKeyDown)
    return () => {
      window.removeEventListener('keydown', handleKeyDown)
    }
  }, [currentProject])

  return (
    <div className="h-full flex flex-col bg-secondary-900">
      {/* Top Toolbar */}
      <div className="bg-secondary-800 border-b border-secondary-700 p-4 flex items-center justify-between">
        <div className="flex items-center space-x-4">
          {/* 返回按钮 */}
          <button
            onClick={handleBack}
            className="flex items-center text-white hover:text-gray-300 transition-colors"
            title="返回首页"
          >
            <ArrowLeft size={20} className="mr-2" />
            <span className="text-sm">返回</span>
          </button>

          <div className="w-px h-6 bg-secondary-600"></div>

          <h1 className="text-white font-semibold">
            {currentProject ? currentProject.name : '视频编辑器'}
          </h1>
          <div className="flex items-center space-x-2">
            <button className="btn-ghost text-white px-3 py-1 text-sm">
              文件
            </button>
            <button className="btn-ghost text-white px-3 py-1 text-sm">
              编辑
            </button>
            <button className="btn-ghost text-white px-3 py-1 text-sm">
              效果
            </button>
            <button className="btn-ghost text-white px-3 py-1 text-sm">
              导出
            </button>
          </div>
        </div>
        <div className="flex items-center space-x-2">
          <button
            onClick={handleSave}
            disabled={isSaving || !currentProject}
            className="btn-secondary px-4 py-2 disabled:opacity-50"
          >
            <Save size={16} className="mr-2" />
            {isSaving ? '保存中...' : '保存'}
          </button>
          <button
            onClick={handleExport}
            className="btn-primary px-4 py-2"
          >
            <Download size={16} className="mr-2" />
            导出
          </button>
        </div>
      </div>

      <div className="flex flex-1 min-h-0">
        {/* Media Library Sidebar */}
        <MediaLibrary className="w-48" />

        {/* Main Content */}
        <div className="flex-1 flex flex-col">
          {/* Video Preview */}
          <div className="flex-1 bg-black p-4">
            <VideoPreview className="w-full h-full" />
          </div>
        </div>

        {/* Properties Panel */}
        <div className="w-64 bg-secondary-800 border-l border-secondary-700 flex flex-col">
          <div className="p-4 border-b border-secondary-700">
            <h2 className="text-white font-medium">属性面板</h2>
          </div>
          <div className="flex-1 p-4 space-y-4">
            <div>
              <label className="block text-white text-sm font-medium mb-2">
                亮度
              </label>
              <input
                type="range"
                min="0"
                max="200"
                defaultValue="100"
                className="w-full"
              />
            </div>
            <div>
              <label className="block text-white text-sm font-medium mb-2">
                对比度
              </label>
              <input
                type="range"
                min="0"
                max="200"
                defaultValue="100"
                className="w-full"
              />
            </div>
            <div>
              <label className="block text-white text-sm font-medium mb-2">
                饱和度
              </label>
              <input
                type="range"
                min="0"
                max="200"
                defaultValue="100"
                className="w-full"
              />
            </div>
            <button className="btn-primary w-full">
              <Scissors size={16} className="mr-2" />
              应用效果
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default EditorPage