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/core/utils/extensions.dart';
import 'package:flux/features/home/dashboard_store_operation_list/bloc/dashboard_store_operation_list_cubit.dart';
import 'package:go_router/go_router.dart';

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

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

class _LatestOperationsCardContent 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(12),
        side: BorderSide(color: theme.dividerColor.withValues(alpha: 0.3)),
      ),
      child: InkWell(
        onTap: () => context.pushNamed(Routes.operations),
        child: Padding(
          padding: const EdgeInsets.all(12.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(
                      context.l10n.homeLatestOperations,
                      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<
                      DashboardStoreOperationListCubit,
                      DashboardStoreOperationListState
                    >(
                      builder: (context, state) {
                        if (state.status ==
                                DashboardStoreOperationListStatus.loading ||
                            state.status ==
                                DashboardStoreOperationListStatus.initial) {
                          return const Center(
                            child: CircularProgressIndicator(),
                          );
                        }

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

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

                        return ListView.separated(
                          itemCount: state.operations.length,
                          separatorBuilder: (context, index) => Divider(
                            height: 1,
                            color: theme.dividerColor.withValues(alpha: 0.3),
                          ),
                          itemBuilder: (context, index) {
                            final operation = state.operations[index];
                            return InkWell(
                              onTap: () => context.pushNamed(
                                Routes.operationForm,
                                extra: (createdBy: null, operation: operation),
                                pathParameters: {'id': operation.id!},
                              ),
                              child: Padding(
                                padding: const EdgeInsets.symmetric(
                                  vertical: 8.0,
                                ),
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Expanded(
                                      flex: 5,
                                      child: Text(
                                        operation.customer?.name ??
                                            'Cliente sconosciuto',
                                        style: TextStyle(
                                          fontWeight: FontWeight.w700,
                                          color: context.primaryText,
                                        ),
                                      ),
                                    ),
                                    Expanded(
                                      flex: 5,
                                      child: Text(
                                        operation.type,
                                        style: TextStyle(
                                          fontWeight: FontWeight.w600,
                                          color: context.primaryText,
                                        ),
                                        maxLines: 1,
                                        overflow: TextOverflow.ellipsis,
                                      ),
                                    ),
                                    Text(
                                      "${operation.createdAt?.day}/${operation.createdAt?.month}",
                                      style: TextStyle(
                                        color: context.secondaryText,
                                        fontSize: 12,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            );
                          },
                        );
                      },
                    ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
