'use client';

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

const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;

export const BlackHoleAnimation = () => {
  // 生成背景星空
  const stars = useMemo(() => {
    return Array.from({ length: 150 }).map((_, i) => ({
      id: i,
      x: Math.random() * VIEW_WIDTH,
      y: Math.random() * VIEW_HEIGHT,
      r: Math.random() * 1.5 + 0.5,
      opacity: Math.random() * 0.7 + 0.3,
      blinkDuration: Math.random() * 3 + 2,
      delay: Math.random() * 2,
    }));
  }, []);

  // 生成吸积盘的粒子流纹理
  const accretionLayers = useMemo(() => {
    return Array.from({ length: 6 }).map((_, i) => ({
      id: i,
      rx: 240 - i * 25, // X轴半径
      ry: 60 - i * 6,   // Y轴半径 (扁平化以模拟透视)
      strokeWidth: 15 - i,
      opacity: 0.8 - i * 0.1,
      dashArray: `${Math.random() * 100 + 50} ${Math.random() * 50 + 20}`,
      duration: 15 + i * 2, // 不同层旋转速度不同
      direction: i % 2 === 0 ? 1 : -1, // 稍微错乱一点的视觉效果
    }));
  }, []);

  return (
    <svg 
      viewBox={`0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`} 
      className="w-full h-full bg-slate-900 select-none"
      style={{ backgroundColor: '#0f172a' }}
    >
      <defs>
        {/* 核心光晕滤镜 */}
        <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="10" result="coloredBlur" />
          <feMerge>
            <feMergeNode in="coloredBlur" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>

        {/* 强烈的核心模糊 */}
        <filter id="core-blur">
          <feGaussianBlur stdDeviation="5" />
        </filter>

        {/* 吸积盘渐变 - 模拟多普勒效应（左侧亮蓝/白，右侧红/暗）虽然这里为了美观使用金橙色系 */}
        <linearGradient id="diskGradient" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="#fff7ed" stopOpacity="0.9" /> {/* 左侧移动向观测者，更亮 */}
          <stop offset="30%" stopColor="#f59e0b" stopOpacity="0.8" />
          <stop offset="70%" stopColor="#ea580c" stopOpacity="0.7" />
          <stop offset="100%" stopColor="#7c2d12" stopOpacity="0.4" /> {/* 右侧远离观测者，更暗红 */}
        </linearGradient>

        {/* 光子环渐变 */}
        <radialGradient id="photonRingGradient">
          <stop offset="85%" stopColor="#ffffff" stopOpacity="0" />
          <stop offset="95%" stopColor="#ffffff" stopOpacity="1" />
          <stop offset="100%" stopColor="#fbbf24" stopOpacity="0.5" />
        </radialGradient>
      </defs>

      {/* 1. 背景星空 */}
      <g>
        {stars.map((star) => (
          <circle key={star.id} cx={star.x} cy={star.y} r={star.r} fill="#ffffff">
            <animate 
              attributeName="opacity" 
              values={`${star.opacity};${star.opacity * 0.2};${star.opacity}`} 
              dur={`${star.blinkDuration}s`} 
              begin={`${star.delay}s`}
              repeatCount="indefinite" 
            />
          </circle>
        ))}
      </g>

      {/* 2. 吸积盘 - 后半部分 (在黑洞后面) */}
      <g transform={`translate(${CENTER_X}, ${CENTER_Y}) rotate(-10)`} filter="url(#glow)">
        {accretionLayers.map((layer, i) => (
          <path
            key={`back-${i}`}
            d={`M -${layer.rx} 0 A ${layer.rx} ${layer.ry} 0 0 1 ${layer.rx} 0`}
            fill="none"
            stroke="url(#diskGradient)"
            strokeWidth={layer.strokeWidth}
            strokeOpacity={layer.opacity * 0.6}
            strokeDasharray={layer.dashArray}
            strokeLinecap="round"
          >
            {/* 模拟物质流动的旋转动画 */}
            <animate 
               attributeName="stroke-dashoffset" 
               from="0" 
               to={layer.rx * 10} 
               dur={`${layer.duration}s`} 
               repeatCount="indefinite" 
            />
          </path>
        ))}
      </g>

      {/* 3. 引力透镜效应产生的光晕 (模拟Interstellar效果，黑洞上方的光拱) */}
      <path
        d={`M ${CENTER_X - 180} ${CENTER_Y} Q ${CENTER_X} ${CENTER_Y - 160} ${CENTER_X + 180} ${CENTER_Y}`}
        fill="none"
        stroke="url(#diskGradient)"
        strokeWidth="20"
        strokeOpacity="0.3"
        filter="url(#core-blur)"
        transform={`rotate(-10 ${CENTER_X} ${CENTER_Y})`}
      />

      {/* 4. 光子环 (Photon Ring) - 紧贴视界的亮圈 */}
      <circle 
        cx={CENTER_X} 
        cy={CENTER_Y} 
        r="82" 
        fill="url(#photonRingGradient)"
        filter="url(#glow)"
      />

      {/* 5. 视界 (Event Horizon) - 纯黑核心 */}
      <circle 
        cx={CENTER_X} 
        cy={CENTER_Y} 
        r="80" 
        fill="#000000" 
      />

      {/* 6. 吸积盘 - 前半部分 (在黑洞前面) */}
      <g transform={`translate(${CENTER_X}, ${CENTER_Y}) rotate(-10)`} filter="url(#glow)">
         {accretionLayers.map((layer, i) => (
          <path
            key={`front-${i}`}
            d={`M ${layer.rx} 0 A ${layer.rx} ${layer.ry} 0 0 1 -${layer.rx} 0`}
            fill="none"
            stroke="url(#diskGradient)"
            strokeWidth={layer.strokeWidth}
            strokeOpacity={layer.opacity}
            strokeDasharray={layer.dashArray}
            strokeLinecap="round"
          >
            <animate 
               attributeName="stroke-dashoffset" 
               from="0" 
               to={layer.rx * 10} 
               dur={`${layer.duration}s`} 
               repeatCount="indefinite" 
            />
          </path>
        ))}
      </g>

      {/* 7. 文字标注系统 */}
      <g opacity="0">
        <animate attributeName="opacity" from="0" to="1" dur="1s" begin="1s" fill="freeze" />
        
        {/* 标注：视界 */}
        <path d={`M ${CENTER_X} ${CENTER_Y} L ${CENTER_X + 120} ${CENTER_Y - 150} L ${CENTER_X + 180} ${CENTER_Y - 150}`} stroke="#fff" strokeWidth="1" fill="none" opacity="0.6" />
        <circle cx={CENTER_X} cy={CENTER_Y} r="2" fill="#fff" />
        <text x={CENTER_X + 190} y={CENTER_Y - 145} fill="#fff" fontSize="16" fontFamily="sans-serif" alignmentBaseline="middle">
          视界 (Event Horizon)
        </text>
        <text x={CENTER_X + 190} y={CENTER_Y - 125} fill="#94a3b8" fontSize="12" fontFamily="sans-serif">
          光线无法逃逸的边界
        </text>

        {/* 标注：吸积盘 */}
        <path d={`M ${CENTER_X - 150} ${CENTER_Y + 40} L ${CENTER_X - 200} ${CENTER_Y + 120} L ${CENTER_X - 280} ${CENTER_Y + 120}`} stroke="#fff" strokeWidth="1" fill="none" opacity="0.6" />
        <circle cx={CENTER_X - 150} cy={CENTER_Y + 40} r="2" fill="#fff" />
        <text x={CENTER_X - 290} y={CENTER_Y + 115} textAnchor="end" fill="#fff" fontSize="16" fontFamily="sans-serif">
          吸积盘 (Accretion Disk)
        </text>
        <text x={CENTER_X - 290} y={CENTER_Y + 135} textAnchor="end" fill="#94a3b8" fontSize="12" fontFamily="sans-serif">
          高温旋转的物质流
        </text>
      </g>

      {/* 标题 */}
      <text x={VIEW_WIDTH / 2} y={50} textAnchor="middle" fill="#f8fafc" fontSize="24" letterSpacing="2" fontWeight="300">
        超大质量黑洞模拟
      </text>
    </svg>
  );
};