const $ = (id) => document.getElementById(id);
const marketPersonaList = $("marketPersonaList");
const marketUserPersonaList = $("marketUserPersonaList");
const refreshMarketBtn = $("refreshMarket");
const marketStatus = $("marketStatus");
const marketSearchInput = $("marketSearch");
const marketViewButtons = document.querySelectorAll("[data-market-view]");
const marketPanels = document.querySelectorAll("[data-market-panel]");
const marketCreateAiCharacterBtn = $("marketCreateAiCharacter");
const marketCreateUserPersonaBtn = $("marketCreateUserPersona");
const marketPreviewModal = $("marketPreviewModal");
const marketPreviewName = $("marketPreviewName");
const marketPreviewMeta = $("marketPreviewMeta");
const marketPreviewPronouns = $("marketPreviewPronouns");
const marketPreviewAppearance = $("marketPreviewAppearance");
const marketPreviewBackground = $("marketPreviewBackground");
const marketPreviewDetails = $("marketPreviewDetails");
const marketPreviewExampleDialogues = $("marketPreviewExampleDialogues");
const marketPreviewUserPersonaField = $("marketPreviewUserPersonaField");
const marketPreviewUserPersonaSelect = $("marketPreviewUserPersonaSelect");
const marketPreviewScenarioField = $("marketPreviewScenarioField");
const marketPreviewScenario = $("marketPreviewScenario");
const marketPreviewConfirm = $("marketPreviewConfirm");
const marketPreviewClose = $("marketPreviewClose");
const marketPersonaModal = $("marketPersonaModal");
const marketPersonaClose = $("marketPersonaClose");
const marketPersonaForm = $("marketPersonaForm");
const marketPersonaFormTitle = $("marketPersonaFormTitle");
const marketPersonaFormNotice = $("marketPersonaFormNotice");
const marketPersonaName = $("marketPersonaName");
const marketPersonaPronouns = $("marketPersonaPronouns");
const marketPersonaAppearance = $("marketPersonaAppearance");
const marketPersonaBackground = $("marketPersonaBackground");
const marketPersonaDetails = $("marketPersonaDetails");
const marketPersonaExampleDialogues = $("marketPersonaExampleDialogues");
const marketActivityOverlay = $("marketActivityOverlay");
const marketActivityEyebrow = $("marketActivityEyebrow");
const marketActivityTitle = $("marketActivityTitle");
const marketActivityDetail = $("marketActivityDetail");
const themeNameTargets = document.querySelectorAll("[data-theme-name]");

const themes = {
    "fakegpt": {name: "FakeGPT"},
    "fraud": {name: "Fraud"},
    "germini": {name: "Germini"},
    "slopilot": {name: "Slopilot"},
    "beta-ai": {name: "Beta AI"},
    "confusity": {name: "Confusity"}
};

let allMarketPersonas = [];
let assistantPersonas = [];
let userPersonas = [];
let pendingMarketPersona = null;
let editingPersonaId = null;
let activeUserPersonaId = null;
let activeMarketView = "ai-characters";
let marketActivityDepth = 0;

async function request(url, data, method = "POST") {
    try {
        const res = await fetch(url, {
            method,
            headers: {"Content-Type": "application/json"},
            body: data ? JSON.stringify(data) : undefined
        });
        return await res.json();
    } catch {
        return {error: "Network error - please try again."};
    }
}

const get = (url) => request(url, null, "GET");
const post = (url, data) => request(url, data, "POST");
const put = (url, data) => request(url, data, "PUT");

function applyTheme(themeKey) {
    const nextTheme = themes[themeKey] ? themeKey : "fakegpt";
    document.body.dataset.theme = nextTheme;
    document.title = `${themes[nextTheme].name} Market`;
    themeNameTargets.forEach((target) => {
        target.textContent = themes[nextTheme].name;
    });
}

