import 'package:flutter/material.dart';
import '../controllers/team_controller.dart';


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

  @override
  State<GamePage> createState() => _GamePageState();
}

class _GamePageState extends State<GamePage> {
  final TeamController controller = TeamController();
  final TextEditingController _searchController = TextEditingController();

  String _selectedSeasonFilter = 'Todas';
  String _currentSort = 'Recentes';
  String _searchQuery = '';

  @override
  void dispose() {
    _searchController.dispose();
    super.dispose();
  }

  void _showCreateGameDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) {
        return CreateGameDialogManual(controller: controller);
      },
    );
  }

  void _showFilterDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) {
        return StatefulBuilder(
          builder: (context, setModalState) {
            return AlertDialog(
              backgroundColor: Colors.white,
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
              title: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Text("Filtros", 
                    style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 18)
                  ),
                  IconButton(
                    icon: const Icon(Icons.close, color: Colors.black, size: 20),
                    onPressed: () => Navigator.pop(context),
                  )
                ],
              ),
              content: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  const Divider(),
                  Row(
                    children: [
                      _buildPopupColumn("TEMPORADA", ['Todas', '2023/24', '2024/25', '2025/26'], _selectedSeasonFilter, (val) {
                        setState(() => _selectedSeasonFilter = val);
                        setModalState(() {});
                      }),
                      const SizedBox(width: 20),
                      _buildPopupColumn("ORDENAR", ['Recentes', 'Nome'], _currentSort, (val) {
                        setState(() => _currentSort = val);
                        setModalState(() {});
                      }),
                    ],
                  ),
                ],
              ),
              actions: [
                TextButton(
                  onPressed: () => Navigator.pop(context),
                  child: const Text("CONCLUÍDO", style: TextStyle(color: Color(0xFFE74C3C), fontWeight: FontWeight.bold)),
                ),
              ],
            );
          },
        );
      },
    );
  }

  Widget _buildPopupColumn(String title, List<String> options, String current, Function(String) onSelect) {
    return Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(title, style: TextStyle(color: Colors.grey[700], fontSize: 11, fontWeight: FontWeight.bold)),
          const SizedBox(height: 12),
          ...options.map((opt) => InkWell(
                onTap: () => onSelect(opt),
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 8.0),
                  child: Text(opt,
                      style: TextStyle(
                          color: current == opt ? const Color(0xFFE74C3C) : Colors.black,
                          fontWeight: current == opt ? FontWeight.bold : FontWeight.normal)),
                ),
              )),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F7FA),
      appBar: AppBar(
        title: const Text("Jogos", style: TextStyle(fontWeight: FontWeight.bold)),
        backgroundColor: Colors.white,
        elevation: 0,
        actions: [
          IconButton(
            icon: const Icon(Icons.filter_list, color: Color(0xFFE74C3C)),
            onPressed: () => _showFilterDialog(context),
          ),
        ],
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              controller: _searchController,
              onChanged: (v) => setState(() => _searchQuery = v.toLowerCase()),
              decoration: InputDecoration(
                hintText: 'Pesquisar jogo...',
                prefixIcon: const Icon(Icons.search, color: Color(0xFFE74C3C)),
                filled: true,
                fillColor: Colors.white,
                border: OutlineInputBorder(borderRadius: BorderRadius.circular(15), borderSide: BorderSide.none),
              ),
            ),
          ),
          const Expanded(child: Center(child: Text("Nenhum jogo registado."))),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _showCreateGameDialog(context),
        backgroundColor: const Color(0xFFE74C3C),
        child: const Icon(Icons.add, color: Colors.white),
      ),
    );
  }
}

class CreateGameDialogManual extends StatefulWidget {
  final TeamController controller;
  const CreateGameDialogManual({super.key, required this.controller});

  @override
  State<CreateGameDialogManual> createState() => _CreateGameDialogManualState();
}

class _CreateGameDialogManualState extends State<CreateGameDialogManual> {
  final TextEditingController _seasonController = TextEditingController();
  
