import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:video_player/video_player.dart';
import 'package:path_provider/path_provider.dart';

class TweetTemplateWidget extends StatefulWidget {
  final Uint8List? avatarBytes;
  final String displayName;
  final bool isVerified;
  final String username;
  final String text;
  final Uint8List? imageBytes;
  final Uint8List? videoBytes;
  final DateTime timestamp;
  final Map<String, int>? engagement; // {replies, retweets, likes, views}

  const TweetTemplateWidget({
    Key? key,
    this.avatarBytes,
    required this.displayName,
    this.isVerified = false,
    required this.username,
    required this.text,
    this.imageBytes,
    this.videoBytes,
    required this.timestamp,
    this.engagement,
  }) : assert(imageBytes == null || videoBytes == null,
          'Cannot have both imageBytes and videoBytes set at the same time'),
       super(key: key);

  @override
  State<TweetTemplateWidget> createState() => _TweetTemplateWidgetState();
}

class _TweetTemplateWidgetState extends State<TweetTemplateWidget> {
  VideoPlayerController? _videoController;
  late String _normalizedUsername;
  File? _tempVideoFile;

  @override
  void initState() {
    super.initState();
    _normalizedUsername = _normalizeUsername(widget.username);
    _initializeMedia();
  }

  String _normalizeUsername(String username) {
    final trimmed = username.trim();

    // if empty or just "@", return default
    if (trimmed.isEmpty || trimmed == '@') return '@anonymous';

    // add @ if it doesnt start with it
    return trimmed.startsWith('@') ? trimmed : '@$trimmed';
  }

  Future<void> _initializeMedia() async {
    if (widget.videoBytes == null) return;

    // write video bytes to a temp file
    final tempDir = await getTemporaryDirectory();
    final tempPath = '${tempDir.path}/temp_video_${DateTime.now().millisecondsSinceEpoch}.mp4';
    _tempVideoFile = File(tempPath);
    await _tempVideoFile!.writeAsBytes(widget.videoBytes!);

    _videoController = VideoPlayerController.file(_tempVideoFile!)
      ..initialize().then((_) {
        if (mounted) {
          setState(() {});
          _videoController?.play();
          _videoController?.setLooping(true);
        }
      });
  }

