import 'package:cached_network_image/cached_network_image.dart';
import 'package:dismissible_page/dismissible_page.dart';
import 'package:eatvio_app/core/app_export.dart';
import 'package:eatvio_app/features/chat/presentation/pages/photo_view_screen.dart';
import 'package:eatvio_app/features/feed/models/feed_blog_post_model.dart';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:go_router/go_router.dart';
import 'package:share_plus/share_plus.dart';

class BlogPostWidget extends StatefulWidget {
  final FeedBlogPostModel feedBlogPostModel;

  const BlogPostWidget({super.key, required this.feedBlogPostModel});

  @override
  State<BlogPostWidget> createState() => _BlogPostWidgetState();
}

class _BlogPostWidgetState extends State<BlogPostWidget> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      borderRadius: BorderRadius.circular(12),
      onTap: () => GoRouter.of(context).pushNamed(
        'blogPostScreen',
        extra: widget.feedBlogPostModel,
      ),
      child: Ink(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          color: Colors.white,
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(height: 12),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 12),
              child: Row(
                children: [
                  CircleAvatar(
                    radius: 20,
                    backgroundColor: Colors.black12,
                    foregroundImage: NetworkImage(
                      widget.feedBlogPostModel.author.authorProfileIcon,
                    ),
                  ),
                  SizedBox(width: 8),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(widget.feedBlogPostModel.author.authorName),
                      Text(calculateDifference(widget.feedBlogPostModel.createdAt)),
                    ],
                  ),
                ],
              ),
            ),
            if (widget.feedBlogPostModel.title.isNotEmpty || widget.feedBlogPostModel.description.isNotEmpty) SizedBox(height: 12),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 12),
              child: Text(
                widget.feedBlogPostModel.title,
                style: TextStyle(
                  fontWeight: FontWeight.w600,
                  color: Colors.black87,
                ),
              ),
            ),
            if (widget.feedBlogPostModel.title.isNotEmpty && widget.feedBlogPostModel.description.isNotEmpty) SizedBox(height: 8),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 12),
              child: Html(
                data: widget.feedBlogPostModel.description,
              ),
              // child: Text(
              //   widget.feedBlogPostModel.description,
              //   style: TextStyle(
              //     color: Colors.black87,
              //   ),
              // ),
            ),
            if (widget.feedBlogPostModel.title.isNotEmpty || widget.feedBlogPostModel.description.isNotEmpty) SizedBox(height: 8),
            GestureDetector(
              onTap: () {
                context.pushTransparentRoute(
                  rootNavigator: true,
                  PhotoViewScreen(
                    imageUrls: [baseUrl + '/storage/' + widget.feedBlogPostModel.image],
                    index: 0,
                  ),
                );
              },
              child: Hero(
                tag: baseUrl + '/storage/' + widget.feedBlogPostModel.image,
                child: CachedNetworkImage(
                  imageUrl: baseUrl + '/storage/' + widget.feedBlogPostModel.image,
                  errorWidget: (context, str, object) => SizedBox.shrink(),
                ),
              ),
            ),
            SizedBox(height: 12),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 12),
              child: Row(
                children: [
                  _iconButton(icon: Icons.favorite_border_rounded, text: widget.feedBlogPostModel.totalLikes.toString()),
                  SizedBox(width: 8),
                  _iconButton(
                    icon: Icons.mode_comment_outlined,
                    text: widget.feedBlogPostModel.totalComments.toString(),
                    onTap: () => GoRouter.of(context).pushNamed(
                      'blogPostScreen',
                      extra: widget.feedBlogPostModel,
                    ),
                  ),
                  SizedBox(width: 8),
                  _iconButton(
                    icon: Icons.reply_rounded,
                    onTap: () => Share.shareUri(
                      Uri.parse(
                        baseUrl + '/ru/blog_post/' + widget.feedBlogPostModel.id.toString(),
                      ),
                    ),
                  ),
                  Spacer(),
                  Icon(
                    Icons.visibility_rounded,
                    size: 16,
                    color: appTheme.gray500,
                  ),
                  SizedBox(width: 4),
                  Text(
                    widget.feedBlogPostModel.totalViews.toString(),
                    style: TextStyle(
                      fontSize: 12,
                      color: appTheme.gray500,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: 8),
          ],
        ),
      ),
    );
  }

  _iconButton({required IconData icon, String? text, Function()? onTap}) {
    return InkWell(
      onTap: onTap ?? () {},
      borderRadius: BorderRadius.circular(16),
      child: Ink(
        padding: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
        decoration: BoxDecoration(
          color: appTheme.gray100,
          borderRadius: BorderRadius.circular(16),
        ),
        height: 32,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(
              icon,
              size: 20,
              color: appTheme.gray600,
            ),
            if (text != null) SizedBox(width: 8),
            if (text != null)
              Text(
                text,
                style: TextStyle(
                  color: appTheme.gray600,
                  fontWeight: FontWeight.w500,
                ),
              ),
          ],
        ),
      ),
    );
  }
}