import React from 'react';
import { Link, router } from '@inertiajs/react';
import TimeDisplay from '@/Components/TimeDisplay';
import { Rss, MessageCircle, Flame } from 'lucide-react';
import { Avatar, AvatarFallback, AvatarImage } from '@/Components/ui/avatar';
import VoteButtons from '@/Components/VoteButtons';

export default function FeedItem({ post, auth }) {
    
    const showFeedAuthor = post.rss_feed && post.rss_feed.show_author === false;
    const authorName = showFeedAuthor ? post.rss_feed.name : post.user?.name;
    const authorAvatar = showFeedAuthor ? post.rss_feed.feed_logo : post.user?.avatar;
    const isUserAuthor = !showFeedAuthor && post.user?.username;

    const authorLink = showFeedAuthor
        ? route('source.show', post.rss_feed.id)
        : (isUserAuthor ? route('author.show', post.user.username) : '#');

    const handleAuthorClick = (e) => {
        e.preventDefault();
        e.stopPropagation();
        if (authorLink !== '#') {
            router.visit(authorLink);
        }
    };

    return (
        <Link 
            href={post.route_url} 
            className="group flex flex-row gap-3 sm:gap-6 items-stretch border-b border-border pb-6 pt-4 last:border-0"
        >
            
            {post.image_path && (
                <div className="shrink-0 w-[35%] sm:w-[240px] relative overflow-hidden rounded-lg bg-muted border border-border/50 shadow-sm">
                    <img 
                        src={post.image_path} 
                        alt={post.title} 
                        className="absolute inset-0 w-full h-full object-cover" 
                    />
                </div>
            )}

            <div className="flex-1 flex flex-col justify-between min-h-[100px] sm:min-h-[140px] py-1">
                
                <div>
                    <div className="mb-1.5 sm:mb-2 flex items-center gap-2">
                        <span className="text-[10px] sm:text-xs font-bold text-primary uppercase tracking-wide">
                            {post.category?.name}
                        </span>
                        
                        {post.is_hot && (
                            <span className="flex items-center gap-0.5 text-[10px] font-bold text-red-600 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded text-uppercase tracking-wider">
                                <Flame className="w-3 h-3 fill-current" /> HOT
                            </span>
                        )}
                    </div>

                    <h3 className="text-base sm:text-xl font-bold leading-tight sm:leading-snug group-hover:text-primary transition-colors font-serif line-clamp-3 mb-2">
                        {post.title}
                    </h3>

                    <p className="hidden sm:block text-sm text-muted-foreground line-clamp-2">
                        {post.meta_description}
                    </p>
                </div>
                
                <div className="flex flex-wrap items-center justify-between text-[10px] sm:text-xs text-muted-foreground mt-2 w-full gap-2">
                    
                    <div className="flex items-center gap-2 sm:gap-4">
                        <div className="flex items-center gap-1.5 font-medium text-foreground">
                            <Avatar className="h-4 w-4 sm:h-5 sm:w-5 border border-border">
                                <AvatarImage src={authorAvatar} className="object-cover" />
                                <AvatarFallback className="text-[9px] bg-muted text-muted-foreground">
                                    {showFeedAuthor ? <Rss className="w-3 h-3" /> : authorName?.charAt(0)}
                                </AvatarFallback>
                            </Avatar>
                            
                            <button 
                                type="button"
                                onClick={handleAuthorClick} 
                                className="truncate max-w-[80px] sm:max-w-none hover:underline decoration-primary/50 underline-offset-2 z-10 relative text-start"
                            >
                                {authorName}
                            </button>
                        </div>

                        <span className="text-border hidden sm:inline">|</span>

                        <TimeDisplay date={post.created_at} showIcon={false} className="hidden sm:flex" />
                    </div>

                    <div className="flex items-center gap-3">
                        <VoteButtons post={post} auth={auth} className="scale-90 origin-right" />

                        <div className="flex items-center gap-1">
                            <MessageCircle className="w-4 h-4 text-muted-foreground" />
                            <span>{post.comments_count || 0}</span>
                        </div> 
                    </div>

                </div>

            </div>
        </Link>
    );
}