function setMarketStatus(message, state = "") {
    marketStatus.textContent = message;
    marketStatus.className = state ? `status persona-status ${state}` : "status persona-status";
}

function setPersonaFormNotice(message = "", state = "") {
    if (!message) {
        marketPersonaFormNotice.textContent = "";
        marketPersonaFormNotice.className = "status hidden";
        return;
    }
    marketPersonaFormNotice.textContent = message;
    marketPersonaFormNotice.className = state ? `status ${state}` : "status";
}

function setMarketActivity(active, {
    eyebrow = "Please wait",
    title = "Opening roleplay",
    detail = "The AI character is preparing the first message."
} = {}) {
    if (!marketActivityOverlay || !marketActivityEyebrow || !marketActivityTitle || !marketActivityDetail) return;
    if (active) {
        marketActivityDepth += 1;
        marketActivityEyebrow.textContent = eyebrow;
        marketActivityTitle.textContent = title;
        marketActivityDetail.textContent = detail;
        marketActivityOverlay.classList.remove("hidden");
        return;
    }
    marketActivityDepth = Math.max(0, marketActivityDepth - 1);
    if (marketActivityDepth === 0) {
        marketActivityOverlay.classList.add("hidden");
        marketActivityEyebrow.textContent = "Please wait";
        marketActivityTitle.textContent = "Opening roleplay";
        marketActivityDetail.textContent = "The AI character is preparing the first message.";
    }
}

function setMarketView(view) {
    const normalizedView = view === "user-personas" ? "user-personas" : "ai-characters";
    activeMarketView = normalizedView;
    marketViewButtons.forEach((item) => item.classList.toggle("active", item.dataset.marketView === normalizedView));
    marketPanels.forEach((panel) => panel.classList.toggle("active", panel.dataset.marketPanel === normalizedView));
    const params = new URLSearchParams(window.location.search);
    params.set("view", normalizedView);
    history.replaceState(null, "", `${window.location.pathname}?${params.toString()}`);
    applyMarketFilter();
}

function buildPersonaMeta(persona) {
    const creator = persona.creator_username || "You";
    const pronouns = persona.pronouns ? `Pronouns: ${persona.pronouns}` : "Pronouns: n/a";
    return `${creator} | ${pronouns}`;
}

function formatPersonaField(value) {
    return value && value.trim() ? value.trim() : "Not provided.";
}

function setCollapsiblePreviewText(element, value, maxLength = 220) {
    const text = formatPersonaField(value);
    element.dataset.fullText = text;
    let toggle = element.nextElementSibling;
    if (!toggle || !toggle.classList.contains("market-preview-toggle")) {
        toggle = document.createElement("button");
        toggle.type = "button";
        toggle.className = "market-preview-toggle hidden";
        element.insertAdjacentElement("afterend", toggle);
        toggle.addEventListener("click", () => {
            const isExpanded = element.dataset.expanded === "true";
            element.dataset.expanded = isExpanded ? "false" : "true";
            if (element.dataset.expanded === "true") {
                element.textContent = element.dataset.fullText;
                toggle.textContent = "Show less";
            } else {
                element.textContent = `${element.dataset.fullText.slice(0, maxLength).trimEnd()}...`;
                toggle.textContent = "Show more";
            }
        });
    }

    const shouldCollapse = text !== "Not provided." && text.length > maxLength;
    element.dataset.expanded = "false";
    if (shouldCollapse) {
        element.textContent = `${text.slice(0, maxLength).trimEnd()}...`;
        toggle.textContent = "Show more";
        toggle.classList.remove("hidden");
    } else {
        element.textContent = text;
        toggle.classList.add("hidden");
    }
}

function closeMarketPreview() {
    marketPreviewModal.classList.add("hidden");
    pendingMarketPersona = null;
    marketPreviewUserPersonaSelect.innerHTML = "";
    marketPreviewScenario.value = "";
}

