import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('PlayMaker'),
        backgroundColor: Colors.orange,
        foregroundColor: Colors.white,
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(40.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Título
              const Text(
                'PLAYMAKER',
                style: TextStyle(
                  fontSize: 32,
                  fontWeight: FontWeight.bold,
                  color: Colors.orange,
                  letterSpacing: 2,
                ),
              ),
              const SizedBox(height: 40),
              
              // Botão PRINCIPAL para iniciar jogo
              SizedBox(
                width: double.infinity,
                height: 250,
                child: ElevatedButton(
                  onPressed: () {
                    // Navegar para tela de novo jogo
                    print('Iniciar novo jogo!');
                    // Navigator.push(context, MaterialPageRoute(
                    //   builder: (context) => NovoJogoScreen()
                    // ));
                  },
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.orange,
                    foregroundColor: Colors.white,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(25),
                    ),
                    elevation: 10,
                    shadowColor: Colors.orange.withOpacity(0.5),
                  ),
                  child: const Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.sports_basketball,
                        size: 80,
                        color: Colors.white,
                      ),
                      SizedBox(height: 20),
                      Text(
                        'NOVO JOGO',
                        style: TextStyle(
                          fontSize: 38,
                          fontWeight: FontWeight.w900,
                          color: Colors.white,
                          letterSpacing: 2,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              
              const SizedBox(height: 40),
              
              // Texto explicativo
              const Text(
                'Toque para iniciar uma nova partida',
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.grey,
                  fontStyle: FontStyle.italic,
                ),
              ),
              
              const SizedBox(height: 50),
              
              // Seção de opções rápidas
              const Text(
                'Acesso Rápido',
                style: TextStyle(
                  fontSize: 22,
                  fontWeight: FontWeight.bold,
                  color: Colors.orange,
                ),
              ),
              
              const SizedBox(height: 20),
              
              // Grid de opções
              GridView.count(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                crossAxisCount: 2,
                childAspectRatio: 1.3,
                mainAxisSpacing: 20,
                crossAxisSpacing: 20,
                children: [
                  // Estatísticas
                  _buildQuickOption(
                    icon: Icons.insights,
                    title: 'Estatísticas',
                    subtitle: 'Ver desempenho',
                    color: Colors.green,
                    onTap: () {
                      print('Ver estatísticas');
                      // Pode navegar para estatísticas ou mudar para índice 3 no navigation
                    },
                  ),
                  
                  // Equipas
                  _buildQuickOption(
                    icon: Icons.people,
                    title: 'Minhas Equipas',
                    subtitle: 'Gerir equipas',
                    color: Colors.blue,
                    onTap: () {
                      print('Ver equipas');
                      // Pode navegar para equipas ou mudar para índice 2 no navigation
                    },
                  ),
                  
                  // Histórico
                  _buildQuickOption(
                    icon: Icons.history,
                    title: 'Histórico',
                    subtitle: 'Jogos anteriores',
                    color: Colors.purple,
                    onTap: () {
                      print('Ver histórico');
                    },
                  ),
                  
                  // Configurações
                  _buildQuickOption(
                    icon: Icons.settings,
                    title: 'Configurações',
                    subtitle: 'Ajustar app',
                    color: Colors.grey,
                    onTap: () {
                      print('Abrir configurações');
                    },
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  // Widget para construir opções rápidas
  Widget _buildQuickOption({
    required IconData icon,
    required String title,
    required String subtitle,
    required Color color,
    required VoidCallback onTap,
  }) {
    return Card(
      elevation: 5,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
      ),
      child: InkWell(
        borderRadius: BorderRadius.circular(15),
        onTap: onTap,
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                icon,
                size: 40,
                color: color,
              ),
              const SizedBox(height: 10),
              Text(
                title,
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: color,
                ),
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 5),
              Text(
                subtitle,
                style: const TextStyle(
                  fontSize: 12,
                  color: Colors.grey,
                ),
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
      ),
    );
  }
}