'use client';

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

// 5x7 Pixel grids for digits 0-9
const DIGIT_PATTERNS = {
  0: [
    0,1,1,1,0,
    1,0,0,0,1,
    1,0,0,0,1,
    1,0,0,0,1,
    1,0,0,0,1,
    1,0,0,0,1,
    0,1,1,1,0
  ],
  1: [
    0,0,1,0,0,
    0,1,1,0,0,
    0,0,1,0,0,
    0,0,1,0,0,
    0,0,1,0,0,
    0,0,1,0,0,
    0,1,1,1,0
  ],
  2: [
    0,1,1,1,0,
    1,0,0,0,1,
    0,0,0,0,1,
    0,0,0,1,0,
    0,0,1,0,0,
    0,1,0,0,0,
    1,1,1,1,1
  ],
  3: [
    0,1,1,1,0,
    1,0,0,0,1,
    0,0,0,0,1,
    0,0,1,1,0,
    0,0,0,0,1,
    1,0,0,0,1,
    0,1,1,1,0
  ],
  4: [
    0,0,0,1,0,
    0,0,1,1,0,
    0,1,0,1,0,
    1,0,0,1,0,
    1,1,1,1,1,
    0,0,0,1,0,
    0,0,0,1,0
  ],
  5: [
    1,1,1,1,1,
    1,0,0,0,0,
    1,1,1,1,0,
    0,0,0,0,1,
    0,0,0,0,1,
    1,0,0,0,1,
    0,1,1,1,0
  ],
  6: [
    0,1,1,1,0,
    1,0,0,0,0,
    1,0,0,0,0,
    1,1,1,1,0,
    1,0,0,0,1,
    1,0,0,0,1,
    0,1,1,1,0
  ],
  7: [
    1,1,1,1,1,
    0,0,0,0,1,
    0,0,0,1,0,
    0,0,1,0,0,
    0,1,0,0,0,
    0,1,0,0,0,
    0,1,0,0,0
  ],
  8: [
    0,1,1,1,0,
    1,0,0,0,1,
    1,0,0,0,1,
    0,1,1,1,0,
    1,0,0,0,1,
    1,0,0,0,1,
    0,1,1,1,0
  ],
  9: [
    0,1,1,1,0,
    1,0,0,0,1,
    1,0,0,0,1,
    0,1,1,1,1,
    0,0,0,0,1,
    0,0,0,0,1,
    0,1,1,1,0
  ]
};

const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;

