import { useCurrency } from '@/hooks/useCurrency';
import { cn } from '@/lib/utils';
import { Link } from '@inertiajs/react';
import { motion } from 'framer-motion';
import { Sparkles } from 'lucide-react';
import FadeUp from './FadeUp';
import { presentation, type DbPlan } from './plan-data';

export default function PlanCards({
    plans,
    yearly,
}: {
    plans: DbPlan[];
    yearly: boolean;
}) {
    const { format } = useCurrency();

    const priceParts = (plan: DbPlan): { price: string; sub: string } => {
        const custom = presentation(plan.slug).customPrice;
        if (custom) return custom;
        if (plan.price_monthly === 0) {
            return plan.trial_days > 0
                ? {
                      price: `${plan.trial_days} days free`,
                      sub: 'No credit card required',
                  }
                : { price: 'Free', sub: '' };
        }
        return yearly
            ? { price: format(plan.price_yearly), sub: '/year' }
            : { price: format(plan.price_monthly), sub: '/month' };
    };

    return (
        <section className="pt-4 pb-24">
            <div className="pf-container">
                <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
                    {plans.map((plan, i) => {
                        const look = presentation(plan.slug);
                        const { price, sub } = priceParts(plan);
                        return (
                            <FadeUp key={plan.slug} delay={i * 0.08}>
                                <motion.div
                                    whileHover={{ y: -6, scale: 1.01 }}
                                    transition={{
                                        duration: 0.25,
                                        ease: [0.34, 1.06, 0.64, 1],
                                    }}
                                    className={cn(
                                        'relative flex h-full flex-col p-6',
                                        look.highlight
                                            ? 'pf-card-featured'
                                            : 'pf-card',
                                    )}
                                >
                                    {look.highlight && (
                                        <div
                                            className="absolute inset-x-0 -top-px h-px rounded-t-[1.25rem]"
                                            style={{
                                                background:
                                                    'linear-gradient(90deg,transparent,hsl(var(--primary)),transparent)',
                                            }}
                                        />
                                    )}
                                    {look.badge && (
                                        <span className="border-primary/25 bg-primary/10 text-primary absolute -top-3.5 left-1/2 flex -translate-x-1/2 items-center gap-1.5 rounded-full border px-4 py-1 text-[10px] font-bold whitespace-nowrap">
                                            <Sparkles className="h-2.5 w-2.5" />
                                            {look.badge}
                                        </span>
                                    )}
                                    <p className="text-muted-foreground mb-2 text-[10px] font-bold tracking-widest uppercase">
                                        {plan.name}
                                    </p>
                                    <div className="mb-1">
                                        <span
                                            className={cn(
                                                'pf-display text-2xl font-bold tabular-nums',
                                                look.highlight
                                                    ? 'text-primary'
                                                    : 'text-foreground',
                                            )}
                                        >
                                            {price}
                                        </span>
                                    </div>
                                    <p className="text-muted-foreground mb-3 text-xs">
                                        {sub}
                                    </p>
                                    <p className="text-muted-foreground mb-6 flex-1 text-sm leading-relaxed">
                                        {plan.description}
                                    </p>
                                    <Link
                                        href={look.ctaHref}
                                        className={cn(
                                            'mt-auto inline-flex w-full items-center justify-center gap-2 py-2.5 text-sm font-semibold transition-all',
                                            look.highlight
                                                ? 'pf-btn'
                                                : 'pf-btn-ghost',
                                        )}
                                    >
                                        {look.cta}
                                    </Link>
                                </motion.div>
                            </FadeUp>
                        );
                    })}
                </div>
            </div>
        </section>
    );
}