/**
 * WelcomeSurface — shown when no extension surfaces are installed.
 * Renders Topbar + a getting-started card with link to admin.
 */
const { html } = window;
const { render } = preact;

import { Topbar } from '../../shell/topbar.js';

function WelcomeSurface() {
    const BASE = window.__BASE__ || '';
    const isAdmin = sw.can?.('surface.admin.access');

    return html`
        <${Topbar} title="Switchboard" />
        <div style="flex:1;display:flex;align-items:center;justify-content:center;padding:24px;">
            <div style="max-width:420px;width:100%;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:32px;text-align:center;">
                <div style="font-size:36px;margin-bottom:16px;">📦</div>
                <h2 style="font-size:20px;font-weight:600;margin:0 0 8px;">Welcome to Switchboard</h2>
                <p style="font-size:14px;color:var(--text-2);margin:0 0 24px;line-height:1.5;">
                    No surfaces are installed yet. Install an extension surface
                    to get started.
                </p>
                ${isAdmin && html`
                    <a href="${BASE}/admin/packages"
                       style="display:inline-flex;align-items:center;gap:8px;padding:10px 24px;background:var(--accent);color:#fff;border-radius:8px;text-decoration:none;font-weight:600;font-size:14px;">
                        Go to Packages
                    </a>
                `}
                ${!isAdmin && html`
                    <p style="font-size:13px;color:var(--text-3);">
                        Ask your administrator to install a surface package.
                    </p>
                `}
            </div>
        </div>
    `;
}

const mount = document.getElementById('welcome-mount');
if (mount) {
    render(html`<${WelcomeSurface} />`, mount);
}