renderer.js

const orgList = document.getElementById('org-list');
const searchInput = document.getElementById('search-input');
const sortSelect = document.getElementById('sort-select');
const groupSelect = document.getElementById('group-select');
const refreshBtn = document.getElementById('refresh-btn');
const addOrgBtn = document.getElementById('add-org-btn');

// Modal Elements
const editModal = document.getElementById('edit-modal');
const editName = document.getElementById('edit-name');
const editAlias = document.getElementById('edit-alias');
const editFolder = document.getElementById('edit-folder');
const editTags = document.getElementById('edit-tags');
const saveEditBtn = document.getElementById('save-edit');
const cancelEditBtn = document.getElementById('cancel-edit');
const folderList = document.getElementById('folder-list');

const infoModal = document.getElementById('info-modal');
const infoContent = document.getElementById('info-content');

let rawOrgs = [];
let metadata = {};
let currentEditingUsername = null;
let activeDropdown = null;

// Initial Load
(async () => {
    await loadData();
    setupEventListeners();
    
    setupEventListeners();
})();

function setupEventListeners() {
    searchInput.addEventListener('input', render);
    sortSelect.addEventListener('change', render);
    groupSelect.addEventListener('change', render);
    refreshBtn.addEventListener('click', loadData);
    // addOrgBtn handled by setupAddOrgListeners now
    setupAddOrgListeners();
    
    // Modal
    cancelEditBtn.addEventListener('click', closeModal);
    saveEditBtn.addEventListener('click', saveEdit);

    // Close dropdowns on click outside
    document.addEventListener('click', (e) => {
        if (!e.target.closest('.action-menu-container')) {
            closeActiveDropdown();
        }
    });

    // Close info on Esc
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            closeModal();
            infoModal.classList.add('hidden');
            closeActiveDropdown();
        }
    });
}

async function loadData() {
    if (orgList.innerHTML.includes('loading') && rawOrgs.length > 0) {
        // quiet refresh
    } else {
        orgList.innerHTML = '<div class="loading">Loading orgs...</div>';
    }
    
    refreshBtn.disabled = true;
    try {
        const [fetchedOrgs, fetchedMetadata] = await Promise.all([
            window.electronAPI.getOrgs(),
            window.electronAPI.getOrgMetadata()
        ]);

        rawOrgs = [];
        const seenUsernames = new Set();

        const addOrgs = (list) => {
            if (!list) return;
            list.forEach(org => {
                if (!seenUsernames.has(org.username)) {
                    seenUsernames.add(org.username);
                    rawOrgs.push(org);
                }
            });
        };

        addOrgs(fetchedOrgs.nonScratchOrgs);
        addOrgs(fetchedOrgs.scratchOrgs);
        addOrgs(fetchedOrgs.devHubs);

        metadata = fetchedMetadata || {};

        updateFolderSuggestions();
        render();
    } catch (error) {
        orgList.innerHTML = `<div class="error">Failed to load: ${error}</div>`;
    } finally {
        refreshBtn.disabled = false;
    }
}

async function handleAddOrg() {
    addOrgBtn.textContent = '...';
    try {
        await window.electronAPI.loginOrg();
        loadData(); // Refresh list after login
    } catch (e) {
        alert('Login failed: ' + e);
    } finally {
        addOrgBtn.textContent = '+';
    }
}

function updateFolderSuggestions() {
    const folders = new Set();
    Object.values(metadata).forEach(m => {
        if (m.folder) folders.add(m.folder);
    });
    folderList.innerHTML = Array.from(folders).map(f => `<option value="${f}">`).join('');
}

function getOrgDisplayData(org) {
    const meta = metadata[org.username] || {};
    const displayName = meta.customName || org.alias || org.username;
    let subText = org.username;
    if (meta.customName) {
        subText = org.alias ? `${org.alias} (${org.username})` : org.username;
    } else if (org.alias) {
        subText = org.username;
    }

    return {
        ...org,
        displayName,
        subText,
        tags: meta.tags || [],
        folder: meta.folder || 'Unfiled',
        customName: meta.customName || ''
    };
}

