import {useRef} from 'react';
import {Link} from 'react-router-dom';
import {useTranslation} from 'react-i18next';
import {Coins, LockKeyhole} from 'lucide-react';
import {toast} from 'sonner';

import {Badge} from '@/components/ui/badge';
import {Button} from '@/components/ui/button';
import {Card} from '@/components/ui/card';
import {Skeleton} from '@/components/ui/skeleton';
import {cn} from '@/lib/utils';
import EffectBackground from '../components/EffectBackground.jsx';
import FitText from '../components/FitText.jsx';
import PageContainer from '../components/PageContainer.jsx';
import {StatCount, StatDrillProvider, useDrillTarget} from '../components/stats/StatDrill.jsx';
import {usePreferences} from '../context/PreferencesContext.jsx';
import useInView from '../hooks/useInView.js';
import {formatDate, formatDay} from '../utils/format.js';
import {buyItem, equipItem, LOOKS, SLOTS} from '../utils/rewards.js';

const GAME_KINDS = ['STARTED', 'FINISHED', 'FINISHED_MANUAL', 'FINISHED_EARLY', 'FINISHED_TOPUP', 'COMPLETED'];
const HOW_TO = ['STARTED', 'FINISHED', 'PROOF', 'COMPLETED', 'FINISHED_MANUAL', 'ONCE', 'PLAYSTATION', 'HIDDEN', 'CHECKED', 'MONTH',
    'STREAK', 'STARTER', 'UNLOCK'];

export default function PointsPage() {
    const {t, i18n} = useTranslation();
    const {wallet, reloadWallet} = usePreferences();

    if (!wallet) {
        return (
            <PageContainer className="p-4 md:p-8 space-y-6">
                <Skeleton className="h-24 rounded-xl"/>
                <Skeleton className="h-64 rounded-xl"/>
            </PageContainer>
        );
    }

    const act = async (send) => {
        try {
            const response = await send();
            if (response.ok) {
                await reloadWallet();
            } else if (response.status === 409) {
                const body = await response.json().catch(() => null);
                if (body?.code === 'NOT_ENOUGH_POINTS') toast.error(t('POINTS.ERROR_NOT_ENOUGH'));
                await reloadWallet();
            } else if (response.status !== 401) {
                toast.error(t('SETTINGS.ERROR_SAVE'));
            }
        } catch (err) {
            console.error('Points save error:', err);
            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
        }
    };

    const entryLabel = (entry) => {
        if (GAME_KINDS.includes(entry.kind)) {
            return (
                <Link to={`/library/${entry.ref}`} className="block min-w-0 max-w-full font-medium text-primary hover:underline">
                    <FitText text={entry.gameName ?? entry.ref}/>
                </Link>
            );
        }
        if (['BUY', 'UNLOCK'].includes(entry.kind)) return t(`POINTS.ITEMS.${entry.ref}`);
        if (['MONTH', 'STREAK'].includes(entry.kind)) {
            return (
                <StatCount params={{kind: entry.kind, ref: entry.ref}} title={`${t(`POINTS.KINDS.${entry.kind}`)} ${entry.ref}`}>
                    {entry.ref}
                </StatCount>
            );
        }
        return null;
    };

    const earlySince = wallet.earlySince && formatDay(wallet.earlySince, i18n.language, {dateStyle: 'medium'});

    return (
        <StatDrillProvider source="points">
            <PageContainer className="p-4 md:p-8 space-y-6">
                <div>
                    <h1 className="text-3xl font-bold tracking-tight">{t('POINTS.TITLE')}</h1>
                    <p className="mt-2 flex items-center gap-2 text-lg">
                        <Coins className="size-5 text-primary"/>
                        {t('POINTS.BALANCE')}: <span className="font-bold tabular-nums">{wallet.balance}</span>
                    </p>
                </div>

                <Card className="gap-2 p-5">
                    <h2 className="font-semibold">{t('POINTS.HOW_TO')}</h2>
                    <ul className="list-disc space-y-1 pl-5 text-sm text-muted-foreground">
                        {HOW_TO.map((kind) => <li key={kind}>{t(`POINTS.RULES.${kind}`, {date: earlySince})}</li>)}
                    </ul>
                </Card>

                <section className="space-y-4">
                    <h2 className="text-xl font-semibold">{t('POINTS.SHOP')}</h2>
                    {SLOTS.map((slot) => (
                        <Card key={slot} className="gap-3 p-5">
                            <h3 className="font-medium">{t(`POINTS.SLOTS.${slot}`)}</h3>
                            <ul className="divide-y">
                                {wallet.catalog.filter((item) => item.slot === slot).map((item) => {
                                    const owned = wallet.owned.includes(item.code);
                                    const worn = wallet.equipped[slot] === item.code;
                                    const locked = !owned && item.track;
                                    return (
                                        <li key={item.code} className="flex items-center gap-3 py-3">
                                            <Preview code={item.code}/>
                                            <span className="min-w-0 flex-1 truncate font-medium">{t(`POINTS.ITEMS.${item.code}`)}</span>
                                            {worn && <Badge variant="secondary">{t('POINTS.EQUIPPED')}</Badge>}
                                            {owned ? (
                                                <Button size="sm" variant="outline"
                                                        onClick={() => act(() => equipItem(slot, worn ? null : item.code))}>
                                                    {t(worn ? 'POINTS.UNEQUIP' : 'POINTS.EQUIP')}
                                                </Button>
                                            ) : locked ? (
                                                <LockedProgress item={item} progress={wallet.progress?.[item.track] ?? 0}/>
                                            ) : (
                                                <>
                                                    <span className="text-sm tabular-nums text-muted-foreground">{item.price}</span>
                                                    <Button size="sm" disabled={wallet.balance < item.price}
                                                            onClick={() => act(() => buyItem(item.code))}>
                                                        {t('POINTS.BUY')}
                                                    </Button>
                                                </>
                                            )}
                                        </li>
                                    );
                                })}
                            </ul>
                        </Card>
                    ))}
                </section>

                <Card className="gap-3 p-5">
                    <h2 className="text-xl font-semibold">{t('POINTS.HISTORY')}</h2>
                    {wallet.history.length === 0 ? (
                        <p className="text-sm text-muted-foreground">{t('POINTS.EMPTY_HISTORY')}</p>
                    ) : (
                        <ul className="divide-y">
                            {wallet.history.map((entry) => {
                                const label = entryLabel(entry);
                                return (
                                    <li key={`${entry.kind}-${entry.ref}-${entry.eventAt}`} className="@container flex items-center gap-3 py-2 text-sm">
                                        <span className="w-24 shrink-0 text-muted-foreground tabular-nums">
                                            {formatDate(entry.eventAt, i18n.language)}
                                        </span>
                                        <span className="flex min-w-0 flex-1 gap-1">
                                            <span className="min-w-0 truncate">{t(`POINTS.KINDS.${entry.kind}`)}</span>
                                            {label && <span className="min-w-0 truncate">{label}</span>}
                                        </span>
                                        {entry.points !== 0 && (
                                            <span className={cn('font-semibold tabular-nums', entry.points < 0 && 'text-muted-foreground')}>
                                                {entry.points > 0 ? `+${entry.points}` : entry.points}
                                            </span>
                                        )}
                                    </li>
                                );
                            })}
                        </ul>
                    )}
                </Card>
            </PageContainer>
        </StatDrillProvider>
    );
}

