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

import '../servicios/servicio_historial_partidas.dart';
import '../tema/componentes_farolero.dart';
import '../tema/tema_app.dart';

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

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;
    final historial = context.watch<ServicioHistorialPartidas>();
    final partidas = historial.partidas;

    return Scaffold(
      appBar: AppBar(title: Text(l10n.history)),
      body: FondoFarolero(
        intenso: true,
        child: partidas.isEmpty
            ? Center(
                child: Padding(
                  padding: const EdgeInsets.all(20),
                  child: EstadoVacioFarolero(
                    icono: Icons.history_rounded,
                    titulo: l10n.history,
                    subtitulo: l10n.noSavedGames,
                  ),
                ),
              )
            : SafeArea(
                top: false,
                child: ListView.separated(
                  padding: const EdgeInsets.fromLTRB(16, 12, 16, 24),
                  itemCount: partidas.length,
                  separatorBuilder: (_, __) => const SizedBox(height: 12),
                  itemBuilder: (context, index) {
                    final partida = partidas[index];
                    final ganaronJugadores = partida.ganador == 'jugadores';
                    final color = ganaronJugadores
                        ? TemaApp.colorVerde
                        : TemaApp.colorAcento;
                    final dia = partida.fecha.day.toString().padLeft(2, '0');
                    final mes = partida.fecha.month.toString().padLeft(2, '0');
                    return PanelFarolero(
                      padding: const EdgeInsets.all(14),
                      borderColor: color.withValues(alpha: 0.48),
                      child: Row(
                        children: [
                          Container(
                            width: 52,
                            height: 52,
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              color: color.withValues(alpha: 0.18),
                              border: Border.all(color: color),
                            ),
                            child: Icon(
                              ganaronJugadores
                                  ? Icons.groups_rounded
                                  : Icons.theater_comedy_rounded,
                              color: color,
                            ),
                          ),
                          const SizedBox(width: 12),
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  ganaronJugadores
                                      ? l10n.playersWin
                                      : l10n.impostorsWin,
                                  maxLines: 1,
                                  overflow: TextOverflow.ellipsis,
                                  style: Theme.of(context).textTheme.titleMedium,
                                ),
                                const SizedBox(height: 4),
                                Text(
                                  l10n.historyGameSummary(
                                    partida.jugadores,
                                    partida.impostores,
                                    partida.rondas,
                                    partida.palabra,
                                    partida.categoria,
                                  ),
                                  maxLines: 2,
                                  overflow: TextOverflow.ellipsis,
                                  style: Theme.of(context).textTheme.bodyMedium,
                                ),
                              ],
                            ),
                          ),
                          const SizedBox(width: 12),
                          Text(
                            '$dia/$mes',
                            style: Theme.of(context).textTheme.bodySmall,
                          ),
                        ],
                      ),
                    );
                  },
                ),
              ),
      ),
    );
  }
}