export const NeuralNetworkRecognition = () => {
  const [currentDigit, setCurrentDigit] = useState(3);
  const [phase, setPhase] = useState('idle'); // idle, scan, propagate, result, clear
  const [probabilities, setProbabilities] = useState(new Array(10).fill(0.05));
  const [activePixels, setActivePixels] = useState(new Array(35).fill(0));
  
  // Random noise generation for background matrix effect
  const bgParticles = useMemo(() => {
    return Array.from({ length: 50 }, () => ({
      x: Math.random() * VIEW_WIDTH,
      y: Math.random() * VIEW_HEIGHT,
      opacity: Math.random() * 0.3 + 0.1,
      speed: Math.random() * 2 + 0.5,
      size: Math.random() * 2 + 1
    }));
  }, []);

  const reset = () => {
    setPhase('clear');
    setTimeout(() => {
      const nextDigit = Math.floor(Math.random() * 10);
      setCurrentDigit(nextDigit);
      setActivePixels(new Array(35).fill(0));
      setProbabilities(new Array(10).fill(0.02)); // Reset to low noise
      setPhase('scan');
    }, 1000);
  };

  useEffect(() => {
    // Animation Loop Logic
    let timeout;
    
    if (phase === 'scan') {
      // Reveal pixels one by one
      const pattern = DIGIT_PATTERNS[currentDigit];
      let step = 0;
      const interval = setInterval(() => {
        if (step >= 35) {
          clearInterval(interval);
          setPhase('propagate');
        } else {
          setActivePixels(prev => {
            const next = [...prev];
            // Add some noise to make it look "handwritten"
            const noise = Math.random() > 0.9 ? 0.5 : 0;
            next[step] = pattern[step] ? 1 : noise; 
            return next;
          });
          step++;
        }
      }, 20); // Fast scan
      
      return () => clearInterval(interval);

    } else if (phase === 'propagate') {
      // Wait for signal to travel
      timeout = setTimeout(() => {
        setPhase('result');
      }, 1500);

    } else if (phase === 'result') {
      // Animate probabilities
      const targetProbs = new Array(10).fill(0).map((_, i) => {
        if (i === currentDigit) return 0.85 + Math.random() * 0.14; // High confidence
        return Math.random() * 0.1; // Low noise
      });
      setProbabilities(targetProbs);

      timeout = setTimeout(() => {
        reset();
      }, 3000); // Show result for 3 seconds
    } else if (phase === 'idle') {
        reset();
    }

    return () => clearTimeout(timeout);
  }, [phase, currentDigit]);

  // Visual Configuration
  const inputGridSize = 25;
  const inputGridGap = 5;
  const inputStartX = 100;
  const inputStartY = 200;

  const hiddenLayerX = 450;
  const hiddenNodes = 12;
  const hiddenNodeSpacing = 35;
  const hiddenStartY = (VIEW_HEIGHT - (hiddenNodes * hiddenNodeSpacing)) / 2;

  const outputLayerX = 800;
  const outputNodes = 10;
  const outputNodeSpacing = 40;
  const outputStartY = (VIEW_HEIGHT - (outputNodes * outputNodeSpacing)) / 2;

  // Calculate connections (subset for performance)
  const connections1 = useMemo(() => {
    const lines = [];
    // Only connect active pixels to some hidden nodes to save rendering
    for (let i = 0; i < 35; i+=3) { 
      for (let j = 0; j < hiddenNodes; j+=2) {
        const x1 = inputStartX + (i % 5) * (inputGridSize + inputGridGap) + inputGridSize;
        const y1 = inputStartY + Math.floor(i / 5) * (inputGridSize + inputGridGap) + inputGridSize / 2;
        const x2 = hiddenLayerX;
        const y2 = hiddenStartY + j * hiddenNodeSpacing;
        lines.push({ x1, y1, x2, y2, key: `l1-${i}-${j}` });
      }
    }
    return lines;
  }, []);

  const connections2 = useMemo(() => {
    const lines = [];
    for (let i = 0; i < hiddenNodes; i++) {
      for (let j = 0; j < outputNodes; j++) {
        const x1 = hiddenLayerX;
        const y1 = hiddenStartY + i * hiddenNodeSpacing;
        const x2 = outputLayerX;
        const y2 = outputStartY + j * outputNodeSpacing;
        lines.push({ x1, y1, x2, y2, key: `l2-${i}-${j}` });
      }
    }
    return lines;
  }, []);

  return (
    <svg viewBox={`0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`} className="w-full h-full select-none" style={{ background: '#0f172a', fontFamily: 'monospace' }}>
      <defs>
        <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="2" result="blur" />
          <feComposite in="SourceGraphic" in2="blur" operator="over" />
        </filter>
        <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.1" />
          <stop offset="50%" stopColor="#06b6d4" stopOpacity="0.8" />
          <stop offset="100%" stopColor="#3b82f6" stopOpacity="0.1" />
        </linearGradient>
      </defs>

      {/* Background Matrix/Particles */}
      {bgParticles.map((p, i) => (
        <circle key={i} cx={p.x} cy={p.y} r={p.size} fill="#334155" opacity={p.opacity}>
          <animate attributeName="cy" from={p.y} to={p.y - 100} dur={`${p.speed * 5}s`} repeatCount="indefinite" />
          <animate attributeName="opacity" values={`${p.opacity};0;${p.opacity}`} dur={`${p.speed * 3}s`} repeatCount="indefinite" />
        </circle>
      ))}

      {/* Decorative Grid Lines */}
      <line x1="0" y1="50" x2={VIEW_WIDTH} y2="50" stroke="#1e293b" strokeWidth="1" />
      <line x1="0" y1={VIEW_HEIGHT-50} x2={VIEW_WIDTH} y2={VIEW_HEIGHT-50} stroke="#1e293b" strokeWidth="1" />
      <text x="30" y="35" fill="#64748b" fontSize="14" fontWeight="bold">NEURAL_NET_V1.0 // 图像识别模块</text>
      <text x={VIEW_WIDTH - 150} y="35" fill="#64748b" fontSize="14" textAnchor="end">STATUS:</text>
      <text x={VIEW_WIDTH - 30} y="35" fill={phase === 'result' ? '#10b981' : '#fbbf24'} fontSize="14" textAnchor="end" fontWeight="bold">
        {phase === 'scan' ? 'SCANNING...' : phase === 'propagate' ? 'PROCESSING...' : phase === 'result' ? 'IDENTIFIED' : 'IDLE'}
      </text>

      {/* Group: Input Layer */}
      <g>
        <text x={inputStartX + 60} y={inputStartY - 30} fill="#94a3b8" textAnchor="middle" fontSize="14">输入层 Input (28x28)</text>
        <rect x={inputStartX - 10} y={inputStartY - 10} width={5 * (inputGridSize + inputGridGap) + 15} height={7 * (inputGridSize + inputGridGap) + 15} fill="none" stroke="#334155" rx="4" />
        
        {activePixels.map((val, i) => {
          const x = inputStartX + (i % 5) * (inputGridSize + inputGridGap);
          const y = inputStartY + Math.floor(i / 5) * (inputGridSize + inputGridGap);
          const opacity = val;
          return (
            <rect 
              key={i} 
              x={x} y={y} 
              width={inputGridSize} height={inputGridSize} 
              fill={val > 0.5 ? '#fff' : '#1e293b'} 
              fillOpacity={val > 0.5 ? 0.9 : 0.5}
              rx="2"
              filter={val > 0.5 ? 'url(#glow)' : ''}
              className="transition-all duration-300"
            />
          );
        })}
        
        {/* Scanning Line Effect */}
        {phase === 'scan' && (
          <line x1={inputStartX - 10} y1={inputStartY} x2={inputStartX + 150} y2={inputStartY} stroke="#06b6d4" strokeWidth="2" opacity="0.7">
            <animate attributeName="y1" from={inputStartY - 10} to={inputStartY + 230} dur="0.7s" repeatCount="indefinite" />
            <animate attributeName="y2" from={inputStartY - 10} to={inputStartY + 230} dur="0.7s" repeatCount="indefinite" />
            <animate attributeName="opacity" values="0.7;0;0.7" dur="0.7s" repeatCount="indefinite" />
          </line>
        )}
      </g>

      {/* Group: Connections 1 (Input -> Hidden) */}
      <g opacity={phase === 'propagate' ? 1 : 0.1} className="transition-opacity duration-500">
        {connections1.map((line) => (
          <path 
            key={line.key}
            d={`M ${line.x1} ${line.y1} C ${line.x1 + 50} ${line.y1}, ${line.x2 - 50} ${line.y2}, ${line.x2} ${line.y2}`}
            stroke="url(#lineGradient)"
            strokeWidth="1"
            fill="none"
            strokeDasharray="5 5"
          >
             {phase === 'propagate' && (
                <animate attributeName="stroke-dashoffset" from="100" to="0" dur="1s" repeatCount="indefinite" />
             )}
          </path>
        ))}
      </g>

      {/* Group: Hidden Layer */}
      <g>
        <text x={hiddenLayerX} y={hiddenStartY - 30} fill="#94a3b8" textAnchor="middle" fontSize="14">隐藏层 Hidden Layer</text>
        {Array.from({ length: hiddenNodes }).map((_, i) => {
          const cy = hiddenStartY + i * hiddenNodeSpacing;
          const isActive = phase === 'propagate';
          return (
            <g key={i}>
                <circle 
                    cx={hiddenLayerX} cy={cy} r={isActive ? 8 : 4} 
                    fill="#3b82f6" 
                    filter={isActive ? 'url(#glow)' : ''}
                    className="transition-all duration-500"
                />
                {isActive && (
                   <circle cx={hiddenLayerX} cy={cy} r="12" stroke="#3b82f6" strokeWidth="1" fill="none" opacity="0">
                      <animate attributeName="r" from="8" to="20" dur="1s" repeatCount="indefinite" />
                      <animate attributeName="opacity" from="0.6" to="0" dur="1s" repeatCount="indefinite" />
                   </circle>
                )}
            </g>
          );
        })}
      </g>

      {/* Group: Connections 2 (Hidden -> Output) */}
      <g opacity={phase === 'propagate' || phase === 'result' ? 1 : 0.1} className="transition-opacity duration-500">
        {connections2.map((line, i) => (
          <path 
            key={line.key}
            d={`M ${line.x1} ${line.y1} C ${line.x1 + 100} ${line.y1}, ${line.x2 - 100} ${line.y2}, ${line.x2} ${line.y2}`}
            stroke={phase === 'result' && Math.floor(i / outputNodes) % 3 === 0 ? "#06b6d4" : "#334155"} // Highlight random paths on result
            strokeWidth="1"
            fill="none"
            strokeDasharray={phase === 'propagate' ? "10 10" : "none"}
            opacity={0.3}
          >
             {phase === 'propagate' && (
                <animate attributeName="stroke-dashoffset" from="100" to="0" dur="0.5s" begin="0.5s" repeatCount="indefinite" />
             )}
          </path>
        ))}
      </g>

      {/* Group: Output Layer */}
      <g>
        <text x={outputLayerX + 50} y={outputStartY - 30} fill="#94a3b8" textAnchor="middle" fontSize="14">输出层 Output (0-9)</text>
        {probabilities.map((prob, i) => {
          const y = outputStartY + i * outputNodeSpacing;
          const barWidth = prob * 150;
          const isTarget = i === currentDigit && phase === 'result';
          const color = isTarget ? '#10b981' : '#64748b';
          
          return (
            <g key={i} transform={`translate(${outputLayerX}, ${y})`}>
              {/* Label */}
              <text x="-20" y="5" fill="#fff" textAnchor="end" fontSize="12">{i}</text>
              
              {/* Background Bar */}
              <rect x="0" y="-6" width="150" height="12" fill="#1e293b" rx="2" />
              
              {/* Active Bar */}
              <rect 
                x="0" y="-6" 
                width={barWidth} height="12" 
                fill={color} 
                rx="2"
                filter={isTarget ? 'url(#glow)' : ''}
                className="transition-all duration-700 ease-out"
              />
              
              {/* Percentage Text */}
              <text x={160} y="5" fill={color} fontSize="11" className="transition-all duration-700">
                {(prob * 100).toFixed(1)}%
              </text>

              {/* Highlight Circle */}
              <circle cx="0" cy="0" r="4" fill={color} />
            </g>
          );
        })}
      </g>

      {/* Result Display Overlay */}
      <g transform={`translate(${VIEW_WIDTH/2}, ${VIEW_HEIGHT - 60})`} opacity={phase === 'result' ? 1 : 0} className="transition-opacity duration-500">
         <rect x="-150" y="-30" width="300" height="60" fill="#0f172a" stroke="#10b981" strokeWidth="2" rx="8" />
         <text x="0" y="10" fill="#fff" textAnchor="middle" fontSize="24" fontWeight="bold">
            识别结果: {currentDigit}
         </text>
         <text x="0" y="40" fill="#10b981" textAnchor="middle" fontSize="12" letterSpacing="2">
            CONFIDENCE: {(probabilities[currentDigit] * 100).toFixed(2)}%
         </text>
      </g>
    </svg>
  );
};