// Öffentliche Statusseite im Statuspage-Stil: Gesamtlage oben, darunter die
// freigegebenen Dienste und die Game-Server, unten die Störungs-Historie.
//
// Adressen stehen hier bewusst nicht — der Server liefert nur Namen. Was auf
// dieser Seite auftaucht, entscheidet der Schalter „öffentlich" je Dienst.
import { useEffect, useState } from 'react';
import { apiGet } from '../api.js';
import { SkeletonCards } from '../components/Skeleton.jsx';
import UptimeTrack from '../components/UptimeTrack.jsx';
import { useT, useFmt } from '../i18n.jsx';
import { IconCheck, IconWarning, IconClock } from '../icons.jsx';

/** Gesamtlage aus allen Teilen — die schlechteste zählt */
function gesamtlage(daten) {
    const alles = [
        ...(daten.dienste ?? []).map((d) => d.online),
        ...(daten.server ?? []).map((s) => s.online),
    ];
    if (alles.length === 0) return 'leer';
    if (alles.some((o) => o === false)) return alles.every((o) => o === false) ? 'aus' : 'teil';
    // null heißt „noch nicht geprüft" und ist keine Störung
    return alles.some((o) => o === true) ? 'gut' : 'wartet';
}

export default function Status() {
    const { t } = useT();
    const { datum } = useFmt();
    const [daten, setDaten] = useState(null);
    const [fehler, setFehler] = useState(false);

    useEffect(() => {
        const laden = () => apiGet('/api/status').then(setDaten).catch(() => setFehler(true));
        laden();
        const timer = setInterval(laden, 60_000);
        window.scrollTo(0, 0);
        return () => clearInterval(timer);
    }, []);

    const lage = daten ? gesamtlage(daten) : null;
    const BANNER = {
        gut: { icon: IconCheck, text: t('status.allOk') },
        teil: { icon: IconWarning, text: t('status.partial') },
        aus: { icon: IconWarning, text: t('status.majorOutage') },
        wartet: { icon: IconClock, text: t('status.waiting') },
        leer: { icon: IconClock, text: t('status.nothing') },
    };
    const Banner = lage ? BANNER[lage].icon : null;

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

            <section className="content">
                {fehler && <p className="notice">{t('status.error')}</p>}
                {!fehler && !daten && <SkeletonCards n={2} />}

                {lage && (
                    <div className={`st-banner ${lage}`}>
                        <Banner size={20} />
                        <span>{BANNER[lage].text}</span>
                    </div>
                )}

                {daten?.dienste?.length > 0 && (
                    <div className="roadmap-group">
                        <h2 className="settings-title">{t('status.services')}</h2>
                        {daten.dienste.map((d) => (
                            <div className="st-row card" key={d.id}>
                                <div className="st-head">
                                    <span className={`wd-dot ${d.online === null ? 'wartet' : d.online ? 'an' : 'aus'}`} />
                                    <span className="st-name">{d.name}</span>
                                    <span className="st-state">
                                        {d.online === null ? t('status.waiting') : d.online ? t('status.ok') : t('status.down')}
                                    </span>
                                </div>
                                <UptimeTrack buckets={d.uptime} modus="tage" />
                            </div>
                        ))}
                    </div>
                )}

                {daten?.server?.length > 0 && (
                    <div className="roadmap-group">
                        <h2 className="settings-title">{t('status.gameservers')}</h2>
                        <div className="st-servers">
                            {daten.server.map((s) => (
                                <div className="st-server card" key={s.id}>
                                    <span className="st-server-icon">{s.icon}</span>
                                    <span className="st-name">{s.name}</span>
                                    <span className={`wd-dot ${s.online === null ? 'wartet' : s.online ? 'an' : 'aus'}`} />
                                    <span className="st-state">
                                        {s.online
                                            ? `${s.players ?? 0}${s.max ? ` / ${s.max}` : ''}`
                                            : s.online === null ? t('status.waiting') : t('status.down')}
                                    </span>
                                </div>
                            ))}
                        </div>
                    </div>
                )}

                {daten && (
                    <div className="roadmap-group">
                        <h2 className="settings-title">{t('status.incidents')}</h2>
                        {daten.stoerungen.length === 0 ? (
                            <p className="notice">{t('status.noIncidents')}</p>
                        ) : (
                            <div className="st-incidents">
                                {daten.stoerungen.map((v) => (
                                    <div className={`st-incident${v.beendet ? '' : ' offen'}`} key={v.id}>
                                        <span className="st-inc-name">{v.name}</span>
                                        <span className="st-inc-time">
                                            {datum(`${v.begonnen.replace(' ', 'T')}Z`, {
                                                day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit',
                                            })}
                                        </span>
                                        <span className="st-inc-dur">
                                            {v.beendet ? t('status.minutes', v.minuten) : t('status.ongoing')}
                                        </span>
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>
                )}
            </section>
        </>
    );
}