import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flux/features/tickets/blocs/ticket_list_cubit.dart';
import 'package:flux/features/tickets/blocs/ticket_list_state.dart';
import 'package:flux/features/tickets/ui/widgets/ticket_list_card.dart';

class TicketList extends StatelessWidget {
  final ScrollController scrollController;
  final TicketListState state;

  const TicketList({
    super.key,
    required this.scrollController,
    required this.state,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        ListView.builder(
          controller: scrollController,
          itemCount: state.hasReachedMax
              ? state.tickets.length
              : state.tickets.length + 1,
          itemBuilder: (context, index) {
            // Se siamo all'ultimo elemento e non abbiamo raggiunto il max, mostriamo il loader
            if (index >= state.tickets.length) {
              return const Center(
                child: Padding(
                  padding: EdgeInsets.all(16.0),
                  child: CircularProgressIndicator(),
                ),
              );
            }

            final ticket = state.tickets[index];
            final isSelected = state.selectedTicketIds.contains(ticket.id);
            final isSelectionMode = state.selectedTicketIds.isNotEmpty;

            // Per Desktop mostriamo la checkbox vera e propria
            final isDesktop = MediaQuery.of(context).size.width > 800;
            return TicketListCard(
              ticket: ticket,
              isSelected: isSelected,
              isSelectionMode: isSelectionMode,
              isDesktop: isDesktop,
            );
          },
        ),

        // 2. LA BARRA DELLE AZIONI BULK (Appare magicamente dal basso)
        AnimatedPositioned(
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeInOut,
          bottom: state.selectedTicketIds.isNotEmpty
              ? 90
              : -100, // Nasconde o mostra
          left: 16,
          right: 16,
          child: Card(
            elevation: 8,
            color: Theme.of(context).colorScheme.inverseSurface,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
            ),
            child: Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: 16.0,
                vertical: 8.0,
              ),
              child: Row(
                children: [
                  IconButton(
                    icon: const Icon(Icons.close),
                    onPressed: () =>
                        context.read<TicketListCubit>().clearSelection(),
                  ),
                  Text(
                    '${state.selectedTicketIds.length} selezionati',
                    style: const TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                    ),
                  ),
                  const Spacer(),

                  // IL NOSTRO FAMOSO BOTTONE SPEDISCI
                  FilledButton.icon(
                    onPressed: () {
                      // Qui lanceremo la modale per creare il DDT
                      // passando la lista: state.selectedTicketIds.toList()
                      print("Spedisco i ticket: ${state.selectedTicketIds}");
                    },
                    icon: const Icon(Icons.local_shipping),
                    label: const Text('Spedisci'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}