import 'package:flutter/material.dart';
import '../theme/app_theme.dart';
import '../models/models.dart';
import '../widgets/widgets.dart' as w;
import 'splash_screen.dart';

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

  final UserModel _usuario = const UserModel(
    id: 'user-01',
    nombre: 'Carlos',
    apellido: 'Martínez',
    email: 'carlos@ejemplo.com',
    telefono: '+52 461 123 4567',
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppTheme.background,
      appBar: AppBar(title: const Text('Mi perfil')),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          // ── Avatar y datos ─────────────────────────────────────────
          _ProfileHeader(usuario: _usuario),

          const SizedBox(height: 20),

          // ── Mi cuenta ──────────────────────────────────────────────
          w.SectionTitle(title: 'Mi cuenta'),
          w.MenuTile(
            icon: Icons.person_outline,
            title: 'Editar perfil',
            subtitle: '${_usuario.nombre} ${_usuario.apellido}',
            onTap: () {},
          ),
          w.MenuTile(
            icon: Icons.lock_outline,
            title: 'Cambiar contraseña',
            onTap: () {},
          ),
          w.MenuTile(
            icon: Icons.phone_outlined,
            title: 'Teléfono',
            subtitle: _usuario.telefono,
            onTap: () {},
          ),

          const SizedBox(height: 16),

          // ── Configuración ──────────────────────────────────────────
          w.SectionTitle(title: 'Configuración'),
          w.MenuTile(
            icon: Icons.calendar_month_outlined,
            title: 'Horario del camión',
            subtitle: 'Ruta Norte · Celaya',
            onTap: () {},
          ),
          w.MenuTile(
            icon: Icons.language_outlined,
            title: 'Idioma',
            subtitle: 'Español',
            onTap: () {},
          ),
          w.MenuTile(
            icon: Icons.dark_mode_outlined,
            title: 'Tema',
            subtitle: 'Claro',
            onTap: () {},
          ),

          const SizedBox(height: 16),

          // ── Soporte ────────────────────────────────────────────────
          w.SectionTitle(title: 'Soporte'),
          w.MenuTile(
            icon: Icons.help_outline,
            title: 'Ayuda y preguntas frecuentes',
            onTap: () {},
          ),
          w.MenuTile(
            icon: Icons.bug_report_outlined,
            title: 'Reportar un problema',
            onTap: () {},
          ),
          w.MenuTile(
            icon: Icons.info_outline,
            title: 'Acerca de la app',
            subtitle: 'Versión 1.0.0',
            onTap: () {},
          ),

          const SizedBox(height: 16),

          // ── Cerrar sesión ──────────────────────────────────────────
          w.MenuTile(
            icon: Icons.logout_rounded,
            title: 'Cerrar sesión',
            iconColor: AppTheme.danger,
            titleColor: AppTheme.danger,
            trailing: const SizedBox.shrink(),
            onTap: () => _confirmarCerrarSesion(context),
          ),

          const SizedBox(height: 32),

          Center(
            child: Text(
              'RutaVerde v1.0.0\nServicio de Limpia · Celaya, Gto.',
              textAlign: TextAlign.center,
              style: const TextStyle(
                  fontSize: 12,
                  color: AppTheme.textHint,
                  height: 1.6),
            ),
          ),

          const SizedBox(height: 24),
        ],
      ),
    );
  }

  void _confirmarCerrarSesion(BuildContext context) {
    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: () {
              Navigator.pushAndRemoveUntil(
                context,
                MaterialPageRoute(builder: (_) => const SplashScreen()),
                (_) => false,
              );
            },
            style: TextButton.styleFrom(foregroundColor: AppTheme.danger),
            child: const Text('Cerrar sesión',
                style: TextStyle(fontWeight: FontWeight.w600)),
          ),
        ],
      ),
    );
  }
}

// ── Encabezado de perfil ──────────────────────────────────────────────────────
class _ProfileHeader extends StatelessWidget {
  final UserModel usuario;
  const _ProfileHeader({required this.usuario});

  @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: [
          // Avatar con iniciales
          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(
                usuario.iniciales,
                style: const TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.w700,
                    color: AppTheme.primaryDark),
              ),
            ),
          ),
          const SizedBox(width: 14),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  usuario.nombreCompleto,
                  style: const TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w700,
                      color: AppTheme.textPrimary),
                ),
                const SizedBox(height: 2),
                Text(
                  usuario.email,
                  style: const TextStyle(
                      fontSize: 13, color: AppTheme.textSecondary),
                ),
                const SizedBox(height: 6),
                w.StatusBadge.green('Cuenta activa'),
              ],
            ),
          ),
          IconButton(
            icon: const Icon(Icons.edit_outlined,
                color: AppTheme.primary, size: 20),
            onPressed: () {},
          ),
        ],
      ),
    );
  }
}