// Übersicht aller Slash-Befehle des Bots.
import { useEffect } from 'react';
import { IconLock } from '../icons.jsx';
import { useT } from '../i18n.jsx';

// Befehlsname bleibt wie er ist — nur die Erklärung wird übersetzt.
const GROUPS = [
    ['commands.g.everyone', false, [
        ['/rank', 'commands.rank'],
        ['/wunsch idee:…', 'commands.wunsch'],
        ['/bug titel:… beschreibung:…', 'commands.bug'],
        ['/geburtstag setzen tag:… monat:…', 'commands.bdaySet'],
        ['/geburtstag entfernen', 'commands.bdayDel'],
        ['/remind dauer:… text:…', 'commands.remind'],
        ['/tag name:…', 'commands.cmdTag'],
        ['/ping', 'commands.ping'],
        ['/umfrage frage:… a:… b:…', 'commands.umfrage'],
        ['/radio', 'commands.radio'],
    ]],
    ['commands.g.mod', true, [
        ['/warn user:… grund:…', 'commands.warn'],
        ['/warns user:…', 'commands.warns'],
        ['/timeout user:… dauer:…', 'commands.timeout'],
        ['/purge anzahl:…', 'commands.purge'],
    ]],
    ['commands.g.setup', true, [
        ['/raid status | an | aus', 'commands.raid'],
        ['/giveaway preis:… dauer:… gewinner:…', 'commands.giveaway'],
        ['/ticket-setup', 'commands.ticketSetup'],
        ['/playtester-setup', 'commands.playtesterSetup'],
        ['/devlog-backfill', 'commands.devlogBackfill'],
        ['/galerie-backfill', 'commands.galerieBackfill'],
    ]],
];

export default function BotCommands() {
    const { t } = useT();
    useEffect(() => { window.scrollTo(0, 0); }, []);

    return (
        <>
            <section className="page-header">
                <div className="page-bg-text">BEFEHLE</div>
                <div className="page-header-grid" aria-hidden="true" />
                <div className="page-header-content">
                    <div className="page-tag">{t('commands.tag')}</div>
                    <h1 className="page-title">{t('commands.title')}</h1>
                    <p className="page-subtitle">{t('commands.subtitle')}</p>
                </div>
            </section>

            <section className="content">
                {GROUPS.map(([groupKey, restricted, commands]) => (
                    <div className="roadmap-group" key={groupKey}>
                        <h2 className="settings-title">
                            // {t(groupKey)}
                            {restricted && <IconLock size={13} />}
                        </h2>
                        <div className="cmd-list">
                            {commands.map(([name, descKey]) => (
                                <div className="cmd-row" key={name}>
                                    <code className="cmd-name">{name}</code>
                                    <span className="cmd-desc">{t(descKey)}</span>
                                </div>
                            ))}
                        </div>
                    </div>
                ))}
                <p className="notice">{t('commands.note')}</p>
            </section>
        </>
    );
}