/**
 * Team Admin > Personas
 */
const { html } = window;
const { useState, useEffect, useCallback } = hooks;

export default function PersonasSection({ teamId }) {
    const [personas, setPersonas] = useState([]);
    const [loading, setLoading] = useState(true);
    const [editing, setEditing] = useState(null); // null | 'new' | persona object

    const load = useCallback(async () => {
        try {
            const data = await sw.api.teams.personas(teamId);
            setPersonas(data || []);
        } catch (e) { sw.toast(e.message, 'error'); }
        finally { setLoading(false); }
    }, [teamId]);

    useEffect(() => { load(); }, [load]);

    async function savePersona(e) {
        e.preventDefault();
        const form = e.target;
        const data = {
            name: form.pname.value.trim(),
            description: form.description.value.trim(),
            system_prompt: form.system_prompt.value,
        };
        try {
            if (editing === 'new') {
                await sw.api.teams.createPersona(teamId, data);
                sw.toast('Persona created', 'success');
            } else {
                await sw.api.teams.updatePersona(teamId, editing.id, data);
                sw.toast('Persona updated', 'success');
            }
            setEditing(null);
            load();
        } catch (e) { sw.toast(e.message, 'error'); }
    }

    async function deletePersona(pid) {
        const ok = await sw.confirm('Delete this persona?', true);
        if (!ok) return;
        try {
            await sw.api.teams.deletePersona(teamId, pid);
            sw.toast('Persona deleted', 'success');
            load();
        } catch (e) { sw.toast(e.message, 'error'); }
    }

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

    if (editing) {
        const isNew = editing === 'new';
        const p = isNew ? {} : editing;
        return html`
            <form onSubmit=${savePersona}>
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
                    <button type="button" class="btn-small" onClick=${() => setEditing(null)}>\u2190 Back</button>
                    <h4 style="margin:0;">${isNew ? 'Create Persona' : `Edit: ${p.name}`}</h4>
                </div>
                <div class="form-group"><label>Name</label>
                    <input name="pname" value=${p.name || ''} placeholder="Code Reviewer" />
                </div>
                <div class="form-group"><label>Description</label>
                    <input name="description" value=${p.description || ''} placeholder="Optional description" />
                </div>
                <div class="form-group"><label>System Prompt</label>
                    <textarea name="system_prompt" rows="6" placeholder="System prompt\u2026">${p.system_prompt || ''}</textarea>
                </div>
                <div class="form-row" style="margin-top:12px;gap:8px;">
                    <button type="submit" class="btn-small btn-primary">${isNew ? 'Create' : 'Save'}</button>
                    <button type="button" class="btn-small" onClick=${() => setEditing(null)}>Cancel</button>
                </div>
            </form>
        `;
    }

    return html`
        <div>
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
                <div style="flex:1"></div>
                <button class="btn-md btn-primary" onClick=${() => setEditing('new')}>+ Add</button>
            </div>

            <div class="admin-list">
                ${personas.length === 0 && html`<div class="empty-hint">No personas</div>`}
                ${personas.map(p => html`
                    <div class="admin-surface-row" key=${p.id}>
                        <div style="flex:1;min-width:0;">
                            <strong>${p.name}</strong>
                            ${p.description && html`<span class="text-muted" style="margin-left:8px;font-size:11px;">${p.description.substring(0, 60)}${p.description.length > 60 ? '\u2026' : ''}</span>`}
                        </div>
                        <span class="text-muted" style="font-size:11px;">${p.kb_count || 0} KBs</span>
                        <div class="admin-actions-cell">
                            <button class="btn-small" onClick=${() => setEditing(p)}>Edit</button>
                            <button class="btn-small btn-danger" onClick=${() => deletePersona(p.id)}>Delete</button>
                        </div>
                    </div>
                `)}
            </div>
        </div>
    `;
}