import React, { useState } from 'react';
import { useTheme } from '../contexts/ThemeContext';
import {
  FileBox,
  Search,
  Plus,
  Edit,
  Trash2,
  Download,
  Upload,
  Filter,
  Grid3X3,
  List,
  MoreVertical,
  ChevronRight,
  FileText,
  Image,
  Film,
  Music,
  Archive,
  ExternalLink,
  Copy,
  Share2,
} from 'lucide-react';
import { PageType } from '../components/Sidebar';

interface ZZResource {
  id: string;
  name: string;
  type: 'document' | 'image' | 'video' | 'audio' | 'archive' | 'other';
  size: string;
  category: string;
  tags: string[];
  createdAt: string;
  updatedAt: string;
  author: string;
  status: 'active' | 'archived' | 'draft';
  description: string;
}

interface ZZResourceManagementProps {
  onNavigate: (page: PageType) => void;
}

const mockResources: ZZResource[] = [
  {
    id: 'zz-001',
    name: '品牌视觉规范手册',
    type: 'document',
    size: '15.2 MB',
    category: '品牌资产',
    tags: ['品牌', 'VI', '规范'],
    createdAt: '2024-01-15',
    updatedAt: '2024-03-10',
    author: '张三',
    status: 'active',
    description: '公司品牌视觉识别系统标准手册，包含LOGO、色彩、字体等规范'
  },
  {
    id: 'zz-002',
    name: '产品宣传视频素材',
    type: 'video',
    size: '256 MB',
    category: '营销素材',
    tags: ['视频', '宣传', '产品'],
    createdAt: '2024-02-20',
    updatedAt: '2024-03-08',
    author: '李四',
    status: 'active',
    description: '2024年第一季度产品宣传视频原始素材'
  },
  {
    id: 'zz-003',
    name: '活动背景音乐库',
    type: 'audio',
    size: '1.2 GB',
    category: '音频素材',
    tags: ['音乐', '背景', '活动'],
    createdAt: '2024-01-08',
    updatedAt: '2024-02-28',
    author: '王五',
    status: 'active',
    description: '各类活动背景音乐合集，包含不同风格和时长'
  },
  {
    id: 'zz-004',
    name: '图标矢量素材包',
    type: 'image',
    size: '45 MB',
    category: '设计素材',
    tags: ['图标', '矢量', 'UI'],
    createdAt: '2024-03-01',
    updatedAt: '2024-03-15',
    author: '赵六',
    status: 'active',
    description: '500+高质量矢量图标素材，适用于各类项目'
  },
  {
    id: 'zz-005',
    name: '历史项目归档',
    type: 'archive',
    size: '2.5 GB',
    category: '归档文件',
    tags: ['归档', '历史', '项目'],
    createdAt: '2023-12-01',
    updatedAt: '2024-01-20',
    author: '系统',
    status: 'archived',
    description: '2023年度已完成项目文件归档'
  },
  {
    id: 'zz-006',
    name: 'PPT模板套装',
    type: 'document',
    size: '88 MB',
    category: '模板素材',
    tags: ['PPT', '模板', '演示'],
    createdAt: '2024-02-10',
    updatedAt: '2024-03-12',
    author: '钱七',
    status: 'draft',
    description: '商务演示PPT模板，包含多种风格和场景'
  },
];

const typeIcons: Record<ZZResource['type'], React.ReactNode> = {
  document: <FileText className="w-5 h-5" />,
  image: <Image className="w-5 h-5" />,
  video: <Film className="w-5 h-5" />,
  audio: <Music className="w-5 h-5" />,
  archive: <Archive className="w-5 h-5" />,
  other: <FileBox className="w-5 h-5" />,
};

const typeColors: Record<ZZResource['type'], string> = {
  document: 'bg-blue-500/20 text-blue-400',
  image: 'bg-green-500/20 text-green-400',
  video: 'bg-purple-500/20 text-purple-400',
  audio: 'bg-orange-500/20 text-orange-400',
  archive: 'bg-gray-500/20 text-gray-400',
  other: 'bg-slate-500/20 text-slate-400',
};

const statusColors: Record<ZZResource['status'], { bg: string; text: string; label: string }> = {
  active: { bg: 'bg-green-500/20', text: 'text-green-400', label: '使用中' },
  archived: { bg: 'bg-gray-500/20', text: 'text-gray-400', label: '已归档' },
  draft: { bg: 'bg-yellow-500/20', text: 'text-yellow-400', label: '草稿' },
};

