// ==========================================
// Switchboard Core — Dashboard Package (v0.31.1)
// ==========================================
// SDK Exercise Surface. Exercises every sw.* primitive with ZERO
// component CSS overrides. All styling comes from the SDK itself.
//
// Primitives exercised:
//   sw.userMenu, sw.menu, sw.toolbar, sw.tabs, sw.dropdown,
//   sw.chat, sw.notes, sw.modal, sw.confirm, sw.toast,
//   sw.on/emit, sw.api, sw.user/isAdmin, sw.theme, sw.pipe
//
// Dependencies (loaded by base.html):
//   API, UI, App, sw, esc (ui-primitives)
// ==========================================

(function () {
    'use strict';

    const SURFACE_ID = 'dashboard';
    if (window.__SURFACE__ !== SURFACE_ID) return;

    const base = window.__BASE__ || '';

    // ── Init ─────────────────────────────────────

    async function _init() {
        const mount = document.getElementById('extension-mount');
        if (!mount) return;

        const surface = document.createElement('div');
        surface.className = 'surface-dashboard';
        surface.id = 'dashboardSurface';
        mount.appendChild(surface);

        // ── Topbar ──
        const topbar = _buildTopbar();
        surface.appendChild(topbar);

        // sw.userMenu — flyout: 'down' from topbar
        sw.userMenu(topbar, { flyout: 'down' });

        // ── Body ──
        const body = document.createElement('div');
        body.className = 'dashboard-body';
        surface.appendChild(body);

        // ── Sidebar (tabs: activity + notes) ──
        const sidebar = document.createElement('div');
        sidebar.className = 'dashboard-sidebar';
        body.appendChild(sidebar);

        // sw.tabs — two tabs
        const tabs = sw.tabs(sidebar, {
            tabs: [
                { id: 'activity', label: 'Activity' },
                { id: 'notes', label: 'Notes' },
            ],
            activeTab: 'activity',
            onActivate: function (id) {
                if (id === 'notes' && !_notesLoaded) {
                    _notesLoaded = true;
                    if (_notePanel) {
                        _notePanel.loadNotesList();
                        _notePanel.loadNoteFolders();
                    }
                }
            },
        });

        // sw.chat — standalone in activity tab
        const activityPanel = tabs.getPanel('activity');
        if (activityPanel) {
            sw.chat(activityPanel, { id: 'dash', standalone: true });
        }

        // sw.notes — lazy-loaded in notes tab
        let _notePanel = null;
        let _notesLoaded = false;
        const notesPanel = tabs.getPanel('notes');
        if (notesPanel) {
            _notePanel = sw.notes(notesPanel, { projectId: null });
        }

        // ── Main content area ──
        const main = document.createElement('div');
        main.className = 'dashboard-main';
        body.appendChild(main);

        _buildMainContent(main);

        // ── Theme reactivity ──
        sw.theme.on('change', function (resolved) {
            const cards = main.querySelectorAll('.dashboard-card');
            cards.forEach(function (c) {
                c.style.borderColor = '';  // reset to CSS default for new theme
            });
        });

        // ── Cross-component events ──
        sw.on('dashboard.filter.changed', function (payload) {
            _loadChannels(main.querySelector('.dashboard-cards'), payload.value);
        });

        console.log('[DashboardPkg] Mounted');
    }

    // ── Topbar ──────────────────────────────────

    function _buildTopbar() {
        const el = document.createElement('div');
        el.className = 'dashboard-topbar';
        el.innerHTML =
            '<a href="' + esc(base) + '/" class="dashboard-topbar-back" title="Back to chat">' +
                '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>' +
                'Back' +
            '</a>' +
            '<div class="dashboard-topbar-sep"></div>' +
            '<span class="dashboard-topbar-title">Dashboard</span>' +
            '<div class="dashboard-topbar-spacer"></div>';

        // sw.toolbar — action buttons
        const toolbarItems = [
            {
                id: 'refresh',
                icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>',
                title: 'Refresh',
                onClick: function () {
                    const cards = document.querySelector('.dashboard-cards');
                    if (cards) _loadChannels(cards, _currentFilter);
                    sw.toast('Refreshed', 'success');
                },
            },
        ];

        // sw.isAdmin — conditionally show admin action
        if (sw.isAdmin) {
            toolbarItems.push({
                id: 'admin',
                icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>',
                title: 'Admin Panel',
                onClick: function () { window.location.href = base + '/admin'; },
            });
        }

        sw.toolbar(el, { items: toolbarItems });

        return el;
    }

    // ── Main Content ────────────────────────────

    let _currentFilter = '';

    function _buildMainContent(main) {
        // sw.user — greeting
        const user = sw.user;
        const greeting = document.createElement('div');
        greeting.className = 'dashboard-greeting';
        greeting.textContent = 'Welcome back' + (user ? ', ' + (user.display_name || user.username) : '');
        main.appendChild(greeting);

        const subtitle = document.createElement('div');
        subtitle.className = 'dashboard-subtitle';
        subtitle.textContent = 'Your recent conversations' + (sw.isAdmin ? ' \u00b7 Admin' : '');
        main.appendChild(subtitle);

        // ── Filter bar ──
        const filterBar = document.createElement('div');
        filterBar.className = 'dashboard-filter-bar';
        main.appendChild(filterBar);

        const filterLabel = document.createElement('span');
        filterLabel.className = 'dashboard-filter-label';
        filterLabel.textContent = 'Filter';
        filterBar.appendChild(filterLabel);

        // sw.dropdown — channel type filter
        sw.dropdown(filterBar, {
            items: [
                { value: '', label: 'All channels' },
                { value: 'channel', label: 'Team channels' },
                { value: 'direct', label: 'Direct chats' },
                { value: 'workflow', label: 'Workflows' },
            ],
            value: '',
            onChange: function (value) {
                _currentFilter = value;
                // sw.emit — cross-component event
                sw.emit('dashboard.filter.changed', { value: value });
            },
        });

        // ── Cards ──
        const cards = document.createElement('div');
        cards.className = 'dashboard-cards';
        main.appendChild(cards);

        _loadChannels(cards, '');

        // ── Admin section (sw.isAdmin) ──
        if (sw.isAdmin) {
            const adminSection = document.createElement('div');
            adminSection.className = 'dashboard-admin-section';
            main.appendChild(adminSection);

            const sectionTitle = document.createElement('div');
            sectionTitle.className = 'dashboard-section-title';
            sectionTitle.textContent = 'Administration';
            adminSection.appendChild(sectionTitle);

            const adminCards = document.createElement('div');
            adminCards.className = 'dashboard-cards';
            adminSection.appendChild(adminCards);

            _loadAdminCards(adminCards);
        }
    }

    // ── Channel Cards ───────────────────────────

    async function _loadChannels(container, typeFilter) {
        if (!container) return;
        container.innerHTML = '<div class="dashboard-empty">Loading\u2026</div>';

        try {
            // sw.api — real API call
            let url = '/api/v1/channels?page=1&per_page=12';
            if (typeFilter) url += '&type=' + encodeURIComponent(typeFilter);
            const resp = await sw.api.get(url);
            const channels = resp || [];

            container.innerHTML = '';
            if (!channels.length) {
                container.innerHTML = '<div class="dashboard-empty">No channels found</div>';
                return;
            }

            channels.forEach(function (ch) {
                container.appendChild(_buildChannelCard(ch));
            });
        } catch (e) {
            container.innerHTML = '<div class="dashboard-empty">Failed to load: ' + (typeof esc === 'function' ? esc(e.message) : e.message) + '</div>';
        }
    }

    function _buildChannelCard(ch) {
        const card = document.createElement('div');
        card.className = 'dashboard-card';

        const header = document.createElement('div');
        header.className = 'dashboard-card-header';
        card.appendChild(header);

        const title = document.createElement('div');
        title.className = 'dashboard-card-title';
        title.textContent = ch.title || ch.name || 'Untitled';
        header.appendChild(title);

        const meta = document.createElement('div');
        meta.className = 'dashboard-card-meta';
        meta.textContent = ch.type || '';
        card.appendChild(meta);

        if (ch.description) {
            const desc = document.createElement('div');
            desc.className = 'dashboard-card-desc';
            desc.textContent = ch.description.slice(0, 120);
            card.appendChild(desc);
        }

        const updated = ch.updated_at || ch.created_at;
        if (updated) {
            const date = document.createElement('div');
            date.className = 'dashboard-card-meta';
            date.textContent = new Date(updated).toLocaleDateString();
            card.appendChild(date);
        }

        // ── Card action menu ──
        const actions = document.createElement('div');
        actions.className = 'dashboard-card-actions';
        card.appendChild(actions);

        const menuBtn = document.createElement('button');
        menuBtn.className = 'icon-btn';
        menuBtn.title = 'Actions';
        menuBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/></svg>';
        actions.appendChild(menuBtn);

        // sw.menu — per-card action flyout
        sw.menu(menuBtn, {
            items: [
                {
                    label: 'Open',
                    icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>',
                    onClick: function () {
                        window.location.href = base + '/chat/' + ch.id;
                    },
                },
                {
                    label: 'Details',
                    icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
                    onClick: function () {
                        // sw.modal — show channel details
                        _showDetailModal(ch);
                    },
                },
                { divider: true },
                {
                    label: 'Delete',
                    danger: true,
                    icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><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"/></svg>',
                    onClick: function () {
                        _deleteChannel(ch);
                    },
                },
            ],
            position: 'down',
        });

        return card;
    }

    // ── Detail Modal ────────────────────────────

    function _showDetailModal(ch) {
        // Build modal content
        let existing = document.getElementById('dashDetailModal');
        if (existing) existing.remove();

        const modal = document.createElement('div');
        modal.id = 'dashDetailModal';
        modal.className = 'modal-overlay';
        modal.style.cssText = 'position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:var(--overlay)';

        const box = document.createElement('div');
        box.style.cssText = 'background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;max-width:400px;width:90%;max-height:80vh;overflow-y:auto;';

        box.innerHTML =
            '<h3 style="margin:0 0 12px;font-size:16px;color:var(--text);">' + (typeof esc === 'function' ? esc(ch.title || 'Untitled') : (ch.title || 'Untitled')) + '</h3>' +
            '<div style="font-size:12px;color:var(--text-2);margin-bottom:8px;"><strong>Type:</strong> ' + (typeof esc === 'function' ? esc(ch.type || 'unknown') : (ch.type || 'unknown')) + '</div>' +
            '<div style="font-size:12px;color:var(--text-2);margin-bottom:8px;"><strong>ID:</strong> ' + (typeof esc === 'function' ? esc(ch.id || '') : (ch.id || '')) + '</div>' +
            (ch.description ? '<div style="font-size:12px;color:var(--text-2);margin-bottom:8px;"><strong>Description:</strong> ' + (typeof esc === 'function' ? esc(ch.description) : ch.description) + '</div>' : '') +
            (ch.created_at ? '<div style="font-size:12px;color:var(--text-3);margin-bottom:16px;">Created: ' + new Date(ch.created_at).toLocaleString() + '</div>' : '') +
            '<div style="display:flex;justify-content:flex-end;gap:8px;">' +
                '<button class="btn-small" id="dashDetailClose">Close</button>' +
                '<button class="btn-small btn-primary" id="dashDetailOpen">Open Chat</button>' +
            '</div>';

        modal.appendChild(box);
        document.body.appendChild(modal);

        modal.addEventListener('click', function (e) {
            if (e.target === modal) modal.remove();
        });
        document.getElementById('dashDetailClose').addEventListener('click', function () { modal.remove(); });
        document.getElementById('dashDetailOpen').addEventListener('click', function () {
            window.location.href = base + '/chat/' + ch.id;
        });
    }

    // ── Delete Channel ──────────────────────────

    async function _deleteChannel(ch) {
        // sw.confirm — destructive action guard
        const ok = await sw.confirm('Delete "' + (ch.title || 'Untitled') + '"? This cannot be undone.');
        if (!ok) return;

        try {
            // sw.api.del — real DELETE call
            await sw.api.del('/api/v1/channels/' + ch.id);
            // sw.toast — success feedback
            sw.toast('Channel deleted', 'success');
            // Refresh cards
            const cards = document.querySelector('.dashboard-cards');
            if (cards) _loadChannels(cards, _currentFilter);
        } catch (e) {
            // sw.toast — error feedback
            sw.toast('Delete failed: ' + e.message, 'error');
        }
    }

    // ── Admin Cards ─────────────────────────────

    async function _loadAdminCards(container) {
        try {
            const resp = await sw.api.get('/api/v1/admin/packages');
            const packages = resp || [];

            container.innerHTML = '';
            packages.forEach(function (pkg) {
                const card = document.createElement('div');
                card.className = 'dashboard-card';
                card.innerHTML =
                    '<div class="dashboard-card-header">' +
                        '<div class="dashboard-card-title">' + (typeof esc === 'function' ? esc(pkg.title || pkg.id) : (pkg.title || pkg.id)) + '</div>' +
                    '</div>' +
                    '<div class="dashboard-card-meta">' + (typeof esc === 'function' ? esc(pkg.type || '') : (pkg.type || '')) + ' \u00b7 ' + (typeof esc === 'function' ? esc(pkg.tier || '') : (pkg.tier || '')) + '</div>' +
                    '<div class="dashboard-card-desc">' + (typeof esc === 'function' ? esc(pkg.description || '') : (pkg.description || '')) + '</div>';
                container.appendChild(card);
            });

            if (!packages.length) {
                container.innerHTML = '<div class="dashboard-empty">No packages installed</div>';
            }
        } catch (_) {
            container.innerHTML = '<div class="dashboard-empty">Failed to load packages</div>';
        }
    }

    // ── Boot ─────────────────────────────────────

    document.addEventListener('DOMContentLoaded', _init);
})();