import { Badge } from '@/Components/ui/badge';
import { ease, fadeUp } from '@/lib/motion';
import { cn } from '@/lib/utils';
import { GameCard as Game } from '@/types/models';
import { Link } from '@inertiajs/react';
import { motion } from 'framer-motion';
import RatingBadge from './RatingBadge';

export type CardVariant = 'grid' | 'list' | 'featured';

function Cover({ game, className, imgClass }: { game: Game; className?: string; imgClass?: string }) {
    return (
        <div className={cn('relative overflow-hidden bg-gradient-to-br from-secondary to-muted', className)}>
            {game.cover ? (
                <img src={game.cover} alt="" loading="lazy" className={cn('size-full object-cover transition duration-700 ease-out group-hover:scale-[1.04]', imgClass)} />
            ) : (
                <div className="flex size-full items-end p-4 text-h3 text-foreground/70">{game.title}</div>
            )}
            <div className="pointer-events-none absolute inset-0 rounded-[inherit] ring-1 ring-inset ring-white/5" />
        </div>
    );
}

const meta = (g: Game) => [g.genres?.map((x) => x.name).slice(0, 2).join(' · '), g.release_date?.slice(0, 4)].filter(Boolean).join(' · ');

export default function GameCard({ game, variant = 'grid', caption }: { game: Game; variant?: CardVariant; caption?: string }) {
    const href = route('games.show', game.slug);

    if (variant === 'list') {
        return (
            <motion.div variants={fadeUp}>
                <Link href={href} className="group flex gap-4 rounded-xl border border-border bg-card/60 p-3 transition duration-200 hover:border-foreground/15 hover:bg-card hover:shadow-soft">
                    <Cover game={game} className="aspect-[3/4] w-20 shrink-0 rounded-lg sm:w-24" />
                    <div className="flex min-w-0 flex-1 flex-col py-0.5">
                        <div className="flex items-start justify-between gap-3">
                            <h3 className="text-h3 truncate">{game.title}</h3>
                            <RatingBadge value={game.rating_avg} glass={false} />
                        </div>
                        <p className="text-caption mt-0.5">{meta(game)}</p>
                        {game.summary && <p className="mt-2 line-clamp-2 text-sm text-muted-foreground">{game.summary}</p>}
                        <div className="mt-auto flex gap-1.5 pt-2">
                            {game.platforms?.slice(0, 4).map((p) => <Badge key={p.slug} variant="outline">{p.short_name}</Badge>)}
                        </div>
                    </div>
                </Link>
            </motion.div>
        );
    }

    if (variant === 'featured') {
        return (
            <motion.div variants={fadeUp} whileHover={{ y: -3 }} transition={{ duration: 0.25, ease }}>
                <Link href={href} className="group relative block aspect-[4/5] overflow-hidden rounded-2xl border border-border shadow-soft transition-shadow duration-300 hover:shadow-lift sm:aspect-[16/10]">
                    <Cover game={game} className="absolute inset-0" />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/30 to-transparent" />
                    <div className="absolute inset-x-0 bottom-0 space-y-2 p-5 text-white sm:p-6">
                        <div className="flex items-center gap-2">
                            <Badge variant="glass" className="!text-white">Featured</Badge>
                            <RatingBadge value={game.rating_avg} />
                        </div>
                        <h3 className="text-h2 sm:text-h1">{game.title}</h3>
                        {game.summary && <p className="line-clamp-2 max-w-xl text-sm text-white/75">{game.summary}</p>}
                        <p className="text-xs text-white/60">{meta(game)}</p>
                    </div>
                </Link>
            </motion.div>
        );
    }

    return (
        <motion.div variants={fadeUp} whileHover={{ y: -3 }} transition={{ duration: 0.25, ease }}>
            <Link href={href} className="group block overflow-hidden rounded-xl border border-border bg-card shadow-soft transition-[box-shadow,border-color] duration-300 hover:border-foreground/15 hover:shadow-lift">
                <div className="relative">
                    <Cover game={game} className="aspect-[3/4]" />
                    <div className="absolute right-2 top-2"><RatingBadge value={game.rating_avg} /></div>
                </div>
                <div className="space-y-0.5 p-3">
                    <h3 className="truncate text-sm font-medium">{game.title}</h3>
                    <p className="text-caption truncate">{caption ?? meta(game)}</p>
                </div>
            </Link>
        </motion.div>
    );
}