import Avatar from '@/Components/shared/Avatar';
import { ActivityEvent } from '@/types/models';
import { Link } from '@inertiajs/react';
import { Star } from 'lucide-react';
import { ReactNode, useState } from 'react';

const STATUS_TEXT = { wishlist: 'wants to play', playing: 'is playing', played: 'played' } as const;

export default function ActivityItem({ event: e, showUser = true }: { event: ActivityEvent; showUser?: boolean }) {
    const [reveal, setReveal] = useState(!e.spoilers);
    const name = e.user?.name ?? 'Someone';
    const who: ReactNode = e.user?.username ? <Link href={route('users.show', e.user.username)} className="font-medium hover:underline">{name}</Link> : <span className="font-medium">{name}</span>;
    const game = <Link href={route('games.show', e.game.slug)} className="font-medium hover:underline">{e.game.title}</Link>;

    const action: ReactNode =
        e.type === 'rating' ? <>rated {game} <span className="inline-flex items-center gap-0.5 font-medium"><Star className="size-3.5 fill-amber-400 text-amber-400" />{e.score}/10</span></>
        : e.type === 'status' ? <>{STATUS_TEXT[e.status!]} {game}</>
        : <>reviewed {game}</>;

    return (
        <article className="flex gap-3 rounded-xl border border-border bg-card/60 p-3.5 shadow-soft">
            {showUser && <Avatar name={name} src={e.user?.avatar} className="size-9 shrink-0" />}
            <div className="min-w-0 flex-1">
                <p className="text-sm leading-relaxed">{showUser && <>{who} </>}{showUser ? action : <>{action}</>}</p>
                {e.type === 'review' && (
                    <div className="mt-2 rounded-lg bg-muted/50 p-3 text-sm">
                        {e.title && <p className="font-medium">{e.title}</p>}
                        {reveal ? <p className="mt-0.5 text-muted-foreground">{e.excerpt}</p> : <button onClick={() => setReveal(true)} className="text-xs text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">Contains spoilers · show</button>}
                    </div>
                )}
                <p className="text-caption mt-1.5">{e.at}</p>
            </div>
            <Link href={route('games.show', e.game.slug)} className="h-16 w-12 shrink-0 overflow-hidden rounded-md border border-border bg-muted" aria-hidden tabIndex={-1}>{e.game.cover && <img src={e.game.cover} alt="" className="size-full object-cover" loading="lazy" />}</Link>
        </article>
    );
}