HexUnlockedWeb/app/dlcs/page.tsx

'use client';

import { useState, useEffect, useMemo } from 'react';
import { useInventoryStore } from '@/store/useInventoryStore';
import shared from '../../styles/shared.module.css';
import styles from '../../styles/Dlcs.module.css';
import { PlatformFilter, isOnSteam, isOnEpic, isOnXbox, matchesPlatform, } from './types';
import { DLC, isNamedDLC } from '@/lib/utils';

const PLATFORM_FILTER_LABELS: Record<PlatformFilter, string> = { all: 'All', steam: 'Steam', epic: 'Epic', xbox: 'Xbox' };

export default function DlcsPage() {
    const store = useInventoryStore();

    const [allDlcs, setAllDlcs] = useState<DLC[]>([]);
    const [search, setSearch] = useState('');
    const [platformFilter, setPlatformFilter] = useState<PlatformFilter>('all');
    const [statusFilter, setStatusFilter] = useState<'all' | 'unlocked' | 'locked'>('all');

    useEffect(() => {
        fetch('/data/dlcs.json')
            .then(r => r.json())
            .then((data: DLC[]) => setAllDlcs(data.filter(isNamedDLC)))
            .catch(() => []);
    }, []);

    const filtered = useMemo(() => {
        return allDlcs.filter(dlc => {
            if (!matchesPlatform(dlc, platformFilter)) return false;
            if (search.trim() && !dlc.name!.toLowerCase().includes(search.toLowerCase())) return false;
            if (statusFilter === 'unlocked' && !store.unlockedDLCs.includes(dlc.id)) return false;
            if (statusFilter === 'locked' && store.unlockedDLCs.includes(dlc.id)) return false;
            return true;
        });
    }, [allDlcs, search, platformFilter, statusFilter, store.unlockedDLCs]);

    const handleToggle = (id: string) => store.toggleItem(id, 'dlcs');

    const handleUnlockShown = () => {
        const ids = filtered.map(d => d.id);
        const merged = Array.from(new Set([...store.unlockedDLCs, ...ids]));
        store.unlockAllInCategory('dlcs', merged);
    };

    const handleLockShown = () => {
        const ids = new Set(filtered.map(d => d.id));
        const remaining = store.unlockedDLCs.filter(id => !ids.has(id));
        store.unlockAllInCategory('dlcs', remaining);
    };

    const handleUnlockAll = () => {
        store.unlockAllInCategory('dlcs', allDlcs.map(d => d.id));
    };

    return (
        <div className={shared.container}>
            <header className={shared.header}>
                <div>
                    <h1 className={shared.title}>DLCs</h1>
                    <p className={shared.subtitle}>
                        {store.unlockedDLCs.length} of {allDlcs.length || '-'} dlcs unlocked
                    </p>
                </div>
                <div style={{ display: 'flex', gap: '0.75rem' }}>
                    <button className={shared.unlockAllBtn} onClick={handleUnlockAll}>
                        Unlock All ({allDlcs.length})
                    </button>
                    <button className={shared.clearBtn} onClick={() => store.clearCategory('dlcs')}>
                        Clear All
                    </button>
                </div>
            </header>

            <div className={shared.toolbar}>
                <input
                    className={shared.searchInput}
                    type="text"
                    placeholder="Search DLCs..."
                    value={search}
                    onChange={e => setSearch(e.target.value)}
                />

                <div className={shared.roleFilter}>
                    {(Object.keys(PLATFORM_FILTER_LABELS) as PlatformFilter[]).map(p => (
                        <button
                            key={p}
                            className={`${shared.roleBtn} ${platformFilter === p ? shared.roleBtnActive : ''}`}
                            onClick={() => setPlatformFilter(p)}
                        >
                            {PLATFORM_FILTER_LABELS[p]}
                        </button>
                    ))}
                </div>

                <div className={shared.roleFilter}>
                    {(['all', 'unlocked', 'locked'] as const).map(s => (
                        <button
                            key={s}
                            className={`${shared.roleBtn} ${statusFilter === s ? shared.roleBtnActive : ''}`}
                            onClick={() => setStatusFilter(s)}
                        >
                            {s}
                        </button>
                    ))}
                </div>

                <span className={shared.spacer} />
                <span className={shared.resultCount}>{filtered.length} shown</span>

                <button className={shared.unlockAllBtn} onClick={handleUnlockShown}>
                    Unlock Shown
                </button>
                <button className={shared.lockAllBtn} onClick={handleLockShown}>
                    Lock Shown
                </button>
            </div>

            {filtered.length === 0 ? (
                <div className={shared.empty}>No DLCs match</div>
            ) : (
                <div className={styles.grid}>
                    {filtered.map(dlc => {
                        const unlocked = store.unlockedDLCs.includes(dlc.id);
                        return (
                            <div
                                key={dlc.id}
                                className={`${styles.card} ${unlocked ? styles.cardUnlocked : ''}`}
                                onClick={() => handleToggle(dlc.id)}
                            >
                                <span className={styles.cardName}>{dlc.name}</span>
                                <div className={styles.platforms}>
                                    <span className={`${styles.badge} ${isOnSteam(dlc) ? styles.badgeSteam : styles.badgeOff}`}>ST</span>
                                    <span className={`${styles.badge} ${isOnEpic(dlc) ? styles.badgeEpic : styles.badgeOff}`}>EP</span>
                                    <span className={`${styles.badge} ${isOnXbox(dlc) ? styles.badgeXbox : styles.badgeOff}`}>XB</span>
                                </div>
                            </div>
                        );
                    })}
                </div>
            )}
        </div>
    );
}