import { api } from "./api.js";
import { t } from "./i18n.js";
import { state, getSavedUsername, setSavedUsername } from "./state.js";
import { $, toast } from "./dom.js";
import { setupCardVisualHover, triggerCelebration } from "./effects.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() {
    const phaseKey = typeof state.phase === "string" ? state.phase.toLowerCase() : null;
    $("phase-pill").textContent = phaseKey ? "" : t("phase.loading");
    document.querySelectorAll(".phase-view").forEach((el) =>
        el.classList.add("hidden"),
    );
    const viewMap = {
        Suggest: "suggest-view",
        Reveal: "reveal-view",
        Vote: "vote-view",
        Results: "results-view",
    };
    const id = viewMap[state.phase];
    if (id) $(id).classList.remove("hidden");
    const phaseSelect = $("phase-select");
    if (phaseSelect && !phaseSelect.dataset.userEditing) {
        phaseSelect.value = state.phase || "Suggest";
    }
}

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 function renderMySuggestions() {
    const wrap = $("my-suggestions");
    if (!wrap) return;
    wrap.innerHTML = "";
    const allowEdit = state.phase === "Suggest" || state.me?.isAdmin;
    state.mySuggestions.forEach((s) =>
        wrap.appendChild(
            buildCard(s, { showAuthor: false, allowDelete: true, allowEdit }),
        ),
    );
}

export function renderAllSuggestions() {
    const list = $("all-suggestions");
    if (!list) return;
    list.innerHTML = "";
    const allowEdit = !!state.me?.isAdmin;
    const allowDelete =
        !!state.me?.isAdmin &&
        (state.phase === "Reveal" || state.phase === "Suggest");
    state.allSuggestions.forEach((s) =>
        list.appendChild(
            buildCard(s, { showAuthor: true, allowEdit, allowDelete }),
        ),
    );
    renderPhaseTitles();
}

export function renderVotes() {
    const list = $("vote-list");
    if (!list) return;
    list.innerHTML = "";
    const votesMap = Object.fromEntries(
        state.myVotes.map((v) => [v.suggestionId, v.score]),
    );
    state.allSuggestions.forEach((s) => {
        const li = buildCard(s, {
            showAuthor: true,
            allowEdit: !!state.me?.isAdmin,
        });
        const hasVote = Object.prototype.hasOwnProperty.call(votesMap, s.id);
        const current = hasVote ? votesMap[s.id] : 5; // start neutral when no prior vote
        const displayScore = hasVote ? current : "—";
        const displayEmoji = hasVote ? scoreToEmoji(current) : neutralEmoji();
        const footer = document.createElement("div");
        footer.className = "vote-controls";
        footer.innerHTML = `
      <input class="full-slider" type="range" min="0" max="10" value="${current}" data-id="${s.id}">
      <span class="score" id="score-${s.id}">${displayScore}</span>
      <span class="score-emoji" id="emoji-${s.id}">${displayEmoji}</span>`;
        li.querySelector(".card-body").appendChild(footer);
        list.appendChild(li);
    });
    list.querySelectorAll("input[type=range]").forEach((input) => {
        input.addEventListener("input", (e) => {
            const val = Number(e.target.value);
            $("score-" + e.target.dataset.id).textContent = val;
            const emojiEl = $("emoji-" + e.target.dataset.id);
            if (emojiEl) emojiEl.textContent = scoreToEmoji(val);
        });
        input.addEventListener("change", async (e) => {
            const suggestionId = Number(e.target.dataset.id);
            const score = Number(e.target.value);
            try {
                await api.vote(suggestionId, score);
                toast(t("vote.saved"));
                await window.loadVoteData();
            } catch (err) {
                toast(err.message, true);
            }
        });
    });
}

export function syncVoteScores() {
    const votesMap = Object.fromEntries(
        state.myVotes.map((v) => [v.suggestionId, v.score]),
    );
    Object.entries(votesMap).forEach(([id, score]) => {
        const slider = document.querySelector(
            `input[type=range][data-id="${id}"]`,
        );
        const scoreLabel = $("score-" + id);
        const emoji = $("emoji-" + id);
        if (slider && score != null) {
            slider.value = score;
            if (scoreLabel) scoreLabel.textContent = score;
            if (emoji) emoji.textContent = scoreToEmoji(score);
        }
    });
    document
        .querySelectorAll("input[type=range][data-id]")
        .forEach((slider) => {
            const id = slider.dataset.id;
            if (Object.prototype.hasOwnProperty.call(votesMap, Number(id)))
                return;
            const scoreLabel = $("score-" + id);
            const emoji = $("emoji-" + id);
            if (scoreLabel) scoreLabel.textContent = "—";
            if (emoji) emoji.textContent = neutralEmoji();
        });
}

