import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../base/base_screen.dart';
import '../../base/basic_state.dart';
import '../../shared/router_gage.dart';
import '../../widgets/custom_empty_widget.dart';
import '../../widgets/custom_navigation_bar.dart';
import 'game_tab_viewmodel.dart';

class GameTabScreen extends BaseScreen {
  const GameTabScreen({super.key});

  @override
  State<GameTabScreen> createState() => _GameTabScreenState();
}

class _GameTabScreenState extends BaseState<GameTabScreen> with BasicState {
  final GameTabViewModel _viewModel = Get.put(GameTabViewModel());
  final LayerLink _layerLink = LayerLink();
  final GlobalKey _infoKey = GlobalKey();
  OverlayEntry? _popupEntry;
  bool _isPopupShown = false;

  @override
  void initState() {
    super.initState();
    _viewModel.getGames();
    _viewModel.onShowAlertError = (message) {
      if (message.isNotEmpty) {
        showAlertError(content: message);
      }
    };
    _viewModel.gotoGameDetail = (data) {
      if (data.popup != null) {
        showPopup(data: data.popup!);
      } else {
        Get.toNamed(gameCardScreen, arguments: data);
      }
    };
  }

  @override
  Widget createBody() {
    return Scaffold(
      appBar: CustomNavigationBar(
        title: "Games",
        showBackButton: false,
        rightButtons: [
          CompositedTransformTarget(
            link: _layerLink,
            child: IconButton(
              key: _infoKey,
              icon: const Icon(Icons.info_outline, color: Colors.white),
              onPressed: _togglePopup,
            ),
          ),
        ],
      ),
      body: Obx(() {
        if (_viewModel.isLoading.value) {
          return const Center(child: CircularProgressIndicator());
        }
        if (_viewModel.games.isEmpty) {
          return const Center(child: EmptyWidget());
        }
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.all(16),
              child: Text(
                _viewModel.turnsNumberText.value,
                style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
            ),
            Expanded(
              child: ListView.separated(
                padding: const EdgeInsets.only(left: 16, right: 16, bottom: 16),
                itemCount: _viewModel.games.length,
                separatorBuilder: (_, __) => const SizedBox(height: 4),
                itemBuilder: (context, index) {
                  final item = _viewModel.games[index];
                  return GestureDetector(
                    onTap: () {
                      _viewModel.getGameDetail(item.id ?? "");
                    },
                    child: AspectRatio(
                      aspectRatio: 343/132,
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(16),
                        child: Image.network(
                          item.icon ?? '',
                          fit: BoxFit.cover,
                          errorBuilder: (_, __, ___) => const ColoredBox(
                            color: Colors.grey,
                            child: Center(child: Icon(Icons.broken_image)),
                          ),
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        );
      }),
    );
  }

  void _togglePopup() {
    if (_isPopupShown) {
      _hidePopup();
    } else {
      _showPopup();
    }
  }

  void _showPopup() {
    final overlay = Overlay.of(context);
    final renderBox = _infoKey.currentContext?.findRenderObject() as RenderBox?;
    final offset = renderBox?.localToGlobal(Offset.zero) ?? Offset.zero;
    final size = renderBox?.size ?? Size.zero;
    final widthSize = MediaQuery.of(context).size.width * 0.85;

    _popupEntry = OverlayEntry(
      builder: (context) => Stack(
        children: [
          // 👉 Tap ngoài popup để close
          Positioned.fill(
            child: GestureDetector(
              onTap: _hidePopup,
              behavior: HitTestBehavior.translucent,
              child: Container(color: Colors.transparent),
            ),
          ),
          Positioned(
            top: offset.dy + size.height + 8,
            left: widthSize*0.15/0.85/2, // offset.dx - widthSize,
            child: Material(
              borderRadius: BorderRadius.circular(16),
              elevation: 4,
              child: Container(
                width: widthSize,
                padding: const EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(16),
                ),
                child: const Text(
                  '1/ Thể lể trò chơi rất đơn giản, khách hàng sử dụng dịch vụ gói cước viễn thông của chúng tôi sẽ có cơ hội tham gia chơi game, khách hàng nào chơi cũng có thưởng do MyPoint (PayTech) tài trợ 100% phần quà.'
                      '\n\n2/ Ngoài ra các giải thưởng và luật lệ trong trò chơi không phải do Apple quản lý và tài trợ, điều này đã được thể hiện trong thể lệ và văn bản công bố trò chơi với khách hàng.',
                  style: TextStyle(fontSize: 14),
                ),
              ),
            ),
          ),
        ],
      ),
    );

    overlay.insert(_popupEntry!);
    _isPopupShown = true;
  }

  void _hidePopup() {
    _popupEntry?.remove();
    _popupEntry = null;
    _isPopupShown = false;
  }
}