import React, { useState, useEffect, useRef, useCallback } from 'react';
import { evolutionAPI } from '@/api';
import type { EvolutionSkill, EvolutionEvent, EvolutionProfile, SkillTreeData, StatisticsData, SkillState } from '@/types';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
import './EvolutionDashboard.css';
import { formatBjTime } from '@/utils/datetime';

// ==================== SVG Icons ====================
const Icon: React.FC<{ children: React.ReactNode; size?: number; className?: string }> = ({ children, size = 16, className }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
    {children}
  </svg>
);

const panelIcons: Record<string, React.ReactNode> = {
  'skill-tree': <Icon size={18}><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></Icon>,
  timeline: <Icon size={18}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></Icon>,
  statistics: <Icon size={18}><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></Icon>,
  profile: <Icon size={18}><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></Icon>,
  reports: <Icon size={18}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></Icon>,
};

const panelLabels: Record<string, string> = {
  'skill-tree': '技能图谱',
  timeline: '进化时间线',
  statistics: '技能使用统计',
  profile: 'AI能力画像',
  reports: '进化报告',
};

// ==================== Config ====================
const stateConfig: Record<SkillState, { label: string; color: string; bg: string; dot: string }> = {
  baby: { label: '萌芽', color: '#E8922C', bg: '#FEF4E8', dot: '#E8922C' },
  main: { label: '成熟', color: '#219B5E', bg: '#E6F7EE', dot: '#219B5E' },
  staging: { label: '验证', color: '#8B5CF6', bg: '#F3F0FF', dot: '#8B5CF6' },
  frozen: { label: '冻结', color: '#8B919E', bg: '#F1F3F7', dot: '#BFC4CE' },
};