function render() {
    const filter = searchInput.value.toLowerCase();
    const sortMode = sortSelect.value;
    const groupMode = groupSelect.value;

    let processed = rawOrgs.map(getOrgDisplayData);

    // Filter
    if (filter) {
        processed = processed.filter(org => {
            return org.displayName.toLowerCase().includes(filter) || 
                   org.subText.toLowerCase().includes(filter) ||
                   (org.tags && org.tags.some(t => t.toLowerCase().includes(filter)));
        });
    }

    // Sort
    processed.sort((a, b) => {
        if (sortMode === 'name') return a.displayName.localeCompare(b.displayName);
        if (sortMode === 'lastUsed') {
            const dateA = new Date(a.lastUsed || 0);
            const dateB = new Date(b.lastUsed || 0);
            return dateB - dateA;
        }
        if (sortMode === 'type') {
            const typeA = a.isDevHub ? 'Dev Hub' : (a.isScratch ? 'Scratch' : 'Sandbox');
            const typeB = b.isDevHub ? 'Dev Hub' : (b.isScratch ? 'Scratch' : 'Sandbox');
            return typeA.localeCompare(typeB);
        }
        return 0;
    });

    // Group
    const groups = {};
    if (groupMode !== 'none') {
        processed.forEach(org => {
            let key = 'Other';
            if (groupMode === 'folder') key = org.folder || 'Unfiled';
            if (groupMode === 'tag') {
                key = (org.tags && org.tags.length > 0) ? org.tags[0] : 'Untagged';
            }
            if (!groups[key]) groups[key] = [];
            groups[key].push(org);
        });
    } else {
        groups['All'] = processed;
    }

    orgList.innerHTML = '';
    const sortedKeys = Object.keys(groups).sort();

    if (processed.length === 0) {
        orgList.innerHTML = '<div class="empty">No orgs match your search.</div>';
        return;
    }

    sortedKeys.forEach(groupKey => {
        if (groupMode !== 'none') {
            const header = document.createElement('div');
            header.className = 'group-header';
            header.textContent = groupKey;
            header.addEventListener('click', () => {
                // Collapsible WIP - toggle next sibling visibility?
                // For now, simple header.
            });
            orgList.appendChild(header);
        }

        groups[groupKey].forEach(org => {
            const item = document.createElement('div');
            item.className = 'org-item';
            
            const tagsHtml = org.tags.map(t => `<span class="tag-chip">${t}</span>`).join('');

            item.innerHTML = `
                <div class="org-info">
                    <div class="org-name">${org.displayName}</div>
                    <div class="org-subtext">${org.subText}</div>
                    <div class="tags-container">${tagsHtml}</div>
                </div>
                <div class="actions">
                    <button class="open-btn">Open</button>
                    <div class="action-menu-container">
                        <button class="menu-btn">⋮</button>
                        <div class="dropdown-menu">
                            <div class="dropdown-item" data-action="incognito">Open Incognito</div>
                            <div class="dropdown-item" data-action="details">Details</div>
                            <div class="dropdown-item" data-action="generate-link">Generate Link</div>
                            <div class="dropdown-item" data-action="edit">Edit</div>
                            <div class="dropdown-item danger" data-action="logout">Logout</div>
                        </div>
                    </div>
                </div>
            `;

            // Handlers
            item.querySelector('.open-btn').addEventListener('click', (e) => handleOpen(org, e.target));
            
            const menuBtn = item.querySelector('.menu-btn');
            const dropdown = item.querySelector('.dropdown-menu');

            menuBtn.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                toggleDropdown(dropdown);
            });

            dropdown.querySelectorAll('.dropdown-item').forEach(opt => {
                opt.addEventListener('click', () => handleMenuAction(org, opt.dataset.action));
            });

            orgList.appendChild(item);
        });
    });
}

function toggleDropdown(menu) {
    // exact same menu clicked?
    const isSame = activeDropdown === menu;
    closeActiveDropdown();
    if (!isSame) {
        menu.classList.add('show');
        activeDropdown = menu;
    }
}

function closeActiveDropdown() {
    if (activeDropdown) {
        activeDropdown.classList.remove('show');
        activeDropdown = null;
    }
}

async function handleOpen(org, btn) {
    btn.textContent = '...';
    btn.disabled = true;
    try {
        await window.electronAPI.openOrg(org.username);
        btn.textContent = 'Opened';
        setTimeout(() => {
            btn.textContent = 'Open';
            btn.disabled = false;
        }, 2000);
    } catch (err) {
        console.error(err);
        btn.textContent = 'Error';
        btn.classList.add('error');
    }
}

async function handleGenerateLink(org, btn) {
    const originalText = btn.textContent;
    btn.textContent = '...';
    btn.disabled = true;
    try {
        const url = await window.electronAPI.getOrgUrl(org.username);
        await copyToClipboard(url, btn);
        btn.textContent = 'Link Copied!';
        setTimeout(() => {
            btn.textContent = originalText;
            btn.disabled = false;
        }, 2000);
    } catch (err) {
        console.error(err);
        btn.textContent = 'Error';
        setTimeout(() => {
            btn.textContent = originalText;
            btn.disabled = false;
        }, 2000);
    }
}

async function copyToClipboard(text, btn) {
    try {
        await navigator.clipboard.writeText(text);
        if (btn && btn.classList.contains('copy-btn')) {
            btn.classList.add('copied');
            setTimeout(() => btn.classList.remove('copied'), 2000);
        }
    } catch (err) {
        console.error('Failed to copy!', err);
    }
}


async function handleMenuAction(org, action) {
    closeActiveDropdown();
    try {
        if (action === 'edit') {
            openEditModal(org);
        } else if (action === 'details') {
            showDetails(org);
        } else if (action === 'incognito') {
            await window.electronAPI.openOrgIncognito(org.username);
        } else if (action === 'generate-link') {
            // Need a reference to the dropdown item or some button for feedback?
            // For now, let's just copy.
            const url = await window.electronAPI.getOrgUrl(org.username);
            await copyToClipboard(url);
            alert('Login link copied to clipboard!');
        } else if (action === 'logout') {
            if (confirm(`Logout from ${org.username}?`)) {
                await window.electronAPI.logoutOrg(org.username);
                loadData();
            }
        }
    } catch (e) {
        alert(`Action failed: ${e}`);
    }
}

