import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:prosappco/blocs/authentication_bloc/authentication_bloc.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 40),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                width: 88,
                height: 88,
                decoration: BoxDecoration(
                  color: const Color(0xFFE3F2FD),
                  shape: BoxShape.circle,
                ),
                child: const Icon(Icons.hourglass_top_rounded, color: Color(0xFF42A4EF), size: 48),
              ),
              const SizedBox(height: 24),
              const Text(
                'Solicitud en revisión',
                style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: Color(0xFF1A1A2E)),
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 12),
              const Text(
                'Recibimos tu información y la estamos revisando. Te notificaremos en cuanto tu perfil profesional sea aprobado.',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 14, color: Colors.grey, height: 1.5),
              ),
              const SizedBox(height: 32),
              _StepCard(
                step: '1',
                icon: Icons.upload_file_outlined,
                title: 'Información enviada',
                subtitle: 'Recibimos tu solicitud y documentos',
                done: true,
              ),
              const SizedBox(height: 12),
              _StepCard(
                step: '2',
                icon: Icons.manage_search_outlined,
                title: 'En revisión',
                subtitle: 'Nuestro equipo está verificando tus datos',
                active: true,
              ),
              const SizedBox(height: 12),
              _StepCard(
                step: '3',
                icon: Icons.verified_outlined,
                title: 'Aprobación',
                subtitle: 'Recibirás una notificación cuando esté listo',
              ),
              const SizedBox(height: 36),
              Container(
                width: double.infinity,
                padding: const EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: const Color(0xFFF5F8FF),
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(color: const Color(0xFFBBDEFB)),
                ),
                child: Row(
                  children: const [
                    Icon(Icons.notifications_active_outlined, color: Color(0xFF42A4EF)),
                    SizedBox(width: 12),
                    Expanded(
                      child: Text(
                        'Asegúrate de tener las notificaciones activas para recibir el aviso de aprobación.',
                        style: TextStyle(fontSize: 13, color: Color(0xFF1565C0)),
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 32),
              SizedBox(
                width: double.infinity,
                child: OutlinedButton.icon(
                  onPressed: () => context.read<AuthenticationBloc>().add(AuthenticationLogoutRequested()),
                  icon: const Icon(Icons.logout),
                  label: const Text('Cerrar sesión'),
                  style: OutlinedButton.styleFrom(
                    foregroundColor: Colors.grey,
                    padding: const EdgeInsets.symmetric(vertical: 14),
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
                    side: const BorderSide(color: Colors.grey),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _StepCard extends StatelessWidget {
  final String step;
  final IconData icon;
  final String title;
  final String subtitle;
  final bool done;
  final bool active;

  const _StepCard({
    required this.step,
    required this.icon,
    required this.title,
    required this.subtitle,
    this.done = false,
    this.active = false,
  });

  @override
  Widget build(BuildContext context) {
    final Color bg = done
        ? const Color(0xFFE8F5E9)
        : active
            ? const Color(0xFFE3F2FD)
            : const Color(0xFFF5F5F5);
    final Color iconColor = done
        ? const Color(0xFF43A047)
        : active
            ? const Color(0xFF42A4EF)
            : Colors.grey;
    final Color borderColor = done
        ? const Color(0xFFA5D6A7)
        : active
            ? const Color(0xFF90CAF9)
            : const Color(0xFFE0E0E0);

    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
      decoration: BoxDecoration(
        color: bg,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: borderColor),
      ),
      child: Row(
        children: [
          Container(
            width: 40,
            height: 40,
            decoration: BoxDecoration(
              color: done ? const Color(0xFF43A047) : active ? const Color(0xFF42A4EF) : Colors.grey.shade300,
              shape: BoxShape.circle,
            ),
            child: done
                ? const Icon(Icons.check, color: Colors.white, size: 20)
                : Icon(icon, color: active ? Colors.white : Colors.grey, size: 20),
          ),
          const SizedBox(width: 14),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(title, style: TextStyle(fontWeight: FontWeight.w600, color: iconColor)),
                Text(subtitle, style: const TextStyle(fontSize: 12, color: Colors.grey)),
              ],
            ),
          ),
        ],
      ),
    );
  }
}