const eventTypeConfig: Record<string, { label: string; color: string; icon: React.ReactNode }> = {
  created: { label: '诞生', color: '#E8922C', icon: <Icon size={12}><path d="M12 2L15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></Icon> },
  promoted: { label: '晋升', color: '#219B5E', icon: <Icon size={12}><polyline points="20 6 9 17 4 12"/></Icon> },
  rejected: { label: '退回', color: '#D9383A', icon: <Icon size={12}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></Icon> },
  frozen: { label: '冻结', color: '#8B919E', icon: <Icon size={12}><rect x="3" y="11" width="18" height="11" rx="2"/></Icon> },
  unfrozen: { label: '解冻', color: '#3B82F6', icon: <Icon size={12}><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/></Icon> },
  edited: { label: '更新', color: '#5B5FED', icon: <Icon size={12}><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/></Icon> },
  deleted: { label: '删除', color: '#D9383A', icon: <Icon size={12}><polyline points="3 6 5 6 21 6"/></Icon> },
  milestone: { label: '里程碑', color: '#8B5CF6', icon: <Icon size={12}><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></Icon> },
  rolled_back: { label: '回滚', color: '#D9383A', icon: <Icon size={12}><polyline points="1 4 1 10 7 10"/><path d="M3.5 17A9 9 0 1 0 2 12"/></Icon> },
};

const shareThemes = [
  { id: 'deep', name: '深空蓝', bg: 'linear-gradient(135deg, #1A1A3E 0%, #2D2D6B 50%, #1A1A2E 100%)', accent: '#8185F5', text: '#E8E6FF' },
  { id: 'aurora', name: '极光绿', bg: 'linear-gradient(135deg, #0A2E1F 0%, #0F4A33 50%, #0A2E1F 100%)', accent: '#219B5E', text: '#D1FAE5' },
  { id: 'sunset', name: '暖阳橙', bg: 'linear-gradient(135deg, #3D1F00 0%, #5C2D0E 50%, #3D1F00 100%)', accent: '#E8922C', text: '#FEF3C7' },
];

// ==================== Real API version history ====================
// Version history is now fetched from the real API via evolutionAPI.getSkillHistory()


// ==================== Panel A: Skill Tree ====================
const SkillTreePanel: React.FC<{
  skills: EvolutionSkill[];
  animEnabled: boolean;
  onToggleAnim: () => void;
}> = ({ skills, animEnabled, onToggleAnim }) => {
  const [hoveredSkill, setHoveredSkill] = useState<string | null>(null);
  const [selectedSkill, setSelectedSkill] = useState<EvolutionSkill | null>(null);
  const [showVersionHistory, setShowVersionHistory] = useState(false);
  const [showRollbackConfirm, setShowRollbackConfirm] = useState<{ version: number } | null>(null);
  const [showPublishModal, setShowPublishModal] = useState(false);
  const [publishPrice, setPublishPrice] = useState(0);
  const [publishDesc, setPublishDesc] = useState('');
  const [rollbackMsg, setRollbackMsg] = useState('');
  const [publishMsg, setPublishMsg] = useState('');
  const [versionHistory, setVersionHistory] = useState<EvolutionEvent[]>([]);
  const [loadingHistory, setLoadingHistory] = useState(false);

  const categories = [...new Set(skills.map(s => s.category))];
  const groupedByCategory = categories.map(cat => ({
    category: cat,
    skills: skills.filter(s => s.category === cat),
  }));

  // Fetch real version history from API
  const loadVersionHistory = async (skillName: string) => {
    setLoadingHistory(true);
    try {
      const res = await evolutionAPI.getSkillHistory(skillName);
      if (res?.data) {
        const events = Array.isArray(res.data) ? res.data : (res.data as any)?.events || [];
        setVersionHistory(events);
      } else {
        setVersionHistory([]);
      }
    } catch {
      setVersionHistory([]);
    } finally {
      setLoadingHistory(false);
    }
  };

  const handleRollback = async (targetVersion: number) => {
    if (!selectedSkill) return;
    try {
      await evolutionAPI.rollbackSkill(selectedSkill.skill_name, targetVersion);
      setRollbackMsg(`技能 "${selectedSkill.skill_name}" 已回滚到版本 v${targetVersion}`);
      setShowVersionHistory(false);
      setShowRollbackConfirm(null);
      setSelectedSkill(prev => prev ? { ...prev, version: targetVersion } : null);
      setTimeout(() => setRollbackMsg(''), 3000);
    } catch (err: any) {
      setRollbackMsg(`回滚失败: ${err.message || '未知错误'}`);
      setTimeout(() => setRollbackMsg(''), 3000);
    }
  };

  const handlePublish = async () => {
    if (!selectedSkill) return;
    try {
      await evolutionAPI.publishSkill(selectedSkill.skill_name, { price: publishPrice, market_description: publishDesc });
      setPublishMsg(`技能 "${selectedSkill.skill_name}" 已发布到应用市场`);
      setShowPublishModal(false);
      setTimeout(() => setPublishMsg(''), 3000);
    } catch (err: any) {
      setPublishMsg(`发布失败: ${err.message || '未知错误'}`);
      setTimeout(() => setPublishMsg(''), 3000);
    }
  };

  return (
    <div className="evo-panel-content">
      {/* Rollback toast */}
      {rollbackMsg && <div className="evo-toast evo-toast-success">{rollbackMsg}</div>}
      {/* Publish toast */}
      {publishMsg && <div className="evo-toast evo-toast-info">{publishMsg}</div>}

      {/* Anim Toggle */}
      <div className="evo-panel-toolbar">
        <label className="evo-anim-toggle">
          <input type="checkbox" checked={animEnabled} onChange={onToggleAnim} />
          <span>动画效果</span>
        </label>
      </div>

      {/* Skill detail modal */}
      {selectedSkill && !showVersionHistory && (
        <div className="evo-skill-detail-modal" onClick={() => setSelectedSkill(null)}>
          <div className="evo-skill-detail-card" onClick={e => e.stopPropagation()}>
            <div className="evo-skill-detail-header">
              <span className={`evo-state-badge ${selectedSkill.state}`}>{stateConfig[selectedSkill.state].label}</span>
              <h3>{selectedSkill.skill_name}</h3>
              <button className="evo-close-btn" onClick={() => setSelectedSkill(null)}>
                <Icon size={18}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></Icon>
              </button>
            </div>
            <p className="evo-skill-detail-desc">{selectedSkill.description}</p>
            <div className="evo-skill-detail-meta">
              <div className="evo-meta-item">
                <span className="evo-meta-label">版本</span>
                <span>v{selectedSkill.version}</span>
              </div>
              <div className="evo-meta-item">
                <span className="evo-meta-label">使用次数</span>
                <span>{selectedSkill.use_count.toLocaleString()}</span>
              </div>
              <div className="evo-meta-item">
                <span className="evo-meta-label">分类</span>
                <span>{selectedSkill.category}</span>
              </div>
              <div className="evo-meta-item">
                <span className="evo-meta-label">创建日期</span>
                <span>{new Date(selectedSkill.created_at).toLocaleDateString()}</span>
              </div>
            </div>
            <div className="evo-skill-detail-tags">
              {selectedSkill.tags.map(t => <span key={t} className="evo-tag">{t}</span>)}
            </div>
            <div className="evo-skill-detail-actions">
              <button className="evo-btn evo-btn-outline evo-btn-sm">编辑技能</button>
              <button className="evo-btn evo-btn-outline evo-btn-sm" onClick={() => { setShowVersionHistory(true); loadVersionHistory(selectedSkill.skill_name); }}>版本历史</button>
              <button className="evo-btn evo-btn-outline evo-btn-sm">来源对话</button>
              {selectedSkill.state === 'main' && (
                <button className="evo-btn evo-btn-outline evo-btn-sm" style={{ color: '#E8922C', borderColor: '#E8922C' }} onClick={() => { setPublishDesc(selectedSkill.description); setPublishPrice(0); setShowPublishModal(true); }}>
                  发布到市场
                </button>
              )}
            </div>
          </div>
        </div>
      )}

      {/* Version History Modal */}
      {selectedSkill && showVersionHistory && (
        <div className="evo-skill-detail-modal" onClick={() => { setShowVersionHistory(false); setShowRollbackConfirm(null); }}>
          <div className="evo-skill-detail-card" onClick={e => e.stopPropagation()}>
            <div className="evo-skill-detail-header">
              <h3>版本历史 - {selectedSkill.skill_name}</h3>
              <button className="evo-close-btn" onClick={() => { setShowVersionHistory(false); setShowRollbackConfirm(null); }}>
                <Icon size={18}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></Icon>
              </button>
            </div>
            <p style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-tertiary)', marginBottom: 'var(--space-lg)' }}>
              当前版本: v{selectedSkill.version}
            </p>
            {loadingHistory ? (
              <p style={{ textAlign: 'center', padding: 'var(--space-xl)', color: 'var(--color-text-tertiary)' }}>加载中...</p>
            ) : (
              <div className="evo-version-list">
                {versionHistory.length > 0 ? versionHistory.map((entry, idx) => {
                  const ec = eventTypeConfig[entry.event_type] || eventTypeConfig.edited;
                  const entryVersion = entry.version_after || entry.version_before || 1;
                  const isCurrent = entryVersion === selectedSkill.version;
                  return (
                    <div key={entry.id || idx} className="evo-version-item">
                      <div className="evo-version-line">
                        <div className="evo-version-dot" style={{ background: isCurrent ? 'var(--color-accent)' : ec.color }}>
                          {ec.icon}
                        </div>
                        {idx < versionHistory.length - 1 && <div className="evo-version-connector" />}
                      </div>
                      <div className="evo-version-content">
                        <div className="evo-version-header">
                          <span className="evo-version-num">v{entryVersion}</span>
                          {isCurrent && <span className="evo-version-current">当前</span>}
                          <span className="evo-version-type" style={{ color: ec.color }}>{ec.label}</span>
                        </div>
                        <p className="evo-version-desc">{entry.description}</p>
                        <div className="evo-version-meta">
                          <span>{new Date(entry.created_at).toLocaleDateString()}</span>
                          {!isCurrent && (
                            <button
                              className="evo-btn evo-btn-outline evo-btn-sm"
                              style={{ color: '#D9383A', borderColor: '#D9383A' }}
                              onClick={() => setShowRollbackConfirm({ version: entryVersion })}
                            >
                              回滚到此版本
                            </button>
                          )}
                        </div>
                      </div>
                    </div>
                  );
                }) : (
                  <p style={{ textAlign: 'center', color: 'var(--color-text-tertiary)', padding: 'var(--space-xl)' }}>暂无版本历史</p>
                )}
              </div>
            )}
          </div>
        </div>
      )}

      {/* Rollback Confirm Modal */}
      {showRollbackConfirm && selectedSkill && (
        <div className="evo-confirm-overlay" onClick={() => setShowRollbackConfirm(null)}>
          <div className="evo-confirm-card" onClick={e => e.stopPropagation()}>
            <div className="evo-confirm-icon">
              <Icon size={28}><polyline points="1 4 1 10 7 10"/><path d="M3.5 17A9 9 0 1 0 2 12"/></Icon>
            </div>
            <h4>确认回滚？</h4>
            <p>确认回滚到版本 <strong>v{showRollbackConfirm.version}</strong>？当前版本 <strong>v{selectedSkill.version}</strong> 的修改将被撤销。</p>
            <div className="evo-confirm-actions">
              <button className="evo-btn evo-btn-outline" onClick={() => setShowRollbackConfirm(null)}>取消</button>
              <button className="evo-btn evo-btn-primary" style={{ background: '#D9383A' }} onClick={() => handleRollback(showRollbackConfirm.version)}>确认回滚</button>
            </div>
          </div>
        </div>
      )}

      {/* Publish to Market Modal */}
      {showPublishModal && selectedSkill && (
        <div className="evo-confirm-overlay" onClick={() => setShowPublishModal(false)}>
          <div className="evo-confirm-card evo-publish-card" onClick={e => e.stopPropagation()}>
            <h4>发布到应用市场</h4>
            <p style={{ fontSize: 'var(--text-sm)', color: 'var(--color-text-tertiary)', marginBottom: 'var(--space-xl)' }}>
              将进化技能 "{selectedSkill.skill_name}" 发布到应用市场Skills分类
            </p>
            <div className="admin-form-group">
              <label className="admin-form-label">价格 (元)</label>
              <input className="admin-form-input" type="number" min={0} value={publishPrice} onChange={e => setPublishPrice(Number(e.target.value))} />
            </div>
            <div className="admin-form-group">
              <label className="admin-form-label">市场描述</label>
              <textarea className="admin-form-input" rows={3} value={publishDesc} onChange={e => setPublishDesc(e.target.value)} />
            </div>
            <div className="evo-confirm-actions">
              <button className="evo-btn evo-btn-outline" onClick={() => setShowPublishModal(false)}>取消</button>
              <button className="evo-btn evo-btn-primary" onClick={handlePublish}>确认发布</button>
            </div>
          </div>
        </div>
      )}

      {/* Skill tree */}
      <div className="evo-skill-tree">
        {groupedByCategory.map(group => (
          <div key={group.category} className="evo-skill-branch">
            <div className="evo-branch-label">{group.category}</div>
            <div className="evo-branch-nodes">
              {group.skills.map((skill, idx) => {
                const sc = stateConfig[skill.state];
                const isHovered = hoveredSkill === skill.id;
                return (
                  <React.Fragment key={skill.id}>
                    {idx > 0 && <div className="evo-node-connector" />}
                    <div
                      className={`evo-skill-node ${skill.state} ${isHovered ? 'hovered' : ''} ${animEnabled ? 'anim-on' : ''}`}
                      onMouseEnter={() => setHoveredSkill(skill.id)}
                      onMouseLeave={() => setHoveredSkill(null)}
                      onClick={() => setSelectedSkill(skill)}
                    >
                      <div className="evo-node-dot" style={{ background: sc.dot }} />
                      <div className="evo-node-info">
                        <span className="evo-node-name">{skill.skill_name}</span>
                        <span className="evo-node-meta">{skill.use_count}次</span>
                      </div>
                      {isHovered && (
                        <div className="evo-node-tooltip">
                          <div className="evo-tooltip-title">{skill.skill_name}</div>
                          <div className="evo-tooltip-desc">{skill.description}</div>
                          <div className="evo-tooltip-meta">
                            <span>v{skill.version}</span>
                            <span>{new Date(skill.updated_at).toLocaleDateString()}</span>
                          </div>
                        </div>
                      )}
                    </div>
                  </React.Fragment>
                );
              })}
            </div>
          </div>
        ))}
      </div>

      <div className="evo-legend">
        {Object.entries(stateConfig).map(([key, sc]) => (
          <span key={key} className="evo-legend-item">
            <span className="evo-legend-dot" style={{ background: sc.dot }} />
            {sc.label}
          </span>
        ))}
      </div>
    </div>
  );
};

