import React, { useState } from 'react';
import { useTheme } from '../contexts/ThemeContext';
import {
  Scale,
  Search,
  Plus,
  Edit,
  Trash2,
  Download,
  Filter,
  Folder,
  FolderOpen,
  ChevronRight,
  TrendingUp,
  TrendingDown,
  Minus,
  Target,
  CheckCircle,
  AlertCircle,
  Clock,
  Star,
  BarChart3,
  PieChart,
  Activity,
  Settings,
  Copy,
  Link2,
  FileText,
  User,
  Calendar,
} from 'lucide-react';
import { PageType } from '../components/Sidebar';

interface EvaluationIndex {
  id: string;
  name: string;
  category: string;
  type: 'quantitative' | 'qualitative' | 'composite';
  weight: number;
  description: string;
  calculationMethod?: string;
  dataSource?: string;
  updateFrequency: 'realtime' | 'hourly' | 'daily' | 'weekly' | 'monthly' | 'quarterly';
  status: 'active' | 'draft' | 'deprecated';
  createdAt: string;
  updatedAt: string;
  author: string;
  tags: string[];
  baseline?: number;
  target?: number;
  currentValue?: number;
  trend: 'up' | 'down' | 'stable';
  relatedIndices: string[];
}

interface EvaluationSystem {
  id: string;
  name: string;
  description: string;
  category: string;
  indices: string[];
  status: 'active' | 'draft' | 'archived';
  createdAt: string;
  updatedAt: string;
  author: string;
}

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

