import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:farolero/l10n/generated/app_localizations.dart';

import '../tema/componentes_farolero.dart';
import '../tema/tema_app.dart';
import 'pantalla_crear_partida.dart';

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

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(title: Text(l10n.gameMode)),
      body: FondoFarolero(
        intenso: true,
        child: SafeArea(
          child: Center(
            child: SingleChildScrollView(
              padding: const EdgeInsets.fromLTRB(20, 24, 20, 28),
              child: ConstrainedBox(
                constraints: const BoxConstraints(maxWidth: 470),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    const SizedBox(height: 12),
                    _ModoHero(
                      titulo: l10n.gameMode,
                      subtitulo: l10n.playersRange,
                    ).animate().fadeIn(duration: 320.ms).slideY(begin: -0.12),
                    const SizedBox(height: 34),
                    _ModoCard(
                      marcoAsset: 'assets/ui/generated/mode/mode_single_card_frame.png',
                      icono: Icons.phone_android_rounded,
                      titulo: l10n.singleDevice,
                      subtitulo: l10n.singleDeviceSubtitle,
                      descripcion: l10n.singleDeviceDescription,
                      onTap: () => Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (_) => const PantallaCrearPartida(
                            modoInicial: false,
                            bloquearModo: true,
                          ),
                        ),
                      ),
                    ).animate().fadeIn(delay: 120.ms).slideX(begin: -0.08),
                    const SizedBox(height: 16),
                    _ModoCard(
                      marcoAsset: 'assets/ui/generated/mode/mode_multi_card_frame.png',
                      icono: Icons.devices_rounded,
                      titulo: l10n.multiDevice,
                      subtitulo: l10n.multiDeviceSubtitle,
                      descripcion: l10n.multiDeviceDescription,
                      destacado: true,
                      onTap: () => Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (_) => const PantallaCrearPartida(
                            modoInicial: true,
                            bloquearModo: true,
                          ),
                        ),
                      ),
                    ).animate().fadeIn(delay: 200.ms).slideX(begin: 0.08),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class _ModoHero extends StatelessWidget {
  final String titulo;
  final String subtitulo;

  const _ModoHero({
    required this.titulo,
    required this.subtitulo,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: 230,
          child: Image.asset(
            'assets/ui/generated/mode/mode_duel_hero.png',
            fit: BoxFit.contain,
            opacity: const AlwaysStoppedAnimation(0.95),
          ),
        ),
        const SizedBox(height: 10),
        Text(
          titulo,
          textAlign: TextAlign.center,
          style: Theme.of(context).textTheme.headlineMedium?.copyWith(
                color: TemaApp.colorDorado,
                fontSize: 32,
                fontWeight: FontWeight.w900,
                shadows: [
                  Shadow(color: TemaApp.colorNaranja.withValues(alpha: 0.45), blurRadius: 16),
                ],
              ),
        ),
        const SizedBox(height: 8),
        Text(
          subtitulo,
          textAlign: TextAlign.center,
          style: Theme.of(context).textTheme.titleMedium?.copyWith(
                color: TemaApp.colorTextoSecundario,
              ),
        ),
      ],
    );
  }

}

class _ModoCard extends StatelessWidget {
  final String marcoAsset;
  final IconData icono;
  final String titulo;
  final String subtitulo;
  final String descripcion;
  final bool destacado;
  final VoidCallback onTap;

  const _ModoCard({
    required this.marcoAsset,
    required this.icono,
    required this.titulo,
    required this.subtitulo,
    required this.descripcion,
    required this.onTap,
    this.destacado = false,
  });

  @override
  Widget build(BuildContext context) {
    final color = destacado ? TemaApp.colorNaranja : TemaApp.colorAcento;
    return Material(
      color: Colors.transparent,
      child: InkWell(
        borderRadius: BorderRadius.circular(28),
        onTap: onTap,
        child: Ink(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                const Color(0xFF111C29).withValues(alpha: 0.94),
                (destacado ? const Color(0xFF2A1620) : const Color(0xFF15111F)).withValues(alpha: 0.92),
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
            borderRadius: BorderRadius.circular(28),
            border: Border.all(color: color.withValues(alpha: destacado ? 0.78 : 0.48)),
            boxShadow: [
              BoxShadow(
                color: color.withValues(alpha: destacado ? 0.26 : 0.14),
                blurRadius: destacado ? 34 : 22,
                offset: const Offset(0, 14),
              ),
            ],
          ),
          child: ConstrainedBox(
            constraints: const BoxConstraints(minHeight: 164),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(28),
              child: Stack(
                alignment: Alignment.center,
                children: [
                  Positioned.fill(
                    child: Image.asset(
                      marcoAsset,
                      fit: BoxFit.cover,
                      opacity: AlwaysStoppedAnimation(destacado ? 0.22 : 0.18),
                    ),
                  ),
                  Positioned.fill(
                    child: Image.asset(
                      'assets/ui/premium/card_sheen_overlay.png',
                      fit: BoxFit.cover,
                      opacity: AlwaysStoppedAnimation(destacado ? 0.28 : 0.18),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.fromLTRB(18, 18, 14, 18),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Container(
                          width: 58,
                          height: 58,
                          decoration: BoxDecoration(
                            color: color.withValues(alpha: 0.18),
                            borderRadius: BorderRadius.circular(20),
                            border: Border.all(color: color.withValues(alpha: 0.72)),
                          ),
                          child: Icon(icono, color: color, size: 32),
                        ),
                        const SizedBox(width: 16),
                        Expanded(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              FittedBox(
                                fit: BoxFit.scaleDown,
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  titulo.toUpperCase(),
                                  maxLines: 1,
                                  style: Theme.of(context).textTheme.titleLarge?.copyWith(
                                        color: destacado ? TemaApp.colorDorado : Colors.white,
                                        fontWeight: FontWeight.w900,
                                        letterSpacing: 0.8,
                                      ),
                                ),
                              ),
                              const SizedBox(height: 4),
                              Text(
                                subtitulo,
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                                style: Theme.of(context).textTheme.titleMedium?.copyWith(color: color),
                              ),
                              const SizedBox(height: 8),
                              Text(
                                descripcion,
                                maxLines: 2,
                                overflow: TextOverflow.ellipsis,
                                style: Theme.of(context).textTheme.bodyMedium?.copyWith(height: 1.18),
                              ),
                            ],
                          ),
                        ),
                        const SizedBox(width: 8),
                        Icon(Icons.chevron_right_rounded, color: color, size: 30),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}