/*
 * Vencord, a Discord client mod
 * Copyright (c) 2026 Evandro
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

import { Button } from "@components/Button";
import { findByPropsLazy } from "@webpack";
import { i18n, SettingsRouter, useState, useStateFromStores } from "@webpack/common";

import { pickCopy } from "./copy";
import { KeybindsStore, portalActive } from "./discord";

function locale(): string {
    try {
        return i18n.intl.currentLocale ?? document.documentElement.lang;
    } catch {
        return document.documentElement.lang;
    }
}

// the panel renders inside the plugin modal, so the top of Discord's modal stack at mount is that modal
const ModalStack = findByPropsLazy("getOpenModalKeys", "closeModal");

function topModalKey(): string | undefined {
    try {
        return [...ModalStack.getOpenModalKeys()].at(-1);
    } catch {
        return undefined;
    }
}

function openKeybinds(pluginModalKey: string | undefined) {
    // settings ignore navigation while another modal sits on top of them
    if (pluginModalKey) ModalStack.closeModal(pluginModalKey);
    SettingsRouter.openUserSettings("system_custom_keybinds_category");
}

function StatusIcon({ active }: { active: boolean; }) {
    return (
        <svg className="vc-wk-status-icon" viewBox="0 0 20 20" width="20" height="20" aria-hidden="true">
            <circle cx="10" cy="10" r="8.25" fill="none" stroke="currentColor" strokeWidth="1.5" />
            {active
                ? <path d="m6.5 10.25 2.4 2.4 4.6-5" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
                : <path d="M10 9v4.5M10 6.25v.01" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" />}
        </svg>
    );
}

export function AboutPanel() {
    const copy = pickCopy(locale());
    const active = portalActive();
    const [modalKey] = useState(topModalKey);
    const registered = useStateFromStores([KeybindsStore], () =>
        Object.keys(KeybindsStore.getUserAgnosticState() ?? {})
            .filter(id => KeybindsStore.getWaylandPortalShortcutState(id)?.bound).length
    );

    if (!active) {
        return (
            <p className="vc-wk-status">
                <StatusIcon active={false} />
                {copy.inactive}
            </p>
        );
    }

    return (
        <section className="vc-wk-panel" aria-labelledby="vc-wk-title">
            <p className="vc-wk-status vc-wk-status-on">
                <StatusIcon active />
                {copy.active(registered)}
            </p>
            <h3 id="vc-wk-title" className="vc-wk-title">{copy.title}</h3>
            <p className="vc-wk-lead">{copy.lead}</p>
            {/* list-style is removed for the numbered badges, so keep the list role for screen readers */}
            <ol className="vc-wk-steps" role="list">
                {copy.steps.map(([before, bold, after], i) => <li key={i}><span>{before}{bold && <b>{bold}</b>}{after}</span></li>)}
            </ol>
            <div className="vc-wk-actions">
                <Button onClick={() => openKeybinds(modalKey)}>{copy.open}</Button>
                <p className="vc-wk-tip">{copy.tip}</p>
            </div>
        </section>
    );
}