const mockIndices: EvaluationIndex[] = [
  {
    id: 'idx-001',
    name: '网络影响力指数',
    category: '影响力评估',
    type: 'composite',
    weight: 0.25,
    description: '综合评估目标在网络空间的影响力水平',
    calculationMethod: '加权平均法',
    dataSource: '社交媒体数据、新闻报道量',
    updateFrequency: 'daily',
    status: 'active',
    createdAt: '2023-06-15',
    updatedAt: '2024-03-10',
    author: '评估组A',
    tags: ['影响力', '网络', '综合'],
    baseline: 50,
    target: 80,
    currentValue: 72,
    trend: 'up',
    relatedIndices: ['idx-002', 'idx-003'],
  },
  {
    id: 'idx-002',
    name: '传播范围指数',
    category: '传播效果',
    type: 'quantitative',
    weight: 0.20,
    description: '衡量信息在网络中的传播覆盖范围',
    calculationMethod: '触达人数 × 地域覆盖率',
    dataSource: '平台API数据',
    updateFrequency: 'realtime',
    status: 'active',
    createdAt: '2023-07-20',
    updatedAt: '2024-03-12',
    author: '评估组B',
    tags: ['传播', '覆盖', '定量'],
    baseline: 10000,
    target: 50000,
    currentValue: 42500,
    trend: 'up',
    relatedIndices: ['idx-001'],
  },
  {
    id: 'idx-003',
    name: '舆论倾向指数',
    category: '舆情分析',
    type: 'qualitative',
    weight: 0.30,
    description: '评估网络舆论对目标的整体态度倾向',
    calculationMethod: '情感分析模型',
    dataSource: '社交媒体评论、新闻评论区',
    updateFrequency: 'hourly',
    status: 'active',
    createdAt: '2023-08-10',
    updatedAt: '2024-03-11',
    author: '评估组A',
    tags: ['舆情', '情感', '定性'],
    baseline: 0,
    target: 75,
    currentValue: 68,
    trend: 'stable',
    relatedIndices: ['idx-001', 'idx-004'],
  },
  {
    id: 'idx-004',
    name: '响应时效指数',
    category: '效能评估',
    type: 'quantitative',
    weight: 0.15,
    description: '评估对网络事件的响应速度',
    calculationMethod: '平均响应时间 (小时)',
    dataSource: '事件追踪系统',
    updateFrequency: 'weekly',
    status: 'active',
    createdAt: '2023-09-05',
    updatedAt: '2024-03-08',
    author: '评估组C',
    tags: ['时效', '效能', '定量'],
    baseline: 24,
    target: 4,
    currentValue: 6,
    trend: 'down',
    relatedIndices: ['idx-005'],
  },
  {
    id: 'idx-005',
    name: '协调联动指数',
    category: '协作效能',
    type: 'composite',
    weight: 0.10,
    description: '评估多部门协作的顺畅程度',
    calculationMethod: '任务完成率 × 沟通效率',
    dataSource: '协同办公系统',
    updateFrequency: 'monthly',
    status: 'draft',
    createdAt: '2024-01-15',
    updatedAt: '2024-03-05',
    author: '评估组D',
    tags: ['协作', '联动', '综合'],
    trend: 'stable',
    relatedIndices: ['idx-004'],
  },
  {
    id: 'idx-006',
    name: '风险预警准确率',
    category: '预警效能',
    type: 'quantitative',
    weight: 0.25,
    description: '风险预警的准确程度',
    calculationMethod: '准确预警数 / 总预警数',
    dataSource: '预警系统日志',
    updateFrequency: 'monthly',
    status: 'active',
    createdAt: '2023-10-20',
    updatedAt: '2024-02-28',
    author: '评估组A',
    tags: ['预警', '准确率', '定量'],
    baseline: 60,
    target: 90,
    currentValue: 82,
    trend: 'up',
    relatedIndices: [],
  },
  {
    id: 'idx-007',
    name: '策略有效性指数',
    category: '策略评估',
    type: 'composite',
    weight: 0.30,
    description: '评估所采取措施的有效性',
    calculationMethod: '多维度加权评估',
    dataSource: '策略执行数据、效果追踪',
    updateFrequency: 'quarterly',
    status: 'active',
    createdAt: '2023-11-10',
    updatedAt: '2024-03-01',
    author: '评估组B',
    tags: ['策略', '效果', '综合'],
    baseline: 50,
    target: 85,
    currentValue: 78,
    trend: 'up',
    relatedIndices: ['idx-001', 'idx-003'],
  },
  {
    id: 'idx-008',
    name: '信息完整度',
    category: '数据质量',
    type: 'quantitative',
    weight: 0.10,
    description: '目标画像信息的完整程度',
    calculationMethod: '已填写字段数 / 总字段数',
    dataSource: '画像数据库',
    updateFrequency: 'weekly',
    status: 'deprecated',
    createdAt: '2023-05-01',
    updatedAt: '2024-01-15',
    author: '评估组C',
    tags: ['数据', '完整度', '定量'],
    trend: 'stable',
    relatedIndices: [],
  },
];

const mockSystems: EvaluationSystem[] = [
  {
    id: 'sys-001',
    name: '网络态势综合评估体系',
    description: '用于评估网络空间整体态势的综合指标体系',
    category: '态势评估',
    indices: ['idx-001', 'idx-002', 'idx-003'],
    status: 'active',
    createdAt: '2023-06-01',
    updatedAt: '2024-03-10',
    author: '评估部',
  },
  {
    id: 'sys-002',
    name: '响应效能评估体系',
    description: '评估应急响应和处置效能的指标体系',
    category: '效能评估',
    indices: ['idx-004', 'idx-005'],
    status: 'active',
    createdAt: '2023-09-01',
    updatedAt: '2024-03-08',
    author: '效能组',
  },
];

const typeLabels: Record<EvaluationIndex['type'], string> = {
  quantitative: '定量',
  qualitative: '定性',
  composite: '综合',
};

const typeColors: Record<EvaluationIndex['type'], string> = {
  quantitative: 'bg-blue-500/20 text-blue-400',
  qualitative: 'bg-purple-500/20 text-purple-400',
  composite: 'bg-orange-500/20 text-orange-400',
};

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

const frequencyLabels: Record<EvaluationIndex['updateFrequency'], string> = {
  realtime: '实时',
  hourly: '每小时',
  daily: '每日',
  weekly: '每周',
  monthly: '每月',
  quarterly: '每季度',
};

