import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
import { Sparkles, Trash2, Download, RefreshCcw, Zap, CloudLightning, Activity, Heart, DollarSign, Code, Camera, XCircle, BookOpen, Play, SkipForward, Eye, EyeOff, Scroll } from 'lucide-react';

/**
 * ------------------------------------------------------------------
 * MediaPipe 外部脚本加载器
 * ------------------------------------------------------------------
 */
const loadScript = (src: string) => {
  return new Promise((resolve, reject) => {
    if (document.querySelector(`script[src="${src}"]`)) {
      resolve(true);
      return;
    }
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    script.onload = () => resolve(true);
    script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
    document.body.appendChild(script);
  });
};

/**
 * ------------------------------------------------------------------
 * 配置与常量：模板库 (六字真言 + 道家符箓)
 * ------------------------------------------------------------------
 * SVG 路径基于 200x200 画布。
 */

const TEMPLATES = [
  // --- 梵文种子字 ---
  {
    category: 'mantra',
    id: 'om',
    name: '唵 (Om)',
    desc: '宇宙原音，身口意清净',
    color: '#FFD700',
    svgStrokes: [
      "M60,50 Q110,50 110,80 Q110,110 60,110 Q110,110 110,150 Q110,190 60,190",
      "M110,105 Q150,105 160,70",
      "M120,40 Q140,20 160,40",
      "M140,30 L140.1,30"
    ],
    difficulty: 3000
  },
  {
    category: 'mantra',
    id: 'ma',
    name: '嘛 (Ma)',
    desc: '布施波罗蜜，除修罗道苦',
    color: '#FFFFFF',
    svgStrokes: [
      "M40,60 L160,60",
      "M60,60 L60,160",
      "M140,60 L140,180",
      "M60,100 L120,100 L120,80 Q120,60 100,60 Q80,60 80,80 L80,120",
    ],
    difficulty: 2500
  },
  {
    category: 'mantra',
    id: 'ni',
    name: '呢 (Ni)',
    desc: '持戒波罗蜜，除人道苦',
    color: '#228B22',
    svgStrokes: [
      "M40,60 L200,60",
      "M60,60 L60,180",
      "M180,60 L180,180",
      "M100,80 Q100,160 140,160 Q180,160 180,80",
    ],
    difficulty: 2800
  },
  {
    category: 'mantra',
    id: 'pad',
    name: '叭 (Pad)',
    desc: '忍辱波罗蜜，除畜生道苦',
    color: '#FF4500',
    svgStrokes: [
      "M40,60 L180,60",
      "M140,60 L140,180",
      "M60,60 L60,120 Q60,160 100,160 Q140,160 140,120",
      "M100,140 L40,180",
    ],
    difficulty: 2200
  },
  {
    category: 'mantra',
    id: 'me',
    name: '咪 (Me)',
    desc: '精进波罗蜜，除饿鬼道苦',
    color: '#1E90FF',
    svgStrokes: [
      "M60,20 L40,50",
      "M40,60 L160,60",
      "M80,80 L80,140 Q80,170 120,170",
      "M120,80 L120,170",
      "M120,120 L160,180",
    ],
    difficulty: 3500
  },
  {
    category: 'mantra',
    id: 'hum',
    name: '吽 (Hum)',
    desc: '般若波罗蜜，除地狱道苦',
    color: '#3b82f6',
    svgStrokes: [
      "M40,60 L140,60",
      "M60,60 L60,100 Q60,120 80,120 L100,120",
      "M100,60 L100,110 L100,140 Q100,180 60,180",
      "M120,140 Q140,180 160,160",
    ],
    difficulty: 3200
  },
  
  // --- 道家符箓 ---
  {
    category: 'taoist',
    id: 'safe_talisman',
    name: '平安符 (Peace)',
    desc: '三清护佑，出入平安',
    color: '#d93a3a', // 朱砂红
    svgStrokes: [
      "M60,30 L100,50 L140,30", // 1. 符头 (三清V)
      "M100,60 L100,80",        // 2. 敕令竖
      "M70,90 L130,90",         // 3. 宝盖头横
      "M100,90 L80,110",        // 4. 宝盖头撇
      "M100,90 L120,110",       // 5. 宝盖头捺
      "M100,120 Q80,140 100,160 Q120,140 100,120", // 6. 符胆圈 (安)
      "M80,170 L80,190",        // 7. 符脚左
      "M120,170 L120,190"       // 8. 符脚右
    ],
    difficulty: 2800
  },
  {
    category: 'taoist',
    id: 'wealth_talisman',
    name: '招财符 (Wealth)',
    desc: '财源广进，金玉满堂',
    color: '#d93a3a',
    svgStrokes: [
      "M60,30 L100,50 L140,30", // 1. 符头
      "M100,50 L100,80",        // 2. 连接
      "M70,80 L70,140",         // 3. 贝字左
      "M70,80 L100,80 L100,140",// 4. 贝字框
      "M80,100 L90,100",        // 5. 贝字内横1
      "M80,120 L90,120",        // 6. 贝字内横2
      "M110,80 L140,80",        // 7. 才字横
      "M125,70 L125,150",       // 8. 才字竖钩
      "M125,110 L140,130",      // 9. 才字撇
      "M80,160 Q100,180 120,160 Q100,140 80,160" // 10. 金币圈
    ],
    difficulty: 3500
  },
  {
    category: 'taoist',
    id: 'protect_talisman',
    name: '驱邪符 (Protect)',
    desc: '罡气护体，百无禁忌',
    color: '#d93a3a',
    svgStrokes: [
      "M60,30 L100,50 L140,30", // 1. 符头
      "M60,60 L140,60",         // 2. 四字横
      "M70,60 L80,90 L120,90 L130,60", // 3. 四字框
      "M90,70 L90,85",          // 4. 内竖1
      "M110,70 L110,85",        // 5. 内竖2
      "M60,110 L140,110",       // 6. 正字横
      "M100,110 L100,150",      // 7. 正字竖
      "M100,130 L130,130",      // 8. 正字中横
      "M70,150 L130,150",       // 9. 正字底横
      "M60,170 L100,190 L140,170" // 10. 符脚叉
    ],
    difficulty: 3800
  }
];

