import { PageLayout } from "@/components/layout/PageLayout";
import { useParams, Link } from "wouter";
import { useQuery, useMutation } from "@tanstack/react-query";
import { BlogPostWithDetails } from "@/lib/types";
import { formatDistanceToNow, format } from "date-fns";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { Textarea } from "@/components/ui/textarea";
import { useState } from "react";
import { apiRequest, queryClient } from "@/lib/queryClient";
import { useToast } from "@/hooks/use-toast";
import { 
  Calendar, 
  Clock, 
  MessageSquare, 
  Share2, 
  ThumbsUp, 
  BookOpen,
  ChevronLeft,
  CornerDownLeft,
  Edit,
  Bookmark,
  BookmarkPlus
} from "lucide-react";

export default function BlogDetail() {
  const { slug } = useParams();
  const { toast } = useToast();
  const [comment, setComment] = useState("");
  const [isLiked, setIsLiked] = useState(false);
  const [isBookmarked, setIsBookmarked] = useState(false);
  
  // Fetch blog post
  const { 
    data: post, 
    isLoading, 
    error 
  } = useQuery<BlogPostWithDetails>({
    queryKey: [`/api/blog/${slug}`],
  });
  
  // Comment mutation
  const commentMutation = useMutation({
    mutationFn: async (commentText: string) => {
      // In a real app, this would be an API call to add a comment
      return await apiRequest('POST', '/api/comments', {
        userId: 1, // Using a mock user for demo
        content: commentText,
        entityType: 'blogPost',
        entityId: post?.id
      });
    },
    onSuccess: () => {
      toast({
        description: "Comment added successfully",
      });
      setComment("");
      // Invalidate queries to refresh the data
      queryClient.invalidateQueries({ queryKey: [`/api/blog/${slug}`] });
    },
    onError: (error) => {
      toast({
        title: "Error",
        description: "Failed to add comment",
        variant: "destructive",
      });
    }
  });
  
  // Like mutation
  const likeMutation = useMutation({
    mutationFn: async () => {
      // In a real app, this would be an API call to like/unlike
      return await apiRequest('POST', '/api/likes', {
        userId: 1,
        entityType: 'blogPost',
        entityId: post?.id
      });
    },
    onSuccess: () => {
      setIsLiked(!isLiked);
      toast({
        description: isLiked ? "Removed like" : "Added like",
      });
      // Invalidate queries to refresh the data
      queryClient.invalidateQueries({ queryKey: [`/api/blog/${slug}`] });
    },
    onError: (error) => {
      toast({
        title: "Error",
        description: "Failed to update like",
        variant: "destructive",
      });
    }
  });
  
  // Bookmark mutation
  const bookmarkMutation = useMutation({
    mutationFn: async () => {
      // In a real app, this would be an API call to bookmark/unbookmark
      return await apiRequest('POST', '/api/bookmarks', {
        userId: 1,
        entityType: 'blogPost',
        entityId: post?.id
      });
    },
    onSuccess: () => {
      setIsBookmarked(!isBookmarked);
      toast({
        description: isBookmarked ? "Removed from bookmarks" : "Added to bookmarks",
      });
    },
    onError: (error) => {
      toast({
        title: "Error",
        description: "Failed to update bookmark",
        variant: "destructive",
      });
    }
  });
  
  // Share functionality
  const handleShare = async () => {
    try {
      if (navigator.share) {
        await navigator.share({
          title: post?.title || "Tercul Blog Post",
          text: post?.excerpt || "Check out this article on Tercul",
          url: window.location.href
        });
      } else {
        // Fallback for browsers that don't support the Web Share API
        navigator.clipboard.writeText(window.location.href);
        toast({
          description: "Link copied to clipboard",
        });
      }
    } catch (error) {
      console.error('Error sharing:', error);
    }
  };
  
  // Handle comment submission
  const handleCommentSubmit = () => {
    if (!comment.trim()) return;
    commentMutation.mutate(comment);
  };
  
  // Format date for display
  const formatDate = (date: Date | null) => {
    if (!date) return "";
    return format(new Date(date), "MMMM d, yyyy");
  };
  
  if (isLoading) {
    return (
      <PageLayout>
        <div className="max-w-4xl mx-auto px-4 py-8">
          <div className="mb-6">
            <Skeleton className="h-8 w-3/4 mb-2" />
            <Skeleton className="h-4 w-1/3 mb-4" />
            <div className="flex items-center gap-2">
              <Skeleton className="h-10 w-10 rounded-full" />
              <Skeleton className="h-4 w-32" />
            </div>
          </div>
          
          <Skeleton className="h-64 w-full mb-8" />
          
          <div className="space-y-4">
            <Skeleton className="h-20 w-full" />
            <Skeleton className="h-20 w-full" />
            <Skeleton className="h-20 w-full" />
          </div>
        </div>
      </PageLayout>
    );
  }
  
  if (error || !post) {
    return (
      <PageLayout>
        <div className="max-w-4xl mx-auto px-4 py-16 text-center">
          <h1 className="text-2xl font-bold mb-4">Blog post not found</h1>
          <p className="mb-6">The article you're looking for could not be found.</p>
          <Link href="/blog">
            <Button className="bg-russet hover:bg-russet/90">Back to Blog</Button>
          </Link>
        </div>
      </PageLayout>
    );
  }
  
  return (
    <PageLayout>
      <article className="max-w-4xl mx-auto px-4 py-8">
        <div className="mb-4">
          <Link href="/blog">
            <Button variant="ghost" className="px-0 text-navy/70 dark:text-cream/70 hover:text-navy dark:hover:text-cream hover:bg-transparent">
              <ChevronLeft className="h-4 w-4 mr-1" />
              Back to Blog
            </Button>
          </Link>
        </div>
        
        <header className="mb-8">
          <h1 className="text-3xl md:text-4xl font-serif font-bold text-navy dark:text-cream mb-3">
            {post.title}
          </h1>
          
          <div className="flex items-center gap-3 mb-4 flex-wrap">
            <div className="flex items-center gap-2 text-sm text-navy/60 dark:text-cream/60">
              <Calendar className="h-4 w-4" />
              <span>{formatDate(post.publishedAt || post.createdAt)}</span>
            </div>
            
            <Separator orientation="vertical" className="h-4" />
            
            <div className="flex items-center gap-2 text-sm text-navy/60 dark:text-cream/60">
              <Clock className="h-4 w-4" />
              <span>{Math.ceil(post.content.length / 1000)} min read</span>
            </div>
            
            {post.tags && post.tags.length > 0 && (
              <>
                <Separator orientation="vertical" className="h-4" />
                <div className="flex flex-wrap gap-1">
                  {post.tags.map((tag) => (
                    <Badge key={tag.id} variant="outline" className="text-xs">
                      {tag.name}
                    </Badge>
                  ))}
                </div>
              </>
            )}
          </div>
          
          <div className="flex items-center gap-3">
            <Avatar className="h-10 w-10">
              <AvatarImage src={post.author?.avatar || ""} alt={post.author?.displayName || "Author"} />
              <AvatarFallback>
                {post.author?.displayName?.charAt(0) || "A"}
              </AvatarFallback>
            </Avatar>
            <div>
              <p className="font-medium text-navy dark:text-cream">
                {post.author?.displayName || "Anonymous"}
              </p>
              <p className="text-xs text-navy/60 dark:text-cream/60">
                {post.author?.role || "Contributor"}
              </p>
            </div>
          </div>
        </header>
        
        <div className="blog-content prose prose-russet dark:prose-invert max-w-none mb-8">
          <div dangerouslySetInnerHTML={{ __html: post.content }} />
        </div>
        
        <footer className="border-t border-sage/20 dark:border-sage/10 pt-6">
          <div className="flex flex-wrap justify-between items-center mb-8">
            <div className="flex gap-4">
              <Button
                variant="outline"
                size="sm"
                className={`flex items-center gap-1 ${isLiked ? 'text-russet' : ''}`}
                onClick={() => likeMutation.mutate()}
                disabled={likeMutation.isPending}
              >
                <ThumbsUp className={`h-4 w-4 ${isLiked ? 'fill-russet' : ''}`} />
                <span>{post.likeCount || 0} Likes</span>
              </Button>
              
              <Button
                variant="outline"
                size="sm"
                className="flex items-center gap-1"
                onClick={handleShare}
              >
                <Share2 className="h-4 w-4" />
                <span>Share</span>
              </Button>
              
              <Button
                variant="outline"
                size="sm"
                className={`flex items-center gap-1 ${isBookmarked ? 'text-russet' : ''}`}
                onClick={() => bookmarkMutation.mutate()}
                disabled={bookmarkMutation.isPending}
              >
                {isBookmarked ? (
                  <Bookmark className="h-4 w-4 fill-russet" />
                ) : (
                  <BookmarkPlus className="h-4 w-4" />
                )}
                <span>{isBookmarked ? 'Saved' : 'Save'}</span>
              </Button>
            </div>
            
            {/* Only show edit button for author or admins */}
            {post.author?.id === 1 && (
              <Link href={`/blog/${slug}/edit`}>
                <Button
                  variant="outline"
                  size="sm"
                  className="flex items-center gap-1"
                >
                  <Edit className="h-4 w-4" />
                  <span>Edit Article</span>
                </Button>
              </Link>
            )}
          </div>
          
          <div className="mb-8">
            <h3 className="text-xl font-serif font-medium mb-4 flex items-center gap-2">
              <MessageSquare className="h-5 w-5 text-russet" />
              <span>Comments ({post.commentCount || 0})</span>
            </h3>
            
            <div className="mb-6">
              <Textarea
                placeholder="Share your thoughts on this article..."
                value={comment}
                onChange={(e) => setComment(e.target.value)}
                className="min-h-24 resize-y mb-2"
              />
              <div className="flex justify-end">
                <Button
                  className="bg-russet hover:bg-russet/90"
                  onClick={handleCommentSubmit}
                  disabled={!comment.trim() || commentMutation.isPending}
                >
                  <CornerDownLeft className="h-4 w-4 mr-2" />
                  {commentMutation.isPending ? "Posting..." : "Post Comment"}
                </Button>
              </div>
            </div>
            
            {post.comments && post.comments.length > 0 ? (
              <div className="space-y-6">
                {/* Comment items would go here */}
                <div className="p-4 border border-sage/20 dark:border-sage/10 rounded-lg">
                  <div className="flex items-start gap-3 mb-2">
                    <Avatar className="h-8 w-8">
                      <AvatarFallback>U</AvatarFallback>
                    </Avatar>
                    <div>
                      <p className="font-medium text-navy dark:text-cream">Reader</p>
                      <p className="text-xs text-navy/60 dark:text-cream/60">3 days ago</p>
                    </div>
                  </div>
                  <p className="text-navy/80 dark:text-cream/80">
                    This is a sample comment. In a real implementation, comments would be loaded from the API.
                  </p>
                </div>
              </div>
            ) : (
              <div className="text-center py-8 border border-dashed border-navy/20 dark:border-cream/20 rounded-lg">
                <MessageSquare className="h-12 w-12 mx-auto text-navy/30 dark:text-cream/30 mb-3" />
                <h4 className="text-lg font-medium mb-2">No comments yet</h4>
                <p className="text-navy/70 dark:text-cream/70 mb-4">
                  Be the first to share your thoughts on this article.
                </p>
              </div>
            )}
          </div>
          
          {/* Related articles section */}
          <div>
            <h3 className="text-xl font-serif font-medium mb-4 flex items-center gap-2">
              <BookOpen className="h-5 w-5 text-russet" />
              <span>Related Articles</span>
            </h3>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {/* This would be populated with related articles from the API */}
              <div className="p-4 border border-sage/20 dark:border-sage/10 rounded-lg">
                <p className="text-navy/60 dark:text-cream/60 text-sm mb-2">
                  Related articles will be displayed here based on similar tags or topics.
                </p>
              </div>
            </div>
          </div>
        </footer>
      </article>
    </PageLayout>
  );
}