import 'package:flutter/material.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) {
    return Scaffold(
      appBar: AppBar(title: const Text('Elegir modo de juego')),
      body: FondoFarolero(
        child: SafeArea(
          child: Center(
            child: SingleChildScrollView(
              padding: const EdgeInsets.all(24),
              child: ConstrainedBox(
                constraints: const BoxConstraints(maxWidth: 460),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    const Icon(
                      Icons.sports_esports,
                      size: 64,
                      color: TemaApp.colorNaranja,
                    ),
                    const SizedBox(height: 16),
                    Text(
                      '¿Cómo querés jugar?',
                      style: Theme.of(context).textTheme.headlineMedium,
                      textAlign: TextAlign.center,
                    ),
                    const SizedBox(height: 8),
                    Text(
                      'Elegí primero el tipo de partida para configurar solo lo necesario.',
                      style: Theme.of(context).textTheme.bodyMedium,
                      textAlign: TextAlign.center,
                    ),
                    const SizedBox(height: 28),
                    _ModoCard(
                      icono: Icons.phone_android,
                      titulo: 'Partida en este dispositivo',
                      descripcion:
                          'Todos los jugadores usan este móvil. Acá se agregan los nombres manualmente.',
                      onTap: () => Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (_) => const PantallaCrearPartida(
                            modoInicial: false,
                            bloquearModo: true,
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(height: 14),
                    _ModoCard(
                      icono: Icons.devices,
                      titulo: 'Partida multidispositivo',
                      descripcion:
                          'Este móvil crea el servidor. Los usuarios se gestionan después en el lobby.',
                      destacado: true,
                      onTap: () => Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (_) => const PantallaCrearPartida(
                            modoInicial: true,
                            bloquearModo: true,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

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

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

  @override
  Widget build(BuildContext context) {
    final color = destacado ? TemaApp.colorNaranja : TemaApp.colorAcento;
    return Card(
      color: TemaApp.colorTarjeta,
      child: InkWell(
        borderRadius: BorderRadius.circular(16),
        onTap: onTap,
        child: Padding(
          padding: const EdgeInsets.all(18),
          child: Row(
            children: [
              Container(
                width: 52,
                height: 52,
                decoration: BoxDecoration(
                  color: color.withValues(alpha: 0.18),
                  borderRadius: BorderRadius.circular(16),
                  border: Border.all(color: color.withValues(alpha: 0.7)),
                ),
                child: Icon(icono, color: color, size: 30),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(titulo, style: Theme.of(context).textTheme.titleLarge),
                    const SizedBox(height: 6),
                    Text(
                      descripcion,
                      style: Theme.of(context).textTheme.bodyMedium,
                    ),
                  ],
                ),
              ),
              const SizedBox(width: 8),
              const Icon(Icons.chevron_right),
            ],
          ),
        ),
      ),
    );
  }
}