  @override
  void dispose() {
    _videoController?.dispose();
    _tempVideoFile?.delete().catchError((_) {});
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      child: Center(
        child: LayoutBuilder(
          builder: (context, constraints) {
            final size = constraints.biggest.shortestSide - 20;

            return Container(
              width: size,
              height: size,
              color: Colors.black,
              child: Center(
                child: FittedBox(
                  fit: BoxFit.contain,
                  child: SizedBox(
                    width: 450,
                    child: Container(
                      padding: const EdgeInsets.symmetric(
                        horizontal: 16,
                        vertical: 12,
                      ),
                      color: Colors.black,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          // header with avatar and user info
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              // Avatar
                              Container(
                                width: 40,
                                height: 40,
                                margin: const EdgeInsets.only(right: 12),
                                decoration: BoxDecoration(
                                  color: const Color.fromRGBO(51, 54, 57, 1),
                                  borderRadius: BorderRadius.circular(20),
                                ),
                                child: widget.avatarBytes != null
                                    ? ClipRRect(
                                        borderRadius: BorderRadius.circular(20),
                                        child: Image.memory(
                                          widget.avatarBytes!,
                                          fit: BoxFit.cover,
                                        ),
                                      )
                                    : null,
                              ),
                              // user info section
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Row(
                                    children: [
                                      Text(
                                        widget.displayName,
                                        style: const TextStyle(
                                          fontFamily: '-apple-system',
                                          fontSize: 15,
                                          fontWeight: FontWeight.w700,
                                          color: Color.fromRGBO(231, 233, 234, 1),
                                          height: 1.33,
                                        ),
                                      ),
                                      if (widget.isVerified) ...[
                                        const SizedBox(width: 4),
                                        SvgPicture.string(
                                          _verifiedBadgeSvg,
                                          width: 18,
                                          height: 18,
                                        ),
                                      ],
                                    ],
                                  ),
                                  Text(
                                    _normalizedUsername,
                                    style: const TextStyle(
                                      fontFamily: '-apple-system',
                                      fontSize: 15,
                                      color: Color.fromRGBO(113, 118, 123, 1),
                                      height: 1.33,
                                    ),
                                  ),
                                ],
                              ),
                            ],
                          ),


                          const SizedBox(height: 12),
                          // tweet text
                          Text(
                            widget.text,
                            style: const TextStyle(
                              fontFamily: '-apple-system',
                              fontSize: 15,
                              color: Color.fromRGBO(231, 233, 234, 1),
                              height: 1.33,
                            ),
                          ),
                          const SizedBox(height: 12),

                          // media content (image or vdeo)
                          if (widget.imageBytes != null) ...[
                            Container(
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(16),
                                border: Border.all(
                                  color: const Color.fromRGBO(47, 51, 54, 1),
                                  width: 1,
                                ),
                              ),
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(16),
                                child: Image.memory(
                                  widget.imageBytes!,
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                            const SizedBox(height: 12),
                          ],

                          if (widget.videoBytes != null) ...[
                            Container(
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(16),
                                border: Border.all(
                                  color: const Color.fromRGBO(47, 51, 54, 1),
                                  width: 1,
                                ),
                              ),
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(16),
                                child: (_videoController?.value.isInitialized ?? false)
                                    ? AspectRatio(
                                        aspectRatio: _videoController!.value.aspectRatio,
                                        child: VideoPlayer(_videoController!),
                                      )
                                    : Container(
                                        height: 200,
                                        color: const Color.fromRGBO(51, 54, 57, 1),
                                        child: const Center(
                                          child: CircularProgressIndicator(
                                            color: Color.fromRGBO(29, 155, 240, 1),
                                          ),
                                        ),
                                      ),
                              ),
                            ),
                            const SizedBox(height: 12),
                          ],

                          // timestmp and source
                          RichText(
                            text: TextSpan(
                              style: const TextStyle(
                                fontFamily: '-apple-system',
                                fontSize: 15,
                                color: Color.fromRGBO(113, 118, 123, 1),
                              ),
                              children: [
                                TextSpan(text: _formatTimestamp(widget.timestamp)),
                                const TextSpan(text: ' · '),
                                const TextSpan(
                                  text: 'via tweetforge.imbenji.net',
                                  style: TextStyle(
                                    color: Color.fromRGBO(29, 155, 240, 1),
                                  ),
                                ),
                              ],
                            ),
                          ),

                          // engagement metrics if provided
                          if (widget.engagement != null) ...[
                            const SizedBox(height: 12),
                            Container(
                              padding: const EdgeInsets.only(top: 12),
                              decoration: const BoxDecoration(
                                border: Border(
                                  top: BorderSide(
                                    color: Color.fromRGBO(47, 51, 54, 1),
                                    width: 1,
                                  ),
                                ),
                              ),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  if (widget.engagement!['replies'] != null)
                                    _buildEngagementItem(
                                      _replyIcon,
                                      widget.engagement!['replies']!,
                                    ),
                                  if (widget.engagement!['retweets'] != null)
                                    _buildEngagementItem(
                                      _retweetIcon,
                                      widget.engagement!['retweets']!,
                                    ),
                                  if (widget.engagement!['likes'] != null)
                                    _buildEngagementItem(
                                      _likeIcon,
                                      widget.engagement!['likes']!,
                                    ),
                                  if (widget.engagement!['views'] != null)
                                    _buildEngagementItem(
                                      _viewsIcon,
                                      widget.engagement!['views']!,
                                    ),
                                ],
                              ),
                            ),
                          ],
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

  Widget _buildEngagementItem(String iconSvg, int count) {
    return Row(
      children: [
        SvgPicture.string(
          iconSvg,
          width: 18.75,
          height: 18.75,
          colorFilter: const ColorFilter.mode(
            Color.fromRGBO(113, 118, 123, 1),
            BlendMode.srcIn,
          ),
        ),
        const SizedBox(width: 4),
        Text(
          _formatCount(count),
          style: const TextStyle(
            fontFamily: '-apple-system',
            fontSize: 13,
            color: Color.fromRGBO(113, 118, 123, 1),
          ),
        ),
      ],
    );
  }

  String _formatCount(int count) {
    if (count >= 1000000000) {
      final formatted = (count / 1000000000).toStringAsFixed(1);
      return formatted.replaceAll(RegExp(r'\.0$'), '') + 'B';
    }
    if (count >= 1000000) {
      final formatted = (count / 1000000).toStringAsFixed(1);
      return formatted.replaceAll(RegExp(r'\.0$'), '') + 'M';
    }
    if (count >= 1000) {
      final formatted = (count / 1000).toStringAsFixed(1);
      return formatted.replaceAll(RegExp(r'\.0$'), '') + 'K';
    }
    return count.toString();
  }

  String _formatTimestamp(DateTime date) {
    final hours = date.hour;
    final minutes = date.minute.toString().padLeft(2, '0');
    final ampm = hours >= 12 ? 'PM' : 'AM';
    final hour12 = hours % 12 == 0 ? 12 : hours % 12;

    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    final month = months[date.month - 1];
    final day = date.day;
    final year = date.year;

    return '$hour12:$minutes $ampm · $month $day, $year';
  }

  // verified badge svg path
  static const String _verifiedBadgeSvg = '''
<svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
  <path fill="#1D9BF0" d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"/>
</svg>
''';

  // engagment icons (simplified versions)
  static const String _replyIcon = '''
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z"/>
</svg>
''';

  static const String _retweetIcon = '''
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M4.5 3.88l4.432 4.14-1.364 1.46L5.5 7.55V16c0 1.1.896 2 2 2H13v2H7.5c-2.209 0-4-1.79-4-4V7.55L1.432 9.48.068 8.02 4.5 3.88zM16.5 6H11V4h5.5c2.209 0 4 1.79 4 4v8.45l2.068-1.93 1.364 1.46-4.432 4.14-4.432-4.14 1.364-1.46 2.068 1.93V8c0-1.1-.896-2-2-2z"/>
</svg>
''';

  static const String _likeIcon = '''
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"/>
</svg>
''';

  static const String _viewsIcon = '''
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z"/>
</svg>
''';
}