afterwork/lib/presentation/widgets/story_section.dart

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

import '../../core/constants/colors.dart';
import '../../core/utils/calculate_time_ago.dart';
import 'create_story.dart';
import 'story_detail.dart';

/// La classe StorySection représente la section des stories dans l'interface.
/// Elle affiche une liste horizontale de stories et permet à l'utilisateur d'ajouter une nouvelle story.
/// Les logs sont utilisés pour tracer chaque action réalisée dans l'interface.
class StorySection extends StatelessWidget {  // Logger pour tracer les événements et actions

  StorySection({required this.size, super.key});
  final Size size;
  final Logger logger = Logger();

  @override
  Widget build(BuildContext context) {
    logger.i('Construction de la section des stories');

    return Container(
      padding: const EdgeInsets.symmetric(vertical: 8),
      child: SizedBox(
        height: size.height / 4.5, // Hauteur ajustée pour éviter le débordement
        child: ListView.separated(
          scrollDirection: Axis.horizontal,
          itemCount: 6, // Nombre de stories à afficher
          separatorBuilder: (context, index) => const SizedBox(width: 8),
          itemBuilder: (context, index) {
            if (index == 0) return _buildAddStoryCard(context);

            final DateTime publicationDate = DateTime.now().subtract(Duration(hours: (index - 1) * 6));
            logger.i('Affichage de la story $index avec la date $publicationDate');

            return GestureDetector(
              onTap: () {
                logger.i('Clic sur la story $index, affichage du détail');
                Navigator.push(
                  context,
                  PageRouteBuilder(
                    pageBuilder: (context, animation, secondaryAnimation) => FadeTransition(
                      opacity: animation,
                      child: StoryDetail(
                        username: 'Utilisateur ${index - 1}',
                        publicationDate: publicationDate,
                        mediaUrl: 'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4',
                        userImage: 'lib/assets/images/user_placeholder.png',
                        isVideo: true,
                      ),
                    ),
                  ),
                );
              },
              child: _buildStoryCard(index, publicationDate),
            );
          },
        ),
      ),
    );
  }

  /// Construit une carte de story à partir de l'index et de la date de publication.
  Widget _buildStoryCard(int index, DateTime publicationDate) {
    return Column(  // Utilisation de Column sans Expanded pour éviter les erreurs
      children: [
        Container(
          width: size.width / 4.5,
          height: size.height / 5.5,  // Hauteur ajustée pour éviter le dépassement
          decoration: BoxDecoration(
            color: AppColors.cardColor, // Utilisation des couleurs automatiques pour le fond des cartes
            borderRadius: BorderRadius.circular(20), // Bords arrondis à 20 pixels
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.1),
                blurRadius: 6,
                offset: const Offset(0, 3),
              ),
            ],
          ),
          child: Stack(
            alignment: Alignment.center,
            children: [
              Positioned.fill(child: _buildGradientOverlay()),
              Positioned(top: 6, right: 6, child: _buildAvatar(index)),
              Positioned(bottom: 10, left: 10, child: _buildUsername(index)),
            ],
          ),
        ),
        const SizedBox(height: 4), // Espace entre la carte et la date
        _buildPublicationDate(publicationDate),
      ],
    );
  }

  /// Construit un overlay en dégradé pour la story.
  Widget _buildGradientOverlay() {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.black.withOpacity(0.4), Colors.transparent],
          begin: Alignment.bottomCenter,
          end: Alignment.topCenter,
        ),
        borderRadius: BorderRadius.circular(20), // Assure que l'overlay suit les bords arrondis
      ),
    );
  }

  /// Construit l'avatar de l'utilisateur pour la story.
  Widget _buildAvatar(int index) {
    return Hero(
      tag: 'avatar-$index',
      child: CircleAvatar(
        radius: 16,
        backgroundColor: Colors.grey.withOpacity(0.2),
        child: const CircleAvatar(
          radius: 14,
          backgroundImage: AssetImage('lib/assets/images/user_placeholder.png'),
        ),
      ),
    );
  }

  /// Construit le nom d'utilisateur affiché sous la story.
  Widget _buildUsername(int index) {
    return Text(
      'Utilisateur ${index - 1}',
      style: TextStyle(
        fontFamily: 'Montserrat',
        color: AppColors.textPrimary, // Texte principal avec couleur dynamique
        fontSize: 12,
        fontWeight: FontWeight.bold,
      ),
    );
  }

  /// Affiche la date de publication sous forme relative ("il y a X heures").
  Widget _buildPublicationDate(DateTime publicationDate) {
    return Text(
      'Il y a ${calculateTimeAgo(publicationDate)}',
      style: TextStyle(
        color: AppColors.textSecondary, // Texte secondaire avec couleur dynamique
        fontSize: 11,
      ),
    );
  }

  /// Construit une carte spéciale pour ajouter une nouvelle story.
  Widget _buildAddStoryCard(BuildContext context) {
    return GestureDetector(
      onTap: () {
        logger.i('Clic sur l\'ajout d\'une nouvelle story');
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => const CreateStoryPage()),
        );
      },
      child: Column(
        children: [
          Container(
            width: size.width / 4.5,
            height: size.height / 5.5,  // Hauteur ajustée pour éviter le dépassement
            decoration: BoxDecoration(
              color: AppColors.cardColor, // Utilisation des couleurs automatiques pour le fond des cartes
              borderRadius: BorderRadius.circular(20), // Bords arrondis à 20 pixels
              border: Border.all(color: AppColors.accentColor.withOpacity(0.3), width: 2),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.1),
                  blurRadius: 6,
                  offset: const Offset(0, 3),
                ),
              ],
            ),
            child: Center(
              child: Icon(
                Icons.add_circle_outline,
                color: AppColors.accentColor, // Utilisation des couleurs automatiques pour les icônes
                size: 40,
              ),
            ),
          ),
          const SizedBox(height: 4),
          Text(
            'Créer une story',
            style: TextStyle(color: AppColors.textSecondary, fontSize: 13), // Texte secondaire avec couleur dynamique
          ),
        ],
      ),
    );
  }
}