import { ListTodo, Globe, ChevronRight, Check } from 'lucide-react';
import { motion } from 'framer-motion';
import { GlassCard } from '../shared/GlassCard';
import { CardIcon } from '../shared/CardIcon';
import { useRecommendations } from '../../hooks/useRecommendations';
import type { RecommendationItem } from '../../lib/api';

interface RecommendedActionsCardProps {
    className?: string;
    delay?: number;
}

function ActionRow({ item, index, delay }: { item: RecommendationItem; index: number; delay: number }) {
    const rowClass = `flex w-full items-center gap-4 rounded-lg border px-4 py-3.5 text-left transition-colors ${
        item.done
            ? 'border-[rgba(104,243,73,0.2)] bg-[rgba(104,243,73,0.03)] cursor-default'
            : 'border-white/[0.1] bg-white/[0.03] cursor-pointer hover:bg-white/[0.06]'
    }`;

    const inner = (
        <>
            <div className={`flex size-[18px] shrink-0 items-center justify-center rounded-[13px] border ${
                item.done ? 'border-[#68f349] bg-[#68f349]' : 'border-white/[0.1] bg-white/[0.07]'
            }`}>
                {item.done ? <Check className="size-3 text-black" /> : null}
            </div>
            <div className="flex size-[35px] shrink-0 items-center justify-center rounded-[13px] border border-white/[0.1] bg-white/[0.07]">
                <Globe className="size-5 text-white" />
            </div>
            <div className="flex-1 min-w-0">
                <p className={`text-[16px] font-medium tracking-[-0.32px] ${item.done ? 'text-white/50 line-through' : 'text-white'}`}>
                    {item.label}
                </p>
                <p className="text-[14px] text-white/70 tracking-[-0.28px]">
                    {item.description}
                </p>
            </div>
            <ChevronRight className="size-5 text-white/50 shrink-0" />
        </>
    );

    const motionProps = {
        initial: { opacity: 0, y: 10 },
        animate: { opacity: 1, y: 0 },
        transition: { duration: 0.3, delay: delay + 0.4 + index * 0.05 },
        className: rowClass,
    };

    if (item.done) {
        return (
            <motion.div key={item.key} {...motionProps}>
                {inner}
            </motion.div>
        );
    }

    return (
        <motion.a
            key={item.key}
            href={item.url}
            target={item.external ? '_blank' : '_self'}
            rel={item.external ? 'noopener noreferrer' : undefined}
            {...motionProps}
        >
            {inner}
        </motion.a>
    );
}

export function RecommendedActionsCard({ className = '', delay = 0 }: RecommendedActionsCardProps) {
    const { items, completed, total, loading } = useRecommendations();
    const progress = total > 0 ? (completed / total) * 100 : 0;

    return (
        <GlassCard className={`p-5 ${className}`} delay={delay}>
            <div className="flex items-start gap-3 mb-2">
                <CardIcon icon={ListTodo} />
                <div className="min-w-0 flex-1">
                    <h3 className="text-[16px] font-medium text-white tracking-[-0.32px]">
                        What should you do next?
                    </h3>
                    <p className="text-[14px] text-white/70 mt-1 tracking-[-0.28px]">
                        Based on your current performance, here are recommended actions
                    </p>
                </div>
            </div>

            <div className="flex items-center gap-3 mb-5 mt-3">
                <div className="relative h-[7px] flex-1 rounded-full bg-white/20 overflow-hidden">
                    <motion.div
                        initial={{ width: 0 }}
                        animate={{ width: `${progress}%` }}
                        transition={{ duration: 1, delay: delay + 0.3, ease: 'easeOut' }}
                        className="absolute inset-y-0 left-0 rounded-full bg-gradient-to-r from-[#fe6e6e] to-[#f3e249]"
                    />
                </div>
                <span className="text-[13px] font-medium text-white whitespace-nowrap tracking-[0.13px]">
                    {loading ? '...' : `${completed} /${total} Completed`}
                </span>
            </div>

            {loading ? (
                <div className="flex items-center justify-center py-8">
                    <div className="animate-spin rounded-full h-6 w-6 border-2 border-white/20 border-t-white/60" />
                </div>
            ) : (
                <div className="space-y-2">
                    {items.map((item, i) => (
                        <ActionRow key={item.key} item={item} index={i} delay={delay} />
                    ))}
                </div>
            )}
        </GlassCard>
    );
}