// A sample of the look: a ring on a circle, a pill with the badge icon, a color dot, a framed box, a tile with its
// effect or a box with the animated background.
function Preview({code}) {
    const look = LOOKS[code];
    const ref = useRef(null);
    // The shop shows 20 animated previews at once; the ones off screen hold their frame.
    const inView = useInView(ref, !!(look?.cover || look?.effect));
    if (!look) return null;
    if (look.Icon) {
        return <span className={cn('flex size-8 items-center justify-center rounded-full', look.className)}><look.Icon className="size-4"/></span>;
    }
    if (look.skin) {
        return (
            <span data-skin={look.skin}
                  className="skin-bg bg-scroll flex size-8 shrink-0 items-center justify-center rounded-[var(--radius)] border bg-background">
                <span className="size-3 rounded-full bg-primary"/>
            </span>
        );
    }
    if (look.accent) {
        return <span data-accent={look.accent} className="size-8 rounded-full bg-primary"/>;
    }
    if (look.cover) {
        return <span ref={ref} className={cn('relative h-8 w-14 shrink-0 overflow-hidden rounded-md bg-muted', look.cover, !inView && 'fx-paused')}/>;
    }
    if (look.effect) {
        return (
            <span ref={ref} className={cn('relative h-8 w-14 shrink-0 overflow-hidden rounded-md bg-background', !inView && 'fx-paused')}>
                <EffectBackground effect={look.effect} parallax={false} className="absolute inset-0"/>
            </span>
        );
    }
    return <span className={cn('size-8 shrink-0 bg-muted', look.className, code.startsWith('BORDER') ? 'rounded-full' : 'rounded-md')}/>;
}

// An unlock-only item that is not earned yet: the lock, the progress as text and as a bar. Never a price or a Buy button.
function LockedProgress({item, progress}) {
    const {t} = useTranslation();
    const count = Math.min(progress, item.target);
    const text = t(`POINTS.PROGRESS.${item.track}`, {count, target: item.target});
    // Playtime months compare two numbers: no list of games shows them.
    const target = useDrillTarget({
        params: item.track === 'PLAY_MORE_MONTHS' ? null : {track: item.track}, title: t(`POINTS.ITEMS.${item.code}`), count,
    });
    const className = 'flex w-40 shrink-0 flex-col gap-1 text-xs text-muted-foreground';
    const Wrapper = target ? 'button' : 'div';
    return (
        <Wrapper {...(target && {type: 'button', onClick: target.onClick})}
                 className={cn(className, target && 'min-h-11 text-left hover:text-primary focus-visible:ring-2 focus-visible:ring-ring rounded-sm')}>
            <span className="flex items-center gap-1">
                <LockKeyhole className="size-3 shrink-0"/>
                <span title={text}>{text}</span>
            </span>
            <div role="progressbar" aria-label={t('POINTS.LOCKED')} aria-valuemin={0} aria-valuenow={count}
                 aria-valuemax={item.target} className="h-1.5 overflow-hidden rounded-full bg-muted">
                <div className="h-full bg-primary" style={{width: `${(count / item.target) * 100}%`}}/>
            </div>
        </Wrapper>
    );
}