import React from 'react'
import { Save, FolderOpen, Monitor, Volume2, Cpu } from 'lucide-react'

const SettingsPage: React.FC = () => {
  return (
    <div className="p-6 max-w-4xl mx-auto">
      <h1 className="text-3xl font-bold text-secondary-900 mb-8">设置</h1>
      
      <div className="space-y-8">
        {/* General Settings */}
        <div className="card p-6">
          <h2 className="text-xl font-semibold text-secondary-900 mb-4 flex items-center">
            <Monitor className="mr-2" size={20} />
            常规设置
          </h2>
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-secondary-700 mb-2">
                默认项目路径
              </label>
              <div className="flex space-x-2">
                <input
                  type="text"
                  className="input flex-1"
                  defaultValue="/Users/username/MixVideo Projects"
                />
                <button className="btn-secondary px-4 py-2">
                  <FolderOpen size={16} />
                </button>
              </div>
            </div>
            <div>
              <label className="block text-sm font-medium text-secondary-700 mb-2">
                自动保存间隔
              </label>
              <select className="input w-48">
                <option value="1">1 分钟</option>
                <option value="5">5 分钟</option>
                <option value="10">10 分钟</option>
                <option value="30">30 分钟</option>
              </select>
            </div>
            <div className="flex items-center space-x-2">
              <input type="checkbox" id="auto-backup" className="rounded" />
              <label htmlFor="auto-backup" className="text-sm text-secondary-700">
                启用自动备份
              </label>
            </div>
          </div>
        </div>

        {/* Video Settings */}
        <div className="card p-6">
          <h2 className="text-xl font-semibold text-secondary-900 mb-4 flex items-center">
            <Monitor className="mr-2" size={20} />
            视频设置
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-secondary-700 mb-2">
                默认分辨率
              </label>
              <select className="input">
                <option value="1920x1080">1920x1080 (Full HD)</option>
                <option value="1280x720">1280x720 (HD)</option>
                <option value="3840x2160">3840x2160 (4K)</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-secondary-700 mb-2">
                默认帧率
              </label>
              <select className="input">
                <option value="24">24 fps</option>
                <option value="30">30 fps</option>
                <option value="60">60 fps</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-secondary-700 mb-2">
                视频编码器
              </label>
              <select className="input">
                <option value="h264">H.264</option>
                <option value="h265">H.265 (HEVC)</option>
                <option value="av1">AV1</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-secondary-700 mb-2">
                质量预设
              </label>
              <select className="input">
                <option value="high">高质量</option>
                <option value="medium">中等质量</option>
                <option value="low">低质量</option>
              </select>
            </div>
          </div>
        </div>

        {/* Audio Settings */}
        <div className="card p-6">
          <h2 className="text-xl font-semibold text-secondary-900 mb-4 flex items-center">
            <Volume2 className="mr-2" size={20} />
            音频设置
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-secondary-700 mb-2">
                采样率
              </label>
              <select className="input">
                <option value="44100">44.1 kHz</option>
                <option value="48000">48 kHz</option>
                <option value="96000">96 kHz</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-secondary-700 mb-2">
                音频编码器
              </label>
              <select className="input">
                <option value="aac">AAC</option>
                <option value="mp3">MP3</option>
                <option value="flac">FLAC</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-secondary-700 mb-2">
                比特率
              </label>
              <select className="input">
                <option value="128">128 kbps</option>
                <option value="192">192 kbps</option>
                <option value="320">320 kbps</option>
              </select>
            </div>
          </div>
        </div>

        {/* Performance Settings */}
        <div className="card p-6">
          <h2 className="text-xl font-semibold text-secondary-900 mb-4 flex items-center">
            <Cpu className="mr-2" size={20} />
            性能设置
          </h2>
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-secondary-700 mb-2">
                最大工作线程数
              </label>
              <input
                type="number"
                className="input w-32"
                defaultValue="4"
                min="1"
                max="16"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-secondary-700 mb-2">
                内存缓存大小 (MB)
              </label>
              <input
                type="number"
                className="input w-32"
                defaultValue="1024"
                min="256"
                max="8192"
                step="256"
              />
            </div>
            <div className="flex items-center space-x-2">
              <input type="checkbox" id="gpu-acceleration" className="rounded" />
              <label htmlFor="gpu-acceleration" className="text-sm text-secondary-700">
                启用 GPU 加速
              </label>
            </div>
            <div className="flex items-center space-x-2">
              <input type="checkbox" id="preview-quality" className="rounded" />
              <label htmlFor="preview-quality" className="text-sm text-secondary-700">
                预览时降低质量以提高性能
              </label>
            </div>
          </div>
        </div>

        {/* Save Button */}
        <div className="flex justify-end">
          <button className="btn-primary px-6 py-3">
            <Save className="mr-2" size={16} />
            保存设置
          </button>
        </div>
      </div>
    </div>
  )
}

export default SettingsPage
