import React, { useState, useEffect, useRef, useMemo } from 'react';

const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_X = 400; // 将主图稍微偏左，右侧留给文字
const CENTER_Y = 300;
const RADIUS = 180;

// 五行配置
const ELEMENTS = [
  { id: 'wood', name: '木', label: 'Wood', color: '#10B981', desc: '生发、条达', organ: '肝 (Liver)' },
  { id: 'fire', name: '火', label: 'Fire', color: '#EF4444', desc: '温热、升腾', organ: '心 (Heart)' },
  { id: 'earth', name: '土', label: 'Earth', color: '#F59E0B', desc: '生化、承载', organ: '脾 (Spleen)' },
  { id: 'metal', name: '金', label: 'Metal', color: '#6B7280', desc: '清洁、收敛', organ: '肺 (Lung)' },
  { id: 'water', name: '水', label: 'Water', color: '#3B82F6', desc: '寒凉、滋润', organ: '肾 (Kidney)' },
];

// 辅助函数：计算多边形顶点
const getPolygonVertex = (index, total, radius, offsetAngle = -Math.PI / 2) => {
  const angle = (Math.PI * 2 * index) / total + offsetAngle;
  return {
    x: CENTER_X + Math.cos(angle) * radius,
    y: CENTER_Y + Math.sin(angle) * radius,
    angle
  };
};