export function renderResults() {
    const container = $("results-list");
    container.innerHTML = "";
    const table = document.createElement("table");
    table.className = "results-table";
    table.innerHTML = `
    <thead>
      <tr>
        <th>${t("results.rank")}</th>
        <th>${t("results.game")}</th>
        <th>${t("results.author")}</th>
        <th>${t("results.votes")}</th>
        <th>${t("results.avg")}</th>
        <th>${t("results.total")}</th>
        <th>${t("results.links")}</th>
      </tr>
    </thead>
    <tbody></tbody>
  `;
    const tbody = table.querySelector("tbody");
    state.results.forEach((r, idx) => {
        const row = document.createElement("tr");
        const podiumClass = idx === 0 ? "podium podium-1" : idx === 1 ? "podium podium-2" : idx === 2 ? "podium podium-3" : "";
        row.className = podiumClass;
        const medal = idx === 0 ? "🥇" : idx === 1 ? "🥈" : idx === 2 ? "🥉" : `${idx + 1}`;
        row.innerHTML = `
      <td class="rank-cell"><span class="medal">${medal}</span></td>
      <td class="game-cell">
         ${r.screenshotUrl ? `<img class="thumb clickable-thumb" src="${r.screenshotUrl}" alt="${r.name}">` : ''}
         <div class="game-meta">
           <div class="title-line">${r.name}</div>
           ${buildResultMeta(r)}
         </div>
      </td>
      <td class="author-cell">${r.author ?? "—"}</td>
      <td>${r.count}</td>
      <td>${r.average.toFixed(1)}</td>
      <td>${r.total}</td>
      <td>
        ${r.gameUrl ? `<a class="link compact" href="${r.gameUrl}" target="_blank" rel="noopener">${t("results.link.site")}</a><br>` : ''}
        ${r.youtubeUrl ? `<a class="link compact" href="${r.youtubeUrl}" target="_blank" rel="noopener">${t("results.link.youtube")}</a>` : ''}
      </td>
    `;
        tbody.appendChild(row);
    });
    const frame = document.createElement("div");
    frame.className = "results-frame";
    frame.appendChild(table);
    container.appendChild(frame);
    container.querySelectorAll(".clickable-thumb").forEach((img) => {
        img.addEventListener("click", () => openLightbox(img.src, img.alt));
    });
}

function buildResultMeta(r) {
    const hasPlayers = r.minPlayers || r.maxPlayers;
    const players = hasPlayers
        ? t("card.players", { min: r.minPlayers ?? "?", max: r.maxPlayers ?? "?" })
        : null;
    const bits = [r.genre, players].filter(Boolean);
    if (bits.length === 0) return "";
    return `<div class="muted small">${bits.join(" • ")}</div>`;
}

export function renderPhaseTitles() {
    const revealTitle = $("reveal-title");
    const voteTitle = $("vote-title");
    const totalGames = state.allSuggestions?.length ?? 0;
    if (revealTitle) {
        revealTitle.textContent =
            totalGames > 0
                ? t("section.allSuggestions.count", { count: totalGames })
                : t("section.allSuggestions");
    }
    if (voteTitle) {
        voteTitle.textContent =
            totalGames > 0
                ? t("section.vote.count", { count: totalGames })
                : t("section.vote");
    }
}

