```javascript
'use client';

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

// 常量定义
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const MOON_RADIUS = 120;
const CENTER_X = 350; // 月球中心X
const CENTER_Y = 300; // 月球中心Y

// 目标农历日期
const TARGET_DAYS = [1, 3, 5, 7, 10, 15, 18, 20, 23, 25, 27, 30];

// 辅助函数：生成星星
const generateStars = (count) => {
  return Array.from({ length: count }, () => ({
    x: Math.random() * VIEW_WIDTH,
    y: Math.random() * VIEW_HEIGHT,
    r: Math.random() * 1.5 + 0.5,
    opacity: Math.random() * 0.5 + 0.3,
    blinkSpeed: Math.random() * 2 + 1,
  }));
};

export const MoonPhaseAnimation = () => {
  // 状态管理
  const [targetDay, setTargetDay] = useState(15); // 目标日期
  const [displayDay, setDisplayDay] = useState(1); // 当前动画展示的日期（浮点数，用于动画插值）
  const [stars] = useState(() => generateStars(150));
  
  // 动画循环引用
  const requestRef = useRef();
  const previousTimeRef = useRef();

  // 动画核心逻辑
  const animate = (time) => {
    if (previousTimeRef.current !== undefined) {
      const deltaTime = time - previousTimeRef.current;
      
      // 简单的缓动逻辑 (Lerp)
      setDisplayDay(prev => {
        const diff = targetDay - prev;
        // 如果差异很小，直接停止，节省计算
        if (Math.abs(diff) < 0.05) return targetDay;
        // 速度系数，0.05 产生平滑的阻尼效果
        return prev + diff * 0.08;
      });
    }
    previousTimeRef.current = time;
    requestRef.current = requestAnimationFrame(animate);
  };

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

  // 计算月相路径
  // 核心算法：利用 SVG Path 绘制月球受光面
  const getMoonPath = (day) => {
    // 将农历日期 1-30 映射到相位 0-1 (0=New, 0.5=Full, 1=New)
    // 农历约29.5天，这里简化为30天循环
    const phase = (day - 1) / 29.5;
    const r = MOON_RADIUS;
    
    // 如果是朔月 (Day 1 or 30 roughly)，几乎全黑
    if (day <= 1 || day >= 29.5) {
        return ""; // 空路径，全黑
    }

    // 上半月 (Waxing) 1 < day <= 15
    if (day <= 15.5) {
        // 右半边圆弧固定 (从上顶点(0,-r)顺时针画到下顶点(0,r))
        // 左半边是椭圆弧，根据日期从右凸变为左凸
        // sweepX 计算：初一为r(右侧)，初七八为0(中间)，十五为-r(左侧)
        // 映射 day 1->15 到 1->-1
        const progress = (day - 1) / 14; // 0 to 1
        const sweepX = r * (1 - 2 * progress); 
        
        // 路径构建：
        // M 0 -r (移动到顶点)
        // A r r 0 0 1 0 r (画右半圆弧到底部)
        // A |sweepX| r 0 0 (flag) 0 -r (画椭圆弧回顶部)
        // flag: 如果 sweepX > 0 (convex/gibbous) flag=1? No.
        // 实际上，上半月亮面在右。
        // Day 1-7: Crescent (眉月). 亮部像眉毛。右边缘是圆，左边缘是凹椭圆。
        // Day 7-15: Gibbous (盈凸). 右边缘是圆，左边缘是凸椭圆。
        
        // 使用更通用的数学方法：
        // 亮面始终包含右半圆弧 (除了全黑)。
        // 晨昏线(Terminator) x坐标 = -r * cos(phase * 2 * PI)
        
        // 简化逻辑：
        // 1. 画出右半圆
        // 2. 加上/减去 左半部分的椭圆
        
        const x = -r * Math.cos((day - 1) / 14.75 * Math.PI);
        
        // 构建路径字符串
        // M 0 -r 
        // A r r 0 0 1 0 r (右侧半圆)
        // A abs(x) r 0 0 (x<0 ? 0 : 1) 0 -r (晨昏线椭圆)
        const sweepFlag = x < 0 ? 0 : 1; 
        return `M 0 -${r} A ${r} ${r} 0 0 1 0 ${r} A ${Math.abs(x)} ${r} 0 0 ${sweepFlag} 0 -${r}`;
    } 
    // 下半月 (Waning) 15 < day <= 30
    else {
        // 左半边圆弧固定
        // 右半边是椭圆弧
        const daysFromFull = day - 15.5;
        // x 从 -r (Full) 变到 r (New)
        const x = -r * Math.cos(daysFromFull / 14.75 * Math.PI);
        
        // M 0 -r
        // A r r 0 0 0 0 r (左侧半圆, sweep=0逆时针)
        // A abs(x) r 0 0 (x>0 ? 0 : 1) 0 -r
        const sweepFlag = x > 0 ? 0 : 1;
        return `M 0 -${r} A ${r} ${r} 0 0 0 0 ${r} A ${Math.abs(x)} ${r} 0 0 ${sweepFlag} 0 -${r}`;
    }
  };

  // 获取文字描述
  const getPhaseInfo = (d) => {
    const day = Math.round(d);
    let name = "";
    let desc = "";
    
    if (day === 1) { name = "新月 (朔)"; desc = "日月同经，无法看见"; }
    else if (day === 30) { name = "晦"; desc = "月亮不可见"; }
    else if (day >= 2 && day <= 6) { name = "蛾眉月"; desc = "亮面在右，形状如钩"; }
    else if (day >= 7 && day <= 9) { name = "上弦月"; desc = "右半圆亮，上半夜可见"; }
    else if (day >= 10 && day <= 14) { name = "盈凸月"; desc = "大部分亮，右侧饱满"; }
    else if (day >= 15 && day <= 16) { name = "满月 (望)"; desc = "日月相望，圆润明亮"; }
    else if (day >= 17 && day <= 21) { name = "亏凸月"; desc = "左侧饱满，开始亏缺"; }
    else if (day >= 22 && day <= 24) { name = "下弦月"; desc = "左半圆亮，下半夜可见"; }
    else if (day >= 25 && day <= 29) { name = "残月"; desc = "亮面在左，清晨可见"; }

    return { name, desc };
  };

  const { name, desc } = getPhaseInfo(displayDay);
  const isUpperMonth = displayDay <= 15.5;

  return (
    <svg viewBox={`0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`} className="w-full h-full bg-slate-900 select-none font-sans">
      <defs>
        {/* 1. 陨石坑纹理滤镜 - 增加月球真实感 */}
        <filter id="moonTexture">
          <feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="4" seed="5" />
          <feColorMatrix type="matrix" values="0 0 0 0 0.6  0 0 0 0 0.6  0 0 0 0 0.6  0 0 0 1 0" />
          <feComposite operator="in" in2="SourceGraphic" />
        </filter>
        
        {/* 2. 月球发光效果 */}
        <filter id="glow">
          <feGaussianBlur stdDeviation="8" result="coloredBlur" />
          <feMerge>
            <feMergeNode in="coloredBlur" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>

        {/* 3. 按钮渐变 */}
        <linearGradient id="btnGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="#1e293b" />
          <stop offset="100%" stopColor="#334155" />
        </linearGradient>
        <linearGradient id="btnGradActive" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="#3b82f6" />
          <stop offset="100%" stopColor="#2563eb" />
        </linearGradient>
      </defs>

      {/* 背景：星空 */}
      <rect width={VIEW_WIDTH} height={VIEW_HEIGHT} fill="#0f172a" />
      <g>
        {stars.map((star, i) => (
          <circle 
            key={i} 
            cx={star.x} 
            cy={star.y} 
            r={star.r} 
            fill="#fff" 
            opacity={star.opacity}
          >
            <animate 
              attributeName="opacity" 
              values={`${star.opacity};${star.opacity * 0.2};${star.opacity}`} 
              dur={`${star.blinkSpeed}s`} 
              repeatCount="indefinite" 
            />
          </circle>
        ))}
      </g>

      {/* 装饰性网格线 */}
      <line x1="680" y1="50" x2="680" y2="550" stroke="#334155" strokeWidth="1" strokeDasharray="5,5" />
      <text x="50" y="40" fill="#64748b" fontSize="14" fontFamily="monospace">SYSTEM: LUNAR_PHASE_VISUALIZER // V2.0</text>

      {/* 月球主体绘制区域 */}
      <g transform={`translate(${CENTER_X}, ${CENTER_Y})`}>
        {/* 1. 阴影底色 (Dark Side) */}
        <circle r={MOON_RADIUS} fill="#18181b" stroke="#334155" strokeWidth="1" />
        
        {/* 2. 纹理层 (Applied to the whole circle but masked later? No, draw light part with texture) */}
        {/* 实际上，为了效果好，我们先画一个暗的纹理球，再画亮的纹理球盖在上面 */}
        <circle r={MOON_RADIUS} fill="#27272a" filter="url(#moonTexture)" opacity="0.3" />

        {/* 3. 亮面 (Light Side) - 使用计算出的 Path */}
        <g filter="url(#glow)">
          <path 
            d={getMoonPath(displayDay)} 
            fill="#e2e8f0" 
            stroke="none"
          />
          {/* 在亮面上叠加纹理，增加细节 */}
          <path 
            d={getMoonPath(displayDay)} 
            fill="#cbd5e1" 
            filter="url(#moonTexture)" 
            opacity="0.8"
            style={{ mixBlendMode: 'multiply' }}
          />
        </g>
        
        {/* 4. 外部光晕环 */}
        <circle r={MOON_RADIUS + 10} fill="none" stroke="#3b82f6" strokeWidth="1" opacity="0.2" strokeDasharray="10, 5">
            <animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="60s" repeatCount="indefinite" />
        </circle>
      </g>

      {/* 文本信息展示区 - 左下侧 */}
      <g transform="translate(50, 500)">
        <text fill="#94a3b8" fontSize="16" fontFamily="monospace">CURRENT_PHASE:</text>
        <text y="30" fill="#f8fafc" fontSize="36" fontWeight="bold">{name}</text>
        <text y="55" fill="#cbd5e1" fontSize="16">{desc}</text>
        <text y="80" fill="#3b82f6" fontSize="24" fontFamily="monospace">
          农历 {Math.floor(displayDay) === 1 ? '初一' : 
               Math.floor(displayDay) === 15 ? '十五' : 
               Math.floor(displayDay) === 30 ? '三十' : 
               `Day ${Math.floor(displayDay)}`}
        </text>
      </g>

      {/* 右侧控制面板 */}
      <g transform="translate(720, 80)">
        <text x="0" y="-20" fill="#fff" fontSize="20" fontWeight="bold">月相演变控制 (Phase Control)</text>
        
        {/* 规律总结面板 */}
        <g transform="translate(0, 320)">
            <rect width="240" height="140" rx="8" fill="#1e293b" stroke="#334155" />
            <text x="20" y="30" fill="#3b82f6" fontSize="16" fontWeight="bold">月相变化规律 Summary</text>
            
            {/* 上半月规律 */}
            <g opacity={isUpperMonth ? 1 : 0.4} transform="translate(20, 60)">
                <text fill="#fff" fontSize="14">上半月 (初一 ~ 十五):</text>
                <text y="20" fill="#94a3b8" fontSize="12">● 亮面在 <tspan fill="#fbbf24" fontWeight="bold">右 (西)</tspan></text>
                <text y="40" fill="#94a3b8" fontSize="12">● 由缺变圆 (Waxing)</text>
            </g>

            {/* 下半月规律 */}
            <g opacity={!isUpperMonth ? 1 : 0.4} transform="translate(140, 60)">
                <text fill="#fff" fontSize="14">下半月 (十六 ~ 三十):</text>
                <text y="20" fill="#94a3b8" fontSize="12">● 亮面在 <tspan fill="#fbbf24" fontWeight="bold">左 (东)</tspan></text>
                <text y="40" fill="#94a3b8" fontSize="12">● 由圆变缺 (Waning)</text>
            </g>
        </g>

        {/* 按钮网格 */}
        <g>
          {TARGET_DAYS.map((day, i) => {
            const isActive = targetDay === day;
            const row = Math.floor(i / 6); // 2 rows
            const col = i % 6;
            const btnW = 35;
            const btnH = 35;
            const gap = 10;
            const x = col * (btnW + gap);
            const y = row * (btnH + gap);
            
            // 农历中文数字转换简化
            const getDayName = (d) => {
                const map = {1:'初一', 3:'初三', 5:'初五', 7:'初七', 10:'初十', 15:'十五', 18:'十八', 20:'二十', 23:'廿三', 25:'廿五', 27:'廿七', 30:'三十'};
                return map[d] || d;
            };

            return (
              <g 
                key={day} 
                transform={`translate(${x}, ${y})`} 
                onClick={() => setTargetDay(day)}
                style={{ cursor: 'pointer' }}
              >
                <rect 
                  width={btnW} 
                  height={btnH} 
                  rx="4" 
                  fill={isActive ? "url(#btnGradActive)" : "url(#btnGrad)"} 
                  stroke={isActive ? "#60a5fa" : "#475569"}
                  strokeWidth={isActive ? 2 : 1}
                  className="transition-all duration-300"
                />
                <text 
                  x={btnW/2} 
                  y={btnH/2 + 5} 
                  textAnchor="middle" 
                  fill={isActive ? "#fff" : "#94a3b8"} 
                  fontSize="12"
                  fontWeight={isActive ? "bold" : "normal"}
                >
                  {getDayName(day)}
                </text>
                {/* 选中时的光效 */}
                {isActive && <rect width={btnW} height={btnH} rx="4" fill="none" stroke="#60a5fa" strokeWidth="1" strokeOpacity="0.5">
                    <animate attributeName="stroke-width" values="1;4;1" dur="1.5s" repeatCount="indefinite"/>
                    <animate attributeName="opacity" values="1;0;1" dur="1.5s" repeatCount="indefinite"/>
                </rect>}
              </g>
            );
          })}
        </g>

        {/* 进度条指示器 */}
        <g transform="translate(0, 110)">
             <text x="0" y="-10" fill="#64748b" fontSize="12">Timeline</text>
             <rect width="260" height="4" fill="#334155" rx="2" />
             <rect width={260 * (displayDay / 30)} height="4" fill="#3b82f6" rx="2" />
             <circle cx={260 * (displayDay / 30)} cy="2" r="4" fill="#fff" />
        </g>

        {/* 动态数据面板 */}
        <g transform="translate(0, 160)">
            <text fill="#3b82f6" fontSize="14" fontWeight="bold">DATA LOG:</text>
            <text y="25" fill="#94a3b8" fontSize="12" fontFamily="monospace">Illumination: {Math.abs((15 - Math.abs(displayDay - 15)) / 15 * 100).toFixed(1)}%</text>
            <text y="45" fill="#94a3b8" fontSize="12" fontFamily="monospace">Age: {displayDay.toFixed(2)} days</text>
            <text y="65" fill="#94a3b8" fontSize="12" fontFamily="monospace">Visibility: {displayDay > 1 && displayDay < 29 ? 'Visible' : 'Invisible'}</text>
            <text y="85" fill="#94a3b8" fontSize="12" fontFamily="monospace">Direction: {isUpperMonth ? 'Waxing (+)' : 'Waning (-)'}</text>
        </g>
      </g>
    </svg>
  );
};
```