import React, { useState, useEffect, useRef, useCallback } from 'react';
import { Target, BookOpen, Play, RefreshCw, Trophy, Info, Settings, MousePointer2, Crosshair, Move, GripHorizontal, Circle, Grid } from 'lucide-react';

// --- Constants & Types ---
const TABLE_WIDTH = 800;
const TABLE_HEIGHT = 400;
const BALL_RADIUS = 10;
const CUSHION_WIDTH = 20;

// Physics Constants
const FRICTION = 0.985;
const WALL_BOUNCE = 0.7;
const BALL_BOUNCE = 0.9;
const STOP_THRESHOLD = 0.05;

// Colors
const COLOR_TABLE = '#2e7d32'; 
const COLOR_FRAME = '#5d4037';
const COLOR_CUE_BALL = '#ffffff';
const COLOR_YELLOW = '#ffeb3b'; 
const COLOR_RED = '#e53935'; 

type Point = { x: number; y: number };
type Vector = { x: number; y: number };
type Ball = Point & Vector & { color: string; id: string };
type GameMode = 'practice' | 'quiz' | 'theory';
type GameType = '3cushion' | '4ball';
type SystemType = 'five_half' | 'plus';
type InteractionMode = 'edit' | 'shoot';

// --- Physics Helper Functions ---

const resolveCollision = (b1: Ball, b2: Ball) => {
    const dx = b2.x - b1.x;
    const dy = b2.y - b1.y;
    const dist = Math.sqrt(dx * dx + dy * dy);

    if (dist < BALL_RADIUS * 2) {
        const angle = Math.atan2(dy, dx);
        const overlap = BALL_RADIUS * 2 - dist;
        const moveX = (overlap / 2) * Math.cos(angle);
        const moveY = (overlap / 2) * Math.sin(angle);
        
        b1.x -= moveX;
        b1.y -= moveY;
        b2.x += moveX;
        b2.y += moveY;

        const nx = dx / dist;
        const ny = dy / dist;

        const dvx = b1.vx - b2.vx;
        const dvy = b1.vy - b2.vy;
        
        // Mass is equal
        const p = 2 * (nx * dvx + ny * dvy) / 2;

        b1.vx -= p * nx * BALL_BOUNCE;
        b1.vy -= p * ny * BALL_BOUNCE;
        b2.vx += p * nx * BALL_BOUNCE;
        b2.vy += p * ny * BALL_BOUNCE;
    }
};

const SystemExplanation = ({ type, gameType }: { type: SystemType, gameType: GameType }) => {
  if (gameType === '4ball') {
      return (
        <div className="space-y-4 text-gray-200">
            <h3 className="text-xl font-bold text-red-400">4구 (Four Ball) 기초</h3>
            <p>4구는 흰 공(수구)으로 두 개의 빨간 공을 모두 맞추면 득점하는 게임입니다.</p>
            
            <div className="bg-gray-800 p-4 rounded-lg border border-gray-600 space-y-2">
                <p className="font-bold text-yellow-400">✅ 두께와 분리각</p>
                <ul className="list-disc pl-5 text-sm space-y-1 text-gray-300">
                    <li><span className="text-white font-bold">정면(100%)</span>: 수구는 멈추고 적구만 앞으로 나갑니다.</li>
                    <li><span className="text-white font-bold">절반(50%)</span>: 수구는 약 60도, 적구는 30도 방향으로 분리됩니다.</li>
                    <li><span className="text-white font-bold">얇게</span>: 수구가 많이 꺾이지 않고 진행합니다.</li>
                </ul>
                <div className="text-xs text-blue-300 mt-2">
                    * 연습 모드의 '두께 조절' 슬라이더를 움직여 분리각을 확인하세요.
                </div>
            </div>
        </div>
      );
  }

  if (type === 'five_half') {
    return (
      <div className="space-y-4 text-gray-200">
        <h3 className="text-xl font-bold text-yellow-400">파이브 앤 하프 시스템 (Five & Half)</h3>
        <p>3쿠션의 가장 기본이 되는 시스템입니다.</p>
        <div className="bg-gray-800 p-4 rounded-lg border border-gray-600">
          <p className="text-lg font-mono text-center font-bold text-green-400 mb-2">
            수구수 - 3쿠션수 = 1쿠션수
          </p>
        </div>
        <div className="grid grid-cols-2 gap-4 text-sm mt-2">
            <div>
                <strong className="text-white block mb-1">수구수 (Start)</strong>
                <ul className="list-disc pl-4 text-gray-400">
                    <li>장축 코너: 50</li>
                    <li>중간: 45, 40, 35...</li>
                </ul>
            </div>
            <div>
                 <strong className="text-white block mb-1">3쿠션수 (Arrival)</strong>
                 <ul className="list-disc pl-4 text-gray-400">
                    <li>코너: 20, 포인트당: 10씩 증가</li>
                 </ul>
            </div>
        </div>
      </div>
    );
  }
  
  return (
    <div className="space-y-4 text-gray-200">
      <h3 className="text-xl font-bold text-yellow-400">플러스 시스템 (Plus System)</h3>
      <p>수구와 3쿠션 지점을 합산하여 코너를 공략하는 시스템입니다.</p>
      <div className="bg-gray-800 p-4 rounded-lg border border-gray-600">
        <p className="text-lg font-mono text-center font-bold text-green-400 mb-2">
          수구수 + 1쿠션수 = 3쿠션수
        </p>
      </div>
    </div>
  );
};

