Luncher/client/src/components/EaterBadge.tsx

import { useEffect, useState } from "react";
import { OverlayTrigger, Tooltip } from "react-bootstrap";
import { StyleTheme, useSettings } from "../context/settings";
import { UmaCharacter, loadUmaCharacters } from "../utils/umaCharacters";
import "./EaterBadge.scss";

/**
 * Úrovně „jedlíka" podle počtu jídel: Special Week sní hodně, Oguri Cap ještě víc.
 * Seřazeno od nejvyšší úrovně.
 */
const LEVELS = [
    { minItems: 3, character: 'Oguri Cap', title: 'Úroveň Oguri Cap — bezedný žaludek' },
    { minItems: 2, character: 'Special Week', title: 'Úroveň Special Week — pořádný apetit' },
];

/** Úrovně ve stylu My Little Pony — místo portrétu cutie mark (emoji). Seřazeno od nejvyšší úrovně. */
const MLP_LEVELS = [
    { minItems: 3, emoji: '🧁', title: 'Úroveň Pinkie Pie — cupcaků není nikdy dost' },
    { minItems: 2, emoji: '🍎', title: 'Úroveň Applejack — poctivý apetit' },
];

/** Úrovně ve stylu Hell Girl — emoji v černém odznaku s rudým lemem. Seřazeno od nejvyšší úrovně. */
const HG_LEVELS = [
    { minItems: 3, emoji: '🔥', title: 'Úroveň Wanyūdō — hlad jako pekelný oheň' },
    { minItems: 2, emoji: '🥀', title: 'Úroveň Ai Enma — tichý, ale nenasytný apetit' },
];

/** Úrovně ve stylu K-ON! — emoji v odznaku jako trsátko. Seřazeno od nejvyšší úrovně. */
const KON_LEVELS = [
    { minItems: 3, emoji: '🍰', title: 'Úroveň Yui — sní všechno a nepřibere ani gram' },
    { minItems: 2, emoji: '☕', title: 'Úroveň Tea Time — k obědu ještě čaj a dortík' },
];

/** Úrovně ve stylu Bocchi the Rock! — emoji na samolepce jako z flyeru live house. Seřazeno od nejvyšší úrovně. */
const BOCCHI_LEVELS = [
    { minItems: 3, emoji: '🌿', title: 'Úroveň Ryo — když dojdou peníze, sní i trávu u cesty' },
    { minItems: 2, emoji: '🥭', title: 'Úroveň Bocchi — dvojitý oběd v klidu v krabici od manga' },
];

/** Úrovně podle stylu pro odznaky s emoji. */
const EMOJI_LEVELS: Partial<Record<StyleTheme, typeof MLP_LEVELS>> = {
    mlp: MLP_LEVELS,
    hellgirl: HG_LEVELS,
    kon: KON_LEVELS,
    bocchi: BOCCHI_LEVELS,
};

type Props = {
    /** Počet jídel/položek, které si strávník vybral či objednal */
    items: number,
};

/** Odznak s postavou u strávníků s více jídly — jen ve stylech Umamusume, My Little Pony, Hell Girl, K-ON! a Bocchi the Rock!. */
export default function EaterBadge({ items }: Readonly<Props>) {
    const styleTheme = useSettings()?.styleTheme;
    const isUma = styleTheme === 'umamusume';
    const [characters, setCharacters] = useState<UmaCharacter[]>([]);

    useEffect(() => {
        if (isUma) loadUmaCharacters().then(setCharacters);
    }, [isUma]);

    const emojiLevels = styleTheme && EMOJI_LEVELS[styleTheme];
    if (emojiLevels) {
        const emojiLevel = emojiLevels.find(l => items >= l.minItems);
        if (!emojiLevel) return null;
        return (
            <OverlayTrigger placement="top" overlay={<Tooltip>{emojiLevel.title} ({items} jídla)</Tooltip>}>
                <span className={`eater-badge eater-badge-${styleTheme}`} role="img" aria-label={emojiLevel.title}>{emojiLevel.emoji}</span>
            </OverlayTrigger>
        );
    }

    const level = LEVELS.find(l => items >= l.minItems);
    const character = level && characters.find(c => c.name === level.character);
    // Malý odznak potřebuje obličej — portrét (icon), případně kulatý obrázek postavy
    const src = character?.icon ?? (character?.round ? character.images[0] : undefined);
    if (!isUma || !level || !src) return null;

    return (
        <OverlayTrigger placement="top" overlay={<Tooltip>{level.title} ({items} jídla)</Tooltip>}>
            <img src={src} alt={level.character} className="eater-badge" />
        </OverlayTrigger>
    );
}