import 'package:flutter/material.dart';
import 'package:afterwork/presentation/widgets/story_video_player.dart';
import '../../../core/utils/calculate_time_ago.dart';
import 'animated_action_button.dart';

class StoryDetail extends StatefulWidget {
  final String username;
  final DateTime publicationDate;
  final String mediaUrl;
  final String userImage;
  final bool isVideo;

  const StoryDetail({
    super.key,
    required this.username,
    required this.publicationDate,
    required this.mediaUrl,
    required this.userImage,
    required this.isVideo,
  });

  @override
  StoryDetailState createState() => StoryDetailState();
}

class StoryDetailState extends State<StoryDetail> {
  late Offset _startDragOffset;
  late Offset _currentDragOffset;
  bool _isDragging = false;

  // Gestion du swipe vertical pour fermer la story
  void _onVerticalDragStart(DragStartDetails details) {
    _startDragOffset = details.globalPosition;
  }

  void _onVerticalDragUpdate(DragUpdateDetails details) {
    _currentDragOffset = details.globalPosition;
    if (_currentDragOffset.dy - _startDragOffset.dy > 100) {
      setState(() {
        _isDragging = true;
      });
      Navigator.pop(context);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        iconTheme: const IconThemeData(color: Colors.white),
      ),
      body: GestureDetector(
        onVerticalDragStart: _onVerticalDragStart,
        onVerticalDragUpdate: _onVerticalDragUpdate,
        child: Stack(
          children: [
            Positioned.fill(
              child: AnimatedOpacity(
                opacity: _isDragging ? 0.5 : 1.0,
                duration: const Duration(milliseconds: 300),
                child: widget.isVideo
                    ? StoryVideoPlayer(mediaUrl: widget.mediaUrl)
                    : Image.asset(widget.mediaUrl, fit: BoxFit.cover),
              ),
            ),
            // Informations sur l'utilisateur
            Positioned(
              top: 40,
              left: 20,
              child: Row(
                children: [
                  CircleAvatar(radius: 32, backgroundImage: AssetImage(widget.userImage)),
                  const SizedBox(width: 12),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        widget.username,
                        style: const TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
                      ),
                      Text(
                        'Il y a ${calculateTimeAgo(widget.publicationDate)}',
                        style: const TextStyle(color: Colors.white70, fontSize: 14),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            // Boutons d'actions flottants à droite
            const Positioned(
              right: 20,
              bottom: 100,
              child: Column(
                children: [
                  AnimatedActionButton(icon: Icons.favorite_border, label: 'J\'aime'),
                  SizedBox(height: 20),
                  AnimatedActionButton(icon: Icons.comment, label: 'Commenter'),
                  SizedBox(height: 20),
                  AnimatedActionButton(icon: Icons.share, label: 'Partager'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}