// --- Add Org Modal Logic ---
const addOrgModal = document.getElementById('add-org-modal');
const addAliasInput = document.getElementById('add-alias');
const confirmAddBtn = document.getElementById('confirm-add');
const cancelAddBtn = document.getElementById('cancel-add');

function setupAddOrgListeners() {
    addOrgBtn.addEventListener('click', openAddModal);
    cancelAddBtn.addEventListener('click', closeAddModal);
    confirmAddBtn.addEventListener('click', executeAddOrg);
}

function openAddModal() {
    addAliasInput.value = '';
    addOrgModal.classList.remove('hidden');
    addAliasInput.focus();
    
    // Allow Enter key to submit
    addAliasInput.onkeydown = (e) => {
        if (e.key === 'Enter') executeAddOrg();
    };
}

function closeAddModal() {
    addOrgModal.classList.add('hidden');
}

async function executeAddOrg() {
    const alias = addAliasInput.value.trim();
    closeAddModal();

    addOrgBtn.textContent = '...';
    try {
        await window.electronAPI.loginOrg(alias);
        loadData(); 
    } catch (e) {
        alert('Login failed: ' + e);
        console.error(e);
    } finally {
        addOrgBtn.textContent = '+';
    }
}

// Call setup in main setup function
// (We'll patch setupEventListeners below)

function showDetails(org) {
    const fields = [
        { label: 'Org ID', value: org.orgId },
        { label: 'Username', value: org.username },
        { label: 'Instance URL', value: org.instanceUrl },
        { label: 'Status', value: org.connectedStatus },
        { label: 'Alias', value: org.alias || '-' },
        { label: 'Type', value: org.isScratch ? 'Scratch' : (org.isDevHub ? 'Dev Hub' : 'Sandbox/Prod') },
        { label: 'Expiration', value: org.expirationDate || '-' }
    ];

    infoContent.innerHTML = fields.map(f => `
        <div class="info-label">${f.label}</div>
        <div class="info-value-container">
            <div class="info-value">${f.value}</div>
            <button class="copy-btn" title="Copy to clipboard" data-value="${f.value}">⧉</button>
        </div>
    `).join('');

    infoContent.querySelectorAll('.copy-btn').forEach(btn => {
        btn.addEventListener('click', () => copyToClipboard(btn.dataset.value, btn));
    });


    // Add Generate Link button to modal actions
    const modalActions = infoModal.querySelector('.modal-actions');
    // Clear existing besides close if we re-open? Actually let's just replace the whole actions div or add if not there.
    modalActions.innerHTML = `
        <button id="detail-generate-link" class="generate-link-btn">Generate Link</button>
        <button onclick="document.getElementById('info-modal').classList.add('hidden')">Close</button>
    `;

    document.getElementById('detail-generate-link').addEventListener('click', (e) => handleGenerateLink(org, e.target));

    infoModal.classList.remove('hidden');
}

// --- Edit Modal Logic ---

function openEditModal(org) {
    currentEditingUsername = org.username;
    
    // Fill values
    editAlias.value = org.alias || ''; // CLI Alias
    editName.value = org.customName || ''; // Local Name
    editFolder.value = org.folder === 'Unfiled' ? '' : org.folder;
    editTags.value = (org.tags || []).join(', ');

    editModal.classList.remove('hidden');
    editAlias.focus();
}

function closeModal() {
    editModal.classList.add('hidden');
    currentEditingUsername = null;
}

async function saveEdit() {
    if (!currentEditingUsername) return;

    const newTags = editTags.value.split(',').map(t => t.trim()).filter(t => t);
    const newAlias = editAlias.value.trim();
    
    // 1. Handle CLI Alias change
    // If alias changed, call sf alias set
    const currentOrg = rawOrgs.find(o => o.username === currentEditingUsername);
    if (currentOrg && currentOrg.alias !== newAlias && newAlias) {
        try {
            await window.electronAPI.setAlias(newAlias, currentEditingUsername);
        } catch (e) {
            console.error('Failed to set alias', e);
            alert('Failed to update CLI alias: ' + e);
            return; // Stop if alias update fails
        }
    }

    // 2. Handle Local Metadata
    if (!metadata[currentEditingUsername]) metadata[currentEditingUsername] = {};
    
    metadata[currentEditingUsername].customName = editName.value.trim();
    metadata[currentEditingUsername].folder = editFolder.value.trim();
    metadata[currentEditingUsername].tags = newTags;

    // Save
    await window.electronAPI.saveOrgMetadata(metadata);
    
    closeModal();
    updateFolderSuggestions(); 
    
    // 3. Reload everything since alias change affects rawOrgs
    loadData(); 
}