function populateUserPersonaChoices() {
    marketPreviewUserPersonaSelect.innerHTML = "";

    const promptOption = document.createElement("option");
    promptOption.value = "";
    promptOption.textContent = "Choose who you are in this roleplay";
    promptOption.disabled = true;
    promptOption.selected = true;
    marketPreviewUserPersonaSelect.appendChild(promptOption);

    const selfOption = document.createElement("option");
    selfOption.value = "self";
    selfOption.textContent = "Yourself (no persona)";
    marketPreviewUserPersonaSelect.appendChild(selfOption);

    userPersonas.forEach((persona) => {
        const option = document.createElement("option");
        option.value = String(persona.id);
        option.textContent = persona.name;
        option.selected = persona.id === activeUserPersonaId;
        marketPreviewUserPersonaSelect.appendChild(option);
    });

    const createOption = document.createElement("option");
    createOption.value = "create_new";
    createOption.textContent = "Create new persona";
    marketPreviewUserPersonaSelect.appendChild(createOption);
}

function openMarketPreview(persona) {
    pendingMarketPersona = persona;
    marketPreviewName.textContent = persona.name;
    marketPreviewMeta.textContent = buildPersonaMeta(persona);
    setCollapsiblePreviewText(marketPreviewPronouns, persona.pronouns, 80);
    setCollapsiblePreviewText(marketPreviewAppearance, persona.appearance);
    setCollapsiblePreviewText(marketPreviewBackground, persona.background);
    setCollapsiblePreviewText(marketPreviewDetails, persona.details);
    setCollapsiblePreviewText(marketPreviewExampleDialogues, persona.example_dialogues);

    const isAssistant = persona.persona_type === "assistant";
    marketPreviewUserPersonaField.classList.toggle("hidden", !isAssistant);
    marketPreviewScenarioField.classList.toggle("hidden", !isAssistant);
    marketPreviewConfirm.textContent = isAssistant ? "Start roleplay" : "Collect persona";
    if (isAssistant) {
        populateUserPersonaChoices();
        marketPreviewConfirm.classList.add("hidden");
    } else {
        marketPreviewConfirm.classList.remove("hidden");
    }
    marketPreviewModal.classList.remove("hidden");
}

function openPersonaForm(persona = null) {
    editingPersonaId = persona ? persona.id : null;
    marketPersonaFormTitle.textContent = persona ? "Edit AI Character" : "Create AI Character";
    marketPersonaName.value = persona?.name || "";
    marketPersonaPronouns.value = persona?.pronouns || "";
    marketPersonaAppearance.value = persona?.appearance || "";
    marketPersonaBackground.value = persona?.background || "";
    marketPersonaDetails.value = persona?.details || "";
    marketPersonaExampleDialogues.value = persona?.example_dialogues || "";
    setPersonaFormNotice("");
    marketPersonaModal.classList.remove("hidden");
    marketPersonaName.focus();
}

function closePersonaForm() {
    marketPersonaModal.classList.add("hidden");
    editingPersonaId = null;
    setPersonaFormNotice("");
}

function renderMarketList(items, listElement, type) {
    listElement.innerHTML = "";
    if (!items.length) {
        const empty = document.createElement("p");
        empty.className = "status persona-status";
        empty.textContent = type === "assistant" ? "No AI Characters found." : "No User Personas found.";
        listElement.appendChild(empty);
        return;
    }

    items.forEach((persona) => {
        const item = document.createElement("div");
        const titleRow = document.createElement("div");
        const title = document.createElement("h4");
        const tag = document.createElement("span");
        const meta = document.createElement("p");
        const actions = document.createElement("div");
        const detailsBtn = document.createElement("button");

        item.className = "persona-item";
        titleRow.className = "persona-title-row";
        actions.className = "persona-item-actions";
        tag.className = `persona-role-tag ${type === "assistant" ? "ai" : "user"}`;
        tag.textContent = type === "assistant" ? "AI Character" : "User";
        title.textContent = persona.name;
        meta.textContent = buildPersonaMeta(persona);

        detailsBtn.type = "button";
        detailsBtn.textContent = "Preview";
        detailsBtn.addEventListener("click", () => openMarketPreview(persona));

        if (type !== "assistant") {
            const quickActionBtn = document.createElement("button");
            quickActionBtn.type = "button";
            quickActionBtn.textContent = "Collect";
            quickActionBtn.addEventListener("click", () => {
                void collectMarketPersona(persona.id);
            });
            actions.appendChild(quickActionBtn);
        }

        titleRow.append(title, tag);
        actions.appendChild(detailsBtn);
        item.append(titleRow, meta, actions);
        listElement.appendChild(item);
    });
}

