import React, { useState, useEffect } from 'react';
import './App.css';

const tg = window.Telegram?.WebApp;

const App = () => {
    const [view, setView] = useState('lobby'); // 'lobby' or 'kamba'
    const [pullForce, setPullForce] = useState(0);
    const [score, setScore] = useState(0);

    useEffect(() => {
        if (tg) {
            tg.expand();
            tg.ready();
        }
    }, []);

    const handleBack = () => {
        setView('lobby');
        setPullForce(0);
    };

    const handleMash = () => {
        setPullForce(prev => Math.min(prev + 5, 100));
        setScore(prev => prev + 10);

        // Haptic feedback
        if (tg?.HapticFeedback) {
            tg.HapticFeedback.impactOccurred('medium');
        }
    };

    // Decay pull force over time
    useEffect(() => {
        if (view === 'kamba') {
            const timer = setInterval(() => {
                setPullForce(prev => Math.max(prev - 2, -100));
            }, 100);
            return () => clearInterval(timer);
        }
    }, [view]);

    if (view === 'lobby') {
        return (
            <div className="app-container">
                <header className="header">
                    <p>Subha Aluth Avuruddak Wewa</p>
                    <h1>AURUDU KRIDA</h1>
                </header>

                <div className="lobby-grid">
                    <div className="game-card" onClick={() => setView('kamba')}>
                        <div className="game-icon">🪘</div>
                        <div className="game-info">
                            <h3>Kamba Adima</h3>
                            <p>Tug-of-War: Mash to pull!</p>
                        </div>
                    </div>

                    <div className="game-card">
                        <div className="game-icon">🎯</div>
                        <div className="game-info">
                            <h3>Kana Mutti</h3>
                            <p>Coming Soon...</p>
                        </div>
                    </div>

                    <div className="game-card">
                        <div className="game-icon">🎲</div>
                        <div className="game-info">
                            <h3>Pancha Keliya</h3>
                            <p>Coming Soon...</p>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="app-container">
            <div className="game-view">
                <button className="back-btn" onClick={handleBack}>
                    ← Back to Village
                </button>

                <div className="header">
                    <p>Tournament Round</p>
                    <h1>Kamba Adima</h1>
                </div>

                <div className="kamba-game">
                    <div className="rope-container">
                        <div
                            className="rope"
                            style={{ transform: `translateX(${pullForce}px)` }}
                        ></div>
                        <div className="rope-center"></div>
                    </div>

                    <p style={{ color: 'var(--accent)', fontWeight: 'bold' }}>
                        SCORE: {score}
                    </p>

                    <button className="mash-btn" onClick={handleMash}>
                        PULL!
                    </button>

                    <p style={{ marginTop: '20px', fontSize: '0.8rem', opacity: 0.6 }}>
                        Rapidly tap to pull the rope!
                    </p>
                </div>
            </div>
        </div>
    );
};

export default App;