import { t } from "./i18n.js";
import { state, getSavedUsername } from "./state.js";
import { $, toast } from "./dom.js";
import { configureUiRuntime } from "./ui-runtime.js";
import {
    renderMySuggestions,
    renderAllSuggestions,
    renderPhaseTitles,
    buildCard,
    openNewSuggestionModal,
    normalizeSuggestionForm,
} from "./suggestions-ui.js";
import { renderVotes, scoreToEmoji, syncVoteScores, neutralEmoji, updatePhaseNav } from "./votes-ui.js";
import { renderResults } from "./results-ui.js";
import { openConfirmModal, openLightbox, openResultsRelockModal, openSuggestionsChangedModal } from "./modals-ui.js";

export function setAuthUI(isAuthed) {
    const main = document.querySelector("main");
    const statusBar = document.querySelector(".status-bar");
    const authCard = $("auth-card");
    [main, statusBar].forEach((el) =>
        el?.classList.toggle("hidden", !isAuthed),
    );
    if (authCard) authCard.classList.toggle("hidden", isAuthed);
    const adminToggle = $("admin-toggle");
    if (adminToggle)
        adminToggle.classList.toggle("hidden", !isAuthed || !state.me?.isAdmin);
    if (!isAuthed) {
        const adminCard = $("admin-card");
        if (adminCard) adminCard.classList.add("hidden");
        const loginUser = $("login-username");
        const cachedUser = getSavedUsername();
        if (
            loginUser &&
            cachedUser &&
            !loginUser.dataset.userEditing &&
            !loginUser.value
        ) {
            loginUser.value = cachedUser;
        }
    }
}

export function setAuthMode(mode) {
    state.authMode = mode;
    document.querySelectorAll(".auth-form").forEach((form) => {
        form.classList.toggle("hidden", form.dataset.mode !== mode);
    });
    const title = $("auth-title");
    const toggleBtn = $("auth-toggle");
    if (title) {
        title.textContent =
            mode === "login"
                ? t("auth.loginHeading")
                : t("auth.registerHeading");
    }
    if (toggleBtn) {
        toggleBtn.textContent =
            mode === "login"
                ? t("auth.switchToRegister")
                : t("auth.switchToLogin");
    }
}

export function handleAuthError(err, clearUserState) {
    if (err?.status === 401) {
        clearUserState();
        state.isAuthenticated = false;
        setAuthUI(false);
        return true;
    }
    toast(err?.message || t("toast.unexpected"), true);
    return false;
}

export function renderPhasePill() {
    document.querySelectorAll(".phase-view").forEach((el) =>
        el.classList.add("hidden"),
    );
    const viewMap = {
        Suggest: "suggest-view",
        Vote: "vote-view",
        Results: "results-view",
    };
    const id = viewMap[state.phase];
    if (id) $(id).classList.remove("hidden");

    updatePhaseNav();
}

export function renderCounts() {
    if (!state.counts) return;
    $("counts").textContent = t("counts.format", {
        players: state.counts.players,
        suggestions: state.counts.suggestions,
        votes: state.counts.votes,
    });
}

export function renderWelcome() {
    const el = $("welcome-text");
    if (!el) return;
    const name =
        state.me?.displayName?.trim() ||
        state.me?.username ||
        t("auth.defaultName");
    el.textContent = t("auth.welcome", { name });
}

export {
    buildCard,
    configureUiRuntime,
    neutralEmoji,
    normalizeSuggestionForm,
    openConfirmModal,
    openLightbox,
    openNewSuggestionModal,
    openResultsRelockModal,
    openSuggestionsChangedModal,
    renderAllSuggestions,
    renderMySuggestions,
    renderPhaseTitles,
    renderResults,
    renderVotes,
    scoreToEmoji,
    syncVoteScores,
    updatePhaseNav,
};