const categories = ['全部', '品牌资产', '营销素材', '音频素材', '设计素材', '模板素材', '归档文件'];

const ZZResourceManagement: React.FC<ZZResourceManagementProps> = ({ onNavigate }) => {
  const { theme } = useTheme();
  const isDark = theme === 'dark';

  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('全部');
  const [selectedStatus, setSelectedStatus] = useState<string>('all');
  const [selectedResource, setSelectedResource] = useState<ZZResource | null>(null);
  const [showUploadModal, setShowUploadModal] = useState(false);

  const filteredResources = mockResources.filter(resource => {
    const matchesSearch = resource.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      resource.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
      resource.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()));
    const matchesCategory = selectedCategory === '全部' || resource.category === selectedCategory;
    const matchesStatus = selectedStatus === 'all' || resource.status === selectedStatus;
    return matchesSearch && matchesCategory && matchesStatus;
  });

  const stats = {
    total: mockResources.length,
    active: mockResources.filter(r => r.status === 'active').length,
    archived: mockResources.filter(r => r.status === 'archived').length,
    draft: mockResources.filter(r => r.status === 'draft').length,
  };

  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className={`p-2 rounded-lg ${isDark ? 'bg-blue-500/20' : 'bg-red-100'}`}>
            <FileBox className={`w-6 h-6 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
          </div>
          <div>
            <h1 className={`text-2xl font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
              ZZ资源管理
            </h1>
            <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
              管理各类制作资源和素材文件
            </p>
          </div>
        </div>
        <button
          onClick={() => setShowUploadModal(true)}
          className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all ${
            isDark
              ? 'bg-blue-600 hover:bg-blue-500 text-white'
              : 'bg-red-500 hover:bg-red-600 text-white'
          }`}
        >
          <Upload className="w-4 h-4" />
          上传资源
        </button>
      </div>

      {/* 统计卡片 */}
      <div className="grid grid-cols-4 gap-4">
        <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-blue-800/30' : 'border-red-100'}`}>
          <div className="flex items-center justify-between">
            <div>
              <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>资源总数</p>
              <p className={`text-2xl font-semibold mt-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>{stats.total}</p>
            </div>
            <div className={`p-3 rounded-lg ${isDark ? 'bg-blue-500/20' : 'bg-red-50'}`}>
              <FileBox className={`w-6 h-6 ${isDark ? 'text-blue-400' : 'text-red-400'}`} />
            </div>
          </div>
        </div>
        <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-green-800/30' : 'border-green-100'}`}>
          <div className="flex items-center justify-between">
            <div>
              <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>使用中</p>
              <p className={`text-2xl font-semibold mt-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>{stats.active}</p>
            </div>
            <div className={`p-3 rounded-lg bg-green-500/20`}>
              <FileText className="w-6 h-6 text-green-400" />
            </div>
          </div>
        </div>
        <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-gray-700' : 'border-gray-200'}`}>
          <div className="flex items-center justify-between">
            <div>
              <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>已归档</p>
              <p className={`text-2xl font-semibold mt-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>{stats.archived}</p>
            </div>
            <div className={`p-3 rounded-lg bg-gray-500/20`}>
              <Archive className="w-6 h-6 text-gray-400" />
            </div>
          </div>
        </div>
        <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-yellow-800/30' : 'border-yellow-100'}`}>
          <div className="flex items-center justify-between">
            <div>
              <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>草稿</p>
              <p className={`text-2xl font-semibold mt-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>{stats.draft}</p>
            </div>
            <div className={`p-3 rounded-lg bg-yellow-500/20`}>
              <Edit className="w-6 h-6 text-yellow-400" />
            </div>
          </div>
        </div>
      </div>

      {/* 筛选和搜索 */}
      <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-blue-800/30' : 'border-red-100'}`}>
        <div className="flex items-center gap-4 flex-wrap">
          {/* 搜索框 */}
          <div className="flex-1 min-w-[200px] relative">
            <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
            <input
              type="text"
              placeholder="搜索资源名称、描述或标签..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className={`w-full pl-10 pr-4 py-2 rounded-lg border transition-all ${
                isDark
                  ? 'bg-slate-900/50 border-slate-700 text-white placeholder-slate-500 focus:border-blue-500'
                  : 'bg-gray-50 border-gray-200 text-gray-900 placeholder-gray-400 focus:border-red-400'
              }`}
            />
          </div>

          {/* 分类筛选 */}
          <div className="flex items-center gap-2">
            <Filter className={`w-4 h-4 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
            <select
              value={selectedCategory}
              onChange={(e) => setSelectedCategory(e.target.value)}
              className={`px-3 py-2 rounded-lg border transition-all ${
                isDark
                  ? 'bg-slate-900/50 border-slate-700 text-white'
                  : 'bg-gray-50 border-gray-200 text-gray-900'
              }`}
            >
              {categories.map(cat => (
                <option key={cat} value={cat}>{cat}</option>
              ))}
            </select>
          </div>

          {/* 状态筛选 */}
          <div className="flex items-center gap-2">
            <select
              value={selectedStatus}
              onChange={(e) => setSelectedStatus(e.target.value)}
              className={`px-3 py-2 rounded-lg border transition-all ${
                isDark
                  ? 'bg-slate-900/50 border-slate-700 text-white'
                  : 'bg-gray-50 border-gray-200 text-gray-900'
              }`}
            >
              <option value="all">全部状态</option>
              <option value="active">使用中</option>
              <option value="archived">已归档</option>
              <option value="draft">草稿</option>
            </select>
          </div>

          {/* 视图切换 */}
          <div className={`flex items-center rounded-lg p-1 ${isDark ? 'bg-slate-900/50' : 'bg-gray-100'}`}>
            <button
              onClick={() => setViewMode('grid')}
              className={`p-2 rounded-md transition-all ${
                viewMode === 'grid'
                  ? isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-white text-red-500 shadow-sm'
                  : isDark ? 'text-slate-400' : 'text-gray-500'
              }`}
            >
              <Grid3X3 className="w-4 h-4" />
            </button>
            <button
              onClick={() => setViewMode('list')}
              className={`p-2 rounded-md transition-all ${
                viewMode === 'list'
                  ? isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-white text-red-500 shadow-sm'
                  : isDark ? 'text-slate-400' : 'text-gray-500'
              }`}
            >
              <List className="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>

      {/* 资源列表 */}
      {viewMode === 'grid' ? (
        <div className="grid grid-cols-3 gap-4">
          {filteredResources.map(resource => (
            <div
              key={resource.id}
              className={`p-4 rounded-xl cursor-pointer transition-all hover:scale-[1.02] ${
                isDark ? 'bg-slate-800/50 hover:bg-slate-800' : 'bg-white hover:bg-gray-50'
              } border ${isDark ? 'border-blue-800/30' : 'border-red-100'} hover:border-blue-500/50`}
              onClick={() => setSelectedResource(resource)}
            >
              <div className="flex items-start justify-between mb-3">
                <div className={`p-3 rounded-lg ${typeColors[resource.type]}`}>
                  {typeIcons[resource.type]}
                </div>
                <span className={`px-2 py-1 rounded text-xs font-medium ${statusColors[resource.status].bg} ${statusColors[resource.status].text}`}>
                  {statusColors[resource.status].label}
                </span>
              </div>
              <h3 className={`font-medium mb-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>
                {resource.name}
              </h3>
              <p className={`text-sm mb-3 line-clamp-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                {resource.description}
              </p>
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  {resource.tags.slice(0, 2).map(tag => (
                    <span
                      key={tag}
                      className={`px-2 py-0.5 rounded text-xs ${
                        isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-100 text-gray-600'
                      }`}
                    >
                      {tag}
                    </span>
                  ))}
                </div>
                <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
                  {resource.size}
                </span>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className={`rounded-xl overflow-hidden border ${isDark ? 'bg-slate-800/50 border-blue-800/30' : 'bg-white border-red-100'}`}>
          <table className="w-full">
            <thead className={isDark ? 'bg-slate-900/50' : 'bg-gray-50'}>
              <tr>
                <th className={`px-4 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>资源名称</th>
                <th className={`px-4 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>类型</th>
                <th className={`px-4 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>分类</th>
                <th className={`px-4 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>大小</th>
                <th className={`px-4 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>状态</th>
                <th className={`px-4 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>更新日期</th>
                <th className={`px-4 py-3 text-right text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>操作</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200 dark:divide-slate-700">
              {filteredResources.map(resource => (
                <tr
                  key={resource.id}
                  className={`cursor-pointer transition-colors ${isDark ? 'hover:bg-slate-700/50' : 'hover:bg-gray-50'}`}
                  onClick={() => setSelectedResource(resource)}
                >
                  <td className={`px-4 py-3 ${isDark ? 'text-white' : 'text-gray-900'}`}>
                    <div className="flex items-center gap-3">
                      <div className={`p-2 rounded-lg ${typeColors[resource.type]}`}>
                        {typeIcons[resource.type]}
                      </div>
                      <div>
                        <p className="font-medium">{resource.name}</p>
                        <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{resource.author}</p>
                      </div>
                    </div>
                  </td>
                  <td className={`px-4 py-3 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
                    {resource.type === 'document' ? '文档' :
                     resource.type === 'image' ? '图片' :
                     resource.type === 'video' ? '视频' :
                     resource.type === 'audio' ? '音频' :
                     resource.type === 'archive' ? '归档' : '其他'}
                  </td>
                  <td className={`px-4 py-3 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>{resource.category}</td>
                  <td className={`px-4 py-3 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>{resource.size}</td>
                  <td className="px-4 py-3">
                    <span className={`px-2 py-1 rounded text-xs font-medium ${statusColors[resource.status].bg} ${statusColors[resource.status].text}`}>
                      {statusColors[resource.status].label}
                    </span>
                  </td>
                  <td className={`px-4 py-3 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{resource.updatedAt}</td>
                  <td className="px-4 py-3">
                    <div className="flex items-center justify-end gap-2" onClick={(e) => e.stopPropagation()}>
                      <button className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}>
                        <Download className="w-4 h-4" />
                      </button>
                      <button className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}>
                        <Edit className="w-4 h-4" />
                      </button>
                      <button className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-red-500/20 text-red-400' : 'hover:bg-red-50 text-red-500'}`}>
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* 资源详情弹窗 */}
      {selectedResource && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50" onClick={() => setSelectedResource(null)}>
          <div
            className={`w-full max-w-2xl rounded-2xl ${isDark ? 'bg-slate-800' : 'bg-white'} shadow-xl`}
            onClick={(e) => e.stopPropagation()}
          >
            <div className="p-6 border-b ${isDark ? 'border-slate-700' : 'border-gray-200'}">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className={`p-3 rounded-lg ${typeColors[selectedResource.type]}`}>
                    {typeIcons[selectedResource.type]}
                  </div>
                  <div>
                    <h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
                      {selectedResource.name}
                    </h2>
                    <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                      {selectedResource.category} · {selectedResource.size}
                    </p>
                  </div>
                </div>
                <button
                  onClick={() => setSelectedResource(null)}
                  className={`p-2 rounded-lg ${isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}
                >
                  <ChevronRight className="w-5 h-5" />
                </button>
              </div>
            </div>
            <div className="p-6 space-y-4">
              <div>
                <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>描述</p>
                <p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedResource.description}</p>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>创建者</p>
                  <p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedResource.author}</p>
                </div>
                <div>
                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>创建时间</p>
                  <p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedResource.createdAt}</p>
                </div>
                <div>
                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>更新时间</p>
                  <p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedResource.updatedAt}</p>
                </div>
                <div>
                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>状态</p>
                  <span className={`px-2 py-1 rounded text-xs font-medium ${statusColors[selectedResource.status].bg} ${statusColors[selectedResource.status].text}`}>
                    {statusColors[selectedResource.status].label}
                  </span>
                </div>
              </div>
              <div>
                <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-2`}>标签</p>
                <div className="flex flex-wrap gap-2">
                  {selectedResource.tags.map(tag => (
                    <span
                      key={tag}
                      className={`px-3 py-1 rounded-full text-sm ${
                        isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-100 text-gray-600'
                      }`}
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
            </div>
            <div className={`p-6 border-t ${isDark ? 'border-slate-700' : 'border-gray-200'} flex justify-end gap-3`}>
              <button
                className={`px-4 py-2 rounded-lg font-medium transition-colors ${
                  isDark ? 'bg-slate-700 hover:bg-slate-600 text-white' : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
                }`}
              >
                <Download className="w-4 h-4 inline mr-2" />
                下载
              </button>
              <button
                className={`px-4 py-2 rounded-lg font-medium transition-colors ${
                  isDark ? 'bg-blue-600 hover:bg-blue-500 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
                }`}
              >
                <Edit className="w-4 h-4 inline mr-2" />
                编辑
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default ZZResourceManagement;