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

export default function MemorySection() {
    const [pending, setPending] = useState([]);
    const [loading, setLoading] = useState(true);

    const load = useCallback(async () => {
        try {
            const data = await sw.api.admin.memories.pending();
            setPending(data || []);
        } catch (e) { sw.toast(e.message, 'error'); }
        finally { setLoading(false); }
    }, []);

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

    async function bulkApprove() {
        const ids = pending.map(m => m.id);
        if (!ids.length) return;
        try {
            const result = await sw.api.admin.memories.bulkApprove(ids);
            sw.toast(`Approved ${result.count || ids.length} memories`, 'success');
            load();
        } catch (e) { sw.toast(e.message, 'error'); }
    }

    async function approveSingle(id) {
        try {
            await sw.api.memory.approve(id);
            sw.toast('Memory approved', 'success');
            setPending(prev => prev.filter(m => m.id !== id));
        } catch (e) { sw.toast(e.message, 'error'); }
    }

    async function rejectSingle(id) {
        try {
            await sw.api.memory.reject(id);
            sw.toast('Memory rejected', 'success');
            setPending(prev => prev.filter(m => m.id !== id));
        } catch (e) { sw.toast(e.message, 'error'); }
    }

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

    return html`
        <div>
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
                <span class="text-muted" style="font-size:12px;">${pending.length} pending</span>
                <div style="flex:1"></div>
                ${pending.length > 0 && html`<button class="btn-small btn-primary" onClick=${bulkApprove}>Approve All</button>`}
            </div>

            <div class="admin-list">
                ${pending.length === 0 && html`<div class="empty-hint">No pending memories</div>`}
                ${pending.map(m => html`
                    <div class="admin-surface-row" key=${m.id} style="flex-direction:column;align-items:stretch;">
                        <div style="display:flex;align-items:center;gap:8px;">
                            <strong style="flex:1;">${m.key}</strong>
                            <span class="badge">${m.scope || 'user'}</span>
                            <span class="text-muted" style="font-size:11px;">conf: ${(m.confidence || 0).toFixed(2)}</span>
                        </div>
                        <div class="text-muted" style="font-size:12px;margin:4px 0;">${m.value}</div>
                        <div style="display:flex;gap:6px;">
                            <button class="btn-small btn-primary" onClick=${() => approveSingle(m.id)}>Approve</button>
                            <button class="btn-small btn-danger" onClick=${() => rejectSingle(m.id)}>Reject</button>
                        </div>
                    </div>
                `)}
            </div>
        </div>
    `;
}
