// Produktseite des Bots: was er kann, wie er aussieht, wo es weitergeht.
// Bewusst ohne „Einladen"-Button — der Bot ist auf einen Server ausgelegt.
import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { apiGet } from '../api.js';
import { useT } from '../i18n.jsx';
import {
    IconDevlog, IconLevel, IconRoles, IconServer, IconSupport, IconGiveaway,
    IconBirthday, IconShield, IconMagic, IconKey, IconArrowRight, IconBot,
} from '../icons.jsx';

const HIGHLIGHTS = [
    [IconDevlog, 'bot.hl.devlogs'],
    [IconServer, 'bot.hl.monitor'],
    [IconLevel, 'bot.hl.level'],
    [IconRoles, 'bot.hl.roles'],
    [IconSupport, 'bot.hl.support'],
    [IconShield, 'bot.hl.mod'],
    [IconGiveaway, 'bot.hl.giveaway'],
    [IconBirthday, 'bot.hl.birthday'],
    [IconMagic, 'bot.hl.welcome'],
];

export default function BotLanding() {
    const { t } = useT();
    const [status, setStatus] = useState(null);
    const [hub, setHub] = useState(null);
    const [featureCount, setFeatureCount] = useState(null);

    useEffect(() => {
        // Nur verlinken, wenn der Hub wirklich woanders liegt
        apiGet('/api/legal').then((d) => setHub(d.split ? d.hubUrl : null)).catch(() => {});
        apiGet('/api/serverstats').then(setStatus).catch(() => {});
        // Zahl kommt aus dem Modul-Register, damit sie nicht veraltet
        apiGet('/api/features').then((d) => setFeatureCount(d.features.length)).catch(() => {});
        window.scrollTo(0, 0);
    }, []);

    return (
        <>
            <section className="page-header bot-hero">
                <div className="page-bg-text">BOT</div>
                <div className="page-header-grid" aria-hidden="true" />
                <div className="page-header-content">
                    <div className="page-tag">{t('bot.tag')}</div>
                    <h1 className="page-title">
                        {t('bot.title1')}<br />{t('bot.title2')}
                    </h1>
                    <p className="page-subtitle">{t('bot.subtitle')}</p>
                    <div className="home-cta">
                        <Link className="btn btn-save with-icon" to="/features">
                            {t('bot.allFeatures')} <IconArrowRight size={15} />
                        </Link>
                        <Link className="btn btn-ghost with-icon" to="/commands">
                            <IconBot /> {t('bot.viewCommands')}
                        </Link>
                    </div>
                </div>
            </section>

            <section className="content">
                <div className="srv-summary">
                    {featureCount && (
                        <div className="srv-sum-item">
                            <span className="srv-sum-n">{featureCount}</span>
                            <span className="srv-sum-label">{t('bot.statFeatures')}</span>
                        </div>
                    )}
                    <div className="srv-sum-item">
                        <span className="srv-sum-n">18</span>
                        <span className="srv-sum-label">{t('bot.statCommands')}</span>
                    </div>
                    <div className="srv-sum-item">
                        <span className="srv-sum-n">300<span className="srv-sum-of">+</span></span>
                        <span className="srv-sum-label">{t('bot.statGames')}</span>
                    </div>
                    <div className="srv-sum-item">
                        <span className="srv-sum-n">0<span className="srv-sum-of"> €</span></span>
                        <span className="srv-sum-label">{t('bot.statCost')}</span>
                    </div>
                </div>

                <h2 className="settings-title" style={{ marginTop: '2.5rem' }}>{t('bot.whatItDoes')}</h2>
                <div className="home-tiles">
                    {HIGHLIGHTS.map(([Icon, key]) => (
                        <div className="card home-tile" key={key}>
                            <span className="home-tile-icon"><Icon size={24} /></span>
                            <span className="home-tile-title">{t(key)}</span>
                            <span className="home-tile-desc">{t(`${key}.text`)}</span>
                        </div>
                    ))}
                </div>

                <div className="roadmap-group" style={{ marginTop: '2.5rem' }}>
                    <h2 className="settings-title">{t('bot.forDevs')}</h2>
                    <div className="home-tiles">
                        <div className="card home-tile">
                            <span className="home-tile-icon"><IconKey size={24} /></span>
                            <span className="home-tile-title">{t('bot.dev.api')}</span>
                            <span className="home-tile-desc">{t('bot.dev.api.text')}</span>
                        </div>
                        <div className="card home-tile">
                            <span className="home-tile-icon"><IconServer size={24} /></span>
                            <span className="home-tile-title">{t('bot.dev.host')}</span>
                            <span className="home-tile-desc">{t('bot.dev.host.text')}</span>
                        </div>
                    </div>
                </div>

                {hub && (
                    <p className="notice" style={{ marginTop: '2rem' }}>
                        {status?.members
                            ? t('bot.runsForWith', status.members)
                            : t('bot.runsFor')} —
                        {' '}<a href={hub} style={{ textDecoration: 'underline' }}>{t('bot.toHub')}</a>.
                    </p>
                )}
            </section>
        </>
    );
}