// 手部骨架连接定义
const HAND_CONNECTIONS = [
  [0, 1], [1, 2], [2, 3], [3, 4], // Thumb
  [0, 5], [5, 6], [6, 7], [7, 8], // Index
  [0, 9], [9, 10], [10, 11], [11, 12], // Middle
  [0, 13], [13, 14], [14, 15], [15, 16], // Ring
  [0, 17], [17, 18], [18, 19], [19, 20], // Pinky
  [5, 9], [9, 13], [13, 17] // Palm
];

// SVG 路径平滑算法
const getSvgPathFromStroke = (points: {x: number, y: number}[]) => {
  if (points.length === 0) return '';
  if (points.length < 3) {
    return `M ${points[0].x},${points[0].y} L ${points[0].x + 0.1},${points[0].y + 0.1}`;
  }

  let path = `M ${points[0].x},${points[0].y}`;
  for (let i = 1; i < points.length - 1; i++) {
    const p0 = points[i];
    const p1 = points[i + 1];
    const midX = (p0.x + p1.x) / 2;
    const midY = (p0.y + p1.y) / 2;
    path += ` Q ${p0.x},${p0.y} ${midX},${midY}`;
  }
  return path;
};

// 辅助：从 SVG 路径字符串中提取起始点 (M x,y)
const getStartPoint = (pathStr: string) => {
    const match = pathStr.match(/M\s*([\d.]+)[ ,]\s*([\d.]+)/);
    if (match) {
        return { x: parseFloat(match[1]), y: parseFloat(match[2]) };
    }
    return { x: 0, y: 0 };
};

// 计算两点距离
const dist = (p1: any, p2: any) => {
    return Math.hypot(p1.x - p2.x, p1.y - p2.y);
};

/**
 * ------------------------------------------------------------------
 * 组件：主应用
 * ------------------------------------------------------------------
 */
