import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:energy_media/providers/visual_state_provider.dart'; import 'package:energy_media/providers/user_provider.dart'; import 'package:energy_media/pages/videos/premium_dashboard_page.dart'; import 'package:energy_media/pages/videos/gestor_videos_page.dart'; import 'package:energy_media/theme/theme.dart'; import 'package:energy_media/helpers/globals.dart'; import 'package:gap/gap.dart'; import 'package:go_router/go_router.dart'; class VideosLayout extends StatefulWidget { const VideosLayout({Key? key}) : super(key: key); @override State createState() => _VideosLayoutState(); } class _VideosLayoutState extends State { int _selectedMenuIndex = 0; final GlobalKey _scaffoldKey = GlobalKey(); final List _menuItems = [ MenuItem( title: 'Dashboard', icon: Icons.dashboard, index: 0, subtitle: 'Visualiza métricas y estadísticas globales de tus contenidos', ), MenuItem( title: 'Gestor de Videos', icon: Icons.video_library, index: 1, subtitle: 'Administra, edita y organiza tu biblioteca multimedia', ), MenuItem( title: 'Configuración', icon: Icons.settings, index: 2, subtitle: 'Personaliza las preferencias de tu plataforma', ), ]; @override Widget build(BuildContext context) { final isMobile = MediaQuery.of(context).size.width <= 800; return Scaffold( key: _scaffoldKey, backgroundColor: AppTheme.of(context).primaryBackground, drawer: isMobile ? _buildDrawer() : null, body: Row( children: [ if (!isMobile) _buildSideMenu(), Expanded( child: Column( children: [ _buildHeader(isMobile), Expanded(child: _buildContent()), ], ), ), ], ), ); } Widget _buildHeader(bool isMobile) { final isDark = AppTheme.themeMode == ThemeMode.dark; final isLightBackground = !isDark; final currentMenuItem = _menuItems[_selectedMenuIndex]; return Container( padding: EdgeInsets.all(isMobile ? 16 : 24), decoration: BoxDecoration( color: AppTheme.of(context).secondaryBackground, border: Border( bottom: BorderSide( color: AppTheme.of(context).primaryColor.withOpacity(0.1), width: 1, ), ), ), child: Row( children: [ if (isMobile) ...[ IconButton( icon: const Icon(Icons.menu), color: AppTheme.of(context).primaryText, onPressed: () => _scaffoldKey.currentState?.openDrawer(), ), // Logo de EnergyMedia solo en mobile Image.asset( 'assets/images/favicon.png', height: 32, fit: BoxFit.contain, ), const Spacer(), Text( currentMenuItem.title, style: AppTheme.of(context).bodyText1.override( fontFamily: 'Poppins', color: AppTheme.of(context).secondaryText, ), ), ] else ...[ // Desktop: título prominente con subtítulo Row( children: [ Container( padding: const EdgeInsets.all(12), decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [ const Color(0xFF4EC9F5).withOpacity(0.15), const Color(0xFFFFB733).withOpacity(0.15), ], ), borderRadius: BorderRadius.circular(12), border: Border.all( color: AppTheme.of(context).primaryColor.withOpacity(0.2), width: 1.5, ), ), child: Icon( currentMenuItem.icon, color: AppTheme.of(context).primaryColor, size: 26, ), ), const Gap(16), Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ Text( currentMenuItem.title, style: AppTheme.of(context).title2.override( fontFamily: 'Poppins', color: AppTheme.of(context).primaryText, fontWeight: FontWeight.bold, fontSize: 24, letterSpacing: 0.5, ), ), if (currentMenuItem.subtitle != null) ...[ const Gap(4), Text( currentMenuItem.subtitle!, style: AppTheme.of(context).bodyText2.override( fontFamily: 'Poppins', color: AppTheme.of(context).tertiaryText, fontSize: 13, fontWeight: FontWeight.w400, ), ), ], ], ), ], ), ], ], ), ); } Widget _buildSideMenu() { return Container( width: 300, decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [ AppTheme.of(context).secondaryBackground, AppTheme.of(context).primaryBackground, ], ), border: Border( right: BorderSide( color: AppTheme.of(context).primaryColor.withOpacity(0.15), width: 1, ), ), boxShadow: [ BoxShadow( color: Colors.black.withOpacity(0.1), blurRadius: 30, offset: const Offset(5, 0), ), ], ), child: Column( children: [ // Header con gradiente premium y efecto glass Container( width: double.infinity, padding: const EdgeInsets.all(32), decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [ Color(0xFF42BCEE), Color(0xFF5865B5), Color(0xFF653093) ], stops: const [0.0, 0.5, 1.0], ), boxShadow: [ BoxShadow( color: const Color(0xFF4EC9F5).withOpacity(0.4), blurRadius: 30, offset: const Offset(0, 8), spreadRadius: 2, ), ], ), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ // Logo con container elegante Container( padding: const EdgeInsets.all(12), decoration: BoxDecoration( color: Colors.white.withOpacity(0.2), borderRadius: BorderRadius.circular(16), border: Border.all( color: Colors.white.withOpacity(0.3), width: 2, ), boxShadow: [ BoxShadow( color: Colors.black.withOpacity(0.2), blurRadius: 10, offset: const Offset(0, 4), ), ], ), child: Image.asset( 'assets/images/logo_nh_b.png', height: 40, fit: BoxFit.contain, ), ), const Gap(16), // Título con efecto Container( padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6), decoration: BoxDecoration( color: Colors.white.withOpacity(0.25), borderRadius: BorderRadius.circular(8), ), child: Text( 'Content Manager', style: AppTheme.of(context).bodyText1.override( fontFamily: 'Poppins', color: Colors.white, fontWeight: FontWeight.bold, fontSize: 12, letterSpacing: 1.2, ), ), ), ], ), ), const Gap(24), // Sección de usuario (opcional) if (currentUser != null) _buildUserSection(), const Gap(8), // Menu Items con mejor spacing Expanded( child: ListView( padding: const EdgeInsets.symmetric(horizontal: 16), children: _menuItems.map((item) { final isSelected = _selectedMenuIndex == item.index; return Padding( padding: const EdgeInsets.only(bottom: 12), child: _buildPremiumMenuItem( icon: item.icon, title: item.title, isSelected: isSelected, onTap: () { setState(() => _selectedMenuIndex = item.index); }, ), ); }).toList(), ), ), // Theme Toggle mejorado Container( margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), padding: const EdgeInsets.all(6), decoration: BoxDecoration( color: AppTheme.of(context).tertiaryBackground, borderRadius: BorderRadius.circular(16), border: Border.all( color: AppTheme.of(context).primaryColor.withOpacity(0.2), width: 1, ), boxShadow: [ BoxShadow( color: AppTheme.of(context).primaryColor.withOpacity(0.1), blurRadius: 10, offset: const Offset(0, 2), ), ], ), child: Consumer( builder: (context, visualProvider, _) { return _buildThemeToggle(visualProvider); }, ), ), // Botón de Logout premium Container( padding: const EdgeInsets.fromLTRB(16, 8, 16, 24), child: _buildLogoutButton(), ), ], ), ); } Widget _buildUserSection() { return Container( margin: const EdgeInsets.symmetric(horizontal: 16), padding: const EdgeInsets.all(16), decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [ AppTheme.of(context).primaryColor.withOpacity(0.1), AppTheme.of(context).secondaryColor.withOpacity(0.1), ], ), borderRadius: BorderRadius.circular(16), border: Border.all( color: AppTheme.of(context).primaryColor.withOpacity(0.2), width: 1, ), ), child: Row( children: [ // Avatar con gradiente Container( width: 48, height: 48, decoration: BoxDecoration( gradient: const LinearGradient( colors: [ Color(0xFF4EC9F5), Color(0xFFFFB733), ], ), shape: BoxShape.circle, boxShadow: [ BoxShadow( color: const Color(0xFF4EC9F5).withOpacity(0.4), blurRadius: 12, offset: const Offset(0, 4), ), ], ), child: Center( child: Text( (currentUser?.fullName.substring(0, 1) ?? 'U').toUpperCase(), style: const TextStyle( color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold, fontFamily: 'Poppins', ), ), ), ), const Gap(12), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( currentUser?.fullName ?? 'Usuario', style: AppTheme.of(context).bodyText1.override( fontFamily: 'Poppins', color: AppTheme.of(context).primaryText, fontWeight: FontWeight.w600, fontSize: 14, ), maxLines: 1, overflow: TextOverflow.ellipsis, ), const Gap(2), Container( padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2), decoration: BoxDecoration( gradient: const LinearGradient( colors: [ Color(0xFF4EC9F5), Color(0xFFFFB733), ], ), borderRadius: BorderRadius.circular(8), ), child: Text( 'PREMIUM', style: const TextStyle( color: Colors.white, fontSize: 9, fontWeight: FontWeight.bold, fontFamily: 'Poppins', letterSpacing: 0.5, ), ), ), ], ), ), ], ), ); } Widget _buildPremiumMenuItem({ required IconData icon, required String title, required bool isSelected, required VoidCallback onTap, }) { return MouseRegion( cursor: SystemMouseCursors.click, child: AnimatedContainer( duration: const Duration(milliseconds: 300), curve: Curves.easeInOut, decoration: BoxDecoration( gradient: isSelected ? LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [ Color(0xFF42BCEE), Color(0xFF5865B5), Color(0xFF653093), ], stops: const [0.0, 0.5, 1.0], ) : null, color: isSelected ? null : Colors.transparent, borderRadius: BorderRadius.circular(16), boxShadow: isSelected ? [ BoxShadow( color: const Color(0xFF4EC9F5).withOpacity(0.5), blurRadius: 20, offset: const Offset(0, 8), spreadRadius: 0, ), BoxShadow( color: const Color(0xFFFFB733).withOpacity(0.3), blurRadius: 15, offset: const Offset(0, 4), spreadRadius: 0, ), ] : null, ), child: Material( color: Colors.transparent, child: InkWell( onTap: onTap, borderRadius: BorderRadius.circular(16), splashColor: AppTheme.of(context).primaryColor.withOpacity(0.2), highlightColor: AppTheme.of(context).primaryColor.withOpacity(0.1), child: Container( padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 18), child: Row( children: [ // Icono con background circular AnimatedContainer( duration: const Duration(milliseconds: 300), padding: const EdgeInsets.all(10), decoration: BoxDecoration( color: isSelected ? Colors.white.withOpacity(0.25) : AppTheme.of(context).primaryColor.withOpacity(0.15), shape: BoxShape.circle, border: Border.all( color: isSelected ? Colors.white.withOpacity(0.4) : AppTheme.of(context) .primaryColor .withOpacity(0.3), width: 2, ), boxShadow: isSelected ? [ BoxShadow( color: Colors.white.withOpacity(0.3), blurRadius: 8, offset: const Offset(0, 2), ), ] : null, ), child: Icon( icon, color: isSelected ? Colors.white : AppTheme.of(context).primaryColor, size: 22, ), ), const Gap(16), Expanded( child: Text( title, style: AppTheme.of(context).bodyText1.override( fontFamily: 'Poppins', color: isSelected ? Colors.white : AppTheme.of(context).primaryText, fontWeight: isSelected ? FontWeight.bold : FontWeight.w600, fontSize: 15, letterSpacing: isSelected ? 0.5 : 0, ), ), ), // Indicador animado AnimatedContainer( duration: const Duration(milliseconds: 300), width: isSelected ? 8 : 0, height: isSelected ? 8 : 0, decoration: BoxDecoration( color: Colors.white, shape: BoxShape.circle, boxShadow: isSelected ? [ BoxShadow( color: Colors.white.withOpacity(0.6), blurRadius: 8, spreadRadius: 2, ), ] : null, ), ), ], ), ), ), ), ), ); } Widget _buildThemeToggle(VisualStateProvider visualProvider) { final isDark = AppTheme.themeMode == ThemeMode.dark; return Container( padding: const EdgeInsets.all(4), decoration: BoxDecoration( color: AppTheme.of(context).tertiaryBackground, borderRadius: BorderRadius.circular(12), ), child: Row( children: [ Expanded( child: _buildThemeButton( icon: Icons.light_mode, label: 'Claro', isSelected: !isDark, onTap: () { visualProvider.changeThemeMode(ThemeMode.light, context); }, ), ), const Gap(4), Expanded( child: _buildThemeButton( icon: Icons.dark_mode, label: 'Oscuro', isSelected: isDark, onTap: () { visualProvider.changeThemeMode(ThemeMode.dark, context); }, ), ), ], ), ); } Widget _buildThemeButton({ required IconData icon, required String label, required bool isSelected, required VoidCallback onTap, }) { return GestureDetector( onTap: onTap, child: AnimatedContainer( duration: const Duration(milliseconds: 300), padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 4), decoration: BoxDecoration( gradient: isSelected ? LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [ const Color(0xFF4EC9F5), const Color(0xFFFFB733), ], ) : null, borderRadius: BorderRadius.circular(12), boxShadow: isSelected ? [ BoxShadow( color: const Color(0xFF4EC9F5).withOpacity(0.4), blurRadius: 12, offset: const Offset(0, 4), ), ] : null, ), child: Column( mainAxisSize: MainAxisSize.min, children: [ Container( padding: const EdgeInsets.all(8), decoration: BoxDecoration( color: isSelected ? Colors.white.withOpacity(0.2) : Colors.transparent, shape: BoxShape.circle, ), child: Icon( icon, color: isSelected ? Colors.white : AppTheme.of(context).secondaryText, size: 22, ), ), const Gap(6), Text( label, style: TextStyle( color: isSelected ? Colors.white : AppTheme.of(context).secondaryText, fontSize: 11, fontWeight: isSelected ? FontWeight.bold : FontWeight.w500, fontFamily: 'Poppins', letterSpacing: 0.5, ), ), ], ), ), ); } Widget _buildDrawer() { return Drawer( backgroundColor: AppTheme.of(context).secondaryBackground, child: Column( children: [ Container( width: double.infinity, padding: const EdgeInsets.all(24), decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [ const Color(0xFF4EC9F5), const Color(0xFFFFB733), ], ), ), child: SafeArea( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ // Logo de EnergyMedia Image.asset( 'assets/images/logo_nh.png', height: 45, fit: BoxFit.contain, ), const Gap(12), Text( 'Content Manager', style: AppTheme.of(context).bodyText2.override( fontFamily: 'Poppins', color: const Color(0xFF0B0B0D).withOpacity(0.8), ), ), ], ), ), ), Expanded( child: ListView( padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 12), children: _menuItems.map((item) { final isSelected = _selectedMenuIndex == item.index; return Padding( padding: const EdgeInsets.only(bottom: 8), child: _buildPremiumMenuItem( icon: item.icon, title: item.title, isSelected: isSelected, onTap: () { setState(() => _selectedMenuIndex = item.index); Navigator.pop(context); }, ), ); }).toList(), ), ), Container( padding: const EdgeInsets.all(16), decoration: BoxDecoration( border: Border( top: BorderSide( color: AppTheme.of(context).primaryColor.withOpacity(0.1), width: 1, ), ), ), child: Consumer( builder: (context, visualProvider, _) { return _buildThemeToggle(visualProvider); }, ), ), // Botón de Logout en drawer Container( padding: const EdgeInsets.fromLTRB(16, 8, 16, 16), child: _buildLogoutButton(), ), ], ), ); } Widget _buildContent() { switch (_selectedMenuIndex) { case 0: return const PremiumDashboardPage(); case 1: return const GestorVideosPage(); case 2: return _buildWorkInProgress(); default: return const PremiumDashboardPage(); } } Widget _buildWorkInProgress() { return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon( Icons.construction, size: 64, color: AppTheme.of(context).tertiaryText, ), const Gap(16), Text( 'Trabajo en Progreso', style: AppTheme.of(context).title2.override( fontFamily: 'Poppins', color: AppTheme.of(context).primaryText, fontWeight: FontWeight.bold, ), ), const Gap(8), Text( 'Esta sección estará disponible próximamente', style: AppTheme.of(context).bodyText1.override( fontFamily: 'Poppins', color: AppTheme.of(context).tertiaryText, ), ), ], ), ); } Widget _buildLogoutButton() { return MouseRegion( cursor: SystemMouseCursors.click, child: Material( color: Colors.transparent, child: InkWell( onTap: () async { final userState = Provider.of(context, listen: false); // Mostrar diálogo de confirmación final confirm = await showDialog( context: context, builder: (context) => AlertDialog( backgroundColor: AppTheme.of(context).secondaryBackground, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(24), ), title: Row( children: [ Container( padding: const EdgeInsets.all(12), decoration: BoxDecoration( gradient: const LinearGradient( colors: [ Color(0xFFFF2D2D), Color(0xFFFF7A3D), ], ), borderRadius: BorderRadius.circular(12), ), child: const Icon( Icons.logout_rounded, color: Colors.white, size: 24, ), ), const Gap(16), Expanded( child: Text( '¿Cerrar Sesión?', style: AppTheme.of(context).title3.override( fontFamily: 'Poppins', color: AppTheme.of(context).primaryText, fontWeight: FontWeight.bold, fontSize: 20, ), ), ), ], ), content: Padding( padding: const EdgeInsets.only(top: 8), child: Text( '¿Estás seguro de que deseas cerrar sesión?', style: AppTheme.of(context).bodyText1.override( fontFamily: 'Poppins', color: AppTheme.of(context).secondaryText, ), ), ), actions: [ TextButton( onPressed: () => Navigator.of(context).pop(false), style: TextButton.styleFrom( padding: const EdgeInsets.symmetric( horizontal: 24, vertical: 12, ), ), child: Text( 'Cancelar', style: TextStyle( color: AppTheme.of(context).secondaryText, fontFamily: 'Poppins', fontWeight: FontWeight.w600, ), ), ), Container( decoration: BoxDecoration( gradient: const LinearGradient( colors: [ Color(0xFFFF2D2D), Color(0xFFFF7A3D), ], ), borderRadius: BorderRadius.circular(12), boxShadow: [ BoxShadow( color: const Color(0xFFFF2D2D).withOpacity(0.4), blurRadius: 12, offset: const Offset(0, 4), ), ], ), child: TextButton( onPressed: () => Navigator.of(context).pop(true), style: TextButton.styleFrom( padding: const EdgeInsets.symmetric( horizontal: 24, vertical: 12, ), ), child: const Row( mainAxisSize: MainAxisSize.min, children: [ Icon( Icons.logout_rounded, color: Colors.white, size: 18, ), Gap(8), Text( 'Cerrar Sesión', style: TextStyle( color: Colors.white, fontFamily: 'Poppins', fontWeight: FontWeight.bold, ), ), ], ), ), ), ], ), ); if (confirm == true) { // Cerrar sesión await supabase.auth.signOut(); userState.logout(); // Navegar al login if (mounted) { context.go('/login'); } } }, borderRadius: BorderRadius.circular(16), child: Container( padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 18), decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [ AppTheme.of(context).error.withOpacity(0.15), AppTheme.of(context).error.withOpacity(0.1), ], ), borderRadius: BorderRadius.circular(16), border: Border.all( color: AppTheme.of(context).error.withOpacity(0.3), width: 2, ), boxShadow: [ BoxShadow( color: AppTheme.of(context).error.withOpacity(0.2), blurRadius: 10, offset: const Offset(0, 4), ), ], ), child: Row( children: [ Container( padding: const EdgeInsets.all(10), decoration: BoxDecoration( color: AppTheme.of(context).error.withOpacity(0.2), shape: BoxShape.circle, border: Border.all( color: AppTheme.of(context).error.withOpacity(0.4), width: 2, ), ), child: Icon( Icons.logout_rounded, color: AppTheme.of(context).error, size: 20, ), ), const Gap(16), Expanded( child: Text( 'Cerrar Sesión', style: AppTheme.of(context).bodyText1.override( fontFamily: 'Poppins', color: AppTheme.of(context).error, fontWeight: FontWeight.bold, fontSize: 15, ), ), ), Icon( Icons.arrow_forward_ios_rounded, color: AppTheme.of(context).error, size: 16, ), ], ), ), ), ), ); } } class MenuItem { final String title; final IconData icon; final int index; final String? subtitle; MenuItem({ required this.title, required this.icon, required this.index, this.subtitle, }); }