import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:prosapp_web_app/models/schedules_entity.dart';
import 'package:prosapp_web_app/models/service.dart';
import 'package:prosapp_web_app/models/service_status.dart';
import 'package:prosapp_web_app/models/servicio_profesional.dart';
import 'package:prosapp_web_app/providers/auth_provider.dart';
import 'package:prosapp_web_app/providers/services_provider.dart';
import 'package:prosapp_web_app/providers/theme_provider.dart';
import 'package:prosapp_web_app/services/navigation_service.dart';
import 'package:provider/provider.dart';

class ServicesHistoryView extends StatelessWidget {
  final String type;
  const ServicesHistoryView({super.key, required this.type});

  @override
  Widget build(BuildContext context) {
    final servicesProvider = Provider.of<ServicesProvider>(context, listen: false);
    final userId = Provider.of<AuthProvider>(context, listen: false).user!.id;

    if (type == 'user') servicesProvider.getServicesHistoryForUser(userId);
    if (type == 'professional') servicesProvider.getServicesHistoryForProfessional(userId);

    final isDark = context.watch<ThemeProvider>().isDark;
    final textSecondary = isDark ? const Color(0xFF94A3B8) : const Color(0xFF6B7280);

    return Center(
      child: ConstrainedBox(
        constraints: const BoxConstraints(maxWidth: 900),
        child: Consumer<ServicesProvider>(
          builder: (context, sp, _) {
            if (sp.isLoading) {
              return const Center(child: CircularProgressIndicator());
            }
            if (sp.services.isEmpty) {
              return Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.history_outlined, size: 64,
                        color: textSecondary.withOpacity(0.5)),
                    const SizedBox(height: 16),
                    Text('Sin historial',
                        style: TextStyle(
                          fontSize: 17,
                          fontWeight: FontWeight.w600,
                          color: isDark ? Colors.white : const Color(0xFF111827),
                        )),
                    const SizedBox(height: 6),
                    Text('Los servicios completados o cancelados aparecerán aquí.',
                        style: TextStyle(fontSize: 13, color: textSecondary)),
                  ],
                ),
              );
            }

            return ListView.builder(
              padding: const EdgeInsets.symmetric(vertical: 8),
              itemCount: sp.services.length,
              itemBuilder: (context, i) {
                final data = sp.services[i];
                return _HistoryCard(
                  data: data,
                  isDark: isDark,
                  onTap: () => NavigationService.replaceTo(
                      '/dashboard/$type/service/${data.service.id}'),
                );
              },
            );
          },
        ),
      ),
    );
  }
}

class _HistoryCard extends StatelessWidget {
  final ServicioProfesional data;
  final bool isDark;
  final VoidCallback onTap;

  const _HistoryCard({
    required this.data,
    required this.isDark,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    final cardBg = isDark ? const Color(0xFF1E293B) : Colors.white;
    final border = isDark ? const Color(0xFF334155) : const Color(0xFFE5E7EB);
    final textPrimary = isDark ? Colors.white : const Color(0xFF111827);
    final textSecondary = isDark ? const Color(0xFF94A3B8) : const Color(0xFF6B7280);

    final hasPic = data.user.picture != null && data.user.picture!.isNotEmpty;
    final day = DateTime.tryParse(data.service.day);
    final dateStr = day != null
        ? DateFormat('dd MMM yyyy', 'es').format(day)
        : data.service.day;
    final timeStr = ScheduleEntity.getFormatTime(data.service.range1Hour1) ?? '';

    Widget statusBadge;
    if (data.service.status == ServiceStatus.completed) {
      statusBadge = _Badge(label: 'Completado', color: const Color(0xFF3B82F6));
    } else if (data.service.status == ServiceStatus.cancelled) {
      statusBadge = _Badge(label: 'Cancelado', color: const Color(0xFFEF4444));
    } else if (data.service.status == ServiceStatus.denied) {
      statusBadge = _Badge(label: 'Rechazado', color: const Color(0xFFEF4444));
    } else {
      statusBadge = const SizedBox();
    }

    return Padding(
      padding: const EdgeInsets.only(bottom: 10),
      child: Material(
        color: cardBg,
        borderRadius: BorderRadius.circular(14),
        child: InkWell(
          onTap: onTap,
          borderRadius: BorderRadius.circular(14),
          child: Container(
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(14),
              border: Border.all(color: border),
            ),
            child: Row(
              children: [
                Container(
                  width: 52,
                  height: 52,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: const Color(0xFF42A4EF).withOpacity(0.12),
                  ),
                  child: ClipOval(
                    child: hasPic
                        ? FadeInImage.assetNetwork(
                            placeholder: 'loader.gif',
                            image: data.user.picture!,
                            fit: BoxFit.cover,
                          )
                        : Center(
                            child: Text(
                              data.user.name.isNotEmpty
                                  ? data.user.name[0].toUpperCase()
                                  : '?',
                              style: const TextStyle(
                                color: Color(0xFF42A4EF),
                                fontSize: 20,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                  ),
                ),
                const SizedBox(width: 14),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(data.user.name,
                          style: TextStyle(
                            fontSize: 14,
                            fontWeight: FontWeight.w600,
                            color: textPrimary,
                          )),
                      if (data.service.address.isNotEmpty) ...[
                        const SizedBox(height: 3),
                        Row(children: [
                          Icon(Icons.location_on_outlined,
                              size: 12, color: textSecondary),
                          const SizedBox(width: 3),
                          Expanded(
                            child: Text(data.service.address,
                                style: TextStyle(
                                    fontSize: 11, color: textSecondary),
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis),
                          ),
                        ]),
                      ],
                      const SizedBox(height: 5),
                      Row(children: [
                        Icon(Icons.calendar_today_outlined,
                            size: 12, color: textSecondary),
                        const SizedBox(width: 4),
                        Text('$timeStr · $dateStr',
                            style: TextStyle(
                                fontSize: 11, color: textSecondary)),
                      ]),
                    ],
                  ),
                ),
                const SizedBox(width: 10),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    statusBadge,
                    const SizedBox(height: 8),
                    Icon(Icons.chevron_right, color: textSecondary, size: 18),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class _Badge extends StatelessWidget {
  final String label;
  final Color color;
  const _Badge({required this.label, required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
      decoration: BoxDecoration(
        color: color.withOpacity(0.12),
        borderRadius: BorderRadius.circular(20),
        border: Border.all(color: color.withOpacity(0.4)),
      ),
      child: Text(label,
          style: TextStyle(
            fontSize: 11,
            fontWeight: FontWeight.w600,
            color: color,
          )),
    );
  }
}