const GITEA_INSTANCE = 'https://git.waifuboard.app';
const REPO_OWNER = 'ItsSkaiya';
const REPO_NAME = 'WaifuBoard-Extensions';

let DETECTED_BRANCH = 'main'; 

const API_URL_BASE = `${GITEA_INSTANCE}/api/v1/repos/${REPO_OWNER}/${REPO_NAME}/contents`;

document.addEventListener('DOMContentLoaded', async () => {
    const browseGrid = document.getElementById('marketplace-grid');
    const installedGrid = document.getElementById('installed-grid');
    const statTotal = document.getElementById('stat-total');
    const statInstalled = document.getElementById('stat-installed');
    const tabBrowse = document.getElementById('tab-browse');
    const tabInstalled = document.getElementById('tab-installed');
    const viewBrowse = document.getElementById('view-browse');
    const viewInstalled = document.getElementById('view-installed');
    const messageBar = document.getElementById('message-bar');

    let allRemoteExtensions = [];
    let installedExtensionsList = []; 

    function showMessage(msg, type = 'success') {
        if (!messageBar) return;
        messageBar.textContent = msg;
        messageBar.className = `toast ${type === 'error' ? 'error' : ''}`;
        messageBar.classList.remove('hidden');
        setTimeout(() => messageBar.classList.add('hidden'), 3000);
    }

    function updateStats() {
        if(statTotal) statTotal.textContent = allRemoteExtensions.length;
        if(statInstalled) statInstalled.textContent = installedExtensionsList.length;
    }

    function showRestartToast() {
        if (document.getElementById('restart-toast')) return;
        const toast = document.createElement('div');
        toast.id = 'restart-toast';
        toast.style.cssText = `position: fixed; bottom: 20px; right: 20px; background: #1f2937; border: 1px solid var(--accent); border-radius: 12px; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 2000; animation: slideUp 0.3s ease-out;`;
        toast.innerHTML = `<div style="display:flex; flex-direction:column;"><span style="color:#fff; font-weight:600;">Restart Required</span><span style="color:#9ca3af; font-size:0.8rem;">Changes will apply after restart.</span></div><button id="btn-restart-now" style="background: var(--accent); color: white; border: none; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 0.85rem; transition: 0.2s;">Restart Now</button>`;
        document.body.appendChild(toast);
        const btn = document.getElementById('btn-restart-now');
        btn.onmouseover = () => btn.style.opacity = '0.9';
        btn.onmouseout = () => btn.style.opacity = '1';
        btn.onclick = () => {
            if (window.api && typeof window.api.restartApp === 'function') window.api.restartApp();
            else alert("Please close and reopen the application manually.");
        };
    }

    function switchTab(tab) {
        if (tab === 'browse') {
            tabBrowse.classList.add('active');
            tabInstalled.classList.remove('active');
            viewBrowse.classList.remove('hidden');
            viewInstalled.classList.add('hidden');
        } else {
            tabBrowse.classList.remove('active');
            tabInstalled.classList.add('active');
            viewBrowse.classList.add('hidden');
            viewInstalled.classList.remove('hidden');
            renderInstalledGrid(); 
        }
    }

    if(tabBrowse) tabBrowse.onclick = () => switchTab('browse');
    if(tabInstalled) tabInstalled.onclick = () => switchTab('installed');

    async function fetchInstalledExtensions() {
        try {
            const extensions = await window.api.getInstalledExtensions();
            installedExtensionsList = extensions || [];
        } catch (e) {
            console.error("Failed to fetch installed extensions:", e);
            installedExtensionsList = [];
        }
    }

    async function fetchRemoteExtensions() {
        try {
            let res = await fetch(API_URL_BASE);
            
            if (res.status === 404) {
                console.warn("Default branch failed, trying 'main'...");
                DETECTED_BRANCH = 'main';
                res = await fetch(`${API_URL_BASE}?ref=main`);
            }
            if (res.status === 404) {
                console.warn("Main branch failed, trying 'master'...");
                DETECTED_BRANCH = 'master';
                res = await fetch(`${API_URL_BASE}?ref=master`);
            }

            if (!res.ok) throw new Error(`Gitea API Error: ${res.status}`);

            const data = await res.json();
            
            if (Array.isArray(data)) {
                allRemoteExtensions = data.filter(item => item.name.endsWith('.js'));
                renderBrowseGrid(allRemoteExtensions);
                updateStats();
            } else {
                throw new Error("Invalid API response format");
            }

        } catch (e) {
            console.error(e);
            if(browseGrid) browseGrid.innerHTML = `<div class="loading-state"><p style="color:#ef4444">Failed to load marketplace.<br>${e.message}</p></div>`;
        }
    }

    function getRawUrl(filename) {
        return `${GITEA_INSTANCE}/${REPO_OWNER}/${REPO_NAME}/raw/branch/main/${filename}`;
    }

    async function getExtensionDetails(url) {
        try {
            const res = await fetch(url);
            if (!res.ok) throw new Error(`Fetch failed: ${res.status}`);
            const text = await res.text();
            
            const regex = /(?:this\.|const\s+|let\s+|var\s+)?baseUrl\s*=\s*(["'`])(.*?)\1/i;
            const match = text.match(regex);
            
            let finalHostname = null;
            if (match && match[2]) {
                let rawUrl = match[2].trim();
                if (!rawUrl.startsWith('http')) rawUrl = 'https://' + rawUrl;
                try {
                    const urlObj = new URL(rawUrl);
                    finalHostname = urlObj.hostname;
                } catch(e) {}
            }

            const classMatch = text.match(/class\s+(\w+)/);
            const name = classMatch ? classMatch[1] : null;

            let type = 'Image';
            if (text.includes('type = "book-board"') || text.includes("type = 'book-board'")) type = 'Book';

            return { baseUrl: finalHostname, name, type };
        } catch (e) {
            return { baseUrl: null, name: null, type: 'Unknown' };
        }
    }

    async function createCard(item, isLocalOnly = false) {
        const isInstalled = installedExtensionsList.includes(item.name);
        
        const downloadUrl = getRawUrl(item.name);

        let sizeKB = item.size ? (item.size / 1024).toFixed(1) + ' KB' : 'Local';
        let iconUrl = '';
        let displayName = item.name.replace('.js', '');
        let typeLabel = 'Extension';
        let typeClass = 'type-image';
        
        const fallbackIcon = `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22gray%22 stroke-width=%222%22><rect x=%223%22 y=%223%22 width=%2218%22 height=%2218%22 rx=%222%22/></svg>`;

        if (!isLocalOnly) {
            const details = await getExtensionDetails(downloadUrl);
            displayName = details.name || displayName;
            
            if (details.baseUrl) {
                iconUrl = `https://www.google.com/s2/favicons?domain=${details.baseUrl}&sz=128`;
            } else {
                iconUrl = `https://ui-avatars.com/api/?name=${displayName}&background=1f2937&color=fff&length=1`;
            }

            if (details.type === 'Book') {
                typeLabel = 'Book Board';
                typeClass = 'type-book';
            }
        } else {
            iconUrl = `https://ui-avatars.com/api/?name=${displayName}&background=1f2937&color=fff&length=1`;
        }

        const card = document.createElement('div');
        card.className = 'extension-card';
        card.dataset.name = item.name; 
        
        const downloadIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>';
        const trashIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>';
        const checkIcon = '<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';

        const renderInner = (installed) => `
            <div class="card-header-row">
                <div class="ext-icon-box">
                    <img src="${iconUrl}" class="ext-icon" onerror="this.onerror=null; this.src='${fallbackIcon}'">
                </div>
                <span class="type-badge ${typeClass}">${typeLabel}</span>
            </div>
            <div class="ext-info">
                <h3 class="ext-name">${displayName}</h3>
                <div class="ext-filename">${item.name}</div>
            </div>
            <div class="card-footer">
                <div class="ext-status-group">${installed ? `<span class="status-badge status-installed">${checkIcon} Installed</span>` : ''}
                    <span class="ext-size-badge">${sizeKB}</span>
                </div>
                <button class="install-btn ${installed ? 'installed' : ''}" title="${installed ? 'Uninstall' : 'Install'}">
                    ${installed ? `${trashIcon} Uninstall` : `${downloadIcon} Install`}
                </button>
            </div>
        `;

        card.innerHTML = renderInner(isInstalled);

        card.addEventListener('click', async (e) => {
            const btn = e.target.closest('.install-btn');
            if (!btn) return;

            const currentlyInstalled = installedExtensionsList.includes(item.name);

            if (currentlyInstalled) {
                const success = await window.api.uninstallExtension(item.name);
                if (success) {
                    installedExtensionsList = installedExtensionsList.filter(n => n !== item.name);
                    card.innerHTML = renderInner(false);
                    updateStats();
                    if (tabInstalled.classList.contains('active')) {
                        card.remove();
                        if (installedGrid.children.length === 0) installedGrid.innerHTML = '<div class="loading-state"><p>No extensions installed.</p></div>';
                    }
                    showRestartToast();
                } else {
                    showMessage('Failed to uninstall', 'error');
                }
            } else {
                if (!downloadUrl) return;
                const originalHTML = btn.innerHTML;
                btn.innerHTML = '<svg class="spinner" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="5"></circle></svg>';
                
                const success = await window.api.installExtension(item.name, downloadUrl);
                
                if (success) {
                    installedExtensionsList.push(item.name);
                    card.innerHTML = renderInner(true);
                    updateStats();
                    showMessage(`Installed ${displayName}`);
                    showRestartToast();
                } else {
                    showMessage('Failed to install', 'error');
                    console.error("Install failed for URL:", downloadUrl);
                    btn.innerHTML = originalHTML;
                }
            }
        });

        return card;
    }

    async function renderBrowseGrid(list) {
        browseGrid.innerHTML = '';
        if (list.length === 0) {
            browseGrid.innerHTML = '<p class="loading-state">No extensions found.</p>';
            return;
        }
        for (const item of list) {
            const card = await createCard(item);
            browseGrid.appendChild(card);
        }
    }

    async function renderInstalledGrid() {
        installedGrid.innerHTML = '';
        if (installedExtensionsList.length === 0) {
            installedGrid.innerHTML = '<div class="loading-state"><p>No extensions installed.</p></div>';
            return;
        }
        for (const filename of installedExtensionsList) {
            const remoteData = allRemoteExtensions.find(r => r.name === filename);
            const item = remoteData || { name: filename, download_url: null, size: 0 };
            const card = await createCard(item, !remoteData);
            installedGrid.appendChild(card);
        }
    }

    await fetchInstalledExtensions();
    await fetchRemoteExtensions();
});