import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flame/game.dart';
import '../game/match_three_game.dart';
import '../bloc/game_bloc.dart';

class GameScreen extends StatefulWidget {
  const GameScreen({super.key});

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

class _GameScreenState extends State<GameScreen> {
  late MatchThreeGame game;

  @override
  void initState() {
    super.initState();
    game = MatchThreeGame();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: BlocListener<GameBloc, GameState>(
        listener: (context, state) {
          if (state is GamePlaying && game.gridComponent != null) {
            game.gridComponent!.updateGrid(state);
          }
        },
        child: BlocBuilder<GameBloc, GameState>(
          builder: (context, state) {
            // Set game bloc reference
            game.setGameBloc(context.read<GameBloc>());

            return Stack(
              children: [
                GameWidget<MatchThreeGame>.controlled(
                  gameFactory: () => game,
                ),
                if (state is GamePlaying)
                  Positioned(
                    top: 50,
                    left: 20,
                    child: Container(
                      padding: const EdgeInsets.all(16),
                      decoration: BoxDecoration(
                        color: Colors.black54,
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            'Score: ${state.score}',
                            style: const TextStyle(
                              color: Colors.white,
                              fontSize: 18,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          Text(
                            'Moves: ${state.moves}',
                            style: const TextStyle(
                              color: Colors.white,
                              fontSize: 16,
                            ),
                          ),
                          Text(
                            'Combo x ${state is GamePlayingMatch ? (state.combo + 1) : "-"}',
                            style: const TextStyle(
                              color: Colors.white,
                              fontSize: 16,
                            ),
                          ),
                          Text(
                            'Last state: ${state.runtimeType}',
                            style: const TextStyle(
                              color: Colors.blue,
                              fontSize: 16,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                Positioned(
                  top: 50,
                  right: 20,
                  child: IconButton(
                    onPressed: () => Navigator.pop(context),
                    icon:
                        const Icon(Icons.close, color: Colors.white, size: 30),
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}