zentap/lib/ui/game_screen.dart

import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import '../game/zentap_game.dart';
import '../utils/colors.dart';

class GameScreen extends StatefulWidget {
  final bool isZenMode;

  const GameScreen({
    super.key,
    required this.isZenMode,
  });

  @override
  State<GameScreen> createState() => _GameScreenState();
}

class _GameScreenState extends State<GameScreen> {
  late ZenTapGame game;
  bool _isPaused = false;

  @override
  void initState() {
    super.initState();
    game = ZenTapGame();
    game.setZenMode(widget.isZenMode);
    
    // Hide system UI for immersive experience
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  }

  @override
  void dispose() {
    // Restore system UI
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ZenColors.appBackground,
      body: Stack(
        children: [
          // Game Widget with tap detection
          GestureDetector(
            onTapDown: (details) {
              // Convert screen position to game position
              final position = Vector2(
                details.localPosition.dx,
                details.localPosition.dy,
              );
              game.handleTap(position);
            },
            child: GameWidget<ZenTapGame>.controlled(
              gameFactory: () => game,
            ),
          ),
          
          // Top UI Overlay
          SafeArea(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Row(
                children: [
                  // Back Button
                  IconButton(
                    onPressed: _showExitDialog,
                    icon: const Icon(
                      Icons.arrow_back,
                      color: ZenColors.primaryText,
                      size: 28,
                    ),
                    style: IconButton.styleFrom(
                      backgroundColor: ZenColors.black.withValues(alpha: 0.3),
                      shape: const CircleBorder(),
                    ),
                  ),
                  const Spacer(),
                  
                  // Mode Indicator
                  Container(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 16,
                      vertical: 8,
                    ),
                    decoration: BoxDecoration(
                      color: ZenColors.black.withValues(alpha: 0.3),
                      borderRadius: BorderRadius.circular(20),
                    ),
                    child: Text(
                      widget.isZenMode ? 'ZEN MODE' : 'PLAY MODE',
                      style: TextStyle(
                        color: ZenColors.primaryText,
                        fontSize: 14,
                        fontWeight: FontWeight.w600,
                        letterSpacing: 1.0,
                      ),
                    ),
                  ),
                  const Spacer(),
                  
                  // Pause Button
                  IconButton(
                    onPressed: _togglePause,
                    icon: Icon(
                      _isPaused ? Icons.play_arrow : Icons.pause,
                      color: ZenColors.primaryText,
                      size: 28,
                    ),
                    style: IconButton.styleFrom(
                      backgroundColor: ZenColors.black.withValues(alpha: 0.3),
                      shape: const CircleBorder(),
                    ),
                  ),
                ],
              ),
            ),
          ),
          
          // Pause Overlay
          if (_isPaused) _buildPauseOverlay(),
        ],
      ),
    );
  }

  Widget _buildPauseOverlay() {
    return Container(
      color: ZenColors.black.withValues(alpha: 0.8),
      child: Center(
        child: Container(
          margin: const EdgeInsets.all(40),
          padding: const EdgeInsets.all(30),
          decoration: BoxDecoration(
            color: ZenColors.uiElements,
            borderRadius: BorderRadius.circular(20),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text(
                'Paused',
                style: TextStyle(
                  color: ZenColors.primaryText,
                  fontSize: 32,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 20),
              Text(
                'Take a moment to breathe',
                style: TextStyle(
                  color: ZenColors.secondaryText,
                  fontSize: 16,
                ),
              ),
              const SizedBox(height: 30),
              
              // Resume Button
              ElevatedButton(
                onPressed: _togglePause,
                style: ElevatedButton.styleFrom(
                  backgroundColor: ZenColors.buttonBackground,
                  foregroundColor: ZenColors.buttonText,
                  padding: const EdgeInsets.symmetric(
                    horizontal: 40,
                    vertical: 15,
                  ),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
                child: const Text(
                  'Resume',
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _togglePause() {
    setState(() {
      _isPaused = !_isPaused;
      if (_isPaused) {
        game.pauseGame();
      } else {
        game.resumeGame();
      }
    });
  }

  void _showExitDialog() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          backgroundColor: ZenColors.uiElements,
          title: const Text(
            'Leave Game?',
            style: TextStyle(color: ZenColors.primaryText),
          ),
          content: Text(
            'Are you sure you want to return to the main menu?',
            style: TextStyle(color: ZenColors.secondaryText),
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.of(context).pop(),
              child: Text(
                'Cancel',
                style: TextStyle(color: ZenColors.links),
              ),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).pop(); // Close dialog
                Navigator.of(context).pop(); // Return to main menu
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: ZenColors.red,
                foregroundColor: ZenColors.white,
              ),
              child: const Text('Leave'),
            ),
          ],
        );
      },
    );
  }
}