export function buildCard(
    s,
    { showAuthor = false, allowDelete = false, allowEdit = false },
) {
    const card = document.createElement("article");
    card.className = "game-card";
    const hasImage = !!s.screenshotUrl;
    const visual = hasImage
        ? `<button class="card-visual" data-img="${s.screenshotUrl}" aria-label="${t("card.openScreenshot")}" style="background-image:url('${s.screenshotUrl}')"></button>`
        : `<div class="card-visual"></div>`;
    const hasPlayers = s.minPlayers || s.maxPlayers;
    const players = hasPlayers
        ? `${t("card.players", {
              min: s.minPlayers ?? "?",
              max: s.maxPlayers ?? "?",
          })}`
        : "";
    const genreAndPlayers = s.genre
        ? hasPlayers
            ? `${s.genre} • ${players}`
            : s.genre
        : hasPlayers
          ? players
          : undefined;
    const hasExtraInfo = genreAndPlayers || s.gameUrl || s.youtubeUrl;
    card.innerHTML = `
    ${visual}
    <div class="card-body">
      <div class="card-title-row">
        <h3 class="card-title" title="${s.name}">${s.name}</h3>
        <div class="title-meta">
          ${showAuthor && s.author ? `<span class="chip">${s.author}</span>` : ""}
          ${allowEdit ? `<button class="chip" data-edit="${s.id}" type="button">${t("card.edit")}</button>` : ""}
          ${allowDelete ? `<button class="chip danger-chip" data-delete="${s.id}" type="button">${t("card.delete")}</button>` : ""}
        </div>
      </div>
      ${hasExtraInfo ? `<p class="muted">` : ""}
      ${genreAndPlayers ? genreAndPlayers : ""}
      ${s.gameUrl ? `<a class="link compact" href="${s.gameUrl}" target="_blank" rel="noopener">${t("card.site")}</a>` : ""}
      ${s.youtubeUrl ? `<a class="link compact" href="${s.youtubeUrl}" target="_blank" rel="noopener">${t("card.youtube")}</a>` : ""}
      ${hasExtraInfo ? `</p>` : ""}
      ${s.description ? `<p>${s.description}</p>` : ""}
    </div>
  `;
    if (hasImage) {
        const btn = card.querySelector(".card-visual");
        setupCardVisualHover(btn, s.screenshotUrl);
        btn.addEventListener("click", () => openLightbox(s.screenshotUrl, s.name));
    }
    if (allowEdit) {
        const editBtn = card.querySelector("[data-edit]");
        editBtn?.addEventListener("click", () =>
            openSuggestionModal({
                title: t("modal.editTitle"),
                submitLabel: t("modal.save"),
                initial: s,
                onSubmit: async (data, close) => {
                    await api.updateSuggestion(s.id, data);
                    toast(t("toast.savedChanges"));
                    close();
                    await window.refreshPhaseData();
                },
            }),
        );
    }
    if (allowDelete) {
        const del = card.querySelector("[data-delete]");
        del.addEventListener("click", async () => {
            try {
                await api.deleteSuggestion(s.id);
                toast(t("toast.suggestionDeleted"));
                await window.loadSuggestData();
            } catch (err) {
                toast(err.message, true);
            }
        });
    }
    return card;
}

function buildSuggestionForm(initial = {}) {
    const form = document.createElement("form");
    form.className = "stack suggestion-form";
    form.innerHTML = `
      <label class="stack">
        <span class="label-row">
          <span class="label" data-i18n="form.gameName">${t("form.gameName")}</span>
          <span class="char-counter" data-for="name"></span>
        </span>
        <input name="name" required maxlength="100" />
      </label>
      <label class="stack">
        <span class="label-row">
          <span class="label" data-i18n="form.genre">${t("form.genre")}</span>
          <span class="char-counter" data-for="genre"></span>
        </span>
        <input name="genre" maxlength="50" />
      </label>
      <label class="stack">
        <span class="label-row">
          <span class="label" data-i18n="form.description">${t("form.description")}</span>
          <span class="char-counter" data-for="description"></span>
        </span>
        <textarea name="description" maxlength="500"></textarea>
      </label>
      <div class="stack">
        <span class="label">${t("form.players")}</span>
        <div class="stack horizontal">
          <label class="stack">
            <span class="label">${t("form.min")}</span>
            <input name="minPlayers" type="number" min="1" max="32" inputmode="numeric" />
          </label>
          <label class="stack">
            <span class="label">${t("form.max")}</span>
            <input name="maxPlayers" type="number" min="1" max="32" inputmode="numeric" />
          </label>
        </div>
      </div>
      <label class="stack">
        <span class="label-row">
          <span class="label" data-i18n="form.screenshot">${t("form.screenshot")}</span>
          <span class="char-counter" data-for="screenshotUrl"></span>
        </span>
        <input name="screenshotUrl" maxlength="2048" />
      </label>
      <label class="stack">
        <span class="label-row">
          <span class="label" data-i18n="form.youtube">${t("form.youtube")}</span>
          <span class="char-counter" data-for="youtubeUrl"></span>
        </span>
        <input name="youtubeUrl" maxlength="2048" />
      </label>
      <label class="stack">
        <span class="label-row">
          <span class="label" data-i18n="form.gameUrl">${t("form.gameUrl")}</span>
          <span class="char-counter" data-for="gameUrl"></span>
        </span>
        <input name="gameUrl" maxlength="2048" />
      </label>
  `;

    const setVal = (name, value) => {
        const input = form.querySelector(`[name="${name}"]`);
        if (input) input.value = value ?? "";
    };
    setVal("name", initial.name ?? "");
    setVal("genre", initial.genre ?? "");
    const desc = form.querySelector("textarea[name=description]");
    if (desc) desc.value = initial.description ?? "";
    setVal("minPlayers", initial.minPlayers ?? "");
    setVal("maxPlayers", initial.maxPlayers ?? "");
    setVal("screenshotUrl", initial.screenshotUrl ?? "");
    setVal("youtubeUrl", initial.youtubeUrl ?? "");
    setVal("gameUrl", initial.gameUrl ?? "");
    initCharCounters(form);
    return form;

    function initCharCounters(formEl) {
        const inputs = formEl.querySelectorAll("input[maxlength], textarea[maxlength]");
        inputs.forEach((input) => {
            const counter = formEl.querySelector(`.char-counter[data-for="${input.name}"]`);
            if (!counter) return;
            const update = () => {
                const max = input.maxLength;
                if (!max || max < 0) return;
                const used = input.value?.length ?? 0;
                counter.textContent = `${used}/${max}`;
            };
            input.addEventListener("input", update);
            update();
        });
    }
}