// ==================== Panel B: Timeline (with export) ====================
const TimelinePanel: React.FC<{
  events: EvolutionEvent[];
  onViewSkill?: (skillName: string) => void;
}> = ({ events, onViewSkill }) => {
  const [filterType, setFilterType] = useState<string>('all');
  const [showExportMenu, setShowExportMenu] = useState(false);
  const [dateRange, setDateRange] = useState<'7d' | '30d' | 'all'>('all');
  const [exporting, setExporting] = useState(false);
  const [exportMsg, setExportMsg] = useState('');
  const timelineRef = useRef<HTMLDivElement>(null);

  const now = new Date();
  let filteredEvents = filterType === 'all' ? events : events.filter(e => e.event_type === filterType);

  // Apply date range filter
  if (dateRange !== 'all') {
    const cutoff = new Date();
    cutoff.setDate(cutoff.getDate() - (dateRange === '7d' ? 7 : 30));
    filteredEvents = filteredEvents.filter(e => new Date(e.created_at) >= cutoff);
  }

  const sortedEvents = [...filteredEvents].sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());

  const handleExport = async (format: 'png' | 'pdf') => {
    setExporting(true);
    setShowExportMenu(false);
    const username = (() => {
      try { return JSON.parse(localStorage.getItem('aiflow_user') || '{}').username || 'user'; } catch { return 'user'; }
    })();
    const dateStr = new Date().toISOString().slice(0, 10);
    const filename = `AI进化时间线_${username}_${dateStr}`;

    try {
      const target = timelineRef.current;
      if (!target) throw new Error('未找到时间线DOM');

      const canvas = await html2canvas(target, {
        backgroundColor: '#FFFFFF',
        scale: 2,
        logging: false,
      });

      if (format === 'png') {
        const link = document.createElement('a');
        link.download = `${filename}.png`;
        link.href = canvas.toDataURL('image/png');
        link.click();
        setExportMsg(`时间线已导出为 PNG: ${filename}.png`);
      } else {
        const pdf = new jsPDF('p', 'mm', 'a4');
        const imgData = canvas.toDataURL('image/png');
        const pageWidth = pdf.internal.pageSize.getWidth();
        const pageHeight = pdf.internal.pageSize.getHeight();
        const imgWidth = pageWidth - 20;
        const imgHeight = (canvas.height * imgWidth) / canvas.width;

        // 添加标题
        pdf.setFontSize(16);
        pdf.text('我的AI进化时间线', 10, 15);
        pdf.setFontSize(10);
        pdf.text(`生成日期: ${dateStr}`, 10, 22);
        pdf.text('Qihu-AIFlow', pageWidth - 10, 22, { align: 'right' });

        // 单页添加图片，自动缩放适应
        const maxHeight = pageHeight - 35;
        const finalH = Math.min(imgHeight, maxHeight);
        pdf.addImage(imgData, 'PNG', 10, 28, imgWidth, finalH);

        // 底部水印
        pdf.setFontSize(8);
        pdf.setTextColor(200, 200, 200);
        pdf.text('Qihu-AIFlow', pageWidth / 2, pageHeight - 5, { align: 'center' });

        pdf.save(`${filename}.pdf`);
        setExportMsg(`时间线已导出为 PDF: ${filename}.pdf`);
      }
    } catch (err: any) {
      setExportMsg(`导出失败: ${err.message || '未知错误'}`);
    } finally {
      setExporting(false);
      setTimeout(() => setExportMsg(''), 3000);
    }
  };

  return (
    <div className="evo-panel-content">
      {/* Export toast */}
      {exportMsg && <div className="evo-toast evo-toast-success">{exportMsg}</div>}

      {/* Toolbar: date range + export */}
      <div className="evo-panel-toolbar">
        <div className="evo-timeline-filters">
          {['all', 'created', 'promoted', 'milestone', 'edited', 'frozen', 'rejected'].map(t => (
            <button key={t} className={`evo-filter-chip ${filterType === t ? 'active' : ''}`} onClick={() => setFilterType(t)}>
              {t === 'all' ? '全部' : eventTypeConfig[t]?.label || t}
            </button>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 'var(--space-sm)', alignItems: 'center' }}>
          <select className="evo-date-select" value={dateRange} onChange={e => setDateRange(e.target.value as any)}>
            <option value="all">全部时间</option>
            <option value="30d">最近30天</option>
            <option value="7d">最近7天</option>
          </select>
          <div className="evo-export-wrap">
            <button
              className="evo-btn evo-btn-outline evo-btn-sm"
              onClick={() => setShowExportMenu(!showExportMenu)}
              disabled={exporting}
            >
              {exporting ? '导出中...' : '导出'}
            </button>
            {showExportMenu && (
              <div className="evo-export-dropdown">
                <button onClick={() => handleExport('png')}>导出为 PNG</button>
                <button onClick={() => handleExport('pdf')}>导出为 PDF</button>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Timeline */}
      <div className="evo-timeline" ref={timelineRef}>
        {sortedEvents.map((event, idx) => {
          const ec = eventTypeConfig[event.event_type];
          return (
            <div key={event.id} className="evo-timeline-item">
              <div className="evo-timeline-line">
                <div className="evo-timeline-dot" style={{ background: ec?.color || '#5B5FED' }}>{ec?.icon}</div>
                {idx < sortedEvents.length - 1 && <div className="evo-timeline-connector" />}
              </div>
              <div className="evo-timeline-card">
                <div className="evo-timeline-card-header">
                  <span className="evo-timeline-type" style={{ color: ec?.color }}>{ec?.label}</span>
                  <span className="evo-timeline-skill" style={{ cursor: 'pointer', textDecoration: 'underline' }} onClick={() => onViewSkill?.(event.skill_name)}>{event.skill_name}</span>
                </div>
                <p className="evo-timeline-desc">{event.description}</p>
                <div className="evo-timeline-time">
                  <Icon size={12}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></Icon>
                  {formatBjTime(event.created_at)}
                </div>
              </div>
            </div>
          );
        })}
        {sortedEvents.length === 0 && (
          <p style={{ textAlign: 'center', color: 'var(--color-text-tertiary)', padding: 'var(--space-3xl)' }}>该时间范围内暂无进化事件</p>
        )}
      </div>
    </div>
  );
};

// ==================== Panel C: Statistics ====================
const StatisticsPanel: React.FC<{ stats: StatisticsData; onViewSkill?: (skillName: string) => void }> = ({ stats, onViewSkill }) => {
  const sortedByUse = [...stats.ranking].sort((a, b) => b.use_count - a.use_count);
  const maxUse = sortedByUse[0]?.use_count || 1;
  const totalUse = stats.total_use_count;
  const zeroUseSkills = stats.low_use_skills || [];
  const catColors = ['#5B5FED', '#E8922C', '#219B5E', '#D9383A', '#8B5CF6'];

  return (
    <div className="evo-panel-content">
      <div className="evo-stats-grid">
        <div className="evo-stats-card">
          <h4 className="evo-card-title">技能使用排行</h4>
          <div className="evo-ranking-list">
            {sortedByUse.map((s, idx) => (
              <div key={s.skill_name} className="evo-ranking-item" style={{ cursor: 'pointer' }} onClick={() => onViewSkill?.(s.skill_name)}>
                <span className={`evo-rank-num ${idx < 3 ? 'top' : ''}`}>{idx + 1}</span>
                <div className="evo-rank-info">
                  <span className="evo-rank-name">{s.skill_name}</span>
                  <span className="evo-rank-cat">{s.category}</span>
                </div>
                <div className="evo-rank-bar-wrap">
                  <div className="evo-rank-bar" style={{ width: `${(s.use_count / maxUse) * 100}%`, background: catColors[idx % 5] }} />
                </div>
                <span className="evo-rank-count">{s.use_count}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="evo-stats-card">
          <h4 className="evo-card-title">技能调用趋势（近7天）</h4>
          <div className="evo-trend-chart">
            <div className="evo-trend-lines">
              {sortedByUse.slice(0, 4).map((s, idx) => {
                const sAny = s as any;
                const trend: number[] = sAny.trend || [0,0,0,0,0,0,0];
                const maxT = Math.max(...trend, 1);
                return (
                  <div key={s.skill_name} className="evo-trend-line-row">
                    <span className="evo-trend-label" style={{ color: catColors[idx] }}>{s.skill_name}</span>
                    <div className="evo-trend-bar-row">
                      {trend.map((v: number, i: number) => (
                        <div key={i} className="evo-trend-bar" style={{ height: `${(v / maxT) * 100}%`, background: catColors[idx] }} title={`Day ${i + 1}: ${v}次`} />
                      ))}
                    </div>
                    <span className="evo-trend-total">{s.use_count}</span>
                  </div>
                );
              })}
            </div>
            <div className="evo-trend-xaxis">
              {['一', '二', '三', '四', '五', '六', '日'].map(d => <span key={d}>{d}</span>)}
            </div>
          </div>
        </div>
        <div className="evo-stats-card">
          <h4 className="evo-card-title">技能类别分布</h4>
          <div className="evo-category-pie">
            <div className="evo-pie-visual">
              <svg width="140" height="140" viewBox="0 0 140 140">
                {(() => {
                  let cumulative = 0;
                  const dist = stats.category_distribution || [];
                  const entries = [...dist].sort((a, b) => b.count - a.count);
                  return entries.map((item, idx) => {
                    const count = item.count;
                    const angle = (count / totalUse) * 360;
                    const start = cumulative;
                    cumulative += angle;
                    const startRad = (start - 90) * Math.PI / 180;
                    const endRad = (start + angle - 90) * Math.PI / 180;
                    const cx = 70, cy = 70, r = 55;
                    const x1 = cx + r * Math.cos(startRad);
                    const y1 = cy + r * Math.sin(startRad);
                    const x2 = cx + r * Math.cos(endRad);
                    const y2 = cy + r * Math.sin(endRad);
                    const large = angle > 180 ? 1 : 0;
                    return <path key={idx} d={`M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z`} fill={catColors[idx % 5]} opacity="0.85" />;
                  });
                })()}
              </svg>
              <div className="evo-pie-center">
                <span className="evo-pie-total">{totalUse.toLocaleString()}</span>
                <span className="evo-pie-label">总次数</span>
              </div>
            </div>
            <div className="evo-pie-legend">
              {[...(stats.category_distribution || [])].sort((a, b) => b.count - a.count).map((item, idx) => (
                <div key={item.category} className="evo-pie-legend-item">
                  <span className="evo-pie-dot" style={{ background: catColors[idx % 5] }} />
                  <span className="evo-pie-name">{item.category}</span>
                  <span className="evo-pie-pct">{Math.round((item.count / totalUse) * 100)}%</span>
                </div>
              ))}
            </div>
          </div>
        </div>
        {zeroUseSkills.length > 0 && (
          <div className="evo-stats-card evo-stats-full">
            <h4 className="evo-card-title">低使用技能提醒<span className="evo-card-subtitle">超过30天未使用的技能</span></h4>
            <div className="evo-zero-list">
              {zeroUseSkills.map((s: any) => (
                <div key={s.skill_name} className="evo-zero-item">
                  <Icon size={14}><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></Icon>
                  <span>{s.skill_name}</span>
                  <span className="evo-zero-cat">{s.category}</span>
                  <span className="evo-zero-last">最近: {new Date(s.last_used_at).toLocaleDateString()}</span>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

// ==================== Panel D: Profile (with share card) ====================
const ProfilePanel: React.FC<{ profile: EvolutionProfile; skills: EvolutionSkill[] }> = ({ profile, skills }) => {
  const levelProgress = (profile.level / 10) * 100;
  const [showShareCard, setShowShareCard] = useState(false);
  const [shareTheme, setShareTheme] = useState('deep');
  const [shareMsg, setShareMsg] = useState('');
  const shareCardRef = useRef<HTMLDivElement>(null);

  const currentTheme = shareThemes.find(t => t.id === shareTheme) || shareThemes[0];

  const handleShare = async (action: 'save' | 'copy') => {
    if (!shareCardRef.current) {
      setShowShareCard(false);
      return;
    }
    try {
      const canvas = await html2canvas(shareCardRef.current, {
        backgroundColor: null,
        scale: 2,
        logging: false,
      });
      if (action === 'save') {
        const link = document.createElement('a');
        link.download = `AI进化画像_${new Date().toISOString().slice(0, 10)}.png`;
        link.href = canvas.toDataURL('image/png');
        link.click();
        setShareMsg('画像卡片已保存到本地');
      } else {
        const blob = await new Promise<Blob>((resolve) => canvas.toBlob((b) => resolve(b!), 'image/png'));
        await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
        setShareMsg('画像卡片已复制到剪贴板');
      }
    } catch (err: any) {
      setShareMsg(`操作失败: ${err.message || '未知错误'}`);
    }
    setShowShareCard(false);
    setTimeout(() => setShareMsg(''), 3000);
  };

  return (
    <div className="evo-panel-content">
      {/* Share toast */}
      {shareMsg && <div className="evo-toast evo-toast-success">{shareMsg}</div>}

      {/* Share button */}
      <div className="evo-panel-toolbar">
        <button className="evo-btn evo-btn-outline evo-btn-sm" onClick={() => setShowShareCard(true)}>
          <Icon size={14}><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></Icon>
          分享画像
        </button>
      </div>

      {/* Share Card Modal */}
      {showShareCard && (
        <div className="evo-confirm-overlay" onClick={() => setShowShareCard(false)}>
          <div className="evo-share-modal" onClick={e => e.stopPropagation()}>
            <div className="evo-share-modal-header">
              <h4>AI能力画像分享</h4>
              <button className="evo-close-btn" onClick={() => setShowShareCard(false)}>
                <Icon size={18}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></Icon>
              </button>
            </div>

            {/* Theme picker */}
            <div className="evo-share-themes">
              {shareThemes.map(t => (
                <button
                  key={t.id}
                  className={`evo-share-theme-btn ${shareTheme === t.id ? 'active' : ''}`}
                  style={{ background: t.bg }}
                  onClick={() => setShareTheme(t.id)}
                >
                  <span style={{ color: t.accent }}>{t.name}</span>
                </button>
              ))}
            </div>

            {/* Share Card Preview */}
            <div className="evo-share-card-wrap">
              <div className="evo-share-card" ref={shareCardRef} style={{ background: currentTheme.bg, color: currentTheme.text }}>
                <div className="evo-share-card-top">
                  <div className="evo-share-logo">
                    <svg width="24" height="24" viewBox="0 0 32 32" fill="none">
                      <rect width="32" height="32" rx="8" fill={currentTheme.accent} />
                      <path d="M8 20V12l4 4 4-4v8" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
                    </svg>
                    <span style={{ fontSize: '13px', fontWeight: 700 }}>AIFlow</span>
                  </div>
                  <h3 style={{ fontSize: '18px', fontWeight: 700, margin: '8px 0 0', color: currentTheme.text }}>我的AI进化画像</h3>
                </div>

                {/* Level */}
                <div className="evo-share-level">
                  <svg width="100" height="100" viewBox="0 0 100 100">
                    <circle cx="50" cy="50" r="42" fill="none" stroke="rgba(255,255,255,0.2)" strokeWidth="6" />
                    <circle cx="50" cy="50" r="42" fill="none" stroke={currentTheme.accent} strokeWidth="6"
                      strokeLinecap="round" strokeDasharray={`${2 * Math.PI * 42}`}
                      strokeDashoffset={`${2 * Math.PI * 42 * (1 - levelProgress / 100)}`}
                      transform="rotate(-90 50 50)" />
                  </svg>
                  <div className="evo-share-level-center">
                    <span className="evo-share-level-num" style={{ color: currentTheme.accent }}>{profile.level}</span>
                    <span className="evo-share-level-label">{profile.level_title}</span>
                  </div>
                </div>

                {/* Dimensions */}
                <div className="evo-share-dims">
                  {profile.dimensions.map(d => (
                    <div key={d.label} className="evo-share-dim-item">
                      <span className="evo-share-dim-label">{d.label}</span>
                      <div className="evo-share-dim-bar">
                        <div className="evo-share-dim-fill" style={{ width: `${(d.value / d.maxValue) * 100}%`, background: currentTheme.accent }} />
                      </div>
                      <span className="evo-share-dim-val">{d.value}</span>
                    </div>
                  ))}
                </div>

                {/* Tags */}
                <div className="evo-share-tags">
                  {profile.tags.slice(0, 6).map(tag => (
                    <span key={tag} className="evo-share-tag" style={{ borderColor: currentTheme.accent, color: currentTheme.accent }}>{tag}</span>
                  ))}
                </div>

                {/* Footer */}
                <div className="evo-share-card-footer">
                  <span style={{ opacity: 0.5, fontSize: '11px' }}>{new Date().toLocaleDateString()}</span>
                  <span style={{ opacity: 0.5, fontSize: '11px' }}>Qihu-AIFlow</span>
                </div>
              </div>
            </div>

            {/* Actions */}
            <div className="evo-share-actions">
              <button className="evo-btn evo-btn-primary" onClick={() => handleShare('save')}>保存到相册</button>
              <button className="evo-btn evo-btn-outline" onClick={() => handleShare('copy')}>复制图片</button>
            </div>
          </div>
        </div>
      )}

      {/* Profile content */}
      <div className="evo-profile-grid">
        <div className="evo-profile-card evo-level-card">
          <div className="evo-level-display">
            <div className="evo-level-circle-wrap">
              <svg width="160" height="160" viewBox="0 0 160 160">
                <circle cx="80" cy="80" r="68" fill="none" stroke="var(--color-border)" strokeWidth="10" />
                <circle cx="80" cy="80" r="68" fill="none" stroke="url(#levelGrad)" strokeWidth="10" strokeLinecap="round"
                  strokeDasharray={`${2 * Math.PI * 68}`} strokeDashoffset={`${2 * Math.PI * 68 * (1 - levelProgress / 100)}`}
                  transform="rotate(-90 80 80)" style={{ transition: 'stroke-dashoffset 1s ease' }} />
                <defs>
                  <linearGradient id="levelGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stopColor="#5B5FED" /><stop offset="100%" stopColor="#8185F5" />
                  </linearGradient>
                </defs>
              </svg>
              <div className="evo-level-center">
                <span className="evo-level-num">{profile.level}</span>
                <span className="evo-level-title">{profile.level_title}</span>
              </div>
            </div>
          </div>
          <div className="evo-level-stats">
            <div className="evo-level-stat-item"><span className="evo-ls-num">{profile.total_skills}</span><span className="evo-ls-label">总技能</span></div>
            <div className="evo-level-stat-item"><span className="evo-ls-num">{profile.active_skills}</span><span className="evo-ls-label">活跃中</span></div>
            <div className="evo-level-stat-item"><span className="evo-ls-num">{profile.staging_skills}</span><span className="evo-ls-label">验证中</span></div>
            <div className="evo-level-stat-item"><span className="evo-ls-num">{profile.total_use_count.toLocaleString()}</span><span className="evo-ls-label">总调用</span></div>
          </div>
        </div>
        <div className="evo-profile-card evo-radar-card">
          <h4 className="evo-card-title">能力维度</h4>
          <div className="evo-radar-container">
            <svg width="280" height="240" viewBox="0 0 280 240">
              {[0.2, 0.4, 0.6, 0.8, 1.0].map((scale, ri) => (
                <polygon key={ri}
                  points={profile.dimensions.map((_, di) => { const angle = (di * 360 / profile.dimensions.length - 90) * Math.PI / 180; const r = 90 * scale; return `${140 + r * Math.cos(angle)},${120 + r * Math.sin(angle)}`; }).join(' ')}
                  fill="none" stroke="var(--color-border)" strokeWidth="1" opacity={ri === 4 ? 0.6 : 0.3} />
              ))}
              {profile.dimensions.map((_, di) => { const angle = (di * 360 / profile.dimensions.length - 90) * Math.PI / 180; return <line key={di} x1="140" y1="120" x2={140 + 90 * Math.cos(angle)} y2={120 + 90 * Math.sin(angle)} stroke="var(--color-border)" strokeWidth="1" opacity="0.5" />; })}
              <polygon
                points={profile.dimensions.map((d, di) => { const angle = (di * 360 / profile.dimensions.length - 90) * Math.PI / 180; const r = 90 * (d.value / d.maxValue); return `${140 + r * Math.cos(angle)},${120 + r * Math.sin(angle)}`; }).join(' ')}
                fill="rgba(91, 95, 237, 0.15)" stroke="#5B5FED" strokeWidth="2" />
              {profile.dimensions.map((d, di) => { const angle = (di * 360 / profile.dimensions.length - 90) * Math.PI / 180; const r = 90 * (d.value / d.maxValue); return <circle key={di} cx={140 + r * Math.cos(angle)} cy={120 + r * Math.sin(angle)} r="4" fill="#5B5FED" stroke="#FFFFFF" strokeWidth="2" />; })}
              {profile.dimensions.map((d, di) => { const angle = (di * 360 / profile.dimensions.length - 90) * Math.PI / 180; const lx = 140 + 108 * Math.cos(angle); const ly = 120 + 108 * Math.sin(angle); return <text key={di} x={lx} y={ly} textAnchor="middle" dominantBaseline="middle" fill="var(--color-text-secondary)" fontSize="11" fontFamily="var(--font-sans)">{d.label}</text>; })}
            </svg>
          </div>
        </div>
        <div className="evo-profile-card evo-tags-card">
          <h4 className="evo-card-title">能力标签</h4>
          <div className="evo-tag-cloud">
            {profile.tags.map((tag, i) => {
              const sizes = ['evo-tag-sm', 'evo-tag-md', 'evo-tag-lg', 'evo-tag-xl'];
              const tagColors = ['#5B5FED', '#E8922C', '#219B5E', '#8B5CF6', '#D9383A', '#3B82F6'];
              return <span key={tag} className={`evo-tag ${sizes[Math.min(i, sizes.length - 1)]}`} style={{ color: tagColors[i % 6], borderColor: tagColors[i % 6] }}>{tag}</span>;
            })}
          </div>
        </div>
        <div className="evo-profile-card evo-suggestions-card">
          <h4 className="evo-card-title">成长建议</h4>
          <div className="evo-suggestions-list">
            {profile.growth_suggestions.map((s: string, i: number) => (
              <div key={i} className="evo-suggestion-item">
                <Icon size={16}><path d="M12 2L15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></Icon>
                <span>{s}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

// ==================== Panel E: Evolution Reports (v2) ====================
const ReportsPanel: React.FC = () => {
  const [reports, setReports] = useState<import('@/types').EvolutionReport[]>([]);
  const [selectedReport, setSelectedReport] = useState<import('@/types').EvolutionReport | null>(null);
  const [loadingReports, setLoadingReports] = useState(true);

  useEffect(() => {
    evolutionAPI.getReports().then(res => {
      const data = res?.data;
      setReports(Array.isArray(data) ? data : (data as any)?.reports || []);
    }).catch(() => {}).finally(() => setLoadingReports(false));
  }, []);

  const handleViewReport = async (reportId: string) => {
    try {
      const res = await evolutionAPI.getReportDetail(reportId);
      if (res?.data) {
        setSelectedReport(res.data);
      }
    } catch {}
  };

  const reportData = selectedReport?.report_data || {};

  return (
    <div className="evo-panel-content">
      {selectedReport ? (
        <div className="evo-skill-detail-modal" onClick={() => setSelectedReport(null)}>
          <div className="evo-skill-detail-card" onClick={e => e.stopPropagation()}>
            <div className="evo-skill-detail-header">
              <h3>{selectedReport.report_type === 'weekly' ? '周报' : '月报'} - {selectedReport.period_start} ~ {selectedReport.period_end}</h3>
              <button className="evo-close-btn" onClick={() => setSelectedReport(null)}>
                <Icon size={18}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></Icon>
              </button>
            </div>
            <div className="evo-report-detail">
              <div className="evo-report-section">
                <h5>概览</h5>
                <div className="evo-report-stats-grid">
                  <div className="evo-report-stat">
                    <span className="evo-report-stat-value">{reportData.new_skills || 0}</span>
                    <span className="evo-report-stat-label">新增技能</span>
                  </div>
                  <div className="evo-report-stat">
                    <span className="evo-report-stat-value">{reportData.promoted_skills || 0}</span>
                    <span className="evo-report-stat-label">技能升级</span>
                  </div>
                  <div className="evo-report-stat">
                    <span className="evo-report-stat-value">{(reportData.total_calls || 0).toLocaleString()}</span>
                    <span className="evo-report-stat-label">总调用次数</span>
                  </div>
                </div>
              </div>
              {reportData.top_skills && reportData.top_skills.length > 0 && (
                <div className="evo-report-section">
                  <h5>最活跃技能 TOP5</h5>
                  {reportData.top_skills.map((s: any, i: number) => (
                    <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', fontSize: 'var(--text-sm)' }}>
                      <span>{i + 1}. {s.skill_name}</span>
                      <span style={{ color: 'var(--color-text-tertiary)' }}>{s.use_count}次</span>
                    </div>
                  ))}
                </div>
              )}
              {reportData.level_change && (
                <div className="evo-report-section">
                  <h5>等级变化</h5>
                  <p style={{ fontSize: 'var(--text-sm)', color: 'var(--color-text-secondary)' }}>
                    进化等级: Lv.{reportData.level_change.from || '?'} → Lv.{reportData.level_change.to || '?'}
                  </p>
                </div>
              )}
            </div>
          </div>
        </div>
      ) : loadingReports ? (
        <p style={{ textAlign: 'center', padding: 'var(--space-3xl)', color: 'var(--color-text-tertiary)' }}>加载中...</p>
      ) : (
        <div className="evo-reports-list">
          {reports.length > 0 ? reports.map(r => (
            <div key={r.id} className="evo-report-card" onClick={() => handleViewReport(r.id)}>
              <div className="evo-report-header">
                <span className="evo-report-type">{r.report_type === 'weekly' ? '📊 周报' : '📈 月报'}</span>
                <span className="evo-report-period">{r.period_start} ~ {r.period_end}</span>
              </div>
              <div className="evo-report-summary">
                {r.report_data?.summary || `${r.report_type === 'weekly' ? '本周' : '本月'}进化报告`}
              </div>
            </div>
          )) : (
            <p style={{ textAlign: 'center', padding: 'var(--space-3xl)', color: 'var(--color-text-tertiary)' }}>
              暂无进化报告。系统将在每周一自动生成周报。
            </p>
          )}
        </div>
      )}
    </div>
  );
};

// ==================== Main Dashboard ====================
const EvolutionDashboard: React.FC = () => {
  const [activePanel, setActivePanel] = useState<string>('skill-tree');
  const [skills, setSkills] = useState<EvolutionSkill[]>([]);
  const [events, setEvents] = useState<EvolutionEvent[]>([]);
  const [stats, setStats] = useState<StatisticsData | null>(null);
  const [profile, setProfile] = useState<EvolutionProfile | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [globalSelectedSkill, setGlobalSelectedSkill] = useState<EvolutionSkill | null>(null);
  const [animEnabled, setAnimEnabled] = useState(() => {
    return localStorage.getItem('evo_anim_enabled') !== 'false';
  });

  const totalSkills = skills.length;
  const mainCount = skills.filter(s => s.state === 'main').length;
  const babyCount = skills.filter(s => s.state === 'baby').length;

  const toggleAnim = useCallback(() => {
    setAnimEnabled(prev => {
      const next = !prev;
      localStorage.setItem('evo_anim_enabled', String(next));
      return next;
    });
  }, []);

  const handleViewSkill = (skillName: string) => {
    const skill = skills.find(s => s.skill_name === skillName);
    if (skill) {
      setGlobalSelectedSkill(skill);
    }
  };

  const loadDashboardData = useCallback(async () => {
    setLoading(true);
    setError('');
    try {
      const [skillsRes, eventsRes, statsRes, profileRes] = await Promise.all([
        evolutionAPI.getSkills().catch(() => null),
        evolutionAPI.getEvents().catch(() => null),
        evolutionAPI.getStatistics().catch(() => null),
        evolutionAPI.getProfile().catch(() => null),
      ]);
      // Use response data if available, else fallback to empty
      if (skillsRes?.data) {
        const sdata = skillsRes.data as any;
        setSkills(Array.isArray(sdata) ? sdata : (sdata?.skills || []));
      }
      if (eventsRes?.data) {
        const edata = eventsRes.data as any;
        setEvents(Array.isArray(edata) ? edata : (edata?.events || []));
      }
      if (statsRes?.data) setStats(statsRes.data);
      if (profileRes?.data) setProfile(profileRes.data);
    } catch {
      setError('加载进化数据失败，请检查网络连接后重试');
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => { loadDashboardData(); }, [loadDashboardData]);

  if (loading) {
    return (
      <div className="evo-dashboard">
        <div className="evo-loading"><div className="evo-loading-spinner" /><p>正在加载进化数据...</p></div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="evo-dashboard">
        <div className="evo-error"><p>{error}</p><button className="evo-btn evo-btn-outline" onClick={loadDashboardData}>重试</button></div>
      </div>
    );
  }

  return (
    <div className="evo-dashboard">
      <header className="evo-header">
        <div className="evo-header-left">
          <div className="evo-header-icon">
            <Icon size={20}><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/><path d="M0 0" opacity="0"/></Icon>
          </div>
          <div>
            <h1 className="evo-header-title">AI进化驾驶舱</h1>
            <p className="evo-header-sub">你的专属AI正在持续进化中</p>
          </div>
        </div>
        <div className="evo-header-stats">
          <div className="evo-header-stat"><span className="evo-hs-num">{totalSkills}</span><span className="evo-hs-label">技能总数</span></div>
          <div className="evo-header-stat"><span className="evo-hs-num" style={{ color: '#219B5E' }}>{mainCount}</span><span className="evo-hs-label">已成熟</span></div>
          <div className="evo-header-stat"><span className="evo-hs-num" style={{ color: '#E8922C' }}>{babyCount}</span><span className="evo-hs-label">萌芽中</span></div>
        </div>
      </header>

      {/* Global skill detail modal */}
      {globalSelectedSkill && (
        <div className="evo-skill-detail-modal" onClick={() => setGlobalSelectedSkill(null)}>
          <div className="evo-skill-detail-card" onClick={e => e.stopPropagation()}>
            <div className="evo-skill-detail-header">
              <span className={`evo-state-badge ${globalSelectedSkill.state}`}>{stateConfig[globalSelectedSkill.state].label}</span>
              <h3>{globalSelectedSkill.skill_name}</h3>
              <button className="evo-close-btn" onClick={() => setGlobalSelectedSkill(null)}>
                <Icon size={18}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></Icon>
              </button>
            </div>
            <p className="evo-skill-detail-desc">{globalSelectedSkill.description}</p>
            <div className="evo-skill-detail-meta">
              <div className="evo-meta-item"><span className="evo-meta-label">版本</span><span>v{globalSelectedSkill.version}</span></div>
              <div className="evo-meta-item"><span className="evo-meta-label">使用次数</span><span>{globalSelectedSkill.use_count.toLocaleString()}</span></div>
              <div className="evo-meta-item"><span className="evo-meta-label">分类</span><span>{globalSelectedSkill.category}</span></div>
              <div className="evo-meta-item"><span className="evo-meta-label">创建日期</span><span>{new Date(globalSelectedSkill.created_at).toLocaleDateString()}</span></div>
            </div>
            <div className="evo-skill-detail-tags">
              {globalSelectedSkill.tags.map(t => <span key={t} className="evo-tag">{t}</span>)}
            </div>
            <div className="evo-skill-detail-actions">
              <button className="evo-btn evo-btn-outline evo-btn-sm">编辑技能</button>
              <button className="evo-btn evo-btn-outline evo-btn-sm" onClick={() => { /* navigate to skill-tree panel first */ setActivePanel('skill-tree'); }}>版本历史</button>
              <button className="evo-btn evo-btn-outline evo-btn-sm">来源对话</button>
            </div>
          </div>
        </div>
      )}

      <div className="evo-body">
        <aside className="evo-sidebar">
          {Object.keys(panelLabels).map(key => (
            <button key={key} className={`evo-sidebar-item ${activePanel === key ? 'active' : ''}`} onClick={() => setActivePanel(key)}>
              {panelIcons[key]}<span>{panelLabels[key]}</span>
            </button>
          ))}
        </aside>
        <main className="evo-main">
          {activePanel === 'skill-tree' && <SkillTreePanel skills={skills} animEnabled={animEnabled} onToggleAnim={toggleAnim} />}
          {activePanel === 'timeline' && <TimelinePanel events={events} onViewSkill={handleViewSkill} />}
          {activePanel === 'statistics' && (stats ? <StatisticsPanel stats={stats} onViewSkill={handleViewSkill} /> : <div className="evo-panel-content"><p>加载中...</p></div>)}
          {activePanel === 'profile' && (profile ? <ProfilePanel profile={profile} skills={skills} /> : <div className="evo-panel-content"><p>加载中...</p></div>)}
          {activePanel === 'reports' && <ReportsPanel />}
        </main>
      </div>
    </div>
  );
};

export default EvolutionDashboard;