import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import '../../../../core/theme/app_theme.dart';
import '../bloc/auth_bloc.dart';
import '../bloc/auth_event.dart';
import '../bloc/auth_state.dart';

/// Pantalla principal post-login — MVP WasteNotify.
///
/// Cascarón de la pantalla de inicio. En fases futuras contendrá:
/// - ETA de llegada del camión (sin mapa, solo tiempo estimado)
/// - Notificaciones programadas
/// - Historial de recolecciones
/// - Panel de operador (si role == 'operator')
///
/// RESTRICCIÓN DE PRIVACIDAD: Esta pantalla NO mostrará mapas de rutas
/// ni la posición GPS del vehículo. Solo tiempo estimado de llegada.
class HomeScreenPlaceholder extends StatelessWidget {
  const HomeScreenPlaceholder({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<AuthBloc, AuthState>(
      builder: (context, state) {
        final user = state is AuthAuthenticated ? state.user : null;
        final isOperator = user?.role == 'operator';

        return Scaffold(
          backgroundColor: AppTheme.warmWhite,
          appBar: AppBar(
            title: Row(
              children: [
                const Icon(Icons.recycling_rounded,
                    color: AppTheme.leafGreen, size: 22),
                const SizedBox(width: 8),
                RichText(
                  text: const TextSpan(
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.w700,
                      color: AppTheme.charcoal,
                    ),
                    children: [
                      TextSpan(text: 'Waste'),
                      TextSpan(
                        text: 'Notify',
                        style: TextStyle(color: AppTheme.leafGreen),
                      ),
                    ],
                  ),
                ),
              ],
            ),
            actions: [
              IconButton(
                icon: const Icon(Icons.logout_rounded),
                tooltip: 'Cerrar sesión',
                onPressed: () {
                  context.read<AuthBloc>().add(const AuthLogoutRequested());
                },
              ),
            ],
          ),
          body: CustomScrollView(
            slivers: [
              SliverPadding(
                padding: const EdgeInsets.all(20),
                sliver: SliverList(
                  delegate: SliverChildListDelegate([
                    // --- Bienvenida ---
                    _WelcomeCard(user: user),
                    const SizedBox(height: 20),

                    // --- ETA Principal (cascarón) ---
                    const _EtaCard(),
                    const SizedBox(height: 20),

                    // --- Mensaje preventivo ---
                    const _PreventiveMessageCard(),
                    const SizedBox(height: 20),

                    // --- Próximas funcionalidades ---
                    _UpcomingFeatures(isOperator: isOperator),
                    const SizedBox(height: 20),

                    // --- Info de sesión (debug MVP) ---
                    if (user != null) _SessionDebugCard(user: user),
                  ]),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

// ---------------------------------------------------------------------------
// Sub-widgets de la pantalla home
// ---------------------------------------------------------------------------

class _WelcomeCard extends StatelessWidget {
  final dynamic user;

  const _WelcomeCard({required this.user});

  @override
  Widget build(BuildContext context) {
    final roleLabel = user?.role == 'operator' ? 'Operador' : 'Ciudadano';
    final identifier = user?.email ?? '';

    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          colors: [AppTheme.leafGreen, AppTheme.forestGreen],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: AppTheme.leafGreen.withOpacity(0.3),
            blurRadius: 16,
            offset: const Offset(0, 6),
          ),
        ],
      ),
      child: Row(
        children: [
          Container(
            width: 52,
            height: 52,
            decoration: BoxDecoration(
              color: Colors.white.withOpacity(0.2),
              borderRadius: BorderRadius.circular(13),
            ),
            child: const Icon(
              Icons.person_rounded,
              color: Colors.white,
              size: 30,
            ),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '¡Bienvenido!',
                  style: const TextStyle(
                    color: Colors.white70,
                    fontSize: 13,
                  ),
                ),
                Text(
                  identifier,
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 15,
                    fontWeight: FontWeight.w700,
                  ),
                  overflow: TextOverflow.ellipsis,
                ),
                const SizedBox(height: 4),
                Container(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 10, vertical: 3),
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.2),
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Text(
                    roleLabel,
                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 11,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class _EtaCard extends StatelessWidget {
  const _EtaCard();

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    color: AppTheme.lightMint,
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: const Icon(
                    Icons.schedule_rounded,
                    color: AppTheme.leafGreen,
                    size: 22,
                  ),
                ),
                const SizedBox(width: 12),
                const Expanded(
                  child: Text(
                    'Tiempo estimado de llegada',
                    style: TextStyle(
                      fontSize: 15,
                      fontWeight: FontWeight.w700,
                      color: AppTheme.charcoal,
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 20),
            Center(
              child: Column(
                children: [
                  Container(
                    width: 110,
                    height: 110,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(
                        color: AppTheme.lightMint,
                        width: 6,
                      ),
                      color: Colors.white,
                    ),
                    child: const Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(
                          Icons.hourglass_empty_rounded,
                          color: AppTheme.midGray,
                          size: 28,
                        ),
                        SizedBox(height: 4),
                        Text(
                          '— min',
                          style: TextStyle(
                            fontSize: 22,
                            fontWeight: FontWeight.w800,
                            color: AppTheme.midGray,
                          ),
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(height: 14),
                  Text(
                    'Notificaciones activas próximamente',
                    style: TextStyle(
                      fontSize: 13,
                      color: AppTheme.midGray,
                    ),
                    textAlign: TextAlign.center,
                  ),
                  const SizedBox(height: 4),
                  Container(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 12, vertical: 5),
                    decoration: BoxDecoration(
                      color: AppTheme.lightMint,
                      borderRadius: BorderRadius.circular(20),
                    ),
                    child: const Text(
                      'Fase 2 — En desarrollo',
                      style: TextStyle(
                        fontSize: 11,
                        color: AppTheme.leafGreen,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _PreventiveMessageCard extends StatelessWidget {
  const _PreventiveMessageCard();

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: AppTheme.alertAmber.withOpacity(0.08),
        borderRadius: BorderRadius.circular(14),
        border: Border.all(
          color: AppTheme.alertAmber.withOpacity(0.3),
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Row(
            children: [
              Icon(Icons.campaign_outlined,
                  color: AppTheme.alertAmber, size: 18),
              SizedBox(width: 8),
              Text(
                'Recuerda siempre',
                style: TextStyle(
                  fontWeight: FontWeight.w700,
                  fontSize: 13,
                  color: AppTheme.earthBrown,
                ),
              ),
            ],
          ),
          const SizedBox(height: 10),
          _ReminderItem(
            '🚮',
            'Saca la basura SOLO cuando recibas la alerta de "próxima llegada".',
          ),
          _ReminderItem(
            '🚫',
            'Nunca persigas ni te acerques al camión. El sistema te avisará a tiempo.',
          ),
          _ReminderItem(
            '🌱',
            'Separar tus residuos hace más eficiente la recolección. ¡Gracias!',
          ),
        ],
      ),
    );
  }
}

class _ReminderItem extends StatelessWidget {
  final String emoji;
  final String text;

  const _ReminderItem(this.emoji, this.text);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 6),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(emoji, style: const TextStyle(fontSize: 14)),
          const SizedBox(width: 8),
          Expanded(
            child: Text(
              text,
              style: const TextStyle(
                fontSize: 12.5,
                color: AppTheme.earthBrown,
                height: 1.4,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class _UpcomingFeatures extends StatelessWidget {
  final bool isOperator;

  const _UpcomingFeatures({required this.isOperator});

  @override
  Widget build(BuildContext context) {
    final features = [
      (Icons.notifications_active_outlined, 'Alertas push de recolección',
          'Fase 2'),
      (Icons.history_rounded, 'Historial de notificaciones', 'Fase 2'),
      (Icons.settings_outlined, 'Configurar zona y horario', 'Fase 3'),
      if (isOperator) ...[
        (Icons.bar_chart_rounded, 'Panel de rutas completadas', 'Fase 3'),
        (Icons.group_outlined, 'Gestión de sectores', 'Fase 4'),
      ],
    ];

    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              'Próximamente en WasteNotify',
              style: TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w700,
                color: AppTheme.charcoal,
              ),
            ),
            const SizedBox(height: 12),
            ...features.map((f) => _FeatureRow(
                  icon: f.$1,
                  label: f.$2,
                  phase: f.$3,
                )),
          ],
        ),
      ),
    );
  }
}

class _FeatureRow extends StatelessWidget {
  final IconData icon;
  final String label;
  final String phase;

  const _FeatureRow({
    required this.icon,
    required this.label,
    required this.phase,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 10),
      child: Row(
        children: [
          Icon(icon, size: 18, color: AppTheme.mintGreen),
          const SizedBox(width: 12),
          Expanded(
            child: Text(
              label,
              style: const TextStyle(fontSize: 13, color: AppTheme.charcoal),
            ),
          ),
          Container(
            padding:
                const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
            decoration: BoxDecoration(
              color: AppTheme.lightGray,
              borderRadius: BorderRadius.circular(20),
            ),
            child: Text(
              phase,
              style: const TextStyle(
                fontSize: 10,
                color: AppTheme.midGray,
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class _SessionDebugCard extends StatelessWidget {
  final dynamic user;

  const _SessionDebugCard({required this.user});

  @override
  Widget build(BuildContext context) {
    final token = user?.token ?? '';
    final tokenPreview =
        token.length > 40 ? '${token.substring(0, 40)}…' : token;

    return Container(
      padding: const EdgeInsets.all(14),
      decoration: BoxDecoration(
        color: const Color(0xFFF3E5F5),
        borderRadius: BorderRadius.circular(10),
        border: Border.all(color: const Color(0xFFCE93D8), width: 1),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Row(
            children: [
              Icon(Icons.developer_mode_rounded,
                  size: 14, color: Color(0xFF7B1FA2)),
              SizedBox(width: 6),
              Text(
                'Debug — Sesión JWT (solo MVP)',
                style: TextStyle(
                  fontSize: 11,
                  fontWeight: FontWeight.w700,
                  color: Color(0xFF7B1FA2),
                ),
              ),
            ],
          ),
          const SizedBox(height: 6),
          Text(
            'Token: $tokenPreview',
            style: const TextStyle(
              fontSize: 10.5,
              fontFamily: 'monospace',
              color: Color(0xFF4A148C),
            ),
          ),
          Text(
            'Role: ${user?.role} | Expira: ${user?.expiresAt?.toLocal().toString().substring(0, 16)}',
            style: const TextStyle(
              fontSize: 10.5,
              fontFamily: 'monospace',
              color: Color(0xFF4A148C),
            ),
          ),
        ],
      ),
    );
  }
}