import { Users, ArrowUp, ArrowDown } from 'lucide-react';
import { motion } from 'framer-motion';
import { GlassCard } from '../shared/GlassCard';
import { AnalyticsIconInfo } from '../shared/AnalyticsIconInfo';
import { CardIcon } from '../shared/CardIcon';
import { CardEmptyState } from '../shared/CardEmptyState';
import { StatusPill } from '../shared/StatusPill';

interface PageEntry {
    url: string;
    label: string;
    visits: number;
    trend: 'up' | 'down';
}

interface NonAIUsersCardProps {
    pages: PageEntry[];
    statusText: string;
    className?: string;
    delay?: number;
}

export function NonAIUsersCard({ pages, statusText, className = '', delay = 0 }: NonAIUsersCardProps) {
    return (
        <GlassCard className={`p-5 h-[360px] flex flex-col ${className}`} delay={delay}>
            <div className="flex items-center gap-3 mb-5">
                <AnalyticsIconInfo
                    widgetLabel="Non-AI Users"
                    content={
                        <p>
                            Traffic from visitors that are not classified as AI bots on the same top pages. Pairs with the AI bots view so you can contrast human browsing with crawler activity.
                        </p>
                    }
                >
                    <CardIcon icon={Users} />
                </AnalyticsIconInfo>
                <h3 className="text-[16px] font-medium text-white tracking-[-0.32px]">Non-AI Users</h3>
            </div>

            <div className="mb-3 flex items-center justify-between px-4">
                <span className="text-[12px] font-medium tracking-[-0.24px] text-white/50">Pages</span>
                <span className="text-[12px] font-medium tracking-[-0.24px] text-white/50">Visits</span>
            </div>

            <div className="flex-1 min-h-0 overflow-y-auto glass-scrollbar -mr-1 pr-1">
                <div className="space-y-2">
                    {pages.length === 0 ? (
                        <CardEmptyState
                            minHeight={200}
                            title="Tracking human traffic"
                            subtitle="Pages your real visitors view will be ranked here as soon as the first session lands."
                        />
                    ) : (
                        pages.map((page, i) => (
                            <motion.div
                                key={page.url}
                                initial={{ opacity: 0, x: -10 }}
                                animate={{ opacity: 1, x: 0 }}
                                transition={{ duration: 0.3, delay: Math.min(delay + 0.1 + i * 0.08, delay + 0.5) }}
                                className="flex items-center justify-between rounded-lg border border-white/[0.08] bg-white/[0.03] px-3 py-1.5"
                            >
                                <div className="flex items-center gap-2 overflow-hidden">
                                    {page.trend === 'up' ? (
                                        <ArrowUp className="size-[10px] shrink-0 text-[#68f349]" />
                                    ) : (
                                        <ArrowDown className="size-[10px] shrink-0 text-rose-400" />
                                    )}
                                    <span className="truncate text-[12px] text-white tracking-[-0.24px]">{page.label}</span>
                                </div>
                                <span className="text-[12px] font-medium tabular-nums tracking-[-0.24px] text-white/85">
                                    {page.visits >= 0 ? `+${page.visits}` : `${page.visits}`}
                                </span>
                            </motion.div>
                        ))
                    )}
                </div>
            </div>

            {statusText ? (
                <div className="mt-4">
                    <StatusPill text={statusText} variant="info" />
                </div>
            ) : null}
        </GlassCard>
    );
}