function filterMarketPersonas() {
    const query = marketSearchInput.value.trim().toLowerCase();
    if (!query) return allMarketPersonas;
    return allMarketPersonas.filter((persona) =>
        [persona.name, persona.creator_username, persona.pronouns, persona.appearance, persona.background, persona.details, persona.example_dialogues]
            .some((field) => field && field.toLowerCase().includes(query))
    );
}

function applyMarketFilter() {
    const filtered = filterMarketPersonas();
    const assistantItems = filtered.filter((persona) => persona.persona_type === "assistant");
    const userItems = filtered.filter((persona) => persona.persona_type === "user");
    renderMarketList(assistantItems, marketPersonaList, "assistant");
    renderMarketList(userItems, marketUserPersonaList, "user");

    if (marketSearchInput.value.trim() && !filtered.length) {
        setMarketStatus("No personas match your search.", "error");
        return;
    }
    if (activeMarketView === "ai-characters") {
        setMarketStatus(`${assistantItems.length} AI Character${assistantItems.length === 1 ? "" : "s"} ready for roleplay.`);
        return;
    }
    if (activeMarketView === "user-personas") {
        setMarketStatus(`${userItems.length} User Persona${userItems.length === 1 ? "" : "s"} available to collect.`);
        return;
    }
    setMarketStatus(`${assistantItems.length + userItems.length} persona${assistantItems.length + userItems.length === 1 ? "" : "s"} shown.`);
}

async function loadOwnedPersonas() {
    const res = await get("/personas");
    if (res.error) return false;
    assistantPersonas = res.assistantPersonas || [];
    userPersonas = res.userPersonas || [];
    activeUserPersonaId = res.activeUserPersonaId || null;
    return true;
}

async function loadMarketPersonas() {
    setMarketStatus("Loading personas...");
    const [marketRes, ownedOk] = await Promise.all([get("/personas/market"), loadOwnedPersonas()]);
    if (marketRes.error) {
        setMarketStatus(marketRes.error, "error");
        return;
    }
    if (!ownedOk) {
        setMarketStatus("Unable to load your personas.", "error");
        return;
    }
    allMarketPersonas = marketRes.personas || [];
    applyMarketFilter();
}

async function collectMarketPersona(marketId) {
    setMarketStatus("Collecting User Persona...");
    const res = await post(`/personas/market/${marketId}/collect`, {equip: true});
    if (res.error) {
        setMarketStatus(res.error, "error");
        return;
    }
    await loadMarketPersonas();
    setMarketStatus("User Persona collected.", "success");
}

async function startMarketPersonaChat(marketId, userPersonaSelection, scenarioPrompt = "") {
    if (!userPersonaSelection) {
        setMarketStatus("Choose who you are before starting roleplay.", "error");
        return;
    }
    if (userPersonaSelection === "create_new") {
        window.location.href = "/settings?view=my-roleplay-companions&create=user";
        return;
    }

    setMarketStatus("Starting AI Character chat...");
    setMarketActivity(true, {
        eyebrow: "Starting roleplay",
        title: "Opening AI Character chat",
        detail: "Generating the initial message and preparing the chat window."
    });
    const userPersonaId = userPersonaSelection === "self" ? null : Number(userPersonaSelection);
    const res = await post(`/personas/market/${marketId}/chat`, {
        userPersonaId,
        scenarioPrompt: scenarioPrompt.trim()
    });
    if (res.error || !res.chat) {
        setMarketActivity(false);
        setMarketStatus(res.error || "Unable to start chat.", "error");
        return;
    }
    window.location.href = `/?chat=${res.chat.id}`;
}

