import 'package:flutter/material.dart';
import 'package:farolero/l10n/generated/app_localizations.dart';
import 'package:provider/provider.dart';
import '../servicios/servicio_perfil_usuario.dart';
import '../tema/componentes_farolero.dart';
import '../tema/tema_app.dart';
import 'pantalla_ajustes.dart';
import 'pantalla_seleccion_modo_juego.dart';
import 'pantalla_historial.dart';
import 'pantalla_reglas.dart';
import 'pantalla_unirse.dart';

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

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;
    final servicioPerfil = context.watch<ServicioPerfilUsuario>();
    final perfil = servicioPerfil.perfil;
    final gamificacion = servicioPerfil.resumenGamificacion;

    return Scaffold(
      body: FondoFarolero(
        intenso: true,
        child: SafeArea(
          child: Center(
            child: SingleChildScrollView(
              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 18),
              child: ConstrainedBox(
                constraints: const BoxConstraints(maxWidth: 420),
                child: Column(
                  children: [
                    Row(
                      children: [
                        AvatarFarolero(
                          texto: perfil.nombre.substring(0, 1).toUpperCase(),
                          assetPath: perfil.avatarAsset,
                          size: 48,
                          fuego: gamificacion.fuego,
                          medallas: gamificacion.medallas,
                        ),
                        const SizedBox(width: 10),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                perfil.nombre,
                                style: Theme.of(context).textTheme.titleMedium,
                              ),
                              Text(
                                '@${perfil.nick}',
                                style: Theme.of(context).textTheme.bodySmall,
                              ),
                              const SizedBox(height: 3),
                              ClipRRect(
                                borderRadius: BorderRadius.circular(4),
                                child: LinearProgressIndicator(
                                  value: gamificacion.fuego / 100,
                                  minHeight: 4,
                                  color: TemaApp.colorNaranja,
                                  backgroundColor: Colors.black.withValues(alpha: 0.45),
                                ),
                              ),
                            ],
                          ),
                        ),
                        IconButton.filledTonal(
                          tooltip: l10n.settings,
                          onPressed: () {
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                builder: (_) => const PantallaAjustes(),
                              ),
                            );
                          },
                          icon: const Icon(Icons.settings),
                        ),
                      ],
                    ),
                    const SizedBox(height: 38),
                    const LogoFarolero(size: 70),
                    const SizedBox(height: 12),
                    Text(
                      l10n.subtitle,
                      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                        color: TemaApp.colorTexto,
                        fontSize: 15,
                      ),
                    ),
                    const SizedBox(height: 54),
                    BotonFarolero(
                      texto: 'Jugar',
                      icono: Icons.play_arrow,
                      onPressed: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (_) => const PantallaSeleccionModoJuego(),
                          ),
                        );
                      },
                    ),
                    const SizedBox(height: 12),
                    BotonFarolero.secundario(
                      texto: l10n.joinGame,
                      icono: Icons.bolt,
                      onPressed: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (_) => const PantallaUnirse(),
                          ),
                        );
                      },
                    ),
                    const SizedBox(height: 12),
                    BotonFarolero.oscuro(
                      texto: l10n.howToPlay,
                      icono: Icons.question_mark,
                      onPressed: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (_) => const PantallaReglas(),
                          ),
                        );
                      },
                    ),
                    const SizedBox(height: 18),
                    Row(
                      children: [
                        Expanded(
                          child: AccesoFarolero(
                            etiqueta: 'Historial',
                            icono: Icons.history,
                            onPressed: () {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                  builder: (_) => const PantallaHistorial(),
                                ),
                              );
                            },
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(height: 28),
                    Text(
                      l10n.playersRange,
                      style: Theme.of(context).textTheme.bodySmall,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}