  // Controllers para capturar o texto dos campos de pesquisa
  String _myTeamName = "";
  String _opponentName = "";

  @override
  void dispose() {
    _seasonController.dispose();
    super.dispose();
  }

  // --- WIDGET DE PESQUISA (AUTOCOMPLETE) ---
Widget _buildSearchField({
    required String label,
    required List<String> options,
    required Function(String) onSelected,
  }) {
    return Autocomplete<String>(
      optionsBuilder: (TextEditingValue textEditingValue) {
        if (textEditingValue.text.isEmpty) {
          return const Iterable<String>.empty();
        }
        return options.where((String option) {
          return option.toLowerCase().contains(textEditingValue.text.toLowerCase());
        });
      },
      onSelected: (String selection) {
        onSelected(selection);
        FocusScope.of(context).unfocus();
      },
      // --- ESTE BLOCO CONSTRÓI A LISTA DE SUGESTÕES EM BAIXO ---
      optionsViewBuilder: (context, onSelected, options) {
        return Align(
          alignment: Alignment.topLeft,
          child: Material(
            elevation: 4.0,
            borderRadius: BorderRadius.circular(10),
            child: Container(
              width: MediaQuery.of(context).size.width * 0.7, // Ajusta à largura do dialog
              constraints: const BoxConstraints(maxHeight: 200), // Limita a altura da lista
              child: ListView.builder(
                padding: EdgeInsets.zero,
                shrinkWrap: true,
                itemCount: options.length,
                itemBuilder: (BuildContext context, int index) {
                  final String option = options.elementAt(index);
                  return ListTile(
                    title: Text(option),
                    onTap: () => onSelected(option),
                  );
                },
              ),
            ),
          ),
        );
      },
      fieldViewBuilder: (context, fieldTextController, focusNode, onFieldSubmitted) {
        return TextField(
          controller: fieldTextController,
          focusNode: focusNode,
          onChanged: (value) => onSelected(value),
          decoration: InputDecoration(
            labelText: label,
            prefixIcon: const Icon(Icons.search, color: Color(0xFFE74C3C)),
            border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
            filled: true,
            fillColor: Colors.white,
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<List<Map<String, dynamic>>>(
      stream: widget.controller.teamsStream,
      builder: (context, snapshot) {
        // Lista de nomes das equipas que vêm da TeamsPage
        List<String> teamList = [];
        if (snapshot.hasData) {
          teamList = snapshot.data!.map((t) => t['name'].toString()).toList();
        }

        return AlertDialog(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
          title: const Text('Configurar Partida', style: TextStyle(fontWeight: FontWeight.bold)),
          content: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                // Campo da Temporada
                TextField(
                  controller: _seasonController,
                  decoration: InputDecoration(
                    labelText: 'Temporada',
                    prefixIcon: const Icon(Icons.calendar_today, size: 20),
                    border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
                  ),
                ),
                const SizedBox(height: 20),
                
                // Pesquisa: Minha Equipa
                _buildSearchField(
                  label: "A Minha Equipa",
                  options: teamList,
                  onSelected: (val) => _myTeamName = val,
                ),

                const Padding(
                  padding: EdgeInsets.symmetric(vertical: 15),
                  child: Text("VS", style: TextStyle( color: Colors.grey, fontSize: 18)),
                ),

                // Pesquisa: Equipa Adversária
                _buildSearchField(
                  label: "Equipa Adversária",
                  options: teamList,
                  onSelected: (val) => _opponentName = val,
                ),
              ],
            ),
          ),
          actions: [
            TextButton(onPressed: () => Navigator.pop(context), child: const Text('CANCELAR')),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: const Color(0xFFE74C3C),
                minimumSize: const Size(100, 45),
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
              ),
              onPressed: () {
                if (_myTeamName.isNotEmpty && _opponentName.isNotEmpty) {
                  // Lógica para iniciar o jogo
                  print("Iniciando: $_myTeamName VS $_opponentName");
                  Navigator.pop(context);
                }
              },
              child: const Text('CRIAR JOGO', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
            ),
          ],
        );
      },
    );
  }
}