export default function TCMPincipleAnimation() {
  const [frame, setFrame] = useState(0);
  const requestRef = useRef<number>();
  const startTimeRef = useRef<number>(Date.now());
  
  // 动画状态
  const [activeIdx, setActiveIdx] = useState(0);
  
  // 粒子系统 Ref，避免 React 渲染负担
  const particlesRef = useRef(
    Array.from({ length: 20 }, (_, i) => ({
      id: i,
      progress: Math.random(),
      speed: 0.005 + Math.random() * 0.005,
      pathIndex: Math.floor(Math.random() * 5)
    }))
  );

  // 启动主循环
  useEffect(() => {
    const animate = () => {
      const now = Date.now();
      const elapsed = now - startTimeRef.current;
      
      // 更新帧计数用于驱动视觉变化
      setFrame(elapsed); 
      
      // 更新激活元素逻辑 (每3秒切换一个元素)
      const cycleDuration = 3000; 
      const newActiveIdx = Math.floor((elapsed / cycleDuration) % 5);
      setActiveIdx(prev => (prev !== newActiveIdx ? newActiveIdx : prev));
      
      // 更新粒子逻辑
      particlesRef.current.forEach(p => {
        p.progress += p.speed;
        if (p.progress >= 1) {
          p.progress = 0;
          p.pathIndex = (p.pathIndex + 1) % 5; // 简单的循环流动
        }
      });

      requestRef.current = requestAnimationFrame(animate);
    };
    
    requestRef.current = requestAnimationFrame(animate);
    return () => {
      if (requestRef.current) cancelAnimationFrame(requestRef.current);
    };
  }, []);

  // 计算五行节点位置
  const nodes = useMemo(() => {
    return ELEMENTS.map((el, i) => {
      const pos = getPolygonVertex(i, 5, RADIUS, -Math.PI / 2); // 从顶部开始
      return { ...el, ...pos, index: i };
    });
  }, []);

  // 渲染太极图 (SVG Path)
  const renderTaiji = () => {
    const size = 80;
    // 随时间旋转
    const rotation = frame * 0.05; 
    
    return (
      <g transform={`translate(${CENTER_X}, ${CENTER_Y}) rotate(${rotation})`}>
        {/* 阴影/光晕 */}
        <circle r={size + 5} fill="none" stroke="#e5e7eb" strokeWidth="1" />
        <circle r={size + 15} fill="none" stroke="#e5e7eb" strokeWidth="1" strokeDasharray="4 4" opacity="0.5" />
        
        {/* 阳鱼 (白) */}
        <path d={`M 0 ${-size} A ${size} ${size} 0 0 1 0 ${size} A ${size/2} ${size/2} 0 0 1 0 0 A ${size/2} ${size/2} 0 0 0 0 ${-size}`} fill="#333" />
        {/* 阴鱼 (黑) - 这里用深灰色代表阴，白色背景上需要反差 */}
        <path d={`M 0 ${-size} A ${size} ${size} 0 0 0 0 ${size} A ${size/2} ${size/2} 0 0 1 0 0 A ${size/2} ${size/2} 0 0 0 0 ${-size}`} fill="#ddd" />
        
        {/* 鱼眼 */}
        <circle cx="0" cy={-size/2} r={size/6} fill="#ddd" />
        <circle cx="0" cy={size/2} r={size/6} fill="#333" />
      </g>
    );
  };

  // 渲染相生连线 (Pentagon borders)
  const renderConnections = () => {
    return nodes.map((node, i) => {
      const nextNode = nodes[(i + 1) % 5];
      // 高亮当前流动的路径
      const isActivePath = i === activeIdx; 
      
      return (
        <g key={`conn-${i}`}>
          {/* 基础连线 */}
          <line 
            x1={node.x} y1={node.y} 
            x2={nextNode.x} y2={nextNode.y} 
            stroke="#e5e7eb" 
            strokeWidth="2" 
          />
          {/* 动态高亮连线 */}
          <line 
            x1={node.x} y1={node.y} 
            x2={nextNode.x} y2={nextNode.y} 
            stroke={node.color} 
            strokeWidth="4"
            strokeLinecap="round"
            opacity={isActivePath ? 1 : 0.1}
            strokeDasharray="10 10"
          >
             {isActivePath && <animate attributeName="stroke-dashoffset" from="20" to="0" dur="1s" repeatCount="indefinite" />}
          </line>
        </g>
      );
    });
  };

  // 渲染相克连线 (Star shape inside)
  const renderControlLines = () => {
    return nodes.map((node, i) => {
      // 相克关系：木克土，土克水... (i + 2)
      const targetIndex = (i + 2) % 5;
      const targetNode = nodes[targetIndex];
      
      return (
        <line 
          key={`ctrl-${i}`}
          x1={node.x} y1={node.y} 
          x2={targetNode.x} y2={targetNode.y} 
          stroke="#cbd5e1" 
          strokeWidth="1" 
          strokeDasharray="4 4" 
          opacity="0.5"
        />
      );
    });
  }

  // 渲染粒子 (Qi Flow)
  const renderParticles = () => {
    return particlesRef.current.map((p, i) => {
      // 只渲染当前激活路径相关的粒子，或者全部渲染但淡化
      // 这里为了视觉效果，让粒子在所有相生路径上流动，但激活路径更亮
      const startNode = nodes[p.pathIndex];
      const endNode = nodes[(p.pathIndex + 1) % 5];
      
      const px = startNode.x + (endNode.x - startNode.x) * p.progress;
      const py = startNode.y + (endNode.y - startNode.y) * p.progress;
      
      const isPathActive = p.pathIndex === activeIdx;
      
      return (
        <circle 
          key={`p-${i}`} 
          cx={px} cy={py} 
          r={isPathActive ? 4 : 2} 
          fill={startNode.color}
          opacity={isPathActive ? 1 : 0.3}
        />
      );
    });
  };

  return (
    <div className="w-full h-full flex items-center justify-center bg-white font-sans">
      <svg viewBox={`0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`} className="w-full h-full max-w-5xl select-none">
        <defs>
          <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur stdDeviation="4" result="blur" />
            <feComposite in="SourceGraphic" in2="blur" operator="over" />
          </filter>
        </defs>

        {/* 背景网格装饰 */}
        <g opacity="0.1">
          {Array.from({ length: 11 }).map((_, i) => (
             <line key={`grid-h-${i}`} x1="0" y1={i * 60} x2={VIEW_WIDTH} y2={i * 60} stroke="#9ca3af" strokeWidth="1" />
          ))}
          {Array.from({ length: 11 }).map((_, i) => (
             <line key={`grid-v-${i}`} x1={i * 100} y1="0" x2={i * 100} y2={VIEW_HEIGHT} stroke="#9ca3af" strokeWidth="1" />
          ))}
        </g>

        {/* 标题区域 */}
        <g transform="translate(40, 60)">
          <text fontSize="32" fontWeight="bold" fill="#1f2937" letterSpacing="2">中医五行原理</text>
          <text y="30" fontSize="14" fill="#6b7280">Five Elements Theory & Energy Flow</text>
          <line x1="0" y1="45" x2="260" y2="45" stroke="#10B981" strokeWidth="4" />
        </g>

        {/* 主图层 */}
        <g>
          {renderControlLines()}
          {renderConnections()}
          {renderTaiji()}
          {renderParticles()}
          
          {/* 节点渲染 */}
          {nodes.map((node, i) => {
            const isActive = i === activeIdx;
            const size = isActive ? 40 : 30;
            
            return (
              <g key={node.id} transform={`translate(${node.x}, ${node.y})`} style={{ transition: 'all 0.5s ease' }}>
                {/* 脉冲光环 */}
                {isActive && (
                  <circle r={size + 10} fill="none" stroke={node.color} strokeWidth="2" opacity="0.5">
                    <animate attributeName="r" values={`${size};${size + 15};${size}`} dur="2s" repeatCount="indefinite" />
                    <animate attributeName="opacity" values="0.8;0;0.8" dur="2s" repeatCount="indefinite" />
                  </circle>
                )}
                
                {/* 节点主体 */}
                <circle r={size} fill="white" stroke={node.color} strokeWidth={isActive ? 4 : 2} />
                <text y="8" textAnchor="middle" fontSize={isActive ? 20 : 16} fontWeight="bold" fill="#374151">
                  {node.name}
                </text>
                
                {/* 标签 */}
                <text y={size + 25} textAnchor="middle" fontSize="14" fill="#6b7280" fontWeight="500">
                  {node.label}
                </text>
              </g>
            );
          })}
        </g>

        {/* 右侧信息面板 */}
        <g transform="translate(700, 150)">
          <rect width="260" height="350" rx="12" fill="white" stroke="#e5e7eb" strokeWidth="1" filter="url(#glow)" />
          
          {/* 面板标题 */}
          <text x="30" y="40" fontSize="18" fontWeight="bold" fill="#374151">系统诊断 (System Analysis)</text>
          <line x1="30" y1="55" x2="230" y2="55" stroke="#e5e7eb" strokeWidth="1" />
          
          {/* 动态内容 */}
          <g transform="translate(30, 90)">
            <text fontSize="14" fill="#9ca3af">当前行位 (Active Element)</text>
            <text y="30" fontSize="36" fontWeight="bold" fill={ELEMENTS[activeIdx].color}>
              {ELEMENTS[activeIdx].name} <tspan fontSize="20" fill="#9ca3af">/ {ELEMENTS[activeIdx].label}</tspan>
            </text>
            
            <g transform="translate(0, 70)">
              <text fontSize="14" fill="#9ca3af">脏腑对应 (Organ)</text>
              <text y="25" fontSize="18" fill="#4b5563">{ELEMENTS[activeIdx].organ}</text>
            </g>

            <g transform="translate(0, 140)">
              <text fontSize="14" fill="#9ca3af">特性 (Characteristics)</text>
              <text y="25" fontSize="18" fill="#4b5563">{ELEMENTS[activeIdx].desc}</text>
            </g>

            {/* 能量条模拟 */}
            <g transform="translate(0, 190)">
               <text fontSize="14" fill="#9ca3af">气机流量 (Qi Level)</text>
               <rect y="15" width="200" height="8" rx="4" fill="#f3f4f6" />
               <rect y="15" height="8" rx="4" fill={ELEMENTS[activeIdx].color}>
                 <animate attributeName="width" values="100;180;120;190" dur="3s" repeatCount="indefinite" />
               </rect>
            </g>
          </g>
        </g>

        {/* 底部生克关系说明 */}
        <g transform="translate(700, 540)">
           <circle cx="10" cy="-5" r="4" fill="#9ca3af" />
           <text x="25" y="0" fontSize="12" fill="#6b7280">实线：相生 (Generation Cycle)</text>
           <line x1="0" y1="20" x2="20" y2="20" stroke="#cbd5e1" strokeDasharray="4 4" strokeWidth="2" />
           <text x="25" y="25" fontSize="12" fill="#6b7280">虚线：相克 (Control Cycle)</text>
        </g>
      </svg>
    </div>
  );
}