import 'package:flutter/material.dart';
import 'package:farolero/l10n/generated/app_localizations.dart';
import 'package:farolero/modelos/jugador.dart';
import 'package:farolero/tema/tema_app.dart';

/// Pantalla de votación para el cliente (multidispositivo).
/// El cliente recibe fase=votacion y ve esta pantalla para elegir a quién votar.
class PantallaVotacionCliente extends StatefulWidget {
  final List<Jugador> jugadores;
  final Function(String votoporId) onVoto;

  const PantallaVotacionCliente({
    super.key,
    required this.jugadores,
    required this.onVoto,
  });

  @override
  State<PantallaVotacionCliente> createState() => _PantallaVotacionClienteState();
}

class _PantallaVotacionClienteState extends State<PantallaVotacionCliente> {
  String? _votoSeleccionado;

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;

    return Scaffold(
      backgroundColor: TemaApp.colorFondo,
      appBar: AppBar(
        title: Text(l10n.voting),
        automaticallyImplyLeading: false,
        backgroundColor: Colors.transparent,
        elevation: 0,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              l10n.whoDoYouThinkIsTheImpostor,
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 8),
            Text(
              l10n.selectOnePlayer,
              style: TextStyle(color: TemaApp.colorTextoSecundario),
            ),
            const SizedBox(height: 16),
            Expanded(
              child: ListView.builder(
                itemCount: widget.jugadores.length,
                itemBuilder: (context, index) {
                  final jugador = widget.jugadores[index];
                  final selected = _votoSeleccionado == jugador.id;
                  return Card(
                    color: selected
                        ? TemaApp.colorAcento.withValues(alpha: 0.3)
                        : TemaApp.colorTarjeta,
                    margin: const EdgeInsets.only(bottom: 8),
                    child: ListTile(
                      leading: CircleAvatar(
                        backgroundColor: selected
                            ? TemaApp.colorAcento
                            : TemaApp.colorAcento.withValues(alpha: 0.3),
                        child: Text(
                          '${index + 1}',
                          style: TextStyle(
                            color: selected
                                ? Colors.white
                                : TemaApp.colorTexto,
                          ),
                        ),
                      ),
                      title: Text(jugador.nombre),
                      trailing: selected
                          ? const Icon(Icons.check_circle,
                              color: TemaApp.colorAcento)
                          : null,
                      onTap: () {
                        setState(() => _votoSeleccionado = jugador.id);
                      },
                    ),
                  );
                },
              ),
            ),
            const SizedBox(height: 16),
            SizedBox(
              width: double.infinity,
              height: 56,
              child: ElevatedButton.icon(
                onPressed: _votoSeleccionado == null
                    ? null
                    : () => widget.onVoto(_votoSeleccionado!),
                icon: const Icon(Icons.how_to_vote),
                label: Text(l10n.votar),
                style: ElevatedButton.styleFrom(
                  backgroundColor: TemaApp.colorAcento,
                  foregroundColor: Colors.white,
                  textStyle: const TextStyle(fontSize: 16),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}