import React, { useState } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { Home, Video, Settings, FolderOpen, Music, Image, Sparkles, Layout, Clock, CheckCircle, XCircle, List, Tags, User, Wand2, TestTube, Package } from 'lucide-react'
import { clsx } from 'clsx'

const Sidebar: React.FC = () => {
  const location = useLocation()
  const [activeTab, setActiveTab] = useState<'nav' | 'tasks'>('nav')

  // Mock jobs data - this should be replaced with actual state management
  const jobs: Array<{
    id: string
    type: 'single' | 'batch'
    status: 'processing' | 'completed' | 'failed'
    progress: number
    startTime: number
    result?: { success_count?: number }
    error?: string
  }> = []

  const navItems = [
    { path: '/', icon: Home, label: '首页' },
    { path: '/ai-video', icon: Sparkles, label: 'AI 视频' },
    { path: '/text-video-generator', icon: Wand2, label: 'AI 内容生成' },
    { path: '/templates', icon: Layout, label: '模板库' },
    { path: '/resource-categories', icon: Tags, label: '分类管理' },
    { path: '/projects', icon: FolderOpen, label: '项目库' },
    { path: '/models', icon: User, label: '模特库' },
    { path: '/media', icon: Image, label: '媒体库' },
    { path: '/audio', icon: Music, label: '音频库' },
    { path: '/python-core-test', icon: TestTube, label: 'Python测试' },
    { path: '/python-env-manager', icon: Package, label: 'Python环境' },
    { path: '/settings', icon: Settings, label: '设置' },
  ]

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'processing': return <Clock size={14} className="text-blue-500" />
      case 'completed': return <CheckCircle size={14} className="text-green-500" />
      case 'failed': return <XCircle size={14} className="text-red-500" />
      default: return <Clock size={14} className="text-gray-500" />
    }
  }

  const formatTime = (timestamp: number): string => {
    return new Date(timestamp).toLocaleTimeString()
  }

  return (
    <div className="w-64 bg-white border-r border-secondary-200 flex flex-col">
      {/* Tab Headers */}
      <div className="border-b border-secondary-200">
        <div className="flex">
          <button
            onClick={() => setActiveTab('nav')}
            className={clsx(
              'flex-1 px-4 py-3 text-sm font-medium border-b-2 transition-colors',
              activeTab === 'nav'
                ? 'border-primary-500 text-primary-600 bg-primary-50'
                : 'border-transparent text-secondary-600 hover:text-secondary-900 hover:bg-secondary-50'
            )}
          >
            导航
          </button>
        </div>
      </div>

      {/* Tab Content */}
      <div className="flex-1 overflow-hidden">
        {activeTab === 'nav' ? (
          <nav className="p-2 h-full overflow-y-auto">
            <ul className="space-y-1">
              {navItems.map((item) => {
                const Icon = item.icon
                const isActive = location.pathname === item.path

                return (
                  <li key={item.path}>
                    <Link
                      to={item.path}
                      className={clsx(
                        'flex items-center space-x-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
                        isActive
                          ? 'bg-primary-100 text-primary-700'
                          : 'text-secondary-600 hover:bg-secondary-100 hover:text-secondary-900'
                      )}
                    >
                      <Icon size={18} />
                      <span>{item.label}</span>
                    </Link>
                  </li>
                )
              })}
            </ul>
          </nav>
        ) : (
          <div className="p-2 h-full overflow-y-auto">
            <div className="space-y-2">
              {jobs.length === 0 ? (
                <div className="text-center py-8 text-secondary-500">
                  <List size={32} className="mx-auto mb-2" />
                  <p className="text-sm">暂无任务</p>
                </div>
              ) : (
                jobs.slice().reverse().map((job) => (
                  <div
                    key={job.id}
                    className="border border-secondary-200 rounded-lg p-3 bg-white hover:bg-secondary-50 transition-colors"
                  >
                    <div className="flex items-center justify-between mb-2">
                      <div className="flex items-center space-x-2">
                        {getStatusIcon(job.status)}
                        <span className="text-xs font-medium text-secondary-700">
                          {job.type === 'single' ? '单个' : '批量'}
                        </span>
                      </div>
                      <span className="text-xs text-secondary-500">
                        {formatTime(job.startTime)}
                      </span>
                    </div>

                    {job.status === 'processing' && (
                      <div className="mb-2">
                        <div className="w-full bg-secondary-200 rounded-full h-1.5">
                          <div
                            className="bg-primary-500 h-1.5 rounded-full transition-all duration-300"
                            style={{ width: `${job.progress}%` }}
                          />
                        </div>
                        <div className="text-xs text-secondary-600 mt-1">
                          {job.progress}%
                        </div>
                      </div>
                    )}

                    {job.status === 'completed' && job.result && (
                      <div className="text-xs text-green-600 mb-1">
                        {job.type === 'batch' && job.result.success_count
                          ? `成功: ${job.result.success_count} 个`
                          : '生成成功'
                        }
                      </div>
                    )}

                    {job.error && (
                      <div className="text-xs text-red-600 mb-1">
                        {job.error}
                      </div>
                    )}
                  </div>
                ))
              )}
            </div>
          </div>
        )}
      </div>
      
      <div className="p-4 border-t border-secondary-200">
        <div className="text-xs text-secondary-500">
          <p>MixVideo V2</p>
          <p>版本 2.0.0</p>
        </div>
      </div>
    </div>
  )
}

export default Sidebar