const trendIcons: Record<EvaluationIndex['trend'], React.ReactNode> = {
  up: <TrendingUp className="w-4 h-4 text-green-400" />,
  down: <TrendingDown className="w-4 h-4 text-red-400" />,
  stable: <Minus className="w-4 h-4 text-gray-400" />,
};

const categories = ['全部', '影响力评估', '传播效果', '舆情分析', '效能评估', '协作效能', '预警效能', '策略评估', '数据质量'];

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

  const [viewMode, setViewMode] = useState<'index' | 'system'>('index');
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('全部');
  const [selectedType, setSelectedType] = useState<string>('all');
  const [selectedStatus, setSelectedStatus] = useState<string>('all');
  const [selectedIndex, setSelectedIndex] = useState<EvaluationIndex | null>(null);
  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set(['影响力评估', '传播效果', '舆情分析']));

  const filteredIndices = mockIndices.filter(index => {
    const matchesSearch = index.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      index.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
      index.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()));
    const matchesCategory = selectedCategory === '全部' || index.category === selectedCategory;
    const matchesType = selectedType === 'all' || index.type === selectedType;
    const matchesStatus = selectedStatus === 'all' || index.status === selectedStatus;
    return matchesSearch && matchesCategory && matchesType && matchesStatus;
  });

  const stats = {
    total: mockIndices.length,
    active: mockIndices.filter(i => i.status === 'active').length,
    draft: mockIndices.filter(i => i.status === 'draft').length,
    deprecated: mockIndices.filter(i => i.status === 'deprecated').length,
  };

  const groupedIndices = filteredIndices.reduce((acc, index) => {
    if (!acc[index.category]) {
      acc[index.category] = [];
    }
    acc[index.category].push(index);
    return acc;
  }, {} as Record<string, EvaluationIndex[]>);

  const toggleCategory = (category: string) => {
    setExpandedCategories(prev => {
      const next = new Set(prev);
      if (next.has(category)) {
        next.delete(category);
      } else {
        next.add(category);
      }
      return next;
    });
  };

  const calculateProgress = (index: EvaluationIndex) => {
    if (!index.baseline || !index.target || !index.currentValue) return null;
    const progress = ((index.currentValue - index.baseline) / (index.target - index.baseline)) * 100;
    return Math.min(Math.max(progress, 0), 100);
  };

  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-amber-500/20' : 'bg-amber-100'}`}>
            <Scale className={`w-6 h-6 ${isDark ? 'text-amber-400' : 'text-amber-600'}`} />
          </div>
          <div>
            <h1 className={`text-2xl font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
              评估指标体系资源管理
            </h1>
            <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
              管理和维护评估指标库与指标体系
            </p>
          </div>
        </div>
        <div className="flex items-center gap-3">
          <button
            className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all ${
              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" />
            导出
          </button>
          <button
            className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all ${
              isDark
                ? 'bg-amber-600 hover:bg-amber-500 text-white'
                : 'bg-amber-500 hover:bg-amber-600 text-white'
            }`}
          >
            <Plus className="w-4 h-4" />
            添加指标
          </button>
        </div>
      </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-amber-800/30' : 'border-amber-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-amber-500/20' : 'bg-amber-50'}`}>
              <Scale className={`w-6 h-6 ${isDark ? 'text-amber-400' : 'text-amber-500'}`} />
            </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`}>
              <CheckCircle 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-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 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.deprecated}</p>
            </div>
            <div className={`p-3 rounded-lg bg-gray-500/20`}>
              <AlertCircle className="w-6 h-6 text-gray-400" />
            </div>
          </div>
        </div>
      </div>

      {/* 视图切换和筛选栏 */}
      <div className="space-y-4">
        {/* 视图切换 */}
        <div className={`flex items-center rounded-lg p-1 w-fit ${isDark ? 'bg-slate-800/50' : 'bg-gray-100'}`}>
          <button
            onClick={() => setViewMode('index')}
            className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
              viewMode === 'index'
                ? isDark ? 'bg-amber-500/20 text-amber-400' : 'bg-white text-amber-600 shadow-sm'
                : isDark ? 'text-slate-400' : 'text-gray-500'
            }`}
          >
            <Scale className="w-4 h-4 inline mr-2" />
            指标管理
          </button>
          <button
            onClick={() => setViewMode('system')}
            className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
              viewMode === 'system'
                ? isDark ? 'bg-amber-500/20 text-amber-400' : 'bg-white text-amber-600 shadow-sm'
                : isDark ? 'text-slate-400' : 'text-gray-500'
            }`}
          >
            <BarChart3 className="w-4 h-4 inline mr-2" />
            体系管理
          </button>
        </div>

        {/* 筛选栏 */}
        <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-amber-800/30' : 'border-amber-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-amber-500'
                    : 'bg-gray-50 border-gray-200 text-gray-900 placeholder-gray-400 focus:border-amber-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>

            {/* 类型筛选 */}
            <select
              value={selectedType}
              onChange={(e) => setSelectedType(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="quantitative">定量</option>
              <option value="qualitative">定性</option>
              <option value="composite">综合</option>
            </select>

            {/* 状态筛选 */}
            <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="draft">草稿</option>
              <option value="deprecated">已废弃</option>
            </select>
          </div>
        </div>
      </div>

      {/* 指标列表 */}
      {viewMode === 'index' ? (
        <div className={`rounded-xl overflow-hidden border ${isDark ? 'bg-slate-800/50 border-amber-800/30' : 'bg-white border-amber-100'}`}>
          {Object.entries(groupedIndices).map(([category, indices]) => (
            <div key={category} className="border-b border-gray-200 dark:border-slate-700 last:border-b-0">
              {/* 分类标题 */}
              <button
                onClick={() => toggleCategory(category)}
                className={`w-full px-4 py-3 flex items-center justify-between ${
                  isDark ? 'hover:bg-slate-700/50' : 'hover:bg-gray-50'
                } transition-colors`}
              >
                <div className="flex items-center gap-3">
                  {expandedCategories.has(category) ? (
                    <FolderOpen className={`w-5 h-5 ${isDark ? 'text-amber-400' : 'text-amber-500'}`} />
                  ) : (
                    <Folder className={`w-5 h-5 ${isDark ? 'text-amber-400' : 'text-amber-500'}`} />
                  )}
                  <span className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
                    {category}
                  </span>
                  <span className={`px-2 py-0.5 rounded-full text-xs ${
                    isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-100 text-gray-600'
                  }`}>
                    {indices.length}个指标
                  </span>
                </div>
                <ChevronRight className={`w-4 h-4 transition-transform ${expandedCategories.has(category) ? 'rotate-90' : ''} ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
              </button>

              {/* 指标列表 */}
              {expandedCategories.has(category) && (
                <div className={`${isDark ? 'bg-slate-900/30' : 'bg-gray-50/50'}`}>
                  {indices.map((index, idx) => (
                    <div
                      key={index.id}
                      className={`px-4 py-4 cursor-pointer transition-colors ${
                        isDark ? 'hover:bg-slate-700/50' : 'hover:bg-white'
                      } ${idx !== indices.length - 1 ? 'border-b border-gray-200 dark:border-slate-700/50' : ''}`}
                      onClick={() => setSelectedIndex(index)}
                    >
                      <div className="flex items-start justify-between">
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center gap-3 mb-2">
                            <div className={`p-2 rounded-lg ${typeColors[index.type]}`}>
                              {index.type === 'quantitative' ? <BarChart3 className="w-4 h-4" /> :
                               index.type === 'qualitative' ? <PieChart className="w-4 h-4" /> :
                               <Activity className="w-4 h-4" />}
                            </div>
                            <div>
                              <h3 className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
                                {index.name}
                              </h3>
                              <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                                {index.description}
                              </p>
                            </div>
                          </div>

                          {/* 进度条 */}
                          {index.currentValue !== undefined && index.baseline !== undefined && index.target !== undefined && (
                            <div className="mt-3">
                              <div className="flex items-center justify-between mb-1">
                                <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                                  当前值: {index.currentValue}
                                </span>
                                <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                                  目标: {index.target}
                                </span>
                              </div>
                              <div className="h-2 bg-gray-200 dark:bg-slate-700 rounded-full overflow-hidden">
                                <div
                                  className={`h-full transition-all ${
                                    calculateProgress(index)! >= 100 ? 'bg-green-500' :
                                    calculateProgress(index)! >= 50 ? 'bg-amber-500' : 'bg-red-500'
                                  }`}
                                  style={{ width: `${calculateProgress(index)}%` }}
                                />
                              </div>
                            </div>
                          )}
                        </div>

                        <div className="flex items-center gap-3 ml-4">
                          <div className="text-right">
                            <div className="flex items-center gap-2">
                              <span className={`px-2 py-1 rounded text-xs ${typeColors[index.type]}`}>
                                {typeLabels[index.type]}
                              </span>
                              <span className={`px-2 py-1 rounded text-xs ${statusColors[index.status].bg} ${statusColors[index.status].text}`}>
                                {statusColors[index.status].label}
                              </span>
                            </div>
                            <div className="flex items-center gap-2 mt-1 justify-end">
                              {index.trend && trendIcons[index.trend]}
                              <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                                {index.updateFrequency === 'realtime' ? '实时' :
                                 index.updateFrequency === 'daily' ? '每日' :
                                 index.updateFrequency === 'weekly' ? '每周' :
                                 index.updateFrequency === 'monthly' ? '每月' : '每季度'}
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div className="flex items-center gap-4 mt-3 pt-3 border-t border-gray-200 dark:border-slate-700/50">
                        <div className="flex items-center gap-1 text-sm">
                          <Star className={`w-4 h-4 ${isDark ? 'text-amber-400' : 'text-amber-500'}`} />
                          <span className={isDark ? 'text-slate-400' : 'text-gray-500'}>权重: {index.weight * 100}%</span>
                        </div>
                        <div className="flex flex-wrap gap-2">
                          {index.tags.slice(0, 3).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>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>
      ) : (
        /* 体系管理视图 */
        <div className="grid grid-cols-2 gap-4">
          {mockSystems.map(system => (
            <div
              key={system.id}
              className={`p-5 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-amber-800/30' : 'border-amber-100'}`}
            >
              <div className="flex items-start justify-between mb-3">
                <div className="flex items-center gap-3">
                  <div className={`p-3 rounded-lg ${isDark ? 'bg-amber-500/20' : 'bg-amber-50'}`}>
                    <BarChart3 className={`w-6 h-6 ${isDark ? 'text-amber-400' : 'text-amber-500'}`} />
                  </div>
                  <div>
                    <h3 className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
                      {system.name}
                    </h3>
                    <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                      {system.category}
                    </p>
                  </div>
                </div>
                <span className={`px-2 py-1 rounded text-xs font-medium ${
                  system.status === 'active' ? 'bg-green-500/20 text-green-400' :
                  system.status === 'draft' ? 'bg-yellow-500/20 text-yellow-400' :
                  'bg-gray-500/20 text-gray-400'
                }`}>
                  {system.status === 'active' ? '使用中' : system.status === 'draft' ? '草稿' : '已归档'}
                </span>
              </div>
              <p className={`text-sm mb-4 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                {system.description}
              </p>
              <div className="flex items-center justify-between pt-3 border-t border-gray-200 dark:border-slate-700">
                <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                  包含 {system.indices.length} 个指标
                </span>
                <div className="flex items-center gap-2">
                  <button className={`p-1.5 rounded-lg ${isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}>
                    <Edit className="w-4 h-4" />
                  </button>
                  <button className={`p-1.5 rounded-lg ${isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}>
                    <Copy className="w-4 h-4" />
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* 指标详情弹窗 */}
      {selectedIndex && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50" onClick={() => setSelectedIndex(null)}>
          <div
            className={`w-full max-w-3xl rounded-2xl ${isDark ? 'bg-slate-800' : 'bg-white'} shadow-xl max-h-[90vh] overflow-y-auto`}
            onClick={(e) => e.stopPropagation()}
          >
            <div className="sticky top-0 p-6 border-b ${isDark ? 'border-slate-700 bg-slate-800' : 'border-gray-200 bg-white'}">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className={`p-3 rounded-lg ${typeColors[selectedIndex.type]}`}>
                    {selectedIndex.type === 'quantitative' ? <BarChart3 className="w-5 h-5" /> :
                     selectedIndex.type === 'qualitative' ? <PieChart className="w-5 h-5" /> :
                     <Activity className="w-5 h-5" />}
                  </div>
                  <div>
                    <div className="flex items-center gap-2">
                      <h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
                        {selectedIndex.name}
                      </h2>
                      <span className={`px-2 py-0.5 rounded text-xs ${typeColors[selectedIndex.type]}`}>
                        {typeLabels[selectedIndex.type]}
                      </span>
                    </div>
                    <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                      {selectedIndex.category}
                    </p>
                  </div>
                </div>
                <button
                  onClick={() => setSelectedIndex(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-6">
              <div>
                <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-2`}>指标描述</p>
                <p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedIndex.description}</p>
              </div>

              {selectedIndex.calculationMethod && (
                <div className={`p-4 rounded-lg ${isDark ? 'bg-slate-900/50' : 'bg-gray-50'}`}>
                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>计算方法</p>
                  <p className={isDark ? 'text-white' : 'text-gray-700'}>{selectedIndex.calculationMethod}</p>
                </div>
              )}

              {selectedIndex.dataSource && (
                <div>
                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>数据来源</p>
                  <p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedIndex.dataSource}</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={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
                    {selectedIndex.weight * 100}%
                  </p>
                </div>
                <div>
                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>更新频率</p>
                  <p className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
                    {frequencyLabels[selectedIndex.updateFrequency]}
                  </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[selectedIndex.status].bg} ${statusColors[selectedIndex.status].text}`}>
                    {statusColors[selectedIndex.status].label}
                  </span>
                </div>
                <div>
                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>趋势</p>
                  <div className="flex items-center gap-2">
                    {trendIcons[selectedIndex.trend]}
                    <span className={isDark ? 'text-white' : 'text-gray-900'}>
                      {selectedIndex.trend === 'up' ? '上升' : selectedIndex.trend === 'down' ? '下降' : '稳定'}
                    </span>
                  </div>
                </div>
                {selectedIndex.baseline !== undefined && (
                  <div>
                    <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>基线值</p>
                    <p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedIndex.baseline}</p>
                  </div>
                )}
                {selectedIndex.target !== undefined && (
                  <div>
                    <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>目标值</p>
                    <p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedIndex.target}</p>
                  </div>
                )}
                {selectedIndex.currentValue !== undefined && (
                  <div>
                    <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>当前值</p>
                    <p className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>{selectedIndex.currentValue}</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'}>{selectedIndex.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'}>{selectedIndex.updatedAt}</p>
                </div>
              </div>

              <div>
                <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-2`}>标签</p>
                <div className="flex flex-wrap gap-2">
                  {selectedIndex.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>

              {selectedIndex.relatedIndices.length > 0 && (
                <div>
                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-2`}>关联指标</p>
                  <div className="flex flex-wrap gap-2">
                    {selectedIndex.relatedIndices.map(relatedId => {
                      const related = mockIndices.find(i => i.id === relatedId);
                      return related ? (
                        <span
                          key={relatedId}
                          className={`px-3 py-1 rounded-full text-sm cursor-pointer ${
                            isDark ? 'bg-amber-500/20 text-amber-400' : 'bg-amber-50 text-amber-600'
                          }`}
                        >
                          {related.name}
                        </span>
                      ) : null;
                    })}
                  </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-amber-600 hover:bg-amber-500 text-white' : 'bg-amber-500 hover:bg-amber-600 text-white'
                }`}
              >
                <Edit className="w-4 h-4 inline mr-2" />
                编辑
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default EvaluationIndexResourceManagement;