'use client';

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

type Props = {
	charName: string;
	charCosmetics: Record<number, CustomizationItem[]>;
	unlockedSet: Set<string>;
	characterMap: Map<number, string>;
	onBack: () => void;
	onUnlockAll: () => void;
	onLockAll: () => void;
	onToggle: (id: string) => void;
};

export default function CharacterCosmetics({
	charName,
	charCosmetics,
	unlockedSet,
	characterMap,
	onBack,
	onUnlockAll,
	onLockAll,
	onToggle
}: Props) {
	const allItems = Object.values(charCosmetics).flat();
	const unlockedCount = allItems.filter((i) => unlockedSet.has(i.id)).length;

	return (
		<div className={styles.cosmeticsView}>
			<div className={styles.cosmeticsHeader}>
				<button className={styles.backBtn} onClick={onBack}>
					← Back
				</button>
				<span className={styles.cosmeticsCharName}>{charName}</span>
				<span className={shared.resultCount}>
					{unlockedCount} / {allItems.length} unlocked
				</span>
				<span className={shared.spacer} />
				<button className={shared.unlockAllBtn} onClick={onUnlockAll}>
					Unlock all
				</button>
				<button className={shared.lockAllBtn} onClick={onLockAll}>
					Lock all
				</button>
			</div>

			<div className={styles.cosmeticsBody}>
				{CATEGORY_ORDER.filter((cat) => charCosmetics[cat]?.length > 0).map(
					(cat) => (
						<div key={cat} className={styles.categoryGroup}>
							<div className={styles.categoryTitle}>
								{CATEGORY_LABELS[cat] ?? `Category ${cat}`}
							</div>
							<div className={styles.gridInline}>
								{charCosmetics[cat].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>
						</div>
					)
				)}
			</div>
		</div>
	);
}