import { cn } from '@/lib/utils';
import type {
    AdminNotification,
    NotificationIconType,
    NotificationSeverity,
} from '@/types/admin';
import { Link } from '@inertiajs/react';
import {
    AlertCircle,
    ArrowRight,
    Building2,
    Clock,
    Info,
    ShieldAlert,
    X,
} from 'lucide-react';

const severityBorder: Record<NotificationSeverity, string> = {
    critical: 'border-l-destructive',
    warning: 'border-l-yellow-500',
    success: 'border-l-green-500',
    info: 'border-l-muted-foreground/40',
};

const severityIconBg: Record<NotificationSeverity, string> = {
    critical: 'bg-destructive/10 text-destructive',
    warning: 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-400',
    success: 'bg-green-500/10 text-green-600 dark:text-green-400',
    info: 'bg-muted text-muted-foreground',
};

const iconMap: Record<NotificationIconType, React.ElementType> = {
    tenant_created: Building2,
    trial_ending: Clock,
    tenant_suspended: AlertCircle,
    audit_critical: ShieldAlert,
};

function timeAgo(dateStr: string): string {
    const diff = Date.now() - new Date(dateStr).getTime();
    const mins = Math.floor(diff / 60_000);
    if (mins < 1) return 'just now';
    if (mins < 60) return `${mins}m ago`;
    const hrs = Math.floor(mins / 60);
    if (hrs < 24) return `${hrs}h ago`;
    const days = Math.floor(hrs / 24);
    return `${days}d ago`;
}

export function NotificationItem({
    notification,
    onDismiss,
}: {
    notification: AdminNotification;
    onDismiss: (id: string) => void;
}) {
    const { data, read_at, created_at } = notification;
    const isUnread = !read_at;
    const Icon = iconMap[data.icon_type] ?? Info;

    return (
        <div
            className={cn(
                'group relative flex items-start gap-3 rounded-r-xl border-l-2 px-4 py-3 transition-colors',
                severityBorder[data.severity],
                isUnread
                    ? 'bg-primary/5 dark:bg-primary/10'
                    : 'hover:bg-muted/40',
            )}
        >
            <div
                className={cn(
                    'mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg',
                    severityIconBg[data.severity],
                )}
            >
                <Icon className="h-3.5 w-3.5" />
            </div>

            <div className="min-w-0 flex-1">
                <p
                    className={cn(
                        'text-sm leading-snug',
                        isUnread
                            ? 'text-foreground font-semibold'
                            : 'text-foreground/80 font-medium',
                    )}
                >
                    {data.title}
                </p>
                <p className="text-muted-foreground mt-0.5 text-xs leading-relaxed">
                    {data.body}
                </p>
                <div className="mt-2 flex items-center gap-3">
                    <Link
                        href={data.action_url}
                        className="text-primary hover:text-primary/80 flex items-center gap-1 text-xs font-medium transition-colors"
                    >
                        View <ArrowRight className="h-3 w-3" />
                    </Link>
                    <span className="text-muted-foreground dark:text-muted-foreground/60 text-xs">
                        {timeAgo(created_at)}
                    </span>
                </div>
            </div>

            <button
                onClick={() => onDismiss(notification.id)}
                className="text-muted-foreground dark:text-muted-foreground/50 hover:text-muted-foreground absolute top-2 right-2 rounded p-0.5 opacity-0 transition-opacity group-hover:opacity-100"
                aria-label="Dismiss"
            >
                <X className="h-3.5 w-3.5" />
            </button>
        </div>
    );
}