import 'dart:async';
import 'package:flutter/material.dart';
import 'package:farolero/l10n/generated/app_localizations.dart';
import 'package:provider/provider.dart';
import '../estado/estado_juego.dart';
import '../tema/componentes_farolero.dart';
import '../tema/tema_app.dart';
import 'pantalla_notas.dart';
import 'pantalla_votacion.dart';

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

  @override
  State<PantallaDebate> createState() => _PantallaDebateState();
}

class _PantallaDebateState extends State<PantallaDebate> {
  Timer? _timer;
  int _segundosRestantes = 0;
  bool _tiempoAgotado = false;

  @override
  void initState() {
    super.initState();
    final estado = context.read<EstadoJuego>();
    final tiempo = estado.partida?.config.tiempoDebateSegundos;
    if (tiempo != null) {
      _segundosRestantes = tiempo;
      _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
        if (_segundosRestantes > 0) {
          setState(() => _segundosRestantes--);
        } else {
          timer.cancel();
          setState(() => _tiempoAgotado = true);
        }
      });
    }
  }

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  String _formatearTiempo(int segundos) {
    final min = segundos ~/ 60;
    final seg = segundos % 60;
    return "${min.toString().padLeft(2, '0')}:${seg.toString().padLeft(2, '0')}";
  }

  void _irAVotacion() {
    final estado = context.read<EstadoJuego>();
    estado.iniciarVotacion();
    Navigator.pushReplacement(
      context,
      MaterialPageRoute(builder: (_) => const PantallaVotacion()),
    );
  }

  @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 tieneTemporizador = partida.config.tiempoDebateSegundos != null;
    final progreso = tieneTemporizador
        ? _segundosRestantes / partida.config.tiempoDebateSegundos!
        : 0.0;

    return Scaffold(
      appBar: AppBar(
        title: Text(l10n.debateRound(partida.rondaActual)),
        automaticallyImplyLeading: false,
      ),
      body: FondoFarolero(
        intenso: true,
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
          children: [
            // Temporizador
            if (tieneTemporizador) ...[
              Container(
                width: double.infinity,
                padding: const EdgeInsets.all(20),
                decoration: BoxDecoration(
                  color: _tiempoAgotado
                      ? TemaApp.colorAcento.withValues(alpha: 0.3)
                      : TemaApp.colorTarjeta,
                  borderRadius: BorderRadius.circular(16),
                  border: _tiempoAgotado
                      ? Border.all(color: TemaApp.colorAcento, width: 2)
                      : null,
                ),
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Positioned.fill(
                      child: Image.asset(
                        'assets/ui/premium/timer_ring_glow.png',
                        fit: BoxFit.contain,
                        opacity: const AlwaysStoppedAnimation(0.36),
                      ),
                    ),
                    Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text(
                          _tiempoAgotado ? l10n.timeUp : l10n.timeRemaining,
                          style:
                              Theme.of(context).textTheme.titleMedium?.copyWith(
                                    color: _tiempoAgotado
                                        ? TemaApp.colorAcento
                                        : TemaApp.colorTextoSecundario,
                                  ),
                        ),
                        const SizedBox(height: 8),
                        Text(
                          _formatearTiempo(_segundosRestantes),
                          style:
                              Theme.of(context).textTheme.headlineLarge?.copyWith(
                                    fontSize: 48,
                                    fontWeight: FontWeight.bold,
                                    color: _segundosRestantes < 10 &&
                                            !_tiempoAgotado
                                        ? TemaApp.colorAcento
                                        : TemaApp.colorTexto,
                                  ),
                        ),
                        const SizedBox(height: 8),
                        ClipRRect(
                          borderRadius: BorderRadius.circular(4),
                          child: LinearProgressIndicator(
                            value: progreso,
                            backgroundColor: TemaApp.colorSuperficie,
                            valueColor: AlwaysStoppedAnimation(
                              _segundosRestantes < 10
                                  ? TemaApp.colorAcento
                                  : TemaApp.colorVerde,
                            ),
                            minHeight: 6,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 16),
            ],

            // Jugadores activos
            Expanded(
              child: Card(
                child: Padding(
                  padding: const EdgeInsets.all(16),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        l10n.playersInDebate,
                        style: Theme.of(context).textTheme.titleLarge,
                      ),
                      const SizedBox(height: 4),
                      Text(
                        l10n.activePlayersInfo(partida.jugadoresActivos.length, partida.impostoresActivos.length),
                        style: Theme.of(context).textTheme.bodyMedium,
                      ),
                      const SizedBox(height: 12),
                      Expanded(
                        child: ListView.builder(
                          itemCount: partida.jugadores.length,
                          itemBuilder: (context, index) {
                            final j = partida.jugadores[index];
                            return ListTile(
                              leading: CircleAvatar(
                                backgroundColor: j.eliminado
                                    ? Colors.grey
                                    : TemaApp.colorAcento,
                                child: Text(
                                  j.eliminado ? '💀' : '${index + 1}',
                                  style: const TextStyle(
                                      color: Colors.white, fontSize: 14),
                                ),
                              ),
                              title: Text(
                                j.nombre,
                                style: TextStyle(
                                  decoration: j.eliminado
                                      ? TextDecoration.lineThrough
                                      : null,
                                  color: j.eliminado
                                      ? TemaApp.colorTextoSecundario
                                      : TemaApp.colorTexto,
                                ),
                              ),
                              subtitle: j.eliminado
                                  ? Text(l10n.eliminated)
                                  : null,
                              dense: true,
                            );
                          },
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            const SizedBox(height: 16),

            // Botones
            Row(
              children: [
                Expanded(
                  child: OutlinedButton.icon(
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (_) => const PantallaNotas(),
                        ),
                      );
                    },
                    icon: const Text('📝', style: TextStyle(fontSize: 18)),
                    label: Text(l10n.notes),
                  ),
                ),
                const SizedBox(width: 12),
                Expanded(
                  flex: 2,
                  child: ElevatedButton.icon(
                    onPressed: _irAVotacion,
                    icon: const Text('🗳️', style: TextStyle(fontSize: 18)),
                    label: Text(l10n.goToVoting),
                  ),
                ),
              ],
            ),
          ],
          ),
        ),
      ),
    );
  }
}
