import { TrendingUp, Trophy } from 'lucide-react';
import { motion } from 'framer-motion';
import { GlassCard } from '../shared/GlassCard';
import { CardIcon } from '../shared/CardIcon';

interface WinItem {
    id: string;
    label: string;
    delta: string;
}

interface WinsCardProps {
    totalVisits: number;
    trend: number;
    estimatedHumanReach: number;
    className?: string;
    delay?: number;
}

function formatCount(n: number): string {
    if (n >= 1000) return `+${(n / 1000).toFixed(1)}k`;
    return `+${n}`;
}

export function WinsCard({ totalVisits, trend, estimatedHumanReach, className = '', delay = 0 }: WinsCardProps) {
    const items: WinItem[] = [];
    if (totalVisits > 0) items.push({ id: 'visits', label: 'Crawler visits', delta: formatCount(totalVisits) });
    if (trend > 0) items.push({ id: 'trend', label: 'Visibility improvement', delta: `+${trend}%` });
    if (estimatedHumanReach > 0) items.push({ id: 'reach', label: 'Est. human reach', delta: formatCount(estimatedHumanReach) });

    return (
        <GlassCard className={`flex min-h-0 flex-col p-5 ${className}`} delay={delay}>
            <div className="mb-4 flex shrink-0 items-center gap-3">
                <CardIcon icon={Trophy} />
                <h3 className="text-[16px] font-medium text-white tracking-[-0.32px]">
                    Wins this week!
                </h3>
            </div>

            <div className="flex w-full min-h-0 flex-col rounded-xl border border-white/[0.1] bg-white/[0.02] p-1 sm:p-2">
                {items.length === 0 ? (
                    <div className="flex flex-col items-center gap-2 rounded-lg border border-amber-400/10 bg-amber-500/[0.03] px-4 py-6 text-center">
                        <span className="text-[14px] text-amber-100/60 tracking-[-0.28px]">
                            Your wins are loading. Keep optimizing!
                        </span>
                        <span className="text-[12px] text-amber-100/40 tracking-[-0.24px]">
                            Every widget you improve gets you closer to your first win.
                        </span>
                    </div>
                ) : (
                    <ul className="flex list-none flex-col divide-y divide-white/[0.08]">
                        {items.map((item, i) => (
                            <li key={item.id} className="min-w-0">
                                <motion.div
                                    initial={{ opacity: 0, y: 6 }}
                                    animate={{ opacity: 1, y: 0 }}
                                    transition={{ duration: 0.35, delay: delay + 0.2 + i * 0.12 }}
                                    className="flex min-w-0 items-start gap-3 px-3 py-3.5 sm:items-center sm:px-4 sm:py-4"
                                >
                                    <div className="flex size-[35px] shrink-0 items-center justify-center rounded-[13px] border border-white/[0.1] bg-white/[0.07]">
                                        <TrendingUp className="size-5 text-[#68f349]" />
                                    </div>
                                    <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
                                        <span className="text-[16px] font-medium text-[#68f349] tracking-[-0.32px]">
                                            {item.delta}
                                        </span>
                                        <span className="text-[14px] text-white tracking-[-0.28px]">
                                            {item.label}
                                        </span>
                                    </div>
                                </motion.div>
                            </li>
                        ))}
                    </ul>
                )}
            </div>
        </GlassCard>
    );
}