async function savePersona() {
    const payload = {
        personaType: "assistant",
        name: marketPersonaName.value.trim(),
        pronouns: marketPersonaPronouns.value.trim(),
        appearance: marketPersonaAppearance.value.trim(),
        background: marketPersonaBackground.value.trim(),
        details: marketPersonaDetails.value.trim(),
        exampleDialogues: marketPersonaExampleDialogues.value.trim()
    };

    if (!payload.name) {
        setPersonaFormNotice("Character name is required.", "error");
        return;
    }

    const res = editingPersonaId
        ? await put(`/personas/${editingPersonaId}`, payload)
        : await post("/personas", payload);

    if (res.error) {
        setPersonaFormNotice(res.error, "error");
        return;
    }

    await loadMarketPersonas();
    closePersonaForm();
    setMarketView("ai-characters");
    setMarketStatus(editingPersonaId ? "AI Character updated." : "AI Character created.", "success");
}

refreshMarketBtn.addEventListener("click", () => {
    void loadMarketPersonas();
});
marketSearchInput.addEventListener("input", applyMarketFilter);
marketViewButtons.forEach((button) => {
    button.addEventListener("click", () => setMarketView(button.dataset.marketView));
});
if (marketCreateAiCharacterBtn) {
    marketCreateAiCharacterBtn.addEventListener("click", () => openPersonaForm());
}
if (marketCreateUserPersonaBtn) {
    marketCreateUserPersonaBtn.addEventListener("click", () => {
        window.location.href = "/settings?view=my-roleplay-companions&create=user";
    });
}
marketPreviewClose.addEventListener("click", closeMarketPreview);
marketPreviewModal.addEventListener("click", (event) => {
    if (event.target === marketPreviewModal) closeMarketPreview();
});
marketPreviewUserPersonaSelect.addEventListener("change", () => {
    if (!pendingMarketPersona || pendingMarketPersona.persona_type !== "assistant") return;
    if (marketPreviewUserPersonaSelect.value === "create_new") {
        window.location.href = "/settings?view=my-roleplay-companions&create=user";
        return;
    }
    marketPreviewConfirm.classList.toggle("hidden", !marketPreviewUserPersonaSelect.value);
});
marketPreviewConfirm.addEventListener("click", async () => {
    if (!pendingMarketPersona) return;
    const marketId = pendingMarketPersona.id;
    if (pendingMarketPersona.persona_type === "assistant") {
        await startMarketPersonaChat(
            marketId,
            marketPreviewUserPersonaSelect.value || "self",
            marketPreviewScenario.value || ""
        );
        closeMarketPreview();
        return;
    }
    closeMarketPreview();
    await collectMarketPersona(marketId);
});
marketPersonaClose.addEventListener("click", closePersonaForm);
marketPersonaModal.addEventListener("click", (event) => {
    if (event.target === marketPersonaModal) closePersonaForm();
});
marketPersonaForm.addEventListener("submit", (event) => {
    event.preventDefault();
    void savePersona();
});

window.addEventListener("load", async () => {
    applyTheme(localStorage.getItem("krishd-theme") || "fakegpt");
    const params = new URLSearchParams(window.location.search);
    setMarketView(params.get("view") || "ai-characters");
    await loadMarketPersonas();
    if (params.get("create") === "assistant") {
        setMarketView("ai-characters");
        openPersonaForm();
    }
});