export default function BilliardApp() {
  // --- State ---
  const [mode, setMode] = useState<GameMode>('practice');
  const [gameType, setGameType] = useState<GameType>('3cushion');
  const [interactionMode, setInteractionMode] = useState<InteractionMode>('edit');
  const [system, setSystem] = useState<SystemType>('five_half');
  
  // Dynamic Ball State
  const [balls, setBalls] = useState<Record<string, Ball>>({
    white: { x: 200, y: 300, vx: 0, vy: 0, color: COLOR_CUE_BALL, id: 'white' },
    yellow: { x: 600, y: 100, vx: 0, vy: 0, color: COLOR_YELLOW, id: 'yellow' },
    red: { x: 600, y: 300, vx: 0, vy: 0, color: COLOR_RED, id: 'red' },
  });

  const [target3C, setTarget3C] = useState<number>(20); 
  const [showPath, setShowPath] = useState(true);
  const [score, setScore] = useState(0);
  const [quizMessage, setQuizMessage] = useState("");
  
  // Cue & Spin State
  const [cueAngle, setCueAngle] = useState(0);
  const [cuePower, setCuePower] = useState(0);
  const [isShooting, setIsShooting] = useState(false);
  const [hitOffset, setHitOffset] = useState({ x: 0, y: 0 }); // -1 to 1 (normalized)
  const [recommendedSpin, setRecommendedSpin] = useState({ x: 0, y: 0 }); 

  // Control Box State
  const [controlPos, setControlPos] = useState({ x: 20, y: 320 });
  const [isDraggingControl, setIsDraggingControl] = useState(false);
  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });

  const canvasRef = useRef<HTMLCanvasElement>(null);
  const isDraggingBall = useRef<string | null>(null);
  const requestRef = useRef<number>();
  const isAiming = useRef<boolean>(false);

  const innerWidth = TABLE_WIDTH - CUSHION_WIDTH * 2;
  const innerHeight = TABLE_HEIGHT - CUSHION_WIDTH * 2;
  const offsetX = CUSHION_WIDTH;
  const offsetY = CUSHION_WIDTH;

  // --- Initialize / Reset Balls based on Game Type ---
  const initBalls = useCallback((type: GameType) => {
      if (type === '3cushion') {
          setBalls({
            white: { x: 200, y: 300, vx: 0, vy: 0, color: COLOR_CUE_BALL, id: 'white' },
            yellow: { x: 600, y: 100, vx: 0, vy: 0, color: COLOR_YELLOW, id: 'yellow' },
            red: { x: 600, y: 300, vx: 0, vy: 0, color: COLOR_RED, id: 'red' },
          });
          setTarget3C(20);
      } else {
          setBalls({
            white: { x: 200, y: 300, vx: 0, vy: 0, color: COLOR_CUE_BALL, id: 'white' },
            yellow: { x: 600, y: 100, vx: 0, vy: 0, color: COLOR_YELLOW, id: 'yellow' },
            red1: { x: 500, y: 200, vx: 0, vy: 0, color: COLOR_RED, id: 'red1' },
            red2: { x: 500, y: 250, vx: 0, vy: 0, color: COLOR_RED, id: 'red2' },
          });
          setTarget3C(30); // Center hit default
      }
      setIsShooting(false);
  }, []);

  const handleGameTypeChange = (type: GameType) => {
      setGameType(type);
      initBalls(type);
      setShowPath(true); 
  };

  // --- Physics Loop ---
  const updatePhysics = useCallback(() => {
    setBalls(prevBalls => {
        const nextBalls = { ...prevBalls };
        let moving = false;
        const ballKeys = Object.keys(nextBalls);

        ballKeys.forEach(key => {
            const ball = nextBalls[key];
            ball.x += ball.vx;
            ball.y += ball.vy;
            ball.vx *= FRICTION;
            ball.vy *= FRICTION;
            if (Math.abs(ball.vx) < STOP_THRESHOLD) ball.vx = 0;
            if (Math.abs(ball.vy) < STOP_THRESHOLD) ball.vy = 0;
            if (ball.vx !== 0 || ball.vy !== 0) moving = true;

            // Wall Collisions
            if (ball.x < CUSHION_WIDTH + BALL_RADIUS) {
                ball.x = CUSHION_WIDTH + BALL_RADIUS;
                ball.vx = -ball.vx * WALL_BOUNCE;
            } else if (ball.x > TABLE_WIDTH - CUSHION_WIDTH - BALL_RADIUS) {
                ball.x = TABLE_WIDTH - CUSHION_WIDTH - BALL_RADIUS;
                ball.vx = -ball.vx * WALL_BOUNCE;
            }
            if (ball.y < CUSHION_WIDTH + BALL_RADIUS) {
                ball.y = CUSHION_WIDTH + BALL_RADIUS;
                ball.vy = -ball.vy * WALL_BOUNCE;
            } else if (ball.y > TABLE_HEIGHT - CUSHION_WIDTH - BALL_RADIUS) {
                ball.y = TABLE_HEIGHT - CUSHION_WIDTH - BALL_RADIUS;
                ball.vy = -ball.vy * WALL_BOUNCE;
            }
        });

        for (let i = 0; i < ballKeys.length; i++) {
            for (let j = i + 1; j < ballKeys.length; j++) {
                resolveCollision(nextBalls[ballKeys[i]], nextBalls[ballKeys[j]]);
            }
        }

        if (!moving && isShooting) {
            setIsShooting(false);
        }
        return nextBalls;
    });
  }, [isShooting]);

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


  // --- System Calculations & Visuals ---
  const calculatePath = () => {
    if (!balls.white) return null;

    if (gameType === '4ball') {
        let nearestKey = '';
        let minDist = Infinity;
        Object.keys(balls).forEach(key => {
            if (key !== 'white' && key !== 'yellow') { // Aim for red balls
                const dx = balls[key].x - balls.white.x;
                const dy = balls[key].y - balls.white.y;
                const dist = Math.sqrt(dx*dx + dy*dy);
                if (dist < minDist) {
                    minDist = dist;
                    nearestKey = key;
                }
            }
        });

        if (!nearestKey) return null;
        const targetBall = balls[nearestKey];

        const thicknessFactor = (target3C - 30) / 30; // -1 to 1
        const maxOffset = BALL_RADIUS * 1.9; 
        const aimOffset = thicknessFactor * maxOffset;

        const dx = targetBall.x - balls.white.x;
        const dy = targetBall.y - balls.white.y;
        const dist = Math.sqrt(dx*dx + dy*dy);
        const nx = dx / dist;
        const ny = dy / dist;

        const px = -ny;
        const py = nx;

        const GBC = {
            x: targetBall.x - (Math.sqrt(4*BALL_RADIUS*BALL_RADIUS - aimOffset*aimOffset) * nx) + (aimOffset * px),
            y: targetBall.y - (Math.sqrt(4*BALL_RADIUS*BALL_RADIUS - aimOffset*aimOffset) * ny) + (aimOffset * py)
        };

        const locX = GBC.x - targetBall.x;
        const locY = GBC.y - targetBall.y;
        const locLen = Math.sqrt(locX*locX + locY*locY);
        const normLocX = locX / locLen; 
        const normLocY = locY / locLen;

        const tanX = -normLocY;
        const tanY = normLocX;
        
        const dot = nx * tanX + ny * tanY;
        const finalTanX = dot > 0 ? tanX : -tanX;
        const finalTanY = dot > 0 ? tanY : -tanY;

        const projectionDist = 300;
        let p2 = { x: GBC.x + finalTanX * projectionDist, y: GBC.y + finalTanY * projectionDist };
        
        const walls = [
             { val: CUSHION_WIDTH, axis: 'x', dir: 1 }, // Left
             { val: TABLE_WIDTH - CUSHION_WIDTH, axis: 'x', dir: -1 }, // Right
             { val: CUSHION_WIDTH, axis: 'y', dir: 1 }, // Top
             { val: TABLE_HEIGHT - CUSHION_WIDTH, axis: 'y', dir: -1 } // Bottom
        ];
        
        let minT = Infinity;
        let wallHit = null;
        
        walls.forEach(w => {
            const dirVal = w.axis === 'x' ? finalTanX : finalTanY;
            const originVal = w.axis === 'x' ? GBC.x : GBC.y;
            if (dirVal !== 0) {
                const t = (w.val - originVal) / dirVal;
                if (t > 0 && t < minT) {
                     const otherCoord = (w.axis === 'x' ? GBC.y : GBC.x) + t * (w.axis === 'x' ? finalTanY : finalTanX);
                     const maxOther = w.axis === 'x' ? TABLE_HEIGHT : TABLE_WIDTH;
                     if (otherCoord >= 0 && otherCoord <= maxOther) {
                         minT = t;
                         wallHit = w;
                     }
                }
            }
        });

        const bouncePath = [];
        if (wallHit && minT < Infinity) {
             const hitX = GBC.x + finalTanX * minT;
             const hitY = GBC.y + finalTanY * minT;
             bouncePath.push({x: hitX, y: hitY});
             
             const refX = wallHit.axis === 'x' ? -finalTanX : finalTanX;
             const refY = wallHit.axis === 'y' ? -finalTanY : finalTanY;
             bouncePath.push({x: hitX + refX * 200, y: hitY + refY * 200});
        } else {
             bouncePath.push(p2);
        }

        return {
            type: '4ball',
            ghostBall: GBC,
            targetBallPos: targetBall,
            cueBallPath: bouncePath,
            objectBallPath: { x: targetBall.x - normLocX * 100, y: targetBall.y - normLocY * 100 },
            objectDir: { x: -normLocX, y: -normLocY } 
        };

    } else {
        const startVal = 50 - (balls.white.x - offsetX) / innerWidth * 40;
        const aimVal = startVal - target3C;
        let aimX = (aimVal / 50) * innerWidth + offsetX;
        
        if (aimX < offsetX) aimX = offsetX;
        if (aimX > innerWidth + offsetX) aimX = innerWidth + offsetX;

        const aimPoint = { x: aimX, y: offsetY };
        const target3X = innerWidth - (target3C / 50) * innerWidth + offsetX;
        const target3Point = { x: target3X, y: innerHeight + offsetY };

        let target4Point = { x: 0, y: 0 };
        if (target3C >= 20) {
            const t = (target3C - 20) / 30;
            target4Point = { x: offsetX + t * (innerWidth * 0.5), y: offsetY };
        } else {
            target4Point = { x: TABLE_WIDTH - CUSHION_WIDTH, y: TABLE_HEIGHT * 0.4 };
        }

        const cushion2Point = { x: TABLE_WIDTH - CUSHION_WIDTH, y: TABLE_HEIGHT / 2 };
        
        let spinX = 0;
        if (aimX < balls.white.x) spinX = -0.7;
        else spinX = 0.7;

        return {
            type: '3cushion',
            startVal,
            aimVal,
            aimPoint,
            cushion2Point,
            target3Point,
            target4Point,
            suggestedSpin: { x: spinX, y: 0.6 }
        };
    }
  };
  
  const sysData = calculatePath();

  // --- Rendering ---
  const drawTable = (ctx: CanvasRenderingContext2D) => {
    ctx.clearRect(0, 0, TABLE_WIDTH, TABLE_HEIGHT);
    ctx.fillStyle = COLOR_FRAME;
    ctx.fillRect(0, 0, TABLE_WIDTH, TABLE_HEIGHT);
    ctx.fillStyle = COLOR_TABLE;
    ctx.fillRect(CUSHION_WIDTH, CUSHION_WIDTH, innerWidth, innerHeight);

    ctx.fillStyle = '#fff';
    const diamondSize = 4;
    for (let i = 0; i <= 8; i++) {
        const x = CUSHION_WIDTH + (innerWidth / 8) * i;
        ctx.beginPath(); ctx.arc(x, CUSHION_WIDTH / 2, diamondSize, 0, Math.PI * 2); ctx.fill();
        ctx.beginPath(); ctx.arc(x, TABLE_HEIGHT - CUSHION_WIDTH / 2, diamondSize, 0, Math.PI * 2); ctx.fill();
        
        if (gameType === '3cushion' && system === 'five_half') {
            ctx.fillStyle = 'rgba(255,255,255,0.7)';
            ctx.font = '10px Arial';
            ctx.textAlign = 'center';
            const startNum = 50 - i * 5; 
            ctx.fillText(startNum.toString(), x, TABLE_HEIGHT - 2);
            ctx.fillText((i*10).toString(), x, 12);
        }
        ctx.fillStyle = '#fff';
    }
    for (let i = 0; i <= 4; i++) {
        const y = CUSHION_WIDTH + (innerHeight / 4) * i;
        ctx.beginPath(); ctx.arc(CUSHION_WIDTH / 2, y, diamondSize, 0, Math.PI * 2); ctx.fill();
        ctx.beginPath(); ctx.arc(TABLE_WIDTH - CUSHION_WIDTH / 2, y, diamondSize, 0, Math.PI * 2); ctx.fill();
    }
  };

  const drawBalls = (ctx: CanvasRenderingContext2D) => {
    Object.values(balls).forEach(ball => {
      ctx.beginPath();
      ctx.arc(ball.x, ball.y, BALL_RADIUS, 0, Math.PI * 2);
      ctx.fillStyle = ball.color;
      ctx.fill();
      
      ctx.beginPath();
      ctx.arc(ball.x + 2, ball.y + 2, BALL_RADIUS, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(0,0,0,0.2)';
      ctx.fill();
      
      if (ball.id === 'white') {
          ctx.strokeStyle = 'rgba(0,0,0,0.5)';
          ctx.lineWidth = 1;
          ctx.stroke();
          
          if (!isShooting && (interactionMode === 'shoot' || interactionMode === 'edit')) {
              ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
              ctx.beginPath();
              const sx = ball.x + hitOffset.x * (BALL_RADIUS * 0.7);
              const sy = ball.y + hitOffset.y * (BALL_RADIUS * 0.7);
              ctx.arc(sx, sy, 2, 0, Math.PI * 2);
              ctx.fill();
          }
      }
    });
  };

  const drawCue = (ctx: CanvasRenderingContext2D) => {
    if (interactionMode !== 'shoot' || isShooting) return;
    if (!balls.white) return;
    
    const lineLen = 100;
    const endX = balls.white.x + Math.cos(cueAngle) * lineLen;
    const endY = balls.white.y + Math.sin(cueAngle) * lineLen;
    
    ctx.beginPath();
    ctx.moveTo(balls.white.x, balls.white.y);
    ctx.lineTo(endX, endY);
    ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
    ctx.lineWidth = 1;
    ctx.setLineDash([2, 2]);
    ctx.stroke();
    ctx.setLineDash([]);

    const cueDist = 20 + cuePower * 0.5;
    const stickLen = 200;
    const cx = balls.white.x - Math.cos(cueAngle) * cueDist;
    const cy = balls.white.y - Math.sin(cueAngle) * cueDist;
    const bx = cx - Math.cos(cueAngle) * stickLen;
    const by = cy - Math.sin(cueAngle) * stickLen;

    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(bx, by);
    ctx.strokeStyle = '#d2b48c'; 
    ctx.lineWidth = 6;
    ctx.lineCap = 'round';
    ctx.stroke();

    const tipLen = 5;
    const tx = cx - Math.cos(cueAngle) * tipLen;
    const ty = cy - Math.sin(cueAngle) * tipLen;
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(tx, ty);
    ctx.strokeStyle = '#3366ff';
    ctx.lineWidth = 6;
    ctx.stroke();
  };

  const drawSystemLines = (ctx: CanvasRenderingContext2D) => {
    if (!showPath || mode === 'quiz' || !sysData) return;
    if (isShooting) return;

    if (sysData.type === '3cushion') {
        // 3-Cushion Visuals
        ctx.beginPath();
        ctx.moveTo(balls.white.x, balls.white.y);
        ctx.lineTo(sysData.aimPoint.x, sysData.aimPoint.y);
        ctx.strokeStyle = '#fff';
        ctx.lineWidth = 2;
        ctx.setLineDash([5, 5]);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(sysData.aimPoint.x, sysData.aimPoint.y);
        ctx.quadraticCurveTo(sysData.cushion2Point.x, sysData.cushion2Point.y, sysData.target3Point.x, sysData.target3Point.y - CUSHION_WIDTH);
        ctx.strokeStyle = 'yellow';
        ctx.lineWidth = 2;
        ctx.setLineDash([]);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(sysData.target3Point.x, sysData.target3Point.y - CUSHION_WIDTH);
        ctx.lineTo(sysData.target4Point.x, sysData.target4Point.y + CUSHION_WIDTH);
        ctx.strokeStyle = 'rgba(255, 255, 0, 0.5)';
        ctx.lineWidth = 2;
        ctx.setLineDash([10, 5]);
        ctx.stroke();

        ctx.beginPath(); ctx.arc(sysData.aimPoint.x, sysData.aimPoint.y, 5, 0, Math.PI * 2); ctx.fillStyle = 'cyan'; ctx.fill();
        ctx.beginPath(); ctx.arc(sysData.target3Point.x, sysData.target3Point.y - CUSHION_WIDTH, 6, 0, Math.PI * 2); ctx.fillStyle = 'orange'; ctx.fill();

    } else if (sysData.type === '4ball' && sysData.ghostBall) {
        // --- 4-Ball Visuals ---
        const { ghostBall, cueBallPath, objectDir, targetBallPos } = sysData;

        // 1. Ghost Ball (Impact Position)
        ctx.beginPath();
        ctx.arc(ghostBall.x, ghostBall.y, BALL_RADIUS, 0, Math.PI * 2);
        ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; // Faint white
        ctx.fill();
        ctx.strokeStyle = 'rgba(255,255,255,0.5)';
        ctx.setLineDash([2,2]);
        ctx.stroke();

        // 2. Line to Ghost Ball
        ctx.beginPath();
        ctx.moveTo(balls.white.x, balls.white.y);
        ctx.lineTo(ghostBall.x, ghostBall.y);
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
        ctx.setLineDash([5, 5]);
        ctx.stroke();

        // 3. Object Ball Path (Red) - Solid Line
        ctx.beginPath();
        ctx.moveTo(targetBallPos.x, targetBallPos.y);
        ctx.lineTo(targetBallPos.x + objectDir.x * 150, targetBallPos.y + objectDir.y * 150);
        ctx.strokeStyle = 'rgba(255, 100, 100, 0.8)';
        ctx.lineWidth = 2;
        ctx.setLineDash([]);
        ctx.stroke();

        // 4. Cue Ball Path (White) - Dashed/Solid with bounces
        if (cueBallPath.length > 0) {
            ctx.beginPath();
            ctx.moveTo(ghostBall.x, ghostBall.y);
            cueBallPath.forEach(p => ctx.lineTo(p.x, p.y));
            ctx.strokeStyle = 'cyan';
            ctx.lineWidth = 2;
            ctx.setLineDash([5,5]);
            ctx.stroke();
        }
    }
  };

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    drawTable(ctx);
    drawSystemLines(ctx);
    drawBalls(ctx);
    drawCue(ctx);

  }, [balls, system, showPath, target3C, mode, cueAngle, cuePower, interactionMode, hitOffset, gameType]);

  // --- Interaction Handlers (Responsive Scale) ---
  const getEventPos = (e: React.MouseEvent | React.TouchEvent | React.PointerEvent) => {
      const canvas = canvasRef.current;
      if (!canvas) return { x: 0, y: 0 };
      const rect = canvas.getBoundingClientRect();
      const scaleX = TABLE_WIDTH / rect.width;
      const scaleY = TABLE_HEIGHT / rect.height;

      let clientX = 0;
      let clientY = 0;

      if ('touches' in e && e.touches.length > 0) {
          clientX = e.touches[0].clientX;
          clientY = e.touches[0].clientY;
      } else if ('changedTouches' in e && e.changedTouches.length > 0) {
          clientX = e.changedTouches[0].clientX;
          clientY = e.changedTouches[0].clientY;
      } else {
          clientX = (e as React.MouseEvent).clientX;
          clientY = (e as React.MouseEvent).clientY;
      }

      return {
          x: (clientX - rect.left) * scaleX,
          y: (clientY - rect.top) * scaleY
      };
  };

  const handlePointerDown = (e: React.PointerEvent | React.MouseEvent | React.TouchEvent) => {
    if (mode === 'quiz') {
        checkAnswer(e);
        return;
    }

    const { x: mouseX, y: mouseY } = getEventPos(e);

    if (interactionMode === 'edit') {
        for (const key in balls) {
          const ball = balls[key];
          const dx = mouseX - ball.x;
          const dy = mouseY - ball.y;
          if (dx*dx + dy*dy < BALL_RADIUS*BALL_RADIUS * 4) {
            isDraggingBall.current = key;
            return;
          }
        }
    } else if (interactionMode === 'shoot') {
        if (!isShooting) { 
            isAiming.current = true;
            setCuePower(0);
        }
    }
  };

  const handlePointerMove = (e: React.PointerEvent | React.MouseEvent | React.TouchEvent) => {
    if (isDraggingControl) {
        // Global mouse/touch for control box
        let clientX = 0;
        let clientY = 0;
        if ('touches' in e && e.touches.length > 0) { clientX = e.touches[0].clientX; clientY = e.touches[0].clientY; }
        else { clientX = (e as React.MouseEvent).clientX; clientY = (e as React.MouseEvent).clientY; }

        setControlPos({
            x: clientX - dragOffset.x,
            y: clientY - dragOffset.y
        });
        return;
    }

    const { x: mouseX, y: mouseY } = getEventPos(e);

    if (interactionMode === 'edit' && isDraggingBall.current) {
        const x = Math.max(CUSHION_WIDTH + BALL_RADIUS, Math.min(TABLE_WIDTH - CUSHION_WIDTH - BALL_RADIUS, mouseX));
        const y = Math.max(CUSHION_WIDTH + BALL_RADIUS, Math.min(TABLE_HEIGHT - CUSHION_WIDTH - BALL_RADIUS, mouseY));
        setBalls(prev => ({
          ...prev,
          [isDraggingBall.current!]: { ...prev[isDraggingBall.current!], x, y, vx: 0, vy: 0 }
        }));
    } else if (interactionMode === 'shoot' && !isShooting && balls.white) {
        const dx = mouseX - balls.white.x;
        const dy = mouseY - balls.white.y;
        const angle = Math.atan2(dy, dx);
        setCueAngle(angle);

        if (isAiming.current) {
            const dist = Math.sqrt(dx*dx + dy*dy);
            const power = Math.min(Math.max((dist - 50) / 2, 0), 100);
            setCuePower(power);
        }
    }
  };

  const handlePointerUp = () => {
    if (isDraggingControl) {
        setIsDraggingControl(false);
    }
    
    if (interactionMode === 'edit') {
        isDraggingBall.current = null;
    } else if (interactionMode === 'shoot' && isAiming.current) {
        isAiming.current = false;
        if (cuePower > 5) {
            shoot(cuePower);
        }
        setCuePower(0);
    }
  };

  const startDragControl = (e: React.MouseEvent | React.TouchEvent) => {
    e.stopPropagation();
    setIsDraggingControl(true);
    
    let clientX = 0;
    let clientY = 0;
    if ('touches' in e && e.touches.length > 0) { clientX = e.touches[0].clientX; clientY = e.touches[0].clientY; }
    else { clientX = (e as React.MouseEvent).clientX; clientY = (e as React.MouseEvent).clientY; }

    setDragOffset({
        x: clientX - controlPos.x,
        y: clientY - controlPos.y
    });
  };

  const handleSpinClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    const rect = e.currentTarget.getBoundingClientRect();
    const size = rect.width;
    const clickX = e.clientX - rect.left;
    const clickY = e.clientY - rect.top;
    
    let nx = (clickX / size) * 2 - 1;
    let ny = (clickY / size) * 2 - 1;
    
    const dist = Math.sqrt(nx*nx + ny*ny);
    if (dist > 1) {
        nx /= dist;
        ny /= dist;
    }
    
    setHitOffset({ x: nx, y: ny });
  };

  const shoot = (power: number) => {
    if (!balls.white) return;
    setIsShooting(true);
    const speed = power * 0.35;
    // Simple Physics: Apply spin to velocity curve if needed, but for now linear shot
    // Could add curve based on hitOffset.x
    setBalls(prev => ({
        ...prev,
        white: {
            ...prev.white,
            vx: Math.cos(cueAngle) * speed,
            vy: Math.sin(cueAngle) * speed
        }
    }));
  };

  const resetBalls = () => {
     initBalls(gameType);
  };

  const startQuiz = () => {
    setMode('quiz');
    setGameType('3cushion'); 
    setInteractionMode('edit');
    setShowPath(false);
    setQuizMessage("노란 공을 맞추기 위한 1쿠션 지점을 클릭하세요!");
    setBalls({
      white: { x: 150 + Math.random() * 100, y: 300, vx:0, vy:0, color: COLOR_CUE_BALL, id: 'white' },
      yellow: { x: 600, y: 100 + Math.random() * 200, vx:0, vy:0, color: COLOR_YELLOW, id: 'yellow' },
      red: { x: 500 + Math.random() * 100, y: 100 + Math.random() * 200, vx:0, vy:0, color: COLOR_RED, id: 'red' }
    });
    setTarget3C(Math.floor(Math.random() * 30) + 10);
  };

  const checkAnswer = (e: React.MouseEvent | React.TouchEvent | React.PointerEvent) => {
    if (mode !== 'quiz') return;
    const { x: clickX, y: clickY } = getEventPos(e);

    if (clickY > 50) return; 

    const dist = Math.abs(clickX - (sysData as any).aimPoint.x);
    if (dist < 30) {
        setScore(s => s + 10);
        setQuizMessage("정답입니다! 정확한 계산이네요! 🎉");
        setShowPath(true);
        setTimeout(() => startQuiz(), 2000);
    } else {
        setQuizMessage(`아쉽네요. 오차: ${Math.round(dist)}px. 다시 시도해보세요.`);
        setShowPath(true);
    }
  };

  return (
    <div 
        className="flex flex-col items-center justify-center min-h-screen bg-slate-900 p-2 md:p-4 font-sans text-slate-100"
        onMouseMove={(e) => handlePointerMove(e as any)} 
        onTouchMove={(e) => handlePointerMove(e as any)}
        onMouseUp={handlePointerUp}
        onTouchEnd={handlePointerUp}
    >
      <header className="w-full max-w-4xl flex flex-col md:flex-row justify-between items-center mb-6 border-b border-slate-700 pb-4 gap-4">
        <div className="text-center md:text-left">
          <h1 className="text-2xl md:text-3xl font-bold text-yellow-400 flex items-center justify-center md:justify-start gap-2">
            <Trophy className="w-6 h-6 md:w-8 md:h-8" />
            당구 트레이너
          </h1>
          <p className="text-slate-400 mt-1 text-sm md:text-base">3쿠션 시스템 & 4구 게임 마스터</p>
        </div>
        <div className="flex flex-col items-center md:items-end gap-2 w-full md:w-auto">
             <div className="bg-slate-800 p-1 rounded-lg flex border border-slate-600 w-full md:w-auto justify-center">
                <button 
                    onClick={() => handleGameTypeChange('3cushion')}
                    className={`flex-1 md:flex-none px-3 py-1 rounded text-sm font-bold transition ${gameType === '3cushion' ? 'bg-blue-600 text-white' : 'text-gray-400 hover:text-white'}`}>
                    3쿠션 (3-Cushion)
                </button>
                <button 
                    onClick={() => handleGameTypeChange('4ball')}
                    className={`flex-1 md:flex-none px-3 py-1 rounded text-sm font-bold transition ${gameType === '4ball' ? 'bg-red-600 text-white' : 'text-gray-400 hover:text-white'}`}>
                    4구 (4-Ball)
                </button>
             </div>
             <div className="flex gap-2 w-full md:w-auto justify-center">
                <button onClick={() => { setMode('theory'); setInteractionMode('edit'); }} className={`flex-1 md:flex-none flex items-center justify-center gap-2 px-3 py-1.5 rounded-lg text-sm transition ${mode === 'theory' ? 'bg-blue-600' : 'bg-slate-700 hover:bg-slate-600'}`}><BookOpen size={16} /> 이론</button>
                <button onClick={() => { setMode('practice'); setInteractionMode('edit'); }} className={`flex-1 md:flex-none flex items-center justify-center gap-2 px-3 py-1.5 rounded-lg text-sm transition ${mode === 'practice' ? 'bg-green-600' : 'bg-slate-700 hover:bg-slate-600'}`}><Play size={16} /> 연습</button>
                <button onClick={startQuiz} className={`flex-1 md:flex-none flex items-center justify-center gap-2 px-3 py-1.5 rounded-lg text-sm transition ${mode === 'quiz' ? 'bg-purple-600' : 'bg-slate-700 hover:bg-slate-600'}`}><Target size={16} /> 퀴즈</button>
            </div>
        </div>
      </header>

      <div className="w-full max-w-4xl grid grid-cols-1 lg:grid-cols-3 gap-6 relative">
        <div className="lg:col-span-3 bg-slate-800 p-2 md:p-4 rounded-xl shadow-2xl border border-slate-700 flex flex-col items-center select-none">
            <div className="relative w-full">
                <canvas
                    ref={canvasRef}
                    width={TABLE_WIDTH}
                    height={TABLE_HEIGHT}
                    onMouseDown={(e) => handlePointerDown(e)}
                    onTouchStart={(e) => handlePointerDown(e)}
                    className={`rounded shadow-inner w-full h-auto touch-none ${interactionMode === 'shoot' ? 'cursor-none' : 'cursor-move'}`}
                    style={{ background: '#1a1a1a' }}
                />
                
                {mode !== 'quiz' && (
                    <div 
                        className="absolute bg-black/80 backdrop-blur-md border border-white/20 rounded-xl shadow-2xl overflow-hidden animate-fade-in touch-none"
                        style={{ left: controlPos.x, top: controlPos.y, cursor: 'default', width: '280px', maxWidth: '90vw' }}
                        onMouseDown={(e) => e.stopPropagation()} 
                        onTouchStart={(e) => e.stopPropagation()}
                    >
                        <div 
                            className="bg-slate-700/50 p-2 flex items-center justify-center cursor-move hover:bg-slate-600/50 transition" 
                            onMouseDown={(e) => startDragControl(e)}
                            onTouchStart={(e) => startDragControl(e)}
                        >
                            <GripHorizontal className="text-gray-400" size={20} />
                        </div>
                        
                        <div className="p-4 space-y-4">
                            <div className="flex bg-slate-900/50 p-1 rounded-lg gap-1">
                                <button onClick={() => setInteractionMode('edit')} className={`flex-1 flex items-center justify-center gap-2 py-2 rounded text-sm transition font-bold ${interactionMode === 'edit' ? 'bg-blue-600 text-white shadow' : 'hover:bg-slate-700 text-gray-400'}`}><MousePointer2 size={16} /> 배치</button>
                                <button onClick={() => setInteractionMode('shoot')} className={`flex-1 flex items-center justify-center gap-2 py-2 rounded text-sm transition font-bold ${interactionMode === 'shoot' ? 'bg-red-600 text-white shadow' : 'hover:bg-slate-700 text-gray-400'}`}><Crosshair size={16} /> 샷</button>
                            </div>
                            <div className="h-px bg-white/10" />

                            {interactionMode === 'edit' && gameType === '3cushion' && (
                                <div className="space-y-3">
                                    <div className="flex items-center justify-between text-sm">
                                        <span className="text-gray-300">3쿠션 목표값</span>
                                        <span className="font-mono text-yellow-400 font-bold">{target3C}</span>
                                    </div>
                                    <input 
                                        type="range" min="0" max="60" step="1"
                                        value={target3C} onChange={(e) => setTarget3C(parseInt(e.target.value))}
                                        className="w-full accent-yellow-400 cursor-pointer h-2 bg-slate-600 rounded-lg appearance-none"
                                    />
                                    <div className="grid grid-cols-2 gap-2 text-xs text-gray-400 bg-slate-900/50 p-2 rounded">
                                        <div className="flex justify-between"><span>수구:</span><span className="text-white font-mono">{Math.round((sysData as any).startVal)}</span></div>
                                        <div className="flex justify-between"><span>1쿠션:</span><span className="text-cyan-400 font-mono">{Math.round((sysData as any).aimVal)}</span></div>
                                    </div>
                                    <div className="bg-blue-900/30 p-2 rounded text-center border border-blue-500/30">
                                        <span className="text-xs text-blue-300 block mb-1">추천 당점</span>
                                        <div className="flex justify-center gap-2 items-center">
                                            <div className="w-8 h-8 rounded-full bg-white relative border border-gray-400">
                                                 <div className="absolute w-2 h-2 bg-blue-600 rounded-full transform -translate-x-1/2 -translate-y-1/2" style={{ left: `${((sysData as any).suggestedSpin?.x + 1) * 50}%`, top: `${((sysData as any).suggestedSpin?.y + 1) * 50}%` }} />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            )}

                            {interactionMode === 'edit' && gameType === '4ball' && (
                                <div className="space-y-3">
                                    <div className="flex items-center justify-between text-sm">
                                        <span className="text-gray-300">두께 조절 (Aim)</span>
                                        <span className="font-mono text-green-400 font-bold">
                                            {target3C < 25 ? '왼쪽' : target3C > 35 ? '오른쪽' : '정면'}
                                        </span>
                                    </div>
                                    <div className="relative pt-1">
                                        <input 
                                            type="range" min="0" max="60" step="1"
                                            value={target3C} onChange={(e) => setTarget3C(parseInt(e.target.value))}
                                            className="w-full accent-green-400 cursor-pointer h-2 bg-slate-600 rounded-lg appearance-none"
                                        />
                                        <div className="flex justify-between text-[10px] text-gray-400 mt-1">
                                            <span>얇게(L)</span>
                                            <span>정면</span>
                                            <span>얇게(R)</span>
                                        </div>
                                    </div>
                                    <p className="text-xs text-gray-400 text-center bg-slate-700/30 p-2 rounded">
                                        가까운 빨간 공을 기준으로<br/>예상 분리각을 보여줍니다.
                                    </p>
                                </div>
                            )}

                            <div className="space-y-2">
                                <div className="text-xs text-gray-400 font-bold text-center mb-1">내 당점 설정 (수동)</div>
                                <div className="flex justify-center">
                                    <div className="w-20 h-20 rounded-full bg-white relative cursor-pointer shadow-inner border-4 border-slate-300" onClick={handleSpinClick}>
                                        <div className="absolute top-1/2 left-0 w-full h-px bg-gray-300"></div>
                                        <div className="absolute left-1/2 top-0 h-full w-px bg-gray-300"></div>
                                        <div className="absolute w-3 h-3 bg-red-600 rounded-full shadow border border-white transform -translate-x-1/2 -translate-y-1/2 transition-all duration-75" style={{ left: `${(hitOffset.x + 1) * 50}%`, top: `${(hitOffset.y + 1) * 50}%` }} />
                                    </div>
                                </div>
                                {interactionMode === 'shoot' && cuePower > 0 && (
                                     <div className="text-center">
                                        <span className="text-xs font-bold text-red-400">Power: {Math.round(cuePower)}%</span>
                                        <div className="w-full h-1 bg-slate-700 rounded-full mt-1 overflow-hidden"><div className="h-full bg-red-500 transition-all duration-75" style={{ width: `${cuePower}%` }}></div></div>
                                     </div>
                                )}
                            </div>
                        </div>
                    </div>
                )}
                {mode === 'quiz' && (
                    <div className="absolute top-4 left-1/2 -translate-x-1/2 bg-purple-900/90 px-6 py-2 rounded-full text-white font-bold border border-purple-500 animate-fade-in pointer-events-none w-max max-w-[90%] text-center text-sm md:text-base">{quizMessage} (점수: {score})</div>
                )}
            </div>
            <div className="w-full mt-4 flex justify-between items-center px-4">
               <div className="flex gap-4">
                  <div className="flex items-center gap-2"><div className="w-4 h-4 rounded-full bg-white border border-gray-400"></div><span className="text-sm text-gray-400">수구</span></div>
                  <div className="flex items-center gap-2"><span className="w-4 h-1 bg-white border-t border-dashed"></span><span className="text-sm text-gray-400">예상 경로</span></div>
               </div>
               <button onClick={resetBalls} className="text-gray-400 hover:text-white flex items-center gap-1 text-sm"><RefreshCw size={14} /> 배치 초기화</button>
            </div>
        </div>

        <div className="lg:col-span-3 grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="bg-slate-800 p-6 rounded-xl border border-slate-700">
                <div className="flex items-center gap-2 mb-4"><Settings className="text-gray-400" /><h2 className="text-lg font-bold">시스템 설정</h2></div>
                {gameType === '3cushion' ? (
                    <>
                        <div className="grid grid-cols-2 gap-3 mb-6">
                            <button onClick={() => setSystem('five_half')} className={`p-3 rounded-lg text-sm font-bold border transition ${system === 'five_half' ? 'bg-yellow-500/20 border-yellow-500 text-yellow-400' : 'bg-slate-700 border-transparent text-gray-400'}`}>파이브 앤 하프</button>
                            <button onClick={() => setSystem('plus')} className={`p-3 rounded-lg text-sm font-bold border transition ${system === 'plus' ? 'bg-yellow-500/20 border-yellow-500 text-yellow-400' : 'bg-slate-700 border-transparent text-gray-400'}`}>플러스 시스템</button>
                        </div>
                        <div className="flex items-center justify-between bg-slate-700/50 p-3 rounded-lg">
                            <span className="text-sm text-gray-300">가이드라인 보기</span>
                            <button onClick={() => setShowPath(!showPath)} className={`w-12 h-6 rounded-full p-1 transition-colors ${showPath ? 'bg-green-500' : 'bg-gray-600'}`}><div className={`w-4 h-4 rounded-full bg-white transform transition-transform ${showPath ? 'translate-x-6' : 'translate-x-0'}`}></div></button>
                        </div>
                    </>
                ) : (
                    <div className="space-y-4">
                        <div className="bg-slate-900/50 p-4 rounded-lg text-sm text-gray-300 border border-slate-600">
                            <div className="flex items-center gap-2 mb-2 font-bold text-red-400">
                                <Info size={16} /> 4구 연습 가이드
                            </div>
                            <ul className="list-disc pl-5 space-y-1">
                                <li>'배치' 모드에서 <span className="text-green-400">두께 슬라이더</span>를 움직여보세요.</li>
                                <li>내 공이 적구를 맞고 튕겨 나가는 <span className="text-cyan-400">분리각(점선)</span>을 미리 확인할 수 있습니다.</li>
                                <li>적구(빨간 공)의 진행 방향(실선)을 보고 다음 공 포지션을 예측하세요.</li>
                            </ul>
                        </div>
                    </div>
                )}
            </div>

            <div className="bg-slate-800 p-6 rounded-xl border border-slate-700 overflow-y-auto max-h-64 scrollbar-hide">
                <div className="flex items-center gap-2 mb-4"><Info className="text-gray-400" /><h2 className="text-lg font-bold">도움말</h2></div>
                {mode === 'theory' ? <SystemExplanation type={system} gameType={gameType} /> : (
                    <div className="text-sm text-gray-300 space-y-3">
                        <p><span className="text-blue-400 font-bold">가이드 라인:</span> 4구 모드에서는 가장 가까운 공을 기준으로 두께에 따른 분리각을 보여줍니다.</p>
                        <p><span className="text-green-400 font-bold">당점 활용:</span> 컨트롤 박스에서 당점을 설정하면 실제 샷에서 회전이 적용됩니다. (가이드라인은 무회전 기준 분리각을 우선 보여줍니다)</p>
                    </div>
                )}
            </div>
        </div>
      </div>
    </div>
  );
}