import React, { useState, useEffect, useRef, useCallback } from 'react';
import { ArrowLeft, Trophy, Sparkles } from 'lucide-react';

// --- MODEL KOTA (Wizualizacja) ---
interface DetailedKittyProps { isGameOver: boolean; }
const DetailedKitty: React.FC<DetailedKittyProps> = ({ isGameOver }) => {
    const mainColor = isGameOver ? '#cbd5e1' : '#f472b6';
    const stripeColor = '#ec4899';
    const earColor = '#fbcfe8';
    return (
        <div className="relative w-20 h-14">
            <div className="absolute -left-4 top-4 w-8 h-3 rounded-full origin-right rotate-[-20deg]" style={{ backgroundColor: mainColor }} />
            <div className="absolute inset-0 rounded-[2rem] overflow-hidden shadow-sm" style={{ backgroundColor: mainColor }}>
                <div className="absolute top-0 left-1/4 w-2 h-4 rounded-full opacity-30" style={{ backgroundColor: stripeColor }} />
            </div>
            <div className="absolute -right-4 -top-6 w-14 h-13 rounded-full shadow-sm" style={{ backgroundColor: mainColor }}>
                <div className="absolute -top-2 left-1 w-5 h-6 rounded-t-full rotate-[-15deg]" style={{ backgroundColor: mainColor }}>
                    <div className="absolute inset-1 rounded-t-full" style={{ backgroundColor: earColor }} />
                </div>
                <div className="absolute -top-2 right-1 w-5 h-6 rounded-t-full rotate-[15deg]" style={{ backgroundColor: mainColor }}>
                    <div className="absolute inset-1 rounded-t-full" style={{ backgroundColor: earColor }} />
                </div>
                <div className={`absolute top-5 left-3 w-2.5 h-2.5 rounded-full ${isGameOver ? 'bg-slate-500 flex items-center justify-center text-[10px]' : 'bg-slate-900'}`}>
                    {isGameOver ? 'x' : <div className="absolute top-0.5 left-0.5 w-1 h-1 bg-white rounded-full opacity-70" />}
                </div>
                <div className={`absolute top-5 right-3 w-2.5 h-2.5 rounded-full ${isGameOver ? 'bg-slate-500 flex items-center justify-center text-[10px]' : 'bg-slate-900'}`}>
                    {isGameOver ? 'x' : <div className="absolute top-0.5 left-0.5 w-1 h-1 bg-white rounded-full opacity-70" />}
                </div>
                <div className="absolute top-8 left-1/2 -translate-x-1/2 w-2 h-1.5 bg-pink-400 rounded-full" />
            </div>
        </div>
    );
};

// --- KONFIGURACJA GRY ---
const GAP_SIZE = 170;        // Przerwa między rurami
const PIPE_WIDTH = 70;
const PIPE_SPEED = 220;      // px/s
const PIPE_SPAWN_RATE = 1.6; // co ile sekund rura
const GRAVITY = 1400;        // siła grawitacji
const FLAP_STRENGTH = -420;  // siła skoku

// Logiczne wymiary gry (fizyka działa na tych wartościach, a ekran je tylko skaluje)
const GAME_HEIGHT = 450;
const GAME_WIDTH = 600;

