import 'package:flutter/material.dart';
import 'package:playmaker/classe/theme.dart';
import 'package:supabase_flutter/supabase_flutter.dart';
import '../utils/size_extension.dart';
import 'login.dart'; 

// 👇 OBRIGATÓRIO IMPORTAR O MAIN.DART PARA LER A VARIÁVEL "themeNotifier"
import '../main.dart'; 

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

  @override
  State<SettingsScreen> createState() => _SettingsScreenState();
}

class _SettingsScreenState extends State<SettingsScreen> {
  
  @override
  Widget build(BuildContext context) {
    // 👇 CORES DINÂMICAS (A MÁGICA DO MODO ESCURO)
    final Color primaryRed = AppTheme.primaryRed; 
    final Color bgColor = Theme.of(context).scaffoldBackgroundColor; 
    final Color cardColor = Theme.of(context).cardTheme.color ?? Theme.of(context).colorScheme.surface;
    final Color textColor = Theme.of(context).colorScheme.onSurface;
    final Color textLightColor = textColor.withOpacity(0.6);

    // 👇 SABER SE A APP ESTÁ ESCURA OU CLARA NESTE EXATO MOMENTO
    bool isDark = Theme.of(context).brightness == Brightness.dark;

    return Scaffold(
      backgroundColor: bgColor,
      appBar: AppBar(
        backgroundColor: primaryRed,
        foregroundColor: Colors.white,
        elevation: 0,
        centerTitle: true,
        title: Text(
          "Perfil e Definições",
          style: TextStyle(
            fontSize: 18 * context.sf,
            fontWeight: FontWeight.w600,
          ),
        ),
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () => Navigator.pop(context),
        ),
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.symmetric(horizontal: 16.0 * context.sf, vertical: 24.0 * context.sf),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // ==========================================
            // CARTÃO DE PERFIL
            // ==========================================
            Container(
              padding: EdgeInsets.all(20 * context.sf),
              decoration: BoxDecoration(
                color: cardColor,
                borderRadius: BorderRadius.circular(16 * context.sf),
                border: Border.all(color: Colors.grey.withOpacity(0.1)),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.04),
                    blurRadius: 10,
                    offset: const Offset(0, 4),
                  ),
                ],
              ),
              child: Row(
                children: [
                  CircleAvatar(
                    radius: 32 * context.sf,
                    backgroundColor: primaryRed.withOpacity(0.1),
                    child: Icon(Icons.person, color: primaryRed, size: 32 * context.sf),
                  ),
                  SizedBox(width: 16 * context.sf),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "Treinador",
                          style: TextStyle(
                            fontSize: 18 * context.sf,
                            fontWeight: FontWeight.bold,
                            color: textColor,
                          ),
                        ),
                        SizedBox(height: 4 * context.sf),
                        Text(
                          Supabase.instance.client.auth.currentUser?.email ?? "sem@email.com",
                          style: TextStyle(
                            color: textLightColor,
                            fontSize: 14 * context.sf,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            
            SizedBox(height: 32 * context.sf),

            // ==========================================
            // SECÇÃO: DEFINIÇÕES
            // ==========================================
            Padding(
              padding: EdgeInsets.only(left: 4 * context.sf, bottom: 12 * context.sf),
              child: Text(
                "Definições",
                style: TextStyle(
                  color: textLightColor,
                  fontSize: 14 * context.sf,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            Container(
              decoration: BoxDecoration(
                color: cardColor,
                borderRadius: BorderRadius.circular(16 * context.sf),
                border: Border.all(color: Colors.grey.withOpacity(0.1)),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.04),
                    blurRadius: 10,
                    offset: const Offset(0, 4),
                  ),
                ],
              ),
              child: ListTile(
                contentPadding: EdgeInsets.symmetric(horizontal: 20 * context.sf, vertical: 8 * context.sf),
                leading: Icon(isDark ? Icons.dark_mode : Icons.light_mode, color: primaryRed, size: 28 * context.sf),
                title: Text(
                  "Modo Escuro",
                  style: TextStyle(fontWeight: FontWeight.bold, color: textColor, fontSize: 16 * context.sf),
                ),
                subtitle: Text(
                  "Altera as cores da aplicação",
                  style: TextStyle(color: textLightColor, fontSize: 13 * context.sf),
                ),
                trailing: Switch(
                  value: isDark,
                  activeColor: primaryRed,
                  onChanged: (bool value) {
                    // 👇 CHAMA A VARIÁVEL DO MAIN.DART E ATUALIZA A APP TODA
                    themeNotifier.value = value ? ThemeMode.dark : ThemeMode.light;
                  },
                ),
              ),
            ),

            SizedBox(height: 32 * context.sf),

            // ==========================================
            // SECÇÃO: CONTA
            // ==========================================
            Padding(
              padding: EdgeInsets.only(left: 4 * context.sf, bottom: 12 * context.sf),
              child: Text(
                "Conta",
                style: TextStyle(
                  color: textLightColor,
                  fontSize: 14 * context.sf,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            Container(
              decoration: BoxDecoration(
                color: cardColor,
                borderRadius: BorderRadius.circular(16 * context.sf),
                border: Border.all(color: Colors.grey.withOpacity(0.1)),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.04),
                    blurRadius: 10,
                    offset: const Offset(0, 4),
                  ),
                ],
              ),
              child: ListTile(
                contentPadding: EdgeInsets.symmetric(horizontal: 20 * context.sf, vertical: 4 * context.sf),
                leading: Icon(Icons.logout_outlined, color: primaryRed, size: 26 * context.sf),
                title: Text(
                  "Terminar Sessão",
                  style: TextStyle(
                    color: primaryRed,
                    fontWeight: FontWeight.bold,
                    fontSize: 15 * context.sf,
                  ),
                ),
                onTap: () => _confirmLogout(context), // 👇 CHAMA O LOGOUT REAL
              ),
            ),

            SizedBox(height: 50 * context.sf),

            // ==========================================
            // VERSÃO DA APP
            // ==========================================
            Center(
              child: Text(
                "PlayMaker v1.0.0",
                style: TextStyle(
                  color: textLightColor.withOpacity(0.7),
                  fontSize: 13 * context.sf,
                ),
              ),
            ),
            SizedBox(height: 20 * context.sf),
          ],
        ),
      ),
    );
  }

  // 👇 FUNÇÃO PARA FAZER LOGOUT
  void _confirmLogout(BuildContext context) {
    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        backgroundColor: Theme.of(context).colorScheme.surface,
        title: Text("Terminar Sessão", style: TextStyle(color: Theme.of(context).colorScheme.onSurface)),
        content: Text("Tens a certeza que queres sair da conta?", style: TextStyle(color: Theme.of(context).colorScheme.onSurface)),
        actions: [
          TextButton(onPressed: () => Navigator.pop(ctx), child: const Text("Cancelar", style: TextStyle(color: Colors.grey))),
          TextButton(
            onPressed: () async {
              await Supabase.instance.client.auth.signOut();
              if (ctx.mounted) {
                // Mata a navegação toda para trás e manda para o Login
                Navigator.of(ctx).pushAndRemoveUntil(
                  MaterialPageRoute(builder: (context) => const LoginPage()),
                  (Route<dynamic> route) => false,
                );
              }
            }, 
            child: Text("Sair", style: TextStyle(color: AppTheme.primaryRed, fontWeight: FontWeight.bold))
          ),
        ],
      ),
    );
  }
}