import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../bloc/packs/packs_cubit.dart';
import '../bloc/etiquetas/etiquetas_cubit.dart';
import '../bloc/etiquetas/etiquetas_state.dart';

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

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<PacksCubit, PacksState>(
      builder: (context, state) {
        if (state.isLoading) {
          return const Center(child: CircularProgressIndicator());
        }

        return Scaffold(
          body: state.packs.isEmpty
              ? Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(Icons.inventory_2_outlined,
                          size: 64, color: Colors.grey.shade400),
                      const SizedBox(height: 16),
                      Text(
                        'No hay packs',
                        style: TextStyle(color: Colors.grey.shade600),
                      ),
                      const SizedBox(height: 8),
                      const Text('Crea uno seleccionando etiquetas'),
                    ],
                  ),
                )
              : ListView.builder(
                  padding: const EdgeInsets.all(16),
                  itemCount: state.packs.length,
                  itemBuilder: (context, index) {
                    final pack = state.packs[index];
                    return Card(
                      child: ListTile(
                        leading: Text(pack.icono, style: const TextStyle(fontSize: 24)),
                        title: Text(pack.nombre),
                        subtitle: Text('${pack.tagCount} etiquetas'),
                        trailing: Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            IconButton(
                              icon: const Icon(Icons.play_arrow),
                              onPressed: () {
                                context.read<EtiquetasCubit>().setSeleccionadas(pack.tags);
                                ScaffoldMessenger.of(context).showSnackBar(
                                  SnackBar(
                                    content: Text('Pack "${pack.nombre}" aplicado'),
                                  ),
                                );
                              },
                            ),
                            IconButton(
                              icon: const Icon(Icons.delete_outline),
                              onPressed: () => _confirmDelete(context, pack),
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                ),
          floatingActionButton: BlocBuilder<EtiquetasCubit, EtiquetasState>(
            builder: (context, etState) {
              if (etState.seleccionadas.isEmpty) {
                return const SizedBox.shrink();
              }
              return FloatingActionButton.extended(
                onPressed: () => _showCreateDialog(context, etState.seleccionadas),
                icon: const Icon(Icons.add),
                label: Text('Crear (${etState.seleccionadas.length})'),
              );
            },
          ),
        );
      },
    );
  }

  void _showCreateDialog(BuildContext context, List<String> tags) {
    final controller = TextEditingController();
    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        title: const Text('Nuevo Pack'),
        content: TextField(
          controller: controller,
          decoration: const InputDecoration(
            labelText: 'Nombre del pack',
          ),
          autofocus: true,
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(ctx),
            child: const Text('Cancelar'),
          ),
          FilledButton(
            onPressed: () {
              if (controller.text.isNotEmpty) {
                context.read<PacksCubit>().addPack(controller.text, tags);
                Navigator.pop(ctx);
              }
            },
            child: const Text('Crear'),
          ),
        ],
      ),
    );
  }

  void _confirmDelete(BuildContext context, dynamic pack) {
    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        title: const Text('Eliminar pack'),
        content: Text('¿Eliminar "${pack.nombre}"?'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(ctx),
            child: const Text('Cancelar'),
          ),
          FilledButton(
            onPressed: () {
              context.read<PacksCubit>().deletePack(pack.id);
              Navigator.pop(ctx);
            },
            child: const Text('Eliminar'),
          ),
        ],
      ),
    );
  }
}