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 '../../core/storage/secure_storage.dart';
import '../../core/constants/auth_constants.dart';

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final authState = ref.watch(authControllerProvider).asData?.value;
    final storage = ref.read(secureStorageProvider);

    return Scaffold(
      backgroundColor: AppTheme.background,
      appBar: AppBar(title: const Text('Mi perfil')),
      body: FutureBuilder<_ProfileData>(
        future: _loadProfile(storage),
        builder: (context, snapshot) {
          final profile =
              snapshot.data ??
              _ProfileData(
                email: authState?.token != null ? '…' : '',
                role: authState?.userRole ?? 'citizen',
              );

          return ListView(
            padding: const EdgeInsets.all(16),
            children: [
              _ProfileHeader(profile: profile),
              const SizedBox(height: 20),

              const AppSectionTitle(title: 'Mi cuenta'),
              AppMenuTile(
                icon: Icons.person_outline,
                title: 'Editar perfil',
                subtitle: profile.email,
                onTap: () => context.go('/edit-profile'),
              ),
              AppMenuTile(
                icon: Icons.lock_outline,
                title: 'Cambiar contraseña',
                onTap: () {},
              ),
              AppMenuTile(
                icon: Icons.email_outlined,
                title: 'Correo',
                subtitle: profile.email,
                onTap: () {},
              ),

              const SizedBox(height: 16),
              const AppSectionTitle(title: 'Configuración'),
              AppMenuTile(
                icon: Icons.calendar_month_outlined,
                title: 'Horario del camión',
                subtitle: 'Mi ruta asignada',
                onTap: () {},
              ),
              AppMenuTile(
                icon: Icons.notifications_outlined,
                title: 'Notificaciones',
                subtitle: 'Gestiona tus alertas',
                onTap: () {},
              ),
              if (profile.role == '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.help_outline,
                title: 'Ayuda y preguntas frecuentes',
                onTap: () {},
              ),
              AppMenuTile(
                icon: Icons.bug_report_outlined,
                title: 'Reportar un problema',
                onTap: () {},
              ),
              AppMenuTile(
                icon: Icons.info_outline,
                title: 'Acerca de la app',
                subtitle: 'Versión 1.0.0',
                onTap: () {},
              ),

              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),
            ],
          );
        },
      ),
    );
  }

  Future<_ProfileData> _loadProfile(dynamic storage) async {
    final role =
        await storage.read(key: authUserRoleStorageKey) as String? ?? 'citizen';
    return _ProfileData(role: role);
  }

  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),
            ),
          ),
        ],
      ),
    );
  }
}

// ── Datos de perfil ───────────────────────────────────────────────────────────
class _ProfileData {
  final String email;
  final String role;

  const _ProfileData({this.email = '', this.role = 'citizen'});

  String get iniciales => email.isNotEmpty ? email[0].toUpperCase() : 'U';

  String get displayName => email;
  bool get isAdmin => role == 'admin';
}

// ── Encabezado ────────────────────────────────────────────────────────────────
class _ProfileHeader extends StatelessWidget {
  final _ProfileData profile;
  const _ProfileHeader({required this.profile});

  @override
  Widget build(BuildContext context) {
    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(
                profile.iniciales,
                style: const TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.w700,
                  color: AppTheme.primaryDark,
                ),
              ),
            ),
          ),
          const SizedBox(width: 14),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  profile.displayName,
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w700,
                    color: AppTheme.textPrimary,
                  ),
                ),
                const SizedBox(height: 2),
                Text(
                  profile.email,
                  style: const TextStyle(
                    fontSize: 13,
                    color: AppTheme.textSecondary,
                  ),
                ),
                const SizedBox(height: 6),
                AppStatusBadge.green(
                  profile.isAdmin ? 'Administrador' : 'Ciudadano',
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}