import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../../../shared/design_system/unionflow_design_v2.dart';
import '../../../../../shared/design_system/tokens/app_colors.dart';
import '../../../../authentication/presentation/bloc/auth_bloc.dart';

/// Dashboard affiché pour un compte authentifié sans rôle métier actif.
/// Cas typique : nouveau membre créé par un administrateur, en attente d'activation.
class VisitorDashboard extends StatelessWidget {
  const VisitorDashboard({super.key});

  @override
  Widget build(BuildContext context) {
    final authState = context.watch<AuthBloc>().state;
    final email     = authState is AuthAuthenticated ? authState.user.email : '';
    final firstName = authState is AuthAuthenticated ? authState.user.firstName : '';

    final isDark       = Theme.of(context).brightness == Brightness.dark;
    final bgCard       = isDark ? AppColors.surfaceDark      : AppColors.surface;
    final borderColor  = isDark ? AppColors.borderDark       : AppColors.border;
    final textPrimary  = isDark ? AppColors.textPrimaryDark  : AppColors.textPrimary;
    final textSecondary= isDark ? AppColors.textSecondaryDark: AppColors.textSecondary;

    return Scaffold(
      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
      appBar: _buildAppBar(context),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const SizedBox(height: 24),

            // Icône centrale
            Container(
              width: 80,
              height: 80,
              decoration: BoxDecoration(
                color: UnionFlowColors.gold.withOpacity(0.12),
                shape: BoxShape.circle,
              ),
              child: const Icon(Icons.hourglass_empty_rounded, size: 40, color: UnionFlowColors.gold),
            ),
            const SizedBox(height: 20),

            // Titre
            Text(
              firstName.isNotEmpty ? 'Bonjour $firstName,' : 'Bienvenue,',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.w800, color: textPrimary),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 8),
            Text(
              'Votre compte est en attente d\'activation',
              style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: textPrimary),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 12),

            // Email
            if (email.isNotEmpty)
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
                decoration: BoxDecoration(
                  color: bgCard,
                  borderRadius: BorderRadius.circular(8),
                  border: Border.all(color: borderColor),
                ),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Icon(Icons.email_outlined, size: 14, color: textSecondary),
                    const SizedBox(width: 6),
                    Text(email, style: TextStyle(fontSize: 13, color: textSecondary)),
                  ],
                ),
              ),
            const SizedBox(height: 28),

            // Message explicatif
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: bgCard,
                borderRadius: BorderRadius.circular(12),
                border: Border(left: BorderSide(color: UnionFlowColors.gold, width: 3)),
                boxShadow: isDark ? null : UnionFlowColors.softShadow,
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Que se passe-t-il ?',
                    style: TextStyle(fontSize: 13, fontWeight: FontWeight.w700, color: textPrimary),
                  ),
                  const SizedBox(height: 8),
                  _buildStep(
                    '1',
                    'Votre compte a été créé par l\'administrateur de votre organisation.',
                    UnionFlowColors.unionGreen,
                    textSecondary,
                  ),
                  const SizedBox(height: 8),
                  _buildStep(
                    '2',
                    'Il doit être activé par un administrateur avant que vous puissiez accéder à la plateforme.',
                    UnionFlowColors.gold,
                    textSecondary,
                  ),
                  const SizedBox(height: 8),
                  _buildStep(
                    '3',
                    'Une fois activé, reconnectez-vous pour accéder à votre espace.',
                    UnionFlowColors.indigo,
                    textSecondary,
                  ),
                ],
              ),
            ),
            const SizedBox(height: 20),

            // Bouton actualiser
            SizedBox(
              width: double.infinity,
              child: ElevatedButton.icon(
                onPressed: () => context.read<AuthBloc>().add(const AuthStatusChecked()),
                icon: const Icon(Icons.refresh_rounded, size: 18),
                label: const Text(
                  'Vérifier l\'état de mon compte',
                  style: TextStyle(fontSize: 14, fontWeight: FontWeight.w700),
                ),
                style: ElevatedButton.styleFrom(
                  backgroundColor: UnionFlowColors.unionGreen,
                  foregroundColor: Colors.white,
                  padding: const EdgeInsets.symmetric(vertical: 14),
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                  elevation: 0,
                ),
              ),
            ),
            const SizedBox(height: 12),

            // Bouton déconnexion
            SizedBox(
              width: double.infinity,
              child: OutlinedButton.icon(
                onPressed: () => context.read<AuthBloc>().add(const AuthLogoutRequested()),
                icon: Icon(Icons.logout_rounded, size: 18, color: textSecondary),
                label: Text(
                  'Se déconnecter',
                  style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: textSecondary),
                ),
                style: OutlinedButton.styleFrom(
                  foregroundColor: textSecondary,
                  side: BorderSide(color: borderColor),
                  padding: const EdgeInsets.symmetric(vertical: 14),
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                ),
              ),
            ),
            const SizedBox(height: 32),
          ],
        ),
      ),
    );
  }

  PreferredSizeWidget _buildAppBar(BuildContext context) {
    return AppBar(
      backgroundColor: Theme.of(context).colorScheme.surface,
      elevation: 0,
      scrolledUnderElevation: 1,
      shadowColor: Theme.of(context).colorScheme.outline.withOpacity(0.2),
      automaticallyImplyLeading: false,
      title: Row(
        children: [
          Container(
            width: 32,
            height: 32,
            decoration: BoxDecoration(
              gradient: UnionFlowColors.primaryGradient,
              borderRadius: BorderRadius.circular(8),
            ),
            alignment: Alignment.center,
            child: const Text('U',
                style: TextStyle(color: Colors.white, fontWeight: FontWeight.w900, fontSize: 18)),
          ),
          const SizedBox(width: 12),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('UnionFlow',
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w700,
                    color: Theme.of(context).colorScheme.onSurface,
                  )),
              Text('Compte en attente',
                  style: TextStyle(
                    fontSize: 11,
                    fontWeight: FontWeight.w400,
                    color: Theme.of(context).colorScheme.onSurfaceVariant,
                  )),
            ],
          ),
        ],
      ),
      iconTheme: IconThemeData(color: Theme.of(context).colorScheme.onSurface),
    );
  }

  Widget _buildStep(String number, String text, Color badgeColor, Color textColor) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: 22,
          height: 22,
          decoration: BoxDecoration(color: badgeColor, shape: BoxShape.circle),
          alignment: Alignment.center,
          child: Text(number,
              style: const TextStyle(fontSize: 11, fontWeight: FontWeight.w800, color: Colors.white)),
        ),
        const SizedBox(width: 10),
        Expanded(
          child: Text(text, style: TextStyle(fontSize: 12, height: 1.5, color: textColor)),
        ),
      ],
    );
  }
}
