import React from 'react'
import { Download, Save, Scissors } from 'lucide-react'
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 handleSave = async () => {
    if (currentProject) {
      await saveProject()
    }
  }

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

  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">
          <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