'use client';

import shared from '../../styles/shared.module.css';
import styles from '../../styles/Customizations.module.css';
import { CustomizationItem, Tab, getCosmeticIconUrl } from './types';

type Props = {
    tab: Tab;
    allFilteredItems: CustomizationItem[];
    pagedItems: CustomizationItem[];
    page: number;
    totalPages: number;
    search: string;
    unlockedSet: Set<string>;
    characterMap: Map<number, string>;
    onSearchChange: (s: string) => void;
    onUnlockAll: () => void;
    onLockAll: () => void;
    onUnlockPage: () => void;
    onLockPage: () => void;
    onToggle: (id: string) => void;
    onPageChange: (p: number) => void;
};

export default function FlatCategory({
    tab,
    allFilteredItems,
    pagedItems,
    page,
    totalPages,
    search,
    unlockedSet,
    characterMap,
    onSearchChange,
    onUnlockAll,
    onLockAll,
    onUnlockPage,
    onLockPage,
    onToggle,
    onPageChange,
}: Props) {
    const buildPageNumbers = () => {
        const pages: number[] = [];
        const start = Math.max(1, Math.min(page - 2, totalPages - 4));
        const end = Math.min(totalPages, start + 4);
        for (let i = start; i <= end; i++) pages.push(i);
        return pages;
    };

    return (
        <>
            <div className={shared.toolbar}>
                <input
                    className={shared.searchInput}
                    type="text"
                    placeholder={`Search ${tab}...`}
                    value={search}
                    onChange={e => onSearchChange(e.target.value)}
                />
                <span className={shared.spacer} />
                <span className={shared.resultCount}>{allFilteredItems.length} items</span>
                <button className={shared.unlockAllBtn} onClick={onUnlockAll}>
                    Unlock all ({allFilteredItems.length})
                </button>
                <button className={shared.lockAllBtn} onClick={onLockAll}>
                    Lock all
                </button>
                <button className={styles.pageActionBtn} onClick={onUnlockPage}>
                    Unlock visible
                </button>
                <button className={styles.pageActionBtn} onClick={onLockPage}>
                    Lock visible
                </button>
            </div>

            {allFilteredItems.length === 0 ? (
                <div className={shared.empty}>No items found</div>
            ) : (
                <>
                    <div className={styles.grid}>
                        {pagedItems.map(item => {
                            const unlocked = unlockedSet.has(item.id);
                            return (
                                <div
                                    key={item.id}
                                    className={`${shared.card} ${unlocked ? shared.cardUnlocked : ''}`}
                                    onClick={() => onToggle(item.id)}
                                >
                                    <img
                                        className={shared.cardIcon}
                                        src={getCosmeticIconUrl(item, characterMap)}
                                        alt={item.name}
                                        loading="lazy"
                                    />
                                    <span className={shared.cardName}>{item.name}</span>
                                </div>
                            );
                        })}
                    </div>

                    {totalPages > 1 && (
                        <div className={shared.pagination}>
                            <button
                                className={`${shared.pageBtn} ${page === 1 ? shared.pageBtnDisabled : ''}`}
                                onClick={() => onPageChange(1)}
                            >«</button>
                            <button
                                className={`${shared.pageBtn} ${page === 1 ? shared.pageBtnDisabled : ''}`}
                                onClick={() => onPageChange(page - 1)}
                            >‹</button>

                            {buildPageNumbers().map(n => (
                                <button
                                    key={n}
                                    className={`${shared.pageBtn} ${n === page ? shared.pageBtnActive : ''}`}
                                    onClick={() => onPageChange(n)}
                                >{n}</button>
                            ))}

                            <button
                                className={`${shared.pageBtn} ${page === totalPages ? shared.pageBtnDisabled : ''}`}
                                onClick={() => onPageChange(page + 1)}
                            >›</button>
                            <button
                                className={`${shared.pageBtn} ${page === totalPages ? shared.pageBtnDisabled : ''}`}
                                onClick={() => onPageChange(totalPages)}
                            >»</button>

                            <span className={shared.pageInfo}>{page} / {totalPages}</span>
                        </div>
                    )}
                </>
            )}
        </>
    );
}