import { cn } from '@/lib/utils';
import { router } from '@inertiajs/react';
import { Bookmark, CheckCircle2, Gamepad2 } from 'lucide-react';

export const STATUSES = [
    { value: 'wishlist', label: 'Want to play', icon: Bookmark },
    { value: 'playing', label: 'Playing', icon: Gamepad2 },
    { value: 'played', label: 'Played', icon: CheckCircle2 },
] as const;

export type Status = (typeof STATUSES)[number]['value'];

export default function StatusPicker({ slug, status, authed, layout = 'stack' }: { slug: string; status: Status | null; authed: boolean; layout?: 'stack' | 'row' }) {
    const set = (next: Status) => {
        if (!authed) return router.visit(route('login'));
        if (next === status) {
            router.delete(route('games.library.destroy', slug), { preserveScroll: true });
        } else {
            router.put(route('games.library.store', slug), { status: next }, { preserveScroll: true });
        }
    };

    return (
        <div role="group" aria-label="Play status" className="grid grid-cols-3 gap-1 rounded-xl border border-border bg-card/60 p-1">
            {STATUSES.map(({ value, label, icon: Icon }) => {
                const active = status === value;
                return (
                    <button
                        key={value}
                        type="button"
                        aria-pressed={active}
                        onClick={() => set(value)}
                        className={cn(
                            'flex items-center justify-center rounded-lg text-xs font-medium transition',
                            layout === 'stack' ? 'flex-col gap-1 px-2 py-2.5' : 'gap-2 px-3 py-2 text-sm',
                            active ? 'bg-primary text-primary-foreground shadow-sm' : 'text-muted-foreground hover:bg-accent hover:text-foreground',
                        )}
                    >
                        <Icon className="size-4" />
                        {label}
                    </button>
                );
            })}
        </div>
    );
}