import 'package:flutter/material.dart';
import 'package:playmaker/classe/home.config.dart';
import 'package:playmaker/grafico%20de%20pizza/grafico.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;
  
  void _onItemSelected(int index) {
    setState(() {
      _selectedIndex = index;
    });
    
    // Navegação entre telas
    switch (index) {
      case 0:
        // Já está na Home
        break;
      case 1:
        print('Navegar para tela de Jogo');
         Navigator.push(context, MaterialPageRoute(builder: (_) => GameScreen()));
        break;
      case 2:
        print('Navegar para tela de Equipas');
        // Navigator.push(context, MaterialPageRoute(builder: (_) => TeamsScreen()));
        break;
      case 3:
        print('Navegar para tela de Status');
        // Navigator.push(context, MaterialPageRoute(builder: (_) => StatusScreen()));
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('PlayMaker'),
        backgroundColor: HomeConfig.primaryColor,
        foregroundColor: Colors.white,
        leading: IconButton(
          icon: const Icon(Icons.person),
          onPressed: () {},
        ),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Primeira linha com 2 cards
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // Card 1 - Estatísticas de Basquete
                  _buildStatCard(
                    title: 'Mais Pontos',
                    playerName: 'Michael Jordan',
                    statValue: '34.5',
                    statLabel: 'PPG',
                    color: Colors.blue[800]!,
                    icon: Icons.sports_basketball,
                    isHighlighted: true,
                  ),
                  
                  SizedBox(width: 20),
                  
                  // Card 2 - Estatísticas de Basquete (corrigido)
                  _buildStatCard(
                    title: 'Mais Assistências',
                    playerName: 'Magic Johnson',
                    statValue: '12.8',
                    statLabel: 'APG',
                    color: Colors.green[800]!,
                    icon: Icons.sports_basketball, // Corrigido para basquete
                    isHighlighted: false,
                  ),
                ],
              ),
              
              SizedBox(height: 20),
              
              // Segunda linha com 2 cards
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // Card 3 - Estatísticas de Basquete (corrigido)
                  _buildStatCard(
                    title: 'Mais Rebotes',
                    playerName: 'Dennis Rodman',
                    statValue: '15.3',
                    statLabel: 'RPG',
                    color: Colors.purple[800]!,
                    icon: Icons.sports_basketball, // Corrigido para basquete
                    isHighlighted: false,
                  ),
                  
                  SizedBox(width: 20),
                  
                  // Card 4 - Gráfico
                  PieChartCard(
                    title: 'DESEMPENHO',
                    subtitle: 'Vitórias vs Derrotas',
                    backgroundColor: Colors.red[800]!,
                    onTap: () {
                      print('Gráfico clicado!');
                    },
                  ),
                ],
              ),
              
              SizedBox(height: 40),
              Align(
                alignment: Alignment.centerLeft,
                child: Text(
                  'Histórico de Jogos',
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                    color: Colors.grey[800],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
      // ⬇️⬇️⬇️ NAVIGATION BAR AQUI ⬇️⬇️⬇️
      bottomNavigationBar: NavigationBar(
        selectedIndex: _selectedIndex,
        onDestinationSelected: _onItemSelected,
        backgroundColor: Theme.of(context).colorScheme.surface,
        surfaceTintColor: Theme.of(context).colorScheme.surfaceTint,
        elevation: 1,
        height: 70,
        destinations: const [
          NavigationDestination(
            icon: Icon(Icons.home_outlined),
            selectedIcon: Icon(Icons.home_filled),
            label: 'Home',
          ),
          NavigationDestination(
            icon: Icon(Icons.sports_soccer_outlined),
            selectedIcon: Icon(Icons.sports_soccer),
            label: 'Jogo',
          ),
          NavigationDestination(
            icon: Icon(Icons.people_outline),
            selectedIcon: Icon(Icons.people),
            label: 'Equipas',
          ),
          NavigationDestination(
            icon: Icon(Icons.insights_outlined),
            selectedIcon: Icon(Icons.insights),
            label: 'Status',
          ),
        ],
      ),
    );
  }

  // Método para criar cards de estatísticas
  Widget _buildStatCard({
    required String title,
    required String playerName,
    required String statValue,
    required String statLabel,
    required Color color,
    required IconData icon,
    bool isHighlighted = false,
  }) {
    return Container(
      width: HomeConfig.cardwidthPadding,
      height: HomeConfig.cardheightPadding,
      child: Card(
        elevation: 0,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
          side: isHighlighted 
            ? BorderSide(color: Colors.amber, width: 2)
            : BorderSide.none,
        ),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                color.withOpacity(0.9),
                color.withOpacity(0.7),
              ],
            ),
          ),
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // Cabeçalho com título e ícone
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            title.toUpperCase(),
                            style: TextStyle(
                              fontSize: 14,
                              fontWeight: FontWeight.bold,
                              color: Colors.white.withOpacity(0.9),
                              letterSpacing: 1.5,
                            ),
                          ),
                          SizedBox(height: 5),
                          Text(
                            playerName,
                            style: TextStyle(
                              fontSize: 18,
                              fontWeight: FontWeight.bold,
                              color: Colors.white,
                            ),
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ],
                      ),
                    ),
                    if (isHighlighted)
                      Container(
                        padding: EdgeInsets.all(8),
                        decoration: BoxDecoration(
                          color: Colors.amber,
                          shape: BoxShape.circle,
                        ),
                        child: Icon(
                          Icons.star,
                          size: 20,
                          color: Colors.white,
                        ),
                      ),
                  ],
                ),
                
                SizedBox(height: 10),
                
                // Ícone do esporte
                Container(
                  width: 60,
                  height: 60,
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.2),
                    shape: BoxShape.circle,
                  ),
                  child: Icon(
                    icon,
                    size: 30,
                    color: Colors.white,
                  ),
                ),
                
                Spacer(),
                
                // Estatística central
                Center(
                  child: Column(
                    children: [
                      Text(
                        statValue,
                        style: TextStyle(
                          fontSize: 42,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                          height: 1,
                        ),
                      ),
                      SizedBox(height: 5),
                      Text(
                        statLabel.toUpperCase(),
                        style: TextStyle(
                          fontSize: 14,
                          color: Colors.white.withOpacity(0.8),
                          letterSpacing: 2,
                        ),
                      ),
                    ],
                  ),
                ),
                
                Spacer(),
                
                // Rodapé com botão
                Container(
                  width: double.infinity,
                  padding: EdgeInsets.symmetric(vertical: 12),
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.2),
                    borderRadius: BorderRadius.circular(15),
                  ),
                  child: Center(
                    child: Text(
                      'VER DETALHES',
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 14,
                        letterSpacing: 1,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}