import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flux/core/routes/routes.dart';
import 'package:flux/core/theme/theme.dart';
import 'package:flux/features/home/dashboard_store_ticket_list/blocs/dashboard_store_ticket_list_cubit.dart';
import 'package:flux/features/tickets/models/ticket_status_extension.dart';
import 'package:go_router/go_router.dart';

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

  @override
  Widget build(BuildContext context) {
    return _DashboardStoreTicketListCardContent();
  }
}

class _DashboardStoreTicketListCardContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    const color = Colors.blue;

    return Card(
      elevation: 0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16),
        side: BorderSide(color: theme.dividerColor.withValues(alpha: 0.5)),
      ),
      child: InkWell(
        onTap: () => context.pushNamed(Routes.tickets),
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // --- HEADER DELLA CARD ---
              Row(
                children: [
                  Container(
                    padding: const EdgeInsets.all(8),
                    decoration: BoxDecoration(
                      color: color.withValues(alpha: 0.1),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: const Icon(
                      Icons.design_services_outlined,
                      color: color,
                      size: 20,
                    ),
                  ),
                  const SizedBox(width: 12),
                  Expanded(
                    child: Text(
                      "Ticket recenti",
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                        color: context.primaryText,
                      ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 12),

              // --- CORPO DELLA CARD (LA LISTA REAL-TIME) ---
              Expanded(
                child:
                    BlocBuilder<
                      DashboardStoreTicketListCubit,
                      DashboardStoreTicketListState
                    >(
                      builder: (context, state) {
                        if (state.status ==
                                DashboardStoreTicketListStatus.loading ||
                            state.status ==
                                DashboardStoreTicketListStatus.initial) {
                          return const Center(
                            child: CircularProgressIndicator(),
                          );
                        }

                        if (state.status ==
                            DashboardStoreTicketListStatus.failure) {
                          return Center(
                            child: Text(
                              "Errore di caricamento",
                              style: TextStyle(color: theme.colorScheme.error),
                            ),
                          );
                        }

                        if (state.tickets.isEmpty) {
                          return Center(
                            child: Text(
                              "Nessun ticket recente.",
                              style: TextStyle(
                                color: context.secondaryText,
                                fontStyle: FontStyle.italic,
                              ),
                            ),
                          );
                        }

                        return ListView.separated(
                          itemCount: state.tickets.length,
                          separatorBuilder: (context, index) => Divider(
                            height: 1,
                            color: theme.dividerColor.withValues(alpha: 0.3),
                          ),
                          itemBuilder: (context, index) {
                            final ticket = state.tickets[index];
                            final statusColor = ticket.ticketStatus.color;
                            return InkWell(
                              onTap: () => context.pushNamed(
                                Routes.ticketForm,
                                extra: (createdBy: null, ticket: ticket),
                                pathParameters: {'id': ticket.id!},
                              ),
                              child: Padding(
                                padding: const EdgeInsets.symmetric(
                                  vertical: 8.0,
                                ),
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Container(
                                      width: 8,
                                      height:
                                          30, // Un'altezza fissa per farlo comparire!
                                      decoration: BoxDecoration(
                                        color: statusColor,
                                        borderRadius: BorderRadius.circular(
                                          4,
                                        ), // Angoli smussati per stile
                                      ),
                                    ),
                                    const SizedBox(width: 4),
                                    Expanded(
                                      flex: 5,
                                      child: Text(
                                        ticket.customer?.name ??
                                            'Cliente sconosciuto',
                                        style: TextStyle(
                                          fontWeight: FontWeight.w700,
                                          color: context.primaryText,
                                        ),
                                      ),
                                    ),
                                    Expanded(
                                      flex: 5,
                                      child: Text(
                                        ticket.targetModelName ??
                                            'Modello sconosciuto',
                                        style: TextStyle(
                                          fontWeight: FontWeight.w600,
                                          color: context.primaryText,
                                        ),
                                        maxLines: 1,
                                        overflow: TextOverflow.ellipsis,
                                      ),
                                    ),
                                    Text(
                                      "${ticket.createdAt?.day}/${ticket.createdAt?.month}",
                                      style: TextStyle(
                                        color: context.secondaryText,
                                        fontSize: 12,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            );
                          },
                        );
                      },
                    ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
