import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { cn } from '@/lib/utils';
import { Link } from '@inertiajs/react';

type NotificationItemProps = {
    notification: {
        id: number;
        notification_id: number;
        action?: string | null;
        message?: string | null;
        action_url?: string | null;
        user_image?: string | null;
        timestamp?: string;
        is_read: boolean;
        time_ago?: string;
    };
    onClick?: () => void;
};

export function NotificationItem({ notification, onClick }: NotificationItemProps) {
    const { action, message, action_url, user_image, is_read, time_ago } = notification;

    // Get initials from action or use default
    const getInitials = (text?: string | null) => {
        if (!text) return 'N';
        const words = text.split(' ');
        if (words.length >= 2) {
            return (words[0][0] + words[words.length - 1][0]).toUpperCase();
        }
        return text.substring(0, 2).toUpperCase();
    };

    const content = (
        <div 
            className={cn(
                'relative hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer',
                !is_read && 'bg-blue-50/50 dark:bg-blue-950/20'
            )}
            onClick={onClick}
        >
            <div className="px-2">
                <div className="flex gap-3 border-b py-3">
                    <Avatar className="h-10 w-10 bg-muted flex-shrink-0">
                        {user_image ? (
                            <AvatarImage 
                                className="border-none object-cover" 
                                src={user_image} 
                                alt={action || 'User'} 
                            />
                        ) : (
                            <AvatarFallback className="bg-blue-100 font-medium text-blue-700 dark:bg-blue-900 dark:text-blue-300">
                                {getInitials(action)}
                            </AvatarFallback>
                        )}
                    </Avatar>
                    <div className="min-w-0 flex-1">
                        <div className="flex items-start justify-between gap-2">
                            <div className="flex-1 min-w-0">
                                <p className="text-sm leading-relaxed">
                                    <span className="font-semibold text-foreground">{action || 'Notification'}</span>
                                </p>
                                {message && (
                                    <p className="text-sm text-muted-foreground mt-1 break-words">
                                        {message.length > 100 ? `${message.slice(0, 100)}...` : message}
                                    </p>
                                )}
                            </div>
                            {time_ago && (
                                <span className="text-xs font-semibold whitespace-nowrap text-muted-foreground flex-shrink-0">
                                    {time_ago}
                                </span>
                            )}
                        </div>
                        {!is_read && (
                            <div className="mt-1">
                                <span className="inline-block h-2 w-2 rounded-full bg-blue-500"></span>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );

    // If action_url exists, wrap in Link
    if (action_url) {
        return (
            <Link href={action_url} className="block">
                {content}
            </Link>
        );
    }

    return content;
}