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

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

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

    return Scaffold(
      appBar: AppBar(title: Text(l10n.rulesTitle)),
      body: FondoFarolero(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(16),
          child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _seccion(
              context,
              1,
              Icons.person_search,
              l10n.rulesWhatIsTitle,
              l10n.rulesWhatIsBody,
            ),
            _seccion(
              context,
              2,
              Icons.chat_bubble,
              l10n.rulesHowToPlayTitle,
              l10n.rulesHowToPlayBody,
            ),
            _seccion(
              context,
              3,
              Icons.how_to_vote,
              l10n.rulesWhoWinsTitle,
              l10n.rulesWhoWinsBody,
            ),
            _seccion(
              context,
              4,
              Icons.lightbulb,
              l10n.rulesTipsPlayersTitle,
              l10n.rulesTipsPlayersBody,
            ),
            _seccion(
              context,
              5,
              Icons.theater_comedy,
              l10n.rulesTipsImpostorTitle,
              l10n.rulesTipsImpostorBody,
            ),
            _seccion(
              context,
              6,
              Icons.devices,
              l10n.rulesModesTitle,
              l10n.rulesModesBody,
            ),
            _ejemplo(context, l10n.rulesExampleTitle, l10n.rulesExampleBody),
            const SizedBox(height: 32),
          ],
          ),
        ),
      ),
    );
  }

  Widget _seccion(
    BuildContext context,
    int numero,
    IconData icono,
    String titulo,
    String contenido,
  ) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 16),
      child: PanelFarolero(
        padding: const EdgeInsets.all(12),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: 54,
              height: 54,
              decoration: BoxDecoration(
                color: TemaApp.colorNaranja.withValues(alpha: 0.16),
                borderRadius: BorderRadius.circular(8),
                border: Border.all(color: TemaApp.colorNaranja),
              ),
              child: Icon(icono, color: TemaApp.colorNaranja, size: 30),
            ),
            const SizedBox(width: 12),
            Expanded(
              child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
                  Text(
                    '$numero. ${titulo.toUpperCase()}',
                    style: Theme.of(context).textTheme.titleLarge,
                  ),
              const SizedBox(height: 8),
              Text(contenido,
                  style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                    height: 1.5,
                  )),
            ],
              ),
            ),
          ],
          ),
        ),
    );
  }

  Widget _ejemplo(BuildContext context, String titulo, String contenido) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 16),
      child: PanelFarolero(
        color: TemaApp.colorNaranja.withValues(alpha: 0.15),
        borderColor: TemaApp.colorNaranja,
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(titulo,
                  style: Theme.of(context).textTheme.titleLarge?.copyWith(
                    color: TemaApp.colorNaranja,
                  )),
              const SizedBox(height: 8),
              Text(contenido,
                  style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                    height: 1.5,
                  )),
            ],
        ),
      ),
    );
  }
}