import { api } from "./api.js";
import { t } from "./i18n.js";
import { state, getSavedUsername, setSavedUsername } from "./state.js";
import { $, toast } from "./dom.js";
import { setupCardVisualHover } 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>
           ${r.genre ? `<div class="muted small">${r.genre}</div>` : ''}
         </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));
    });
}

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", () => openEditModal(s));
    }
    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 openEditModal(s) {
    const overlay = document.createElement("div");
    overlay.className = "edit-modal";
    overlay.innerHTML = `
    <div class="edit-panel">
      <div class="edit-header">
        <h3>${t("modal.editTitle")}</h3>
        <button class="lightbox-close" aria-label="${t("modal.close")}">×</button>
      </div>
      <div class="edit-body">
        <form class="stack" id="edit-form">
          <label class="stack">
            <span class="label" data-i18n="form.gameName">${t("form.gameName")}</span>
            <input name="name" required maxlength="100" value="${s.name ?? ""}" />
          </label>
          <label class="stack">
            <span class="label" data-i18n="form.genre">${t("form.genre")}</span>
            <input name="genre" maxlength="50" value="${s.genre ?? ""}" />
          </label>
          <label class="stack">
            <span class="label" data-i18n="form.description">${t("form.description")}</span>
            <textarea name="description" maxlength="500">${s.description ?? ""}</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" value="${s.minPlayers ?? ""}" />
              </label>
              <label class="stack">
                <span class="label">${t("form.max")}</span>
                <input name="maxPlayers" type="number" min="1" max="32" inputmode="numeric" value="${s.maxPlayers ?? ""}" />
              </label>
            </div>
          </div>
          <label class="stack">
            <span class="label" data-i18n="form.screenshot">${t("form.screenshot")}</span>
            <input name="screenshotUrl" maxlength="2048" value="${s.screenshotUrl ?? ""}" />
          </label>
          <label class="stack">
            <span class="label" data-i18n="form.youtube">${t("form.youtube")}</span>
            <input name="youtubeUrl" maxlength="2048" value="${s.youtubeUrl ?? ""}" />
          </label>
          <label class="stack">
            <span class="label" data-i18n="form.gameUrl">${t("form.gameUrl")}</span>
            <input name="gameUrl" maxlength="2048" value="${s.gameUrl ?? ""}" />
          </label>
          <div class="stack horizontal">
            <button type="submit">${t("modal.save")}</button>
            <button type="button" class="ghost" id="edit-cancel">${t("modal.cancel")}</button>
          </div>
        </form>
      </div>
    </div>
  `;

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

    const cancelBtn = overlay.querySelector("#edit-cancel");
    cancelBtn?.addEventListener("click", close);

    const form = overlay.querySelector("#edit-form");
    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 api.updateSuggestion(s.id, data);
            toast(t("toast.savedChanges"));
            close();
            await window.refreshPhaseData();
        } catch (err) {
            if (window.handleAuthError(err)) return;
            toast(err.message, true);
        }
    });

    document.body.appendChild(overlay);
}

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;
    }
}