import { cn } from '@/lib/utils';
import type { ActivityItem } from '@/types/admin';
import {
    Activity,
    AlertTriangle,
    CreditCard,
    TrendingUp,
    Users,
} from 'lucide-react';

const activityMeta: Record<
    string,
    { icon: React.ComponentType<{ className?: string }>; color: string }
> = {
    signup: { icon: Users, color: 'text-emerald-400' },
    upgrade: { icon: TrendingUp, color: 'text-primary' },
    expired: { icon: AlertTriangle, color: 'text-amber-400' },
    payment: { icon: CreditCard, color: 'text-sky-400' },
    suspended: { icon: AlertTriangle, color: 'text-red-400' },
    default: { icon: Activity, color: 'text-muted-foreground' },
};

function ActivityCard({ item }: { item: ActivityItem }) {
    const meta = activityMeta[item.type] ?? activityMeta.default;
    return (
        <div className="border-border/60 bg-card/60 hover:bg-card/90 flex items-start gap-3 rounded-xl border px-4 py-3 transition-colors dark:border-white/5 dark:bg-white/5 dark:hover:bg-white/8">
            <meta.icon className={cn('mt-0.5 h-4 w-4 shrink-0', meta.color)} />
            <div className="min-w-0">
                <p className="text-foreground/85 truncate text-xs font-medium">
                    {item.text}
                </p>
                <p className="text-muted-foreground dark:text-muted-foreground/60 text-[11px]">
                    {item.time}
                </p>
            </div>
        </div>
    );
}

interface Props {
    items: ActivityItem[];
    onViewAll?: () => void;
    viewAllLabel?: string;
    viewAllHref?: string;
}

export default function ActivityFeed({
    items,
    viewAllHref = '/admin/audit',
}: Props) {
    return (
        <div className="pf-glass p-5">
            <div className="mb-4 flex items-center justify-between">
                <p className="text-foreground text-sm font-semibold">
                    Recent Activity
                </p>
                <a
                    href={viewAllHref}
                    className="text-primary text-xs font-medium underline underline-offset-2 hover:opacity-80"
                >
                    View audit log
                </a>
            </div>
            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                {items.map((item, i) => (
                    <ActivityCard key={i} item={item} />
                ))}
            </div>
        </div>
    );
}