function openSuggestionModal({ title, submitLabel, initial = {}, onSubmit }) {
    const overlay = document.createElement("div");
    overlay.className = "edit-modal";
    const panel = document.createElement("div");
    panel.className = "edit-panel";
    panel.innerHTML = `
      <div class="edit-header">
        <h3>${title}</h3>
        <button class="lightbox-close" aria-label="${t("modal.close")}">x</button>
      </div>
      <div class="edit-body"></div>
    `;

    const form = buildSuggestionForm(initial);
    const actions = document.createElement("div");
    actions.className = "stack horizontal";
    const submitBtn = document.createElement("button");
    submitBtn.type = "submit";
    submitBtn.textContent = submitLabel;
    const cancelBtn = document.createElement("button");
    cancelBtn.type = "button";
    cancelBtn.className = "ghost";
    cancelBtn.textContent = t("modal.cancel");
    actions.append(submitBtn, cancelBtn);
    form.appendChild(actions);

    const close = () => overlay.remove();
    overlay.addEventListener("click", (e) => {
        if (
            e.target.classList.contains("edit-modal") ||
            e.target.classList.contains("lightbox-close")
        )
            close();
    });
    cancelBtn.addEventListener("click", close);

    form.addEventListener("submit", async (e) => {
        e.preventDefault();
        const data = normalizeSuggestionForm(new FormData(form));
        if (data.screenshotUrl && !isValidImageUrl(data.screenshotUrl)) {
            return toast(t("toast.invalidImageUrl"), true);
        }
        if (!data.name?.trim()) return toast(t("toast.nameRequired"), true);
        try {
            await onSubmit(data, close, submitBtn);
        } catch (err) {
            if (window.handleAuthError?.(err)) return;
            toast(err.message, true);
        }
    });

    panel.querySelector(".edit-body")?.appendChild(form);
    overlay.appendChild(panel);
    document.body.appendChild(overlay);
    return overlay;
}

export function openNewSuggestionModal() {
    openSuggestionModal({
        title: t("modal.addTitle") || t("suggest.new"),
        submitLabel: t("form.submit"),
        initial: {},
        onSubmit: async (data, close, submitBtn) => {
            await api.createSuggestion(data);
            toast(t("toast.suggestionAdded"));
            if (submitBtn) triggerCelebration(submitBtn);
            close();
            await window.loadSuggestData();
        },
    });
}

export function openLightbox(url, title) {
    const overlay = document.createElement("div");
    overlay.className = "lightbox";
    overlay.innerHTML = `
    <div class="lightbox-content">
      <button class="lightbox-close" aria-label="${t("lightbox.close")}">✕</button>
      <img src="${url}" alt="${title}" />
      <p>${title || ""}</p>
    </div>
  `;
    overlay.addEventListener("click", (e) => {
        if (
            e.target.classList.contains("lightbox") ||
            e.target.classList.contains("lightbox-close")
        ) {
            overlay.remove();
        }
    });
    document.body.appendChild(overlay);
}

export function normalizeSuggestionForm(formData) {
    const obj = Object.fromEntries(formData.entries());
    const parseNum = (v) => {
        if (v === undefined || v === null || v === "") return null;
        const n = Number(v);
        return Number.isFinite(n) ? n : null;
    };
    return {
        name: obj.name?.trim(),
        genre: obj.genre?.trim() || null,
        description: obj.description?.trim() || null,
        screenshotUrl: obj.screenshotUrl?.trim() || null,
        youtubeUrl: obj.youtubeUrl?.trim() || null,
        gameUrl: obj.gameUrl?.trim() || null,
        minPlayers: parseNum(obj.minPlayers),
        maxPlayers: parseNum(obj.maxPlayers),
    };
}

export function scoreToEmoji(score) {
    if (score == null || Number.isNaN(score)) return neutralEmoji();
    if (score < 1) return "😡";
    if (score <= 3) return "😠";
    if (score <= 6) return "😐";
    if (score <= 8) return "🙂";
    if (score <= 9) return "😃";
    return "🤩";
}

export function neutralEmoji() {
    return "😐";
}

function isValidImageUrl(url) {
    if (!url) return true;
    try {
        const u = new URL(url);
        const allowed = ["http:", "https:"];
        if (!allowed.includes(u.protocol)) return false;
        const path = u.pathname.toLowerCase();
        return [".png", ".jpg", ".jpeg", ".gif", ".webp", ".avif"].some((ext) =>
            path.endsWith(ext),
        );
    } catch {
        return false;
    }
}