export default function CyberTalismanApp() {
  const [selectedTemplate, setSelectedTemplate] = useState(TEMPLATES[0]);
  const [strokes, setStrokes] = useState<{x: number, y: number}[][]>([]);
  const [currentStroke, setCurrentStroke] = useState<{x: number, y: number}[]>([]);
  const [isSealed, setIsSealed] = useState(false);
  const [showEffect, setShowEffect] = useState(false);
  const [progress, setProgress] = useState(0); 
  const [showNumbers, setShowNumbers] = useState(true); 
  
  // 教学模式状态
  const [isDemoPlaying, setIsDemoPlaying] = useState(false);
  const [activeStrokeIndex, setActiveStrokeIndex] = useState(-1);
  const [demoProgressIndex, setDemoProgressIndex] = useState(-1);
  
  const svgRef = useRef<SVGSVGElement>(null);

  // 摄像头与 AI 状态
  const [isCameraMode, setIsCameraMode] = useState(false);
  const [cameraLoading, setCameraLoading] = useState(false);
  const [handCursor, setHandCursor] = useState<{x: number, y: number, isDrawing: boolean} | null>(null);
  const [handLandmarks, setHandLandmarks] = useState<any[]>([]);
  
  const videoRef = useRef<HTMLVideoElement>(null);
  const handsRef = useRef<any>(null);
  const cameraRef = useRef<any>(null);

  // ------------------------- 笔画演示动画逻辑 -------------------------

  const playDemo = useCallback(() => {
    if (isDemoPlaying || isSealed) return;
    setIsDemoPlaying(true);
    setStrokes([]); 
    setCurrentStroke([]);
    setActiveStrokeIndex(-1);
    setDemoProgressIndex(-1);

    const totalStrokes = selectedTemplate.svgStrokes.length;
    let currentIdx = 0;

    const playNext = () => {
      if (currentIdx >= totalStrokes) {
        setIsDemoPlaying(false);
        setActiveStrokeIndex(-1);
        setDemoProgressIndex(totalStrokes);
        return;
      }

      setActiveStrokeIndex(currentIdx);
      setDemoProgressIndex(currentIdx);
      currentIdx++;
      
      setTimeout(playNext, 1500);
    };

    playNext();
  }, [isDemoPlaying, isSealed, selectedTemplate]);

  // ------------------------- 覆盖率/完成度检测逻辑 -------------------------

  useEffect(() => {
    if (isSealed || isDemoPlaying) return;

    let totalLength = 0;
    const allPoints = [...strokes.flat(), ...currentStroke];

    for (let i = 1; i < allPoints.length; i++) {
       totalLength += Math.hypot(allPoints[i].x - allPoints[i-1].x, allPoints[i].y - allPoints[i-1].y);
    }
    
    const percentage = Math.min(100, Math.round((totalLength / selectedTemplate.difficulty) * 100));
    setProgress(percentage);

    if (percentage >= 95 && currentStroke.length === 0 && !isSealed) {
        handleSeal();
    }
  }, [strokes, currentStroke, selectedTemplate, isSealed, isDemoPlaying]);


  // ------------------------- 核心绘图逻辑 -------------------------

  const startStroke = useCallback((point: {x: number, y: number}) => {
    if (isSealed || isDemoPlaying) return;
    setCurrentStroke([point]);
  }, [isSealed, isDemoPlaying]);

  const moveStroke = useCallback((point: {x: number, y: number}) => {
    if (isSealed || isDemoPlaying) return;
    setCurrentStroke((prev) => {
        if (prev.length === 0) return [point];
        return [...prev, point];
    });
  }, [isSealed, isDemoPlaying]);

  const endStroke = useCallback(() => {
    if (isSealed || isDemoPlaying) return;
    setCurrentStroke((prev) => {
      if (prev.length > 0) {
        setStrokes((allStrokes) => [...allStrokes, prev]);
      }
      return [];
    });
  }, [isSealed, isDemoPlaying]);

  // ------------------------- 鼠标/触控事件适配器 -------------------------

  const getPoint = (e: React.PointerEvent) => {
    const svg = svgRef.current;
    if (!svg) return { x: 0, y: 0 };
    const rect = svg.getBoundingClientRect();
    return {
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
    };
  };

  const handlePointerDown = (e: React.PointerEvent) => {
    if (isCameraMode || isDemoPlaying) return;
    e.target.setPointerCapture(e.pointerId);
    startStroke(getPoint(e));
  };

  const handlePointerMove = (e: React.PointerEvent) => {
    if (isCameraMode || isDemoPlaying) return;
    if (e.buttons !== 1) return;
    moveStroke(getPoint(e));
  };

  const handlePointerUp = (e: React.PointerEvent) => {
    if (isCameraMode || isDemoPlaying) return;
    endStroke();
  };

  // ------------------------- AI 手势识别逻辑 -------------------------

  useEffect(() => {
    let active = true;

    const initMediaPipe = async () => {
      if (!isCameraMode) return;

      setCameraLoading(true);
      try {
        await loadScript('https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js');
        await loadScript('https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js');
        await loadScript('https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js');
        await loadScript('https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js');

        if (!active) return;

        // @ts-ignore
        const hands = new window.Hands({locateFile: (file) => {
          return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`;
        }});

        hands.setOptions({
          maxNumHands: 1,
          modelComplexity: 1,
          minDetectionConfidence: 0.6,
          minTrackingConfidence: 0.5
        });

        hands.onResults(onResults);
        handsRef.current = hands;

        if (videoRef.current) {
             // @ts-ignore
            const camera = new window.Camera(videoRef.current, {
                onFrame: async () => {
                    if (videoRef.current && handsRef.current) {
                        await handsRef.current.send({image: videoRef.current});
                    }
                },
                width: 640,
                height: 480
            });
            camera.start();
            cameraRef.current = camera;
        }

        setCameraLoading(false);

      } catch (error) {
        console.error("MediaPipe load failed", error);
        setCameraLoading(false);
        alert("摄像头加载失败，请检查网络或权限");
        setIsCameraMode(false);
      }
    };

    if (isCameraMode) {
        initMediaPipe();
    } else {
        if (cameraRef.current) cameraRef.current.stop();
        setHandCursor(null);
        setHandLandmarks([]);
    }

    return () => {
        active = false;
        if (cameraRef.current) cameraRef.current.stop();
    };
  }, [isCameraMode]);


  const onResults = (results: any) => {
      if (!svgRef.current) return;
      
      if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
          const landmarks = results.multiHandLandmarks[0];
          setHandLandmarks(landmarks);
          
          const wrist = landmarks[0];
          const indexTip = landmarks[8];
          const middleTip = landmarks[12];
          const ringTip = landmarks[16];
          const pinkyTip = landmarks[20];

          const rect = svgRef.current.getBoundingClientRect();
          const x = (1 - indexTip.x) * rect.width;
          const y = indexTip.y * rect.height;

          const distIndex = dist(indexTip, wrist);
          const distMiddle = dist(middleTip, wrist);
          const distRing = dist(ringTip, wrist);
          const distPinky = dist(pinkyTip, wrist);

          const isIndexExtended = distIndex > distMiddle * 1.2 && distIndex > distRing * 1.2 && distIndex > distPinky * 1.2;
          const isDrawing = isIndexExtended;

          setHandCursor({ x, y, isDrawing });

          if (isDrawing && !isDemoPlaying) {
              setCurrentStroke(prev => {
                  if (prev.length === 0) return [{x, y}];
                  return [...prev, {x, y}];
              });
          } else {
              setCurrentStroke(prev => {
                  if (prev.length > 0) {
                      setStrokes(all => [...all, prev]);
                  }
                  return [];
              });
          }
      } else {
          setHandCursor(null);
          setHandLandmarks([]);
          setCurrentStroke(prev => {
            if (prev.length > 0) setStrokes(all => [...all, prev]);
            return [];
          });
      }
  };

  const mapLandmark = (landmark: any) => {
      if (!svgRef.current) return { x: 0, y: 0 };
      const rect = svgRef.current.getBoundingClientRect();
      return {
          x: (1 - landmark.x) * rect.width,
          y: landmark.y * rect.height
      };
  };

  // ------------------------- 通用交互逻辑 -------------------------

  const clearCanvas = () => {
    setStrokes([]);
    setCurrentStroke([]);
    setIsSealed(false);
    setShowEffect(false);
    setProgress(0);
    setIsDemoPlaying(false);
    setActiveStrokeIndex(-1);
    setDemoProgressIndex(-1);
  };

  const handleSeal = () => {
    if (isSealed) return;
    setShowEffect(true);
    setTimeout(() => {
      setIsSealed(true);
      setShowEffect(false);
    }, 1500);
  };

  // 辅助函数：按类别分组渲染侧边栏
  const renderSidebarItems = (category: string) => {
      return TEMPLATES.filter(t => t.category === category).map((t) => (
        <button
          key={t.id}
          onClick={() => {
            setSelectedTemplate(t);
            clearCanvas();
          }}
          className={`w-full text-left p-4 rounded-xl border transition-all duration-200 group relative overflow-hidden mb-2 ${
            selectedTemplate.id === t.id
              ? 'bg-amber-900/20 border-amber-500/50 shadow-[0_0_15px_rgba(245,158,11,0.1)]'
              : 'bg-stone-800/50 border-stone-700 hover:bg-stone-800 hover:border-stone-600'
          }`}
        >
          <div className="flex items-center gap-4 relative z-10">
            <div className={`w-10 h-10 flex items-center justify-center rounded-lg text-lg font-bold ${selectedTemplate.id === t.id ? 'bg-amber-500/20 text-amber-400' : 'bg-stone-700 text-stone-400'}`}>
               {/* 简易图标显示 */}
              {t.category === 'mantra' 
                 ? (t.id === 'om' ? 'ॐ' : t.name.charAt(2))
                 : (t.name.charAt(0))
              }
            </div>
            <div>
              <h3 className={`font-bold ${selectedTemplate.id === t.id ? 'text-amber-100' : 'text-stone-300'}`}>{t.name}</h3>
              <p className="text-xs text-stone-500 mt-0.5">{t.desc}</p>
            </div>
          </div>
        </button>
      ));
  };

  return (
    <div className="min-h-screen bg-stone-950 text-stone-200 flex flex-col md:flex-row overflow-hidden font-sans">
      
      <video ref={videoRef} className="hidden" playsInline muted></video>

      {/* --- 左侧/顶部：菜单栏 --- */}
      <div className="w-full md:w-80 bg-stone-900 border-r border-stone-800 flex flex-col z-20 shadow-2xl relative">
        <div className="p-6 border-b border-stone-800 bg-stone-950">
          <h1 className="text-2xl font-bold tracking-widest text-amber-500 flex items-center gap-2">
            <BookOpen className="text-amber-500" />
            赛博书写阁
          </h1>
          <p className="text-xs text-stone-500 mt-1 uppercase tracking-widest">Mantra & Talisman v2.5</p>
        </div>

        <div className="p-4 border-b border-stone-800 bg-stone-900/50 space-y-3">
            <button 
                onClick={() => !isSealed && setIsCameraMode(!isCameraMode)}
                disabled={isSealed || isDemoPlaying}
                className={`w-full py-3 px-4 rounded-xl flex items-center justify-center gap-2 font-bold transition-all ${
                    isCameraMode 
                    ? 'bg-amber-900/50 text-amber-400 border border-amber-800 hover:bg-amber-900/80' 
                    : 'bg-stone-800 text-stone-300 border border-stone-700 hover:bg-stone-700'
                }`}
            >
                {isCameraMode ? <XCircle size={18} /> : <Camera size={18} />}
                {isCameraMode ? '关闭手势书写' : '开启手势书写'}
            </button>
            
            <button 
                onClick={playDemo}
                disabled={isSealed || isDemoPlaying || isCameraMode}
                className={`w-full py-3 px-4 rounded-xl flex items-center justify-center gap-2 font-bold transition-all ${
                   isDemoPlaying
                   ? 'bg-indigo-900/50 text-indigo-400 border border-indigo-800'
                   : 'bg-stone-800 text-stone-300 border border-stone-700 hover:bg-stone-700'
                }`}
            >
               {isDemoPlaying ? <SkipForward size={18} className="animate-pulse"/> : <Play size={18} />}
               {isDemoPlaying ? '演示中...' : '演示笔顺 (Demo)'}
            </button>

             <button 
                onClick={() => setShowNumbers(!showNumbers)}
                className="w-full py-2 px-4 rounded-xl flex items-center justify-center gap-2 text-sm font-medium transition-all bg-stone-900 text-stone-400 hover:text-stone-200 border border-stone-800 hover:border-stone-700"
            >
               {showNumbers ? <Eye size={16} /> : <EyeOff size={16} />}
               {showNumbers ? '隐藏笔顺编号' : '显示笔顺编号'}
            </button>

            {isCameraMode && (
                <div className="text-[10px] text-stone-500 text-center">
                   ✊ 握拳伸出食指=下笔 | 🖐️ 张开手掌=悬停
                </div>
            )}
        </div>

        <div className="flex-1 overflow-y-auto p-4">
            {/* 梵文部分 */}
            <div className="text-xs font-bold text-stone-500 uppercase tracking-widest mb-2 flex items-center gap-2">
                <Sparkles size={12} /> 六字真言 (Sanskrit)
            </div>
            {renderSidebarItems('mantra')}

            <div className="my-4 border-t border-stone-800"></div>

            {/* 道家符箓部分 */}
            <div className="text-xs font-bold text-stone-500 uppercase tracking-widest mb-2 flex items-center gap-2">
                <Scroll size={12} /> 道家符箓 (Taoist)
            </div>
            {renderSidebarItems('taoist')}
        </div>
      </div>

      {/* --- 右侧/主要：画板区域 --- */}
      <div className="flex-1 relative bg-stone-950 flex flex-col items-center justify-center p-4 md:p-8 overflow-hidden">
        
        <div className="absolute inset-0 opacity-20 pointer-events-none bg-[url('https://www.transparenttextures.com/patterns/dark-matter.png')]"></div>

        {/* 顶部提示栏 */}
        <div className="absolute top-4 left-0 right-0 z-30 flex flex-col items-center">
             <div className="bg-stone-900/80 backdrop-blur-md px-6 py-2 rounded-full border border-stone-700 shadow-xl flex items-center gap-4">
                 <span className="text-stone-400 text-xs uppercase tracking-wider">书写进度</span>
                 <div className="w-32 h-2 bg-stone-800 rounded-full overflow-hidden">
                     <div 
                        className="h-full bg-amber-500 transition-all duration-300 ease-out shadow-[0_0_10px_rgba(245,158,11,0.5)]"
                        style={{ width: `${progress}%` }}
                     ></div>
                 </div>
                 <span className="text-amber-400 font-mono text-xs">{progress}%</span>
             </div>
        </div>

        <div className="relative shadow-2xl transition-all duration-500 transform w-full max-w-[500px] aspect-[3/4]">
          
          {/* AI 视觉反馈层 */}
          {isCameraMode && !isSealed && svgRef.current && (
            <div className="absolute inset-0 z-50 pointer-events-none overflow-hidden rounded-xl">
                <svg className="absolute inset-0 w-full h-full pointer-events-none opacity-30">
                    {handLandmarks.length > 0 && HAND_CONNECTIONS.map(([start, end], i) => {
                        const p1 = mapLandmark(handLandmarks[start]);
                        const p2 = mapLandmark(handLandmarks[end]);
                        return <line key={`bone-${i}`} x1={p1.x} y1={p1.y} x2={p2.x} y2={p2.y} stroke="#f59e0b" strokeWidth="2" />;
                    })}
                </svg>

                {handCursor && (
                    <div 
                        className="absolute rounded-full border-2 flex items-center justify-center transition-all duration-150"
                        style={{
                            left: handCursor.x,
                            top: handCursor.y,
                            width: '40px',
                            height: '40px',
                            marginLeft: '-20px',
                            marginTop: '-20px',
                            borderColor: handCursor.isDrawing ? selectedTemplate.color : '#f59e0b',
                            backgroundColor: handCursor.isDrawing ? `${selectedTemplate.color}40` : 'transparent',
                            transform: handCursor.isDrawing ? 'scale(1)' : 'scale(1.2)',
                            boxShadow: handCursor.isDrawing ? `0 0 20px ${selectedTemplate.color}` : 'none'
                        }}
                    >
                         <div className={`w-2 h-2 rounded-full ${handCursor.isDrawing ? 'bg-white' : 'bg-amber-500'}`}></div>
                         {!handCursor.isDrawing && (
                             <div className="absolute top-full mt-2 text-[10px] text-amber-500 whitespace-nowrap bg-black/50 px-2 py-1 rounded">
                                 握拳下笔
                             </div>
                         )}
                    </div>
                )}
            </div>
          )}

          {/* 圆满完成特效 */}
          {showEffect && (
            <div className="absolute inset-0 z-50 pointer-events-none flex items-center justify-center">
              <div className="absolute w-[200%] h-[200%] bg-amber-500/30 rounded-full animate-ping"></div>
              <div className="absolute inset-0 bg-white mix-blend-overlay animate-pulse opacity-80"></div>
              <div className="w-[120%] h-[120%] border-[20px] border-amber-300/50 rounded-full animate-[spin_3s_linear_infinite] blur-md border-t-transparent border-l-transparent"></div>
              <div className="absolute text-6xl font-bold text-amber-100 drop-shadow-[0_0_30px_rgba(251,191,36,1)] animate-bounce z-50">
                  圆满
              </div>
            </div>
          )}

          {/* 纸张容器 */}
          <div className={`relative w-full h-full bg-[#1c1917] overflow-hidden rounded-xl shadow-[0_0_50px_rgba(0,0,0,0.8)] border border-stone-800 ${showEffect ? 'animate-pulse' : ''}`}>
            
            <div className="absolute inset-0 opacity-50 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-stone-800 to-stone-950"></div>

            {/* 绘图层 */}
            <svg
              ref={svgRef}
              className={`absolute inset-0 w-full h-full touch-none ${isSealed ? 'cursor-default' : isCameraMode ? 'cursor-none' : 'cursor-crosshair'}`}
              onPointerDown={handlePointerDown}
              onPointerMove={handlePointerMove}
              onPointerUp={handlePointerUp}
              onPointerLeave={handlePointerUp}
              style={{ touchAction: 'none' }}
              viewBox="0 0 200 200" 
              preserveAspectRatio="xMidYMid meet"
            >
              <defs>
                <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
                  <feGaussianBlur stdDeviation="3" result="blur" />
                  <feComposite in="SourceGraphic" in2="blur" operator="over" />
                </filter>
              </defs>

              {/* 1. 笔画骨架 (Guide/Ghost) */}
              {selectedTemplate.svgStrokes.map((pathStr, index) => {
                  const isActive = index === activeStrokeIndex;
                  const isDone = isDemoPlaying && index < demoProgressIndex;
                  const startPoint = getStartPoint(pathStr);

                  const strokeColor = isActive ? '#ffffff' : (isDone ? selectedTemplate.color : '#57534e'); 
                  const strokeOpacity = isActive ? 1 : (isDone ? 1 : 0.3);
                  const strokeDash = (isActive || isDone) ? "0" : "8,8";

                  return (
                    <g key={`guide-${index}`}>
                        {/* 底层骨架 */}
                        <path 
                            d={pathStr}
                            fill="none"
                            stroke={strokeColor}
                            strokeWidth={isActive ? "14" : "12"}
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeDasharray={strokeDash}
                            opacity={strokeOpacity}
                            className="transition-all duration-300"
                        />
                        
                        {/* 演示模式：当前高亮的笔画动画 */}
                        {isActive && (
                            <path 
                                className="animate-draw-stroke"
                                d={pathStr}
                                fill="none"
                                stroke="#ffffff" 
                                strokeWidth="12"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                opacity="0.8"
                                filter="url(#glow)"
                            />
                        )}

                         {/* 演示模式：起点提示点 */}
                        {isActive && (
                             <circle 
                                cx={startPoint.x}
                                cy={startPoint.y}
                                r="4"
                                fill="white"
                                className="animate-ping"
                             />
                        )}

                        {/* 笔顺编号 Badge */}
                        {showNumbers && (
                            <g transform={`translate(${startPoint.x}, ${startPoint.y})`}>
                                <circle 
                                    r="8" 
                                    fill={isActive ? "#ffffff" : "#1c1917"} 
                                    stroke={isActive ? "#ffffff" : "#57534e"}
                                    strokeWidth="1"
                                    opacity="0.9"
                                />
                                <text 
                                    textAnchor="middle" 
                                    dy="3" 
                                    fontSize="10" 
                                    fill={isActive ? "#000" : "#a8a29e"}
                                    fontWeight="bold"
                                    fontFamily="sans-serif"
                                >
                                    {index + 1}
                                </text>
                            </g>
                        )}
                    </g>
                  );
              })}
            </svg>
            
            {/* 用户绘图层 (Overlay SVG) */}
            <svg 
                 className={`absolute inset-0 w-full h-full pointer-events-none`}
                 style={{ overflow: 'visible' }}
            >
               <defs>
                  <filter id="strong-glow" x="-50%" y="-50%" width="200%" height="200%">
                      <feGaussianBlur stdDeviation="3" result="blur" />
                      <feFlood floodColor={selectedTemplate.color} floodOpacity="0.5" result="glowColor" />
                      <feComposite in="glowColor" in2="blur" operator="in" result="softGlow" />
                      <feMerge>
                          <feMergeNode in="softGlow" />
                          <feMergeNode in="SourceGraphic" />
                      </feMerge>
                  </filter>
               </defs>

               {strokes.map((stroke, index) => (
                <path
                  key={index}
                  d={getSvgPathFromStroke(stroke)}
                  fill="none"
                  stroke={selectedTemplate.color} 
                  strokeWidth="16" 
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  filter="url(#strong-glow)" 
                  style={{ opacity: 1 }} 
                />
              ))}
              {currentStroke.length > 0 && (
                <path
                  d={getSvgPathFromStroke(currentStroke)}
                  fill="none"
                  stroke={selectedTemplate.color}
                  strokeWidth="18"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  filter="url(#strong-glow)"
                  style={{ opacity: 1 }} 
                />
              )}
            </svg>

            {/* 完成后的粒子光点装饰 */}
            {isSealed && (
              <div className="absolute inset-0 pointer-events-none">
                  {[...Array(20)].map((_, i) => (
                      <div 
                        key={i}
                        className="absolute w-1 h-1 bg-white rounded-full animate-ping"
                        style={{
                            left: `${Math.random() * 100}%`,
                            top: `${Math.random() * 100}%`,
                            animationDelay: `${Math.random() * 2}s`,
                            animationDuration: `${1 + Math.random()}s`
                        }}
                      />
                  ))}
              </div>
            )}
          </div>
        </div>

        {/* 底部帮助 */}
        <div className="mt-8 flex items-center gap-4 z-20">
             <button 
                onClick={clearCanvas}
                className="px-6 py-2 bg-stone-800 rounded-full text-stone-400 hover:text-white transition-colors flex items-center gap-2"
              >
                <Trash2 size={16} /> 重写
              </button>
        </div>

        <div className="mt-4 text-stone-500 text-sm opacity-60 font-mono">
           {isSealed 
             ? '✨ 功德圆满 ✨' 
             : isDemoPlaying
               ? '👀 观察笔顺演示...'
               : isCameraMode 
                 ? 'AI 教学中: 食指书写，填满文字' 
                 : '提示：先点击演示看笔顺，再临摹'}
        </div>

      </div>

      <style>{`
        /* 笔画动画定义 */
        @keyframes draw-stroke {
          from { stroke-dasharray: 0, 1000; }
          to { stroke-dasharray: 1000, 0; }
        }
        .animate-draw-stroke {
          animation: draw-stroke 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }
        
        /* 自定义滚动条 */
        ::-webkit-scrollbar {
          width: 8px;
        }
        ::-webkit-scrollbar-track {
          background: #0c0a09; 
        }
        ::-webkit-scrollbar-thumb {
          background: #44403c; 
          border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
          background: #57534e; 
        }
      `}</style>
    </div>
  );
}