export const FlappyCat: React.FC<{ onBack: () => void }> = ({ onBack }) => {
    // --- STANY ---
    const [isPlaying, setIsPlaying] = useState(false);
    const [gameOver, setGameOver] = useState(false);
    const [score, setScore] = useState(0);
    const [highScore, setHighScore] = useState<number>(() => {
        const saved = localStorage.getItem('flappyKittyHighScore');
        return saved ? parseInt(saved, 10) : 0;
    });

    // Stany do renderowania
    const [displayKittyY, setDisplayKittyY] = useState(150);
    const [displayPipes, setDisplayPipes] = useState<{ x: number; topHeight: number; id: number }[]>([]);
    const [rotation, setRotation] = useState(0);
    const [scale, setScale] = useState(1); // Skala RWD

    // --- REFS (FIZYKA) ---
    const kittyYRef = useRef(150);
    const velocityRef = useRef(0);
    const pipesRef = useRef<{ x: number; topHeight: number; id: number; passed?: boolean }[]>([]);
    const scoreRef = useRef(0);
    const requestRef = useRef<number>(0);
    const lastTimeRef = useRef<number>(0);
    const spawnTimerRef = useRef<number>(0);

    // --- RWD: Obliczanie skali ---
    useEffect(() => {
        const handleResize = () => {
            const availableWidth = window.innerWidth - 32; // margines boczny
            const availableHeight = window.innerHeight - 100; // miejsce na nagłówek

            const scaleX = availableWidth / GAME_WIDTH;
            const scaleY = availableHeight / GAME_HEIGHT;

            // Dopasuj do ekranu, ale nie powiększaj powyżej 100% (żeby nie tracić jakości)
            const newScale = Math.min(scaleX, scaleY, 1);
            setScale(newScale);
        };

        window.addEventListener('resize', handleResize);
        handleResize(); // Init
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    // --- LOGIKA GRY ---
    const endGame = useCallback(() => {
        setGameOver(true);
        setIsPlaying(false);
        const currentHS = parseInt(localStorage.getItem('flappyKittyHighScore') || '0', 10);
        if (scoreRef.current > currentHS) {
            setHighScore(scoreRef.current);
            localStorage.setItem('flappyKittyHighScore', scoreRef.current.toString());
        }
    }, []);

    const startGame = useCallback(() => {
        setIsPlaying(true);
        setGameOver(false);
        setScore(0);
        scoreRef.current = 0;
        kittyYRef.current = 150;
        velocityRef.current = 0;
        pipesRef.current = [];
        spawnTimerRef.current = 0;
        lastTimeRef.current = performance.now();
        setDisplayKittyY(150);
        setDisplayPipes([]);
        setRotation(0);
    }, []);

    const flap = useCallback(() => {
        if (isPlaying && !gameOver) velocityRef.current = FLAP_STRENGTH;
    }, [isPlaying, gameOver]);

    // --- OBSŁUGA INPUTU (NAPRAWIONA) ---
    const handleAction = useCallback((e?: React.SyntheticEvent) => {
        // WAŻNE: Nie używamy e.preventDefault() tutaj, bo to powoduje błąd w Chrome.
        // Zamiast tego CSS 'touch-action: none' blokuje scrollowanie.
        if (e) {
            e.stopPropagation();
        }

        if (!isPlaying || gameOver) {
            startGame();
        } else {
            flap();
        }
    }, [isPlaying, gameOver, startGame, flap]);

    // --- PĘTLA GRY ---
    useEffect(() => {
        const update = (currentTime: number) => {
            if (gameOver || !isPlaying) return;

            // Delta time w sekundach
            const dt = (currentTime - lastTimeRef.current) / 1000;
            lastTimeRef.current = currentTime;
            const frameTime = Math.min(dt, 0.1); // Limit laga

            // 1. Fizyka grawitacji
            velocityRef.current += GRAVITY * frameTime;
            kittyYRef.current += velocityRef.current * frameTime;

            // Rotacja
            setRotation(Math.min(Math.max(velocityRef.current * 0.12, -25), 90));

            // Kolizja z sufitem/podłogą
            if (kittyYRef.current > GAME_HEIGHT - 40 || kittyYRef.current < -50) {
                endGame();
                return;
            }

            // 2. Generowanie rur
            spawnTimerRef.current += frameTime;
            if (spawnTimerRef.current >= PIPE_SPAWN_RATE) {
                const minPipe = 60;
                const maxPipe = GAME_HEIGHT - GAP_SIZE - minPipe;
                const topHeight = Math.random() * (maxPipe - minPipe) + minPipe;

                pipesRef.current.push({ x: GAME_WIDTH + 50, topHeight, id: Date.now() });
                spawnTimerRef.current = 0;
            }

            // 3. Ruch rur i kolizje
            const updatedPipes = [];
            for (const p of pipesRef.current) {
                p.x -= PIPE_SPEED * frameTime;

                // Hitbox rury (marginesy dla łatwiejszej gry)
                const hitXLeft = p.x + 5;
                const hitXRight = p.x + PIPE_WIDTH - 5;

                // Sprawdzenie czy kot jest w poziomie rury
                if (hitXLeft < 100 && hitXRight > 55) {
                    // Sprawdzenie czy kot uderzył w górę lub dół
                    // (dodajemy marginesy bezpieczeństwa)
                    if (kittyYRef.current < p.topHeight || kittyYRef.current > p.topHeight + GAP_SIZE - 45) {
                        endGame();
                        return;
                    }
                }

                // Naliczanie punktów
                if (p.x < 50 && !p.passed) {
                    p.passed = true;
                    scoreRef.current += 1;
                    setScore(scoreRef.current);
                }

                // Usuwanie starych rur
                if (p.x > -PIPE_WIDTH - 50) updatedPipes.push(p);
            }
            pipesRef.current = updatedPipes;

            // 4. Renderowanie
            setDisplayKittyY(kittyYRef.current);
            setDisplayPipes([...pipesRef.current]);

            requestRef.current = requestAnimationFrame(update);
        };

        if (isPlaying && !gameOver) {
            requestRef.current = requestAnimationFrame(update);
        }
        return () => cancelAnimationFrame(requestRef.current);
    }, [isPlaying, gameOver, endGame]);

    // Obsługa Spacji
    useEffect(() => {
        const handleKey = (e: KeyboardEvent) => {
            if (e.code === 'Space') {
                e.preventDefault(); // Tu można bezpiecznie użyć preventDefault dla klawiatury
                handleAction();
            }
        };
        window.addEventListener('keydown', handleKey);
        return () => window.removeEventListener('keydown', handleKey);
    }, [handleAction]);

    return (
        <div className="flex flex-col items-center justify-start pt-4 sm:justify-center min-h-[80vh] w-full font-sans select-none overflow-hidden">

            <button
                onClick={onBack}
                className="z-50 mb-4 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-all outline-none px-4 py-2 bg-white/50 rounded-full cursor-pointer"
            >
                <ArrowLeft size={20} /> Back to Menu
            </button>

            {/* WRAPPER SKALUJĄCY GRĘ */}
            <div
                style={{
                    width: GAME_WIDTH,
                    height: GAME_HEIGHT,
                    transform: `scale(${scale})`,
                    transformOrigin: 'top center',
                    touchAction: 'none' // KLUCZOWE DLA MOBILE: blokuje gesty przeglądarki
                }}
                className="relative shrink-0"
            >
                <div
                    className="relative w-full h-full bg-sky-100 rounded-[3rem] shadow-2xl border-4 border-white overflow-hidden cursor-pointer"
                    // KLUCZOWE: Używamy onPointerDown zamiast onTouchStart/onMouseDown
                    onPointerDown={handleAction}
                >
                    {/* TŁO / DEKORACJE */}
                    <div className="absolute top-10 left-10 text-white/40"><Sparkles size={40} /></div>
                    <div className="absolute top-40 right-20 text-white/30"><Sparkles size={60} /></div>

                    {/* CHMURY (Ozdoba) */}
                    <div className="absolute bottom-10 left-10 w-24 h-8 bg-white/40 rounded-full" />
                    <div className="absolute top-20 left-1/2 w-32 h-10 bg-white/40 rounded-full" />

                    {/* HUD */}
                    <div className="absolute top-6 right-8 text-right z-30 font-black pointer-events-none">
                        <div className="text-pink-500 text-4xl drop-shadow-sm">Score: {score}</div>
                        <div className="text-pink-300 text-sm flex items-center justify-end gap-1"><Trophy size={14} /> Record: {highScore}</div>
                    </div>

                    {/* GRACZ (KOT) */}
                    <div className="absolute left-10 z-20 pointer-events-none" style={{ top: `${displayKittyY}px`, transform: `rotate(${rotation}deg)`, transition: 'transform 0.08s linear' }}>
                        <DetailedKitty isGameOver={gameOver} />
                    </div>

                    {/* RURY */}
                    {displayPipes.map(p => (
                        <React.Fragment key={p.id}>
                            {/* Górna rura */}
                            <div className="absolute bg-[#e5c29f] border-x-4 border-b-8 border-[#d4ac87] rounded-b-3xl pointer-events-none"
                                style={{ left: p.x, top: 0, width: PIPE_WIDTH, height: p.topHeight }} />

                            {/* Dolna rura */}
                            <div className="absolute bg-[#e5c29f] border-x-4 border-t-8 border-[#d4ac87] rounded-t-3xl pointer-events-none"
                                style={{ left: p.x, top: p.topHeight + GAP_SIZE, width: PIPE_WIDTH, height: GAME_HEIGHT - (p.topHeight + GAP_SIZE) }} />
                        </React.Fragment>
                    ))}

                    {/* EKRAN STARTOWY */}
                    {!isPlaying && !gameOver && (
                        <div className="absolute inset-0 bg-white/40 backdrop-blur-sm flex items-center justify-center z-40">
                            <div className="bg-white p-10 rounded-[3rem] shadow-2xl text-center border-4 border-pink-100 mx-4 pointer-events-none">
                                <p className="text-3xl font-black text-pink-500 mb-6">Flappy Cat 🎈</p>
                                <p className="text-slate-400 mb-4 text-sm font-bold uppercase tracking-widest">Tap to Jump</p>
                                <div className="bg-pink-500 text-white px-10 py-4 rounded-2xl font-black animate-bounce text-xl shadow-lg inline-block">START</div>
                            </div>
                        </div>
                    )}

                    {/* GAME OVER */}
                    {gameOver && (
                        <div className="absolute inset-0 bg-pink-50/90 backdrop-blur-md flex flex-col items-center justify-center z-40 text-center">
                            <h3 className="text-5xl font-black text-pink-600 mb-2">Oops! 😿</h3>
                            <p className="font-bold text-3xl text-pink-400 mb-8">Score: {score}</p>
                            <button className="bg-pink-500 text-white px-12 py-4 rounded-2xl font-black text-xl shadow-xl hover:bg-pink-600 transition-colors pointer-events-auto"
                                onPointerDown={(e) => {
                                    e.stopPropagation(); // Żeby kliknięcie w guzik nie podbiło kota w tle
                                    startGame();
                                }}
                            >
                                TRY AGAIN
                            </button>
                        </div>
                    )}
                </div>
            </div>

            <div className="mt-4 text-xs text-slate-400 sm:hidden">
                Tap anywhere to jump
            </div>
        </div>
    );
};