'use client';

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

// --- Constants & Config ---
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const UNIT = 40; // Pixel size of one grid unit
const A_VAL = 5; // Units for a
const B_VAL = 3; // Units for b

const COLORS = {
  bg: '#0f172a',       // Slate 900
  grid: '#1e293b',     // Slate 800
  gridLine: '#334155', // Slate 700
  a: '#06b6d4',        // Cyan 500 (a component)
  b: '#d946ef',        // Fuchsia 500 (b component)
  ab: '#8b5cf6',       // Violet 500 (ab component)
  textMain: '#e2e8f0', // Slate 200
  textSub: '#94a3b8',  // Slate 400
  accent: '#f59e0b',   // Amber 500
  success: '#10b981',  // Emerald 500
};

// Center the geometry
const TOTAL_SIZE = (A_VAL + B_VAL) * UNIT;
const ORIGIN_X = (VIEW_WIDTH - TOTAL_SIZE) / 2;
const ORIGIN_Y = (VIEW_HEIGHT - TOTAL_SIZE) / 2;

// --- Helper Types ---
interface Particle {
  id: number;
  x: number;
  y: number;
  vx: number;
  vy: number;
  life: number;
}

export const PerfectSquareFormulaTech = () => {
  // Phase Control
  // 0: Init / System Scan
  // 1: Draw Outer Frame (Length a + b)
  // 2: Partition / Cut (Grid lines)
  // 3: Materialize Regions (Fill colors)
  // 4: Labeling (Dimensions)
  // 5: Explosion / Separation (Visualizing components)
  // 6: Equation Derivation (Text sync)
  // 7: Merge & Complete
  const [phase, setPhase] = useState(0);
  const [resetKey, setResetKey] = useState(0);
  
  // Animation Loop Ref for Particles (Visual Flair)
  const requestRef = useRef<number>();
  const [particles, setParticles] = useState<Particle[]>([]);

  // Calculate Geometry Regions
  // Region 1: a^2 (Top-Left)
  // Region 2: ab (Top-Right)
  // Region 3: ab (Bottom-Left)
  // Region 4: b^2 (Bottom-Right)
  const regions = useMemo(() => {
    return {
      a2: { x: 0, y: 0, w: A_VAL * UNIT, h: A_VAL * UNIT, color: COLORS.a, label: 'a²' },
      ab1: { x: A_VAL * UNIT, y: 0, w: B_VAL * UNIT, h: A_VAL * UNIT, color: COLORS.ab, label: 'ab' },
      ab2: { x: 0, y: A_VAL * UNIT, w: A_VAL * UNIT, h: B_VAL * UNIT, color: COLORS.ab, label: 'ab' },
      b2: { x: A_VAL * UNIT, y: A_VAL * UNIT, w: B_VAL * UNIT, h: B_VAL * UNIT, color: COLORS.b, label: 'b²' },
    };
  }, []);

  // Main Sequence Controller
  useEffect(() => {
    let timer: NodeJS.Timeout;
    const runSequence = async () => {
      setPhase(0);
      await wait(1000); // Scan
      setPhase(1);      // Frame
      await wait(1500);
      setPhase(2);      // Grid
      await wait(1000);
      setPhase(3);      // Fill
      await wait(1500);
      setPhase(4);      // Labels
      await wait(2000);
      setPhase(5);      // Explode
      await wait(3000);
      setPhase(6);      // Equation
      await wait(4000);
      setPhase(7);      // Merge
      await wait(3000);
      setResetKey(k => k + 1); // Loop
    };
    runSequence();
    return () => clearTimeout(timer);
  }, [resetKey]);

  const wait = (ms: number) => new Promise(r => setTimeout(r, ms));

  // Particle System for "Data Flow" effect
  useEffect(() => {
    const animate = () => {
      // Very simple particle update logic to avoid heavy state churn
      // In a real app, might use a canvas overlay, but here we keep SVG strict
      // We'll just oscillate a time variable for shader-like effects via CSS variables
      // instead of full particle physics to maintain 60fps React performance.
      requestRef.current = requestAnimationFrame(animate);
    };
    requestRef.current = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(requestRef.current!);
  }, []);

  // Calculate Explosion Offsets (Gap between blocks in Phase 5)
  const gap = phase === 5 || phase === 6 ? 20 : 0;
  
  // Dynamic Opacities
  const gridOpacity = phase >= 2 ? 0.3 : 0;
  const fillOpacity = phase >= 3 ? 0.8 : 0;
  
  return (
    <div className="w-full h-full flex items-center justify-center bg-slate-900 overflow-hidden relative font-sans">
      <style>{`
        @keyframes scanline {
          0% { transform: translateY(-100%); opacity: 0; }
          50% { opacity: 0.5; }
          100% { transform: translateY(100%); opacity: 0; }
        }
        @keyframes pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.5; }
        }
        @keyframes typing {
          from { width: 0 }
          to { width: 100% }
        }
        .tech-font { font-family: 'JetBrains Mono', 'Fira Code', monospace; }
        .glow-text { text-shadow: 0 0 10px rgba(255,255,255,0.5); }
      `}</style>

      {/* Main SVG Canvas */}
      <svg 
        viewBox={`0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`} 
        className="w-full max-w-5xl shadow-2xl rounded-xl select-none"
        style={{ background: COLORS.bg }}
      >
        <defs>
          <pattern id="smallGrid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke={COLORS.grid} strokeWidth="0.5" />
          </pattern>
          <filter id="neon-glow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur stdDeviation="2.5" result="coloredBlur" />
            <feMerge>
              <feMergeNode in="coloredBlur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
        </defs>

        {/* --- Background Elements --- */}
        <rect width="100%" height="100%" fill="url(#smallGrid)" opacity="0.3" />
        
        {/* Scanning Line (Cyberpunk feel) */}
        <rect width="100%" height="2" fill={COLORS.a} opacity={phase === 0 ? 0.6 : 0} style={{ 
          filter: 'blur(2px)',
          animation: phase === 0 ? 'scanline 1.5s linear infinite' : 'none' 
        }} />

        {/* --- Main Geometry Group --- */}
        <g transform={`translate(${ORIGIN_X}, ${ORIGIN_Y})`}>
          
          {/* Phase 1: Outer Brackets showing (a + b) */}
          <g opacity={phase >= 1 ? 1 : 0} style={{ transition: 'opacity 1s' }}>
            {/* Top Bracket */}
            <path 
              d={`M 0 -20 L 0 -30 L ${TOTAL_SIZE} -30 L ${TOTAL_SIZE} -20`} 
              fill="none" stroke={COLORS.textSub} strokeWidth="2" 
            />
            <text x={TOTAL_SIZE/2} y="-40" textAnchor="middle" fill={COLORS.textMain} className="tech-font" fontSize="16">
              (a + b)
            </text>

            {/* Left Bracket */}
            <path 
              d={`M -20 0 L -30 0 L -30 ${TOTAL_SIZE} L -20 ${TOTAL_SIZE}`} 
              fill="none" stroke={COLORS.textSub} strokeWidth="2" 
            />
            <text x="-40" y={TOTAL_SIZE/2} textAnchor="middle" transform={`rotate(-90, -40, ${TOTAL_SIZE/2})`} fill={COLORS.textMain} className="tech-font" fontSize="16">
              (a + b)
            </text>
          </g>

          {/* Phase 2: Detailed Length Markers (a and b separation) */}
          <g opacity={phase >= 2 ? 1 : 0} style={{ transition: 'opacity 1s' }}>
             {/* Top Markers */}
             <line x1={regions.a2.w} y1="-30" x2={regions.a2.w} y2="-15" stroke={COLORS.gridLine} strokeDasharray="4 2" />
             <text x={regions.a2.w / 2} y="-15" textAnchor="middle" fill={COLORS.a} fontSize="14" fontWeight="bold">a</text>
             <text x={regions.a2.w + regions.ab1.w / 2} y="-15" textAnchor="middle" fill={COLORS.b} fontSize="14" fontWeight="bold">b</text>

             {/* Left Markers */}
             <line x1="-30" y1={regions.a2.h} x2="-15" y2={regions.a2.h} stroke={COLORS.gridLine} strokeDasharray="4 2" />
             <text x="-15" y={regions.a2.h / 2} textAnchor="middle" dominantBaseline="middle" fill={COLORS.a} fontSize="14" fontWeight="bold">a</text>
             <text x="-15" y={regions.a2.h + regions.ab2.h / 2} textAnchor="middle" dominantBaseline="middle" fill={COLORS.b} fontSize="14" fontWeight="bold">b</text>
          </g>

          {/* --- The Four Blocks --- */}
          {/* Using CSS transforms for the explosion effect */}
          
          {/* Block a² */}
          <g 
            transform={`translate(${-gap}, ${-gap})`}
            style={{ transition: 'transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275)' }}
          >
            <rect 
              x={regions.a2.x} y={regions.a2.y} width={regions.a2.w} height={regions.a2.h}
              fill={regions.a2.color} fillOpacity={fillOpacity}
              stroke={COLORS.textMain} strokeWidth={phase >= 2 ? 2 : 0}
              style={{ transition: 'all 0.8s' }}
            />
            {/* Internal Grid for a² */}
            <path 
              d={`M 0 0 L ${regions.a2.w} ${regions.a2.h} M ${regions.a2.w} 0 L 0 ${regions.a2.h}`} 
              stroke="white" strokeWidth="1" opacity={phase >= 3 ? 0.2 : 0} 
            />
            <text 
              x={regions.a2.x + regions.a2.w/2} y={regions.a2.y + regions.a2.h/2} 
              textAnchor="middle" dominantBaseline="middle"
              fill="white" fontSize="24" fontWeight="bold"
              opacity={phase >= 4 ? 1 : 0}
              style={{ transition: 'opacity 0.5s', filter: 'url(#neon-glow)' }}
            >
              a²
            </text>
          </g>

          {/* Block ab (Top Right) */}
          <g 
            transform={`translate(${gap}, ${-gap})`}
            style={{ transition: 'transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275)' }}
          >
            <rect 
              x={regions.ab1.x} y={regions.ab1.y} width={regions.ab1.w} height={regions.ab1.h}
              fill={regions.ab1.color} fillOpacity={fillOpacity}
              stroke={COLORS.textMain} strokeWidth={phase >= 2 ? 2 : 0}
              style={{ transition: 'all 0.8s' }}
            />
            <text 
              x={regions.ab1.x + regions.ab1.w/2} y={regions.ab1.y + regions.ab1.h/2} 
              textAnchor="middle" dominantBaseline="middle"
              fill="white" fontSize="20" fontWeight="bold"
              opacity={phase >= 4 ? 1 : 0}
              style={{ transition: 'opacity 0.5s' }}
            >
              ab
            </text>
          </g>

          {/* Block ab (Bottom Left) */}
          <g 
            transform={`translate(${-gap}, ${gap})`}
            style={{ transition: 'transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275)' }}
          >
            <rect 
              x={regions.ab2.x} y={regions.ab2.y} width={regions.ab2.w} height={regions.ab2.h}
              fill={regions.ab2.color} fillOpacity={fillOpacity}
              stroke={COLORS.textMain} strokeWidth={phase >= 2 ? 2 : 0}
              style={{ transition: 'all 0.8s' }}
            />
            <text 
              x={regions.ab2.x + regions.ab2.w/2} y={regions.ab2.y + regions.ab2.h/2} 
              textAnchor="middle" dominantBaseline="middle"
              fill="white" fontSize="20" fontWeight="bold"
              opacity={phase >= 4 ? 1 : 0}
              style={{ transition: 'opacity 0.5s' }}
            >
              ab
            </text>
          </g>

          {/* Block b² */}
          <g 
            transform={`translate(${gap}, ${gap})`}
            style={{ transition: 'transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275)' }}
          >
            <rect 
              x={regions.b2.x} y={regions.b2.y} width={regions.b2.w} height={regions.b2.h}
              fill={regions.b2.color} fillOpacity={fillOpacity}
              stroke={COLORS.textMain} strokeWidth={phase >= 2 ? 2 : 0}
              style={{ transition: 'all 0.8s' }}
            />
            <path 
              d={`M ${regions.b2.x} ${regions.b2.y} L ${regions.b2.x + regions.b2.w} ${regions.b2.y + regions.b2.h}`} 
              stroke="white" strokeWidth="1" opacity={phase >= 3 ? 0.2 : 0} 
            />
            <text 
              x={regions.b2.x + regions.b2.w/2} y={regions.b2.y + regions.b2.h/2} 
              textAnchor="middle" dominantBaseline="middle"
              fill="white" fontSize="24" fontWeight="bold"
              opacity={phase >= 4 ? 1 : 0}
              style={{ transition: 'opacity 0.5s', filter: 'url(#neon-glow)' }}
            >
              b²
            </text>
          </g>

          {/* Area Summary Overlay (Appears during Explosion) */}
          <g opacity={phase === 5 || phase === 6 ? 1 : 0} style={{ transition: 'opacity 0.5s' }}>
             {/* Connector lines to center */}
             <line x1={regions.a2.w/2 - gap} y1={regions.a2.h/2 - gap} x2={TOTAL_SIZE/2} y2={TOTAL_SIZE/2} stroke={COLORS.a} strokeWidth="1" strokeDasharray="2 2" />
             <line x1={regions.b2.x + regions.b2.w/2 + gap} y1={regions.b2.y + regions.b2.h/2 + gap} x2={TOTAL_SIZE/2} y2={TOTAL_SIZE/2} stroke={COLORS.b} strokeWidth="1" strokeDasharray="2 2" />
             <circle cx={TOTAL_SIZE/2} cy={TOTAL_SIZE/2} r="4" fill={COLORS.textMain} />
          </g>

        </g>

        {/* --- UI / HUD Layer --- */}
        <g>
          {/* Header */}
          <g transform="translate(40, 50)">
            <path d="M 0 0 L 10 0 L 10 20 L 0 20 Z" fill={COLORS.success} />
            <text x="20" y="16" fill={COLORS.textMain} fontSize="20" fontWeight="bold" letterSpacing="1">完全平方公式</text>
            <text x="20" y="34" fill={COLORS.textSub} fontSize="12" className="tech-font">PERFECT SQUARE FORMULA</text>
          </g>

          {/* Phase Indicator */}
          <g transform="translate(650, 50)">
             <text textAnchor="end" x="-10" y="16" fill={COLORS.textSub} fontSize="12" className="tech-font">
               STATUS: {phase === 0 ? "INIT" : phase < 5 ? "CONSTRUCT" : phase < 7 ? "ANALYSIS" : "COMPLETE"}
             </text>
             <rect x="0" y="5" width="10" height="10" fill={phase % 2 === 0 ? COLORS.accent : COLORS.success}>
                <animate attributeName="opacity" values="1;0.5;1" dur="1s" repeatCount="indefinite" />
             </rect>
          </g>

          {/* Formula Display (Bottom) */}
          <g transform={`translate(${VIEW_WIDTH/2}, ${VIEW_HEIGHT - 60})`}>
            {/* Background Panel */}
            <rect x="-250" y="-30" width="500" height="60" rx="4" fill="rgba(15, 23, 42, 0.9)" stroke={COLORS.gridLine} strokeWidth="1" />
            
            {/* Left Side: (a+b)^2 */}
            <text x="-220" y="10" fill={COLORS.textMain} fontSize="28" fontWeight="bold" className="tech-font" opacity={phase >= 1 ? 1 : 0}>
              (a + b)²
            </text>
            
            {/* Equals Sign */}
            <text x="-80" y="10" fill={COLORS.textSub} fontSize="28" fontWeight="bold" opacity={phase >= 2 ? 1 : 0}>
              =
            </text>

            {/* Right Side Components */}
            <g transform="translate(-40, 0)">
              {/* a^2 */}
              <text x="0" y="10" fill={COLORS.a} fontSize="28" fontWeight="bold" opacity={phase >= 4 ? 1 : 0} style={{ transition: 'opacity 0.5s' }}>
                a²
              </text>
              
              {/* + 2ab */}
              <g opacity={phase >= 4 ? 1 : 0} style={{ transition: 'opacity 0.5s 0.2s' }}>
                <text x="45" y="10" fill={COLORS.textSub} fontSize="24" fontWeight="bold"> + </text>
                <text x="75" y="10" fill={COLORS.ab} fontSize="28" fontWeight="bold"> 2ab </text>
              </g>

              {/* + b^2 */}
              <g opacity={phase >= 4 ? 1 : 0} style={{ transition: 'opacity 0.5s 0.4s' }}>
                <text x="140" y="10" fill={COLORS.textSub} fontSize="24" fontWeight="bold"> + </text>
                <text x="170" y="10" fill={COLORS.b} fontSize="28" fontWeight="bold"> b² </text>
              </g>
            </g>

            {/* Scanning underline for equation */}
            <rect x="-240" y="20" width={phase >= 6 ? 480 : 0} height="2" fill={COLORS.success}>
              <animate attributeName="width" from="0" to="480" dur="2s" begin="indefinite" fill="freeze" />
            </rect>
          </g>

          {/* Helper Text for "Geometry Proof" */}
          <g transform={`translate(40, ${VIEW_HEIGHT - 40})`} opacity={phase >= 5 ? 1 : 0} style={{ transition: 'opacity 1s' }}>
             <text fill={COLORS.textSub} fontSize="14" fontStyle="italic">
               Area (Total) = Sum of Parts
             </text>
          </g>

        </g>
      </svg>
    </div>
  );
};