import { router } from '@inertiajs/react';
import { AlertTriangle, Calendar, CreditCard, Users, Wrench } from 'lucide-react';
import type {AdminNotification, NotificationCategory} from '@/hooks/use-notifications';
import { cn } from '@/lib/utils';

interface CategoryConfig {
    icon: React.ElementType;
    bg: string;
    iconColor: string;
    dot: string;
}

const CATEGORY_CONFIG: Record<NotificationCategory, CategoryConfig> = {
    bookings: {
        icon: Calendar,
        bg: 'bg-emerald-100 dark:bg-emerald-950',
        iconColor: 'text-emerald-600 dark:text-emerald-400',
        dot: 'bg-emerald-500',
    },
    payments: {
        icon: CreditCard,
        bg: 'bg-sky-100 dark:bg-sky-950',
        iconColor: 'text-sky-600 dark:text-sky-400',
        dot: 'bg-sky-500',
    },
    operations: {
        icon: Wrench,
        bg: 'bg-amber-100 dark:bg-amber-950',
        iconColor: 'text-amber-600 dark:text-amber-400',
        dot: 'bg-amber-500',
    },
    system: {
        icon: AlertTriangle,
        bg: 'bg-red-100 dark:bg-red-950',
        iconColor: 'text-red-600 dark:text-red-400',
        dot: 'bg-red-500',
    },
    customers: {
        icon: Users,
        bg: 'bg-purple-100 dark:bg-purple-950',
        iconColor: 'text-purple-600 dark:text-purple-400',
        dot: 'bg-purple-500',
    },
};

function formatRelativeTime(isoString: string): string {
    const date = new Date(isoString);
    const now = new Date();
    const diffMs = now.getTime() - date.getTime();
    const diffMin = Math.floor(diffMs / 60_000);

    if (diffMin < 1) {
return 'Just now';
}

    if (diffMin < 60) {
return `${diffMin}m ago`;
}

    const diffHr = Math.floor(diffMin / 60);

    if (diffHr < 24) {
return `${diffHr}h ago`;
}

    const diffDay = Math.floor(diffHr / 24);

    if (diffDay === 1) {
return 'Yesterday';
}

    if (diffDay < 7) {
return `${diffDay}d ago`;
}

    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
}

function formatNotificationTitle(title: string): string {
    return title.replace(
        /#([0-9a-f]{8})-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/gi,
        (_, prefix: string) => `#${prefix.toUpperCase()}`,
    );
}

interface NotificationItemProps {
    notification: AdminNotification;
    onMarkRead: (id: number) => void;
    onClose: () => void;
}

export function NotificationItem({ notification, onMarkRead, onClose }: NotificationItemProps) {
    const config = CATEGORY_CONFIG[notification.category];
    const Icon = config.icon;

    const handleClick = () => {
        if (!notification.is_read) {
            onMarkRead(notification.id);
        }

        if (notification.action_url) {
            onClose();
            router.visit(notification.action_url);
        }
    };

    return (
        <div
            className={cn(
                'group relative flex items-start gap-3 py-3.5 pr-4 pl-3 transition-colors hover:bg-muted/50',
                !notification.is_read && 'bg-muted/30',
            )}
        >
            {/* Unread dot — fixed 8px column so layout never shifts */}
            <span className="flex w-2 shrink-0 items-center justify-center pt-3.5">
                <span
                    className={cn(
                        'h-2 w-2 rounded-full transition-opacity',
                        config.dot,
                        notification.is_read && 'opacity-0',
                    )}
                />
            </span>

            {/* Category icon */}
            <div
                className={cn(
                    'mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg',
                    config.bg,
                )}
            >
                <Icon className={cn('h-4 w-4', config.iconColor)} />
            </div>

            {/* Content */}
            <div className="min-w-0 flex-1">
                <div className="flex items-start justify-between gap-2">
                    <p
                        className={cn(
                            'text-sm leading-snug',
                            notification.is_read
                                ? 'font-normal text-muted-foreground'
                                : 'font-medium text-foreground',
                        )}
                    >
                        {formatNotificationTitle(notification.title)}
                    </p>
                    <span className="shrink-0 text-xs text-muted-foreground">
                        {formatRelativeTime(notification.created_at)}
                    </span>
                </div>
                <p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">
                    {notification.body}
                </p>
                {notification.action_url && notification.action_label && (
                    <button
                        type="button"
                        onClick={handleClick}
                        className="mt-1.5 text-xs font-medium text-primary underline-offset-2 hover:underline"
                    >
                        {notification.action_label} →
                    </button>
                )}
            </div>

            {/* Mark read on row click (no action button) */}
            {!notification.action_url && !notification.is_read && (
                <button
                    type="button"
                    aria-label="Mark as read"
                    onClick={() => {
 onMarkRead(notification.id);
}}
                    className="absolute inset-0 opacity-0"
                />
            )}
        </div>
    );
}