'use client';

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


// --- Shared Config ---
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;


// ==========================================
// VIEW 4: FILE RECONSTRUCTION (Refined Matrix)
// ==========================================

const MATRIX_ROWS = 8;
const MATRIX_COLS = 10;
const TOTAL_BLOCKS = MATRIX_ROWS * MATRIX_COLS;
const HEADER_ROWS = 2;
const BLOCK_SIZE = 30;
const BLOCK_GAP = 4;

const HTTP_HEADERS = [
  { key: 'Proto', val: 'HTTP/1.1 200 OK', color: '#ffaa00' },
  { key: 'Date', val: 'Mon, 27 Jul 2025', color: '#ffaa00' },
  { key: 'Content-Type', val: 'image/jpeg', color: '#00ff66' }, // The important one
  { key: 'Content-Length', val: '24051 bytes', color: '#ffaa00' },
];

interface MatrixBeam {
  id: number;
  startX: number;
  startY: number;
  targetX: number;
  targetY: number;
  progress: number;
  color: string;
}

export const FileReconstructionView = () => {
  const [scanIndex, setScanIndex] = useState(0);
  const [beams, setBeams] = useState<MatrixBeam[]>([]);
  const [isComplete, setIsComplete] = useState(false);
  const [revealedHeaders, setRevealedHeaders] = useState<number[]>([]);
  const [imageProgress, setImageProgress] = useState(0); // 0 to 1
  
  const requestRef = useRef<number | undefined>(undefined);
  const beamIdRef = useRef(0);
  const lastTimeRef = useRef(0);

  // Scene Layout
  const matrixX = 80;
  const matrixY = 150;
  
  const headerPanelX = 600;
  const headerPanelY = 100;
  
  const imagePanelX = 600;
  const imagePanelY = 320;
  const imageWidth = 250;
  const imageHeight = 180;

  const animate = (time: number) => {
    if (lastTimeRef.current === 0) lastTimeRef.current = time;
    const deltaTime = time - lastTimeRef.current;
    lastTimeRef.current = time;

    // 1. Beams Animation
    setBeams(prev => {
      return prev.map(b => ({
        ...b,
        progress: b.progress + 0.08 // Beam speed
      })).filter(b => b.progress < 1);
    });

    // 2. Scanning Logic
    if (!isComplete) {
        // Speed control: Headers slow, Body super fast
        const isHeaderPhase = scanIndex < (HEADER_ROWS * MATRIX_COLS);
        const tickRate = isHeaderPhase ? 100 : 10; // ms per block
        
        // We use a simpler probabilistic approach for "tick" based on framerate
        // 60fps ~ 16ms. 
        const chance = isHeaderPhase ? 0.1 : 0.9; // Chance to advance scan per frame
        
        if (Math.random() < chance && scanIndex < TOTAL_BLOCKS) {
             // Trigger Scan for current block
             const row = Math.floor(scanIndex / MATRIX_COLS);
             const col = scanIndex % MATRIX_COLS;
             
             const blockX = matrixX + col * (BLOCK_SIZE + BLOCK_GAP) + BLOCK_SIZE/2;
             const blockY = matrixY + row * (BLOCK_SIZE + BLOCK_GAP) + BLOCK_SIZE/2;
             
             let targetX, targetY, color;
             
             if (row < HEADER_ROWS) {
                 // Target Header Panel
                 const headerIdx = Math.floor(scanIndex / 5); // rough mapping 20 blocks -> 4 headers
                 targetX = headerPanelX;
                 targetY = headerPanelY + headerIdx * 30 + 15;
                 color = '#ffaa00';
                 
                 // Reveal header when beam starts (simplification for instant feedback) or delay?
                 // Let's do it when beam finishes. We simulate delay with timeout or just math.
                 // For visual punch, let's just trigger the header reveal state a bit later.
                 if (!revealedHeaders.includes(headerIdx)) {
                    setTimeout(() => {
                        setRevealedHeaders(prev => [...prev, headerIdx]);
                    }, 300); // Flight time approx
                 }
             } else {
                 // Target Image
                 targetX = imagePanelX + Math.random() * imageWidth; // Random point on image top
                 targetY = imagePanelY + imageHeight; // Shoot to bottom or center
                 color = '#00ccff';
             }

             // Spawn Beam
             const newBeam: MatrixBeam = {
                 id: beamIdRef.current++,
                 startX: blockX,
                 startY: blockY,
                 targetX,
                 targetY,
                 progress: 0,
                 color
             };
             
             setBeams(prev => [...prev, newBeam]);
             
             // Increment Scan
             setScanIndex(prev => prev + 1);
             
             // Update Image Progress
             if (row >= HEADER_ROWS) {
                 const bodyBlocks = TOTAL_BLOCKS - (HEADER_ROWS * MATRIX_COLS);
                 const currentBody = scanIndex - (HEADER_ROWS * MATRIX_COLS);
                 setImageProgress((currentBody + 1) / bodyBlocks);
             }
        }
        
        if (scanIndex >= TOTAL_BLOCKS) {
            setIsComplete(true);
            setTimeout(() => {
                // Reset Loop
                setIsComplete(false);
                setScanIndex(0);
                setBeams([]);
                setRevealedHeaders([]);
                setImageProgress(0);
            }, 4000);
        }
    }

    requestRef.current = requestAnimationFrame(animate);
  };

  useEffect(() => {
    requestRef.current = requestAnimationFrame(animate);
    return () => {
      if (requestRef.current) cancelAnimationFrame(requestRef.current);
    };
  }, [isComplete, scanIndex]); // Dependencies to ensure closure captures state if needed, though ref handles loop

  return (
    <svg viewBox={`0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`} style={{ width: '100%', height: '100%', display: 'block', background: '#0d1117', borderRadius: '0.5rem' }}>
        <defs>
            <clipPath id="revealClip">
                <rect x={imagePanelX} y={imagePanelY} width={imageWidth} height={imageHeight * imageProgress} />
            </clipPath>
        </defs>
        
        <rect width={VIEW_WIDTH} height={VIEW_HEIGHT} fill="#050505" />

        <text x={VIEW_WIDTH/2} y={50} textAnchor="middle" fill="#555" fontSize="14" fontFamily="monospace">
             {isComplete ? "文件还原完成" : "正在处理数据流..."}
        </text>

        {/* --- Left: Data Matrix --- */}
        <g>
            <text x={matrixX} y={matrixY - 20} fill="#666" fontSize="12" fontFamily="monospace">BUFFER MATRIX</text>
            {Array.from({ length: TOTAL_BLOCKS }).map((_, i) => {
                const row = Math.floor(i / MATRIX_COLS);
                const col = i % MATRIX_COLS;
                const isHeader = row < HEADER_ROWS;
                const isScanned = i < scanIndex;
                
                const x = matrixX + col * (BLOCK_SIZE + BLOCK_GAP);
                const y = matrixY + row * (BLOCK_SIZE + BLOCK_GAP);
                
                let fill = '#1a2333';
                if (isScanned) {
                    fill = isHeader ? '#ffaa00' : '#00ccff';
                }
                
                return (
                    <rect key={i} x={x} y={y} width={BLOCK_SIZE} height={BLOCK_SIZE} rx="2" 
                          fill={fill} opacity={isScanned ? (isComplete ? 0.5 : 1) : 0.2}
                          stroke={isScanned ? "#fff" : "none"} strokeWidth={isScanned ? 1 : 0}
                    >
                         {/* Adding binary text for detail */}
                         {i % 3 === 0 && isScanned && (
                             <animate attributeName="opacity" values="1;0.5;1" dur="0.5s" repeatCount="1" />
                         )}
                    </rect>
                );
            })}
            
            {/* Labels for Rows */}
            <text x={matrixX - 10} y={matrixY + BLOCK_SIZE} textAnchor="end" fill="#ffaa00" fontSize="10" fontFamily="monospace" opacity="0.6">HDR</text>
            <text x={matrixX - 10} y={matrixY + BLOCK_SIZE * 3.5} textAnchor="end" fill="#00ccff" fontSize="10" fontFamily="monospace" opacity="0.6">DATA</text>
        </g>

        {/* --- Right Top: Header Info --- */}
        <g>
            <text x={headerPanelX} y={headerPanelY - 20} fill="#666" fontSize="12" fontFamily="monospace">HTTP HEADERS</text>
            <rect x={headerPanelX} y={headerPanelY} width={imageWidth} height={150} fill="#0b101a" stroke="#333" rx="4" />
            
            {HTTP_HEADERS.map((h, i) => {
                const isRevealed = revealedHeaders.includes(i);
                return (
                    <g key={i} transform={`translate(${headerPanelX + 15}, ${headerPanelY + 30 + i * 30})`} opacity={isRevealed ? 1 : 0.1}>
                        <text fill="#888" fontSize="12" fontFamily="monospace">{h.key}: </text>
                        <text x="100" fill={h.color} fontSize="12" fontFamily="monospace" fontWeight="bold">{h.val}</text>
                        {h.key === 'Content-Type' && isRevealed && (
                            <rect x="-5" y="-12" width="230" height="20" fill="none" stroke="#00ff66" strokeWidth="1" strokeDasharray="2 2">
                                <animate attributeName="stroke-dashoffset" from="10" to="0" dur="1s" repeatCount="indefinite" />
                            </rect>
                        )}
                    </g>
                );
            })}
        </g>

        {/* --- Right Bottom: Image --- */}
        <g>
            <text x={imagePanelX} y={imagePanelY - 10} fill="#666" fontSize="12" fontFamily="monospace">PAYLOAD PREVIEW</text>
            {/* Frame */}
            <rect x={imagePanelX} y={imagePanelY} width={imageWidth} height={imageHeight} fill="#0b101a" stroke={isComplete ? "#00ff66" : "#333"} rx="4" />
            <text x={imagePanelX + imageWidth/2} y={imagePanelY + imageHeight/2} textAnchor="middle" fill="#333" fontFamily="monospace">NO DATA</text>
            
            {/* Actual Image (Drawing) */}
            <g clipPath="url(#revealClip)">
                <rect x={imagePanelX} y={imagePanelY} width={imageWidth} height={imageHeight} fill="#1a2333" />
                {/* Scenery */}
                <circle cx={imagePanelX + 200} cy={imagePanelY + 40} r="25" fill="#ffaa00" />
                <path d={`M ${imagePanelX} ${imagePanelY + 180} L ${imagePanelX + 80} ${imagePanelY + 60} L ${imagePanelX + 160} ${imagePanelY + 180} Z`} fill="#00ccff" opacity="0.8" />
                <path d={`M ${imagePanelX + 100} ${imagePanelY + 180} L ${imagePanelX + 180} ${imagePanelY + 80} L ${imagePanelX + 250} ${imagePanelY + 180} Z`} fill="#00ff66" opacity="0.8" />
                <rect x={imagePanelX} y={imagePanelY + 150} width={imageWidth} height="30" fill="#112233" opacity="0.9" />
            </g>

            {/* Scan Line */}
            {imageProgress > 0 && imageProgress < 1 && (
                 <line x1={imagePanelX} y1={imagePanelY + imageHeight * imageProgress} 
                       x2={imagePanelX + imageWidth} y2={imagePanelY + imageHeight * imageProgress} 
                       stroke="#00ccff" strokeWidth="2" filter="url(#glow)" />
            )}
        </g>

        {/* --- Beams (The Light Speed Lines) --- */}
        {beams.map(b => {
             const cx = b.startX + (b.targetX - b.startX) * b.progress;
             const cy = b.startY + (b.targetY - b.startY) * b.progress;
             
             // Trail effect
             const tailX = b.startX + (b.targetX - b.startX) * (Math.max(0, b.progress - 0.1));
             const tailY = b.startY + (b.targetY - b.startY) * (Math.max(0, b.progress - 0.1));
             
             return (
                 <line key={b.id} x1={tailX} y1={tailY} x2={cx} y2={cy} stroke={b.color} strokeWidth="2" strokeLinecap="round" opacity={1 - b.progress} />
             );
        })}

    </svg>
  );
};