/**
 * TeamsSection — read-only team membership list
 */
const { html } = window;
const { useState, useEffect } = hooks;

function esc(s) { return s == null ? '' : String(s); }

export function TeamsSection() {
    const [teams, setTeams] = useState(null);

    useEffect(() => {
        sw.api.teams.mine().then(resp => {
            setTeams(resp || []);
        }).catch(() => setTeams([]));
    }, []);

    if (teams === null) {
        return html`<div class="settings-placeholder">Loading teams\u2026</div>`;
    }

    if (!teams.length) {
        return html`<div class="empty-hint">You are not a member of any teams.</div>`;
    }

    return html`
        ${teams.map(t => html`
            <div class="settings-section" style="margin-bottom:16px;">
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
                    <h3 style="margin:0">${esc(t.name)}</h3>
                    <span class="badge-${t.my_role === 'admin' ? 'success' : 'muted'}"
                          style="font-size:11px;">
                        ${t.my_role}
                    </span>
                </div>
                ${t.description && html`
                    <p style="color:var(--text-2);font-size:13px;margin:0 0 8px;">
                        ${esc(t.description)}
                    </p>
                `}
                <div style="font-size:12px;color:var(--text-3);">
                    ${t.member_count} member${t.member_count !== 1 ? 's' : ''}
                </div>
            </div>
        `)}
    `;
}
