import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';

import '../../core/theme/app_theme.dart';
import '../../core/widgets/app_widgets.dart';
import '../../core/services/auth_controller.dart';
import '../separation_guide/ai_pet_chat_screen.dart';
import 'models/profile_user.dart';
import 'providers/profile_providers.dart';

class ProfileScreen extends ConsumerWidget {
  const ProfileScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final authRole =
        ref.watch(authControllerProvider).asData?.value.userRole ?? 'citizen';
    final userAsync = ref.watch(currentUserProvider);

    return Scaffold(
      backgroundColor: AppTheme.background,
      appBar: AppBar(title: const Text('Mi perfil')),
      body: RefreshIndicator(
        onRefresh: () async {
          ref.invalidate(currentUserProvider);
          await ref.read(currentUserProvider.future);
        },
        child: ListView(
          padding: const EdgeInsets.all(16),
          children: [
            _ProfileHeader(
              user: userAsync.asData?.value,
              fallbackRole: authRole,
            ),
            const SizedBox(height: 20),

            const AppSectionTitle(title: 'Mi cuenta'),
            AppMenuTile(
              icon: Icons.person_outline,
              title: 'Editar perfil',
              subtitle: 'Nombre, correo, teléfono y contraseña',
              onTap: () => context.push('/edit-profile'),
            ),
            if ((userAsync.asData?.value.isAdmin ?? false) ||
                authRole == 'admin')
              AppMenuTile(
                icon: Icons.admin_panel_settings_outlined,
                title: 'Panel de administración',
                subtitle: 'Gestiona usuarios, rutas y camiones',
                onTap: () => context.go('/admin'),
              ),

            const SizedBox(height: 16),
            const AppSectionTitle(title: 'Soporte'),
            AppMenuTile(
              icon: Icons.pets,
              title: 'Hablar con Eco (Asistente IA)',
              subtitle: 'Guía de separación de residuos',
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => const AiPetChatScreen()),
                );
              },
            ),
            AppMenuTile(
              icon: Icons.help_outline,
              title: 'Ayuda y preguntas frecuentes',
              subtitle: 'Chatea con nuestro asistente',
              onTap: () => context.push('/help'),
            ),
            AppMenuTile(
              icon: Icons.bug_report_outlined,
              title: 'Reportar un problema',
              subtitle: 'Reporta una unidad o incidente',
              onTap: () => context.push('/report-issue'),
            ),
            AppMenuTile(
              icon: Icons.info_outline,
              title: 'Acerca de la app',
              onTap: () => context.push('/about'),
            ),

            const SizedBox(height: 16),
            AppMenuTile(
              icon: Icons.logout_rounded,
              title: 'Cerrar sesión',
              iconColor: AppTheme.danger,
              titleColor: AppTheme.danger,
              trailing: const SizedBox.shrink(),
              onTap: () => _confirmarCerrarSesion(context, ref),
            ),

            const SizedBox(height: 32),
            const Center(
              child: Text(
                'Recolecta v1.0.0\nServicio de Limpia · Celaya, Gto.',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 12,
                  color: AppTheme.textHint,
                  height: 1.6,
                ),
              ),
            ),
            const SizedBox(height: 24),
          ],
        ),
      ),
    );
  }

  void _confirmarCerrarSesion(BuildContext context, WidgetRef ref) {
    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        backgroundColor: AppTheme.surface,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(AppTheme.radiusLg),
        ),
        title: const Text(
          'Cerrar sesión',
          style: TextStyle(
            fontSize: 17,
            fontWeight: FontWeight.w700,
            color: AppTheme.textPrimary,
          ),
        ),
        content: const Text(
          '¿Estás seguro de que deseas cerrar sesión?',
          style: TextStyle(fontSize: 14, color: AppTheme.textSecondary),
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(ctx),
            style: TextButton.styleFrom(
              foregroundColor: AppTheme.textSecondary,
            ),
            child: const Text('Cancelar'),
          ),
          TextButton(
            onPressed: () async {
              Navigator.pop(ctx);
              await ref.read(authControllerProvider.notifier).logout();
              if (context.mounted) context.go('/login');
            },
            style: TextButton.styleFrom(foregroundColor: AppTheme.danger),
            child: const Text(
              'Cerrar sesión',
              style: TextStyle(fontWeight: FontWeight.w600),
            ),
          ),
        ],
      ),
    );
  }
}

// ── Encabezado ────────────────────────────────────────────────────────────────
class _ProfileHeader extends StatelessWidget {
  final ProfileUser? user;
  final String fallbackRole;
  const _ProfileHeader({required this.user, required this.fallbackRole});

  @override
  Widget build(BuildContext context) {
    final role = user?.role ?? fallbackRole;
    final isAdmin = role == 'admin';
    final isDriver = role == 'driver';
    final initials = user?.initials ?? 'U';
    final displayName = user?.displayName ?? 'Usuario';
    final email = user?.email ?? '…';

    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: AppTheme.surface,
        borderRadius: BorderRadius.circular(AppTheme.radiusLg),
        border: Border.all(color: AppTheme.border, width: 0.5),
        boxShadow: AppTheme.softShadow,
      ),
      child: Row(
        children: [
          Container(
            width: 56,
            height: 56,
            decoration: BoxDecoration(
              color: AppTheme.primaryLight,
              shape: BoxShape.circle,
              border: Border.all(color: AppTheme.primaryMid, width: 1.5),
            ),
            child: Center(
              child: Text(
                initials,
                style: const TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.w700,
                  color: AppTheme.primaryDark,
                ),
              ),
            ),
          ),
          const SizedBox(width: 14),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  displayName,
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w700,
                    color: AppTheme.textPrimary,
                  ),
                ),
                const SizedBox(height: 2),
                Text(
                  email,
                  style: const TextStyle(
                    fontSize: 13,
                    color: AppTheme.textSecondary,
                  ),
                ),
                const SizedBox(height: 6),
                AppStatusBadge.green(
                  isAdmin
                      ? 'Administrador'
                      : isDriver
                      ? 'Chofer'
                      : 'Ciudadano',
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}