import React from 'react';
import { Link } from '@inertiajs/react';
import { TrendingUp, Layers, Clock } from 'lucide-react';
import { Skeleton } from '@/Components/ui/skeleton';
import { Separator } from '@/Components/ui/separator';
import AdSlot from '@/Components/AdSlot';
import RightSidebarFooter from '@/Components/RightSidebarFooter'; 
import useTranslation from '@/hooks/useTranslation';

export default function RightSidebar({ loading, sidebarData, post, ads }) {
    const { t } = useTranslation();
    const adSidebarTop = ads?.['article_sidebar_top'];
    const adSidebarBottom = ads?.['article_sidebar_bottom'];
    const shouldShowAd = (ad) => ad && ad.is_active;

    const formatDateShort = (d) => new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });

    const getPlaceholder = (title) => {
        return `https://ui-avatars.com/api/?name=${encodeURIComponent(title)}&background=random&color=fff&size=200`;
    };

    const hasTrending = loading || (sidebarData.you_may_like && sidebarData.you_may_like.length > 0);
    const hasCategory = loading || (sidebarData.same_category && sidebarData.same_category.length > 0);

    return (
        <aside className="lg:col-span-4 hidden lg:block h-full ps-6 border-s border-border relative">
            
            <div className="space-y-8 mb-8">
                
                {shouldShowAd(adSidebarTop) && (
                    <div className="bg-card border rounded-lg shadow-sm p-4 flex justify-center">
                        <div className="w-full">
                            <p className="text-[10px] text-muted-foreground text-center mb-2 uppercase tracking-widest">
                                {t('_advertisement', 'Advertisement')}
                            </p>
                            <AdSlot ad={adSidebarTop} className="w-full" />
                        </div>
                    </div>
                )}

                {hasTrending && (
                    <div>
                        <h3 className="font-bold text-lg border-s-4 border-red-500 ps-3 mb-4 flex items-center gap-2">
                            <TrendingUp className="w-4 h-4 text-red-500" /> {t('_you_may_like', 'You May Like')}
                        </h3>
                        <div className="flex flex-col gap-5">
                            {loading ? ([1, 2, 3].map(i => (
                                    <div key={i} className="flex gap-3 animate-pulse">
                                        <Skeleton className="w-24 h-16 rounded-md" />
                                        <div className="space-y-2 flex-1">
                                            <Skeleton className="h-4 w-full" />
                                            <Skeleton className="h-3 w-1/2" />
                                        </div>
                                    </div>
                                ))
                            ) : (
                                sidebarData.you_may_like.map(item => (
                                    <Link 
                                        key={`trending-${item.id}`} 
                                        href={item.route_url} 
                                        prefetch 
                                        className="group flex gap-3 items-start"
                                    >
                                        <div className="w-24 h-16 shrink-0 bg-muted rounded-md overflow-hidden border border-border">
                                            <img 
                                                src={item.image_path || getPlaceholder(item.title)} 
                                                className="w-full h-full object-cover group-hover:scale-105 transition-transform" 
                                                alt={item.title}
                                            />
                                        </div>
                                        <div>
                                            <h4 className="text-sm font-bold leading-snug group-hover:text-red-600 transition-colors line-clamp-2">{item.title}</h4>
                                            
                                            <div className="flex items-center gap-1 text-[10px] text-muted-foreground mt-1">
                                                <Clock className="w-3 h-3" /> {formatDateShort(item.created_at)}
                                            </div>
                                        </div>
                                    </Link>
                                ))
                            )}
                        </div>
                    </div>
                )}

                {hasTrending && hasCategory && <Separator />}

                {hasCategory && (
                    <div>
                        <h3 className="font-bold text-lg border-s-4 border-blue-500 ps-3 mb-4 flex items-center gap-2">
                            <Layers className="w-4 h-4 text-blue-500" /> {t('_more_in', 'More in')} {post.category?.name || t('_news_title', 'News')}
                        </h3>
                        <div className="flex flex-col gap-5">
                            {loading ? ([1, 2, 3].map(i => (
                                    <div key={i} className="flex gap-3 animate-pulse">
                                        <Skeleton className="w-24 h-16 rounded-md" />
                                        <div className="space-y-2 flex-1">
                                            <Skeleton className="h-4 w-full" />
                                            <Skeleton className="h-3 w-1/2" />
                                        </div>
                                    </div>
                                ))
                            ) : (
                                sidebarData.same_category.map(item => (
                                    <Link 
                                        key={`cat-${item.id}`} 
                                        href={item.route_url} 
                                        prefetch 
                                        className="group flex gap-3 items-start"
                                    >
                                        <div className="w-24 h-16 shrink-0 bg-muted rounded-md overflow-hidden border border-border">
                                            <img 
                                                src={item.image_path || getPlaceholder(item.title)} 
                                                className="w-full h-full object-cover group-hover:scale-105 transition-transform" 
                                                alt={item.title}
                                            />
                                        </div>
                                        <div>
                                            <h4 className="text-sm font-bold leading-snug group-hover:text-blue-600 transition-colors line-clamp-3">{item.title}</h4>
                                            <div className="flex items-center gap-1 text-[10px] text-muted-foreground mt-1">
                                                <Clock className="w-3 h-3" /> {formatDateShort(item.created_at)}
                                            </div>
                                        </div>
                                    </Link>
                                ))
                            )}
                        </div>
                    </div>
                )}
            </div>

            <div className="space-y-4 pb-6 pt-6 bg-gradient-to-t from-background via-background to-background/95 backdrop-blur-sm border-t border-border/50">
                
                {shouldShowAd(adSidebarBottom) && (
                    <div className="bg-card border rounded-lg p-2 shadow-sm flex justify-center mx-1">
                        <div className="w-full">
                            <p className="text-[9px] text-muted-foreground text-center mb-1 uppercase tracking-widest">
                                {t('_advertisement', 'Advertisement')}
                            </p>
                            <AdSlot ad={adSidebarBottom} className="w-full" />
                        </div>
                    </div>
                )}

                <div className="-mt-6"> 
                    <RightSidebarFooter />
                </div>
            </div>

        </aside>
    );
}