import 'package:flutter/material.dart';
import 'package:farolero/l10n/generated/app_localizations.dart';
import 'package:provider/provider.dart';
import '../estado/estado_juego.dart';
import '../modelos/palabra.dart';
import '../tema/componentes_farolero.dart';
import '../tema/tema_app.dart';
import 'pantalla_debate.dart';

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

  @override
  State<PantallaVerPalabra> createState() => _PantallaVerPalabraState();
}

class _PantallaVerPalabraState extends State<PantallaVerPalabra> {
  final Set<String> _hanVisto = {};

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;
    final estado = context.watch<EstadoJuego>();
    final partida = estado.partida;
    if (partida == null) return const SizedBox.shrink();

    final todosHanVisto = partida.jugadores.every((j) => _hanVisto.contains(j.id));

    return Scaffold(
      appBar: AppBar(
        title: Text(l10n.seeYourWord),
        automaticallyImplyLeading: false,
      ),
      body: FondoFarolero(
        intenso: true,
        child: SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              children: [
                const ArteGameplayFarolero.fase(height: 110),
                const SizedBox(height: 10),
                TarjetaFaseFarolero(
                  icono: Icons.visibility,
                  assetIconPath: 'assets/ui/generated/actions/action_reveal_word.webp',
                  titulo: l10n.roundNumber(partida.rondaActual),
                  subtitulo: l10n.eachPlayerMustSee,
                ),
                const SizedBox(height: 16),
                Expanded(
                  child: ListView.separated(
                    itemCount: partida.jugadores.length,
                    separatorBuilder: (context, index) => const SizedBox(height: 10),
                    itemBuilder: (context, index) {
                      final jugador = partida.jugadores[index];
                      final haVisto = _hanVisto.contains(jugador.id);
                      return EstadoJugadorFarolero(
                        nombre: '${index + 1}. ${jugador.nombre}',
                        subtitulo: haVisto ? l10n.alreadySeen : l10n.tapToSee,
                        icono: haVisto ? Icons.check_circle : Icons.visibility,
                        assetIconPath: haVisto ? null : 'assets/ui/generated/actions/action_reveal_word.webp',
                        destacado: haVisto,
                        completado: haVisto,
                        onTap: haVisto ? null : () => _mostrarPalabra(context, jugador.id),
                      );
                    },
                  ),
                ),
                const SizedBox(height: 16),
                BotonFarolero(
                  texto: todosHanVisto
                      ? l10n.allSeenStartDebate
                      : l10n.playersRemaining(partida.jugadores.length - _hanVisto.length),
                  icono: Icons.forum,
                  assetIconPath: 'assets/ui/generated/actions/action_rules_book.webp',
                  onPressed: todosHanVisto
                      ? () {
                          estado.iniciarDebate();
                          Navigator.pushReplacement(
                            context,
                            MaterialPageRoute(builder: (_) => const PantallaDebate()),
                          );
                        }
                      : null,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  void _mostrarPalabra(BuildContext context, String jugadorId) {
    final estado = context.read<EstadoJuego>();
    final partida = estado.partida!;
    final jugador = partida.jugadores.firstWhere((j) => j.id == jugadorId);

    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => _PantallaRevelarPalabra(
          nombre: jugador.nombre,
          esImpostor: jugador.esImpostor,
          palabra: partida.palabraSecreta,
          pistaActiva: partida.config.pistaImpostor,
          categoria: partida.categoriaReal,
          onVisto: () {
            setState(() => _hanVisto.add(jugadorId));
          },
        ),
      ),
    );
  }
}

class _PantallaRevelarPalabra extends StatefulWidget {
  final String nombre;
  final bool esImpostor;
  final String palabra;
  final bool pistaActiva;
  final String categoria;
  final VoidCallback onVisto;

  const _PantallaRevelarPalabra({
    required this.nombre,
    required this.esImpostor,
    required this.palabra,
    required this.pistaActiva,
    required this.categoria,
    required this.onVisto,
  });

  @override
  State<_PantallaRevelarPalabra> createState() => _PantallaRevelarPalabraState();
}

class _PantallaRevelarPalabraState extends State<_PantallaRevelarPalabra> {
  bool _manteniendo = false;
  bool _visto = false;

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;
    final colorEstado = widget.esImpostor ? TemaApp.colorAcento : TemaApp.colorVerde;

    return Scaffold(
      appBar: AppBar(title: Text(widget.nombre)),
      body: FondoFarolero(
        intenso: true,
        child: SafeArea(
          child: SingleChildScrollView(
            padding: const EdgeInsets.all(24),
            child: Column(
              children: [
                const ArteGameplayFarolero.fase(height: 128),
                const SizedBox(height: 12),
                TarjetaFaseFarolero(
                  icono: widget.esImpostor ? Icons.theater_comedy : Icons.search,
                  assetIconPath: widget.esImpostor ? 'assets/ui/generated/actions/action_impostor_mask.webp' : 'assets/ui/generated/actions/action_reveal_word.webp',
                  titulo: widget.nombre,
                  subtitulo: l10n.holdToSeeWord,
                  color: colorEstado,
                ),
                const SizedBox(height: 18),
                AnimatedContainer(
                  duration: const Duration(milliseconds: 200),
                  width: double.infinity,
                  padding: const EdgeInsets.all(24),
                  decoration: TemaApp.decoracionPanel(
                    color: (_manteniendo ? colorEstado : TemaApp.colorTarjeta).withValues(alpha: _manteniendo ? 0.22 : 0.92),
                    borderColor: _manteniendo ? colorEstado : TemaApp.colorBorde,
                  ),
                  child: _manteniendo
                      ? Column(
                          children: [
                            IconoFarolero(
                              widget.esImpostor ? Icons.theater_comedy : Icons.search,
                              color: colorEstado,
                              size: 52,
                            ),
                            const SizedBox(height: 16),
                            Text(
                              widget.esImpostor ? l10n.youAreImpostor : l10n.yourWordIs,
                              textAlign: TextAlign.center,
                              style: Theme.of(context).textTheme.titleLarge?.copyWith(color: colorEstado),
                            ),
                            if (!widget.esImpostor) ...[
                              const SizedBox(height: 12),
                              TarjetaPalabraFarolero(palabra: widget.palabra),
                            ],
                            if (widget.esImpostor && widget.pistaActiva) ...[
                              const SizedBox(height: 12),
                              Text(
                                l10n.clueCategory(BancoPalabras.nombreBonitoCategoria(widget.categoria, l10n)),
                                textAlign: TextAlign.center,
                                style: Theme.of(context).textTheme.bodyLarge?.copyWith(color: TemaApp.colorNaranja),
                              ),
                            ],
                          ],
                        )
                      : Column(
                          children: [
                            IconoFarolero(Icons.lock, color: TemaApp.colorDorado, size: 52),
                            const SizedBox(height: 16),
                            Text(
                              l10n.holdToSeeWord,
                              style: Theme.of(context).textTheme.titleMedium,
                              textAlign: TextAlign.center,
                            ),
                            const SizedBox(height: 8),
                            Text(
                              l10n.makeSureNoOneLooks,
                              style: Theme.of(context).textTheme.bodyMedium,
                              textAlign: TextAlign.center,
                            ),
                          ],
                        ),
                ),
                const SizedBox(height: 24),
                GestureDetector(
                  onLongPressStart: (details) {
                    setState(() {
                      _manteniendo = true;
                      _visto = true;
                    });
                  },
                  onLongPressEnd: (details) => setState(() => _manteniendo = false),
                  child: Container(
                    width: double.infinity,
                    height: 64,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        colors: _manteniendo
                            ? [TemaApp.colorNaranja, TemaApp.colorAcento]
                            : [TemaApp.colorAcento, TemaApp.colorAcento],
                      ),
                      borderRadius: BorderRadius.circular(18),
                    ),
                    child: Center(
                      child: Text(
                        _manteniendo ? l10n.showingWord : l10n.holdToSee,
                        style: const TextStyle(
                          color: Colors.white,
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                ),
                const SizedBox(height: 24),
                if (_visto)
                  BotonFarolero.secundario(
                    texto: l10n.seenMyWord,
                    icono: Icons.check,
                    assetIconPath: 'assets/ui/generated/actions/action_reveal_word.webp',
                    onPressed: () {
                      widget.onVisto();
                      Navigator.pop(context);
                    },
                  ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}