import { assert, createLogicSuite } from '@genesislcap/foundation-testing';
import { FoundationAiAssistant } from '../../main/main';
import { getSessionStore, clearAllSessionStores } from '../../state/session-store';
import { settingsUsageMetersTemplate } from './settings-modal.template';
// Hold a reference so the custom-element registration isn't tree-shaken.
FoundationAiAssistant;
// GENC-1464 — the shared meter column in the settings modal's "AI Model
// Settings" section.
//
// The section body is a 4-unit flex column and the budget meter is a 2-unit
// one, so an unwrapped context indicator sat 4 units above the first vendor row
// while the vendor rows sat 2 apart — three visually identical meter rows
// reading as an uneven 4/2/2. Both meters now share ONE 2-unit column
// (`.settings-usage-meters`, grouped with `.settings-budget-usage` in the
// styles — see settings-modal.styles.test.ts for the gap itself).
//
// The wrapper must also be ABSENT when neither meter shows: a permanent wrapper
// is a permanent flex child of the section body, so a host with no meters would
// pay a stray 4-unit gap after its model slot for a div that renders nothing.
// That is a structural claim about the template, so this suite renders the
// template rather than reading a getter — the getter cannot show whether the
// `when` was wired to it.
//
// The element is created but never CONNECTED (`document.createElement` upgrades
// only), for the reason budget-meter.test.ts gives: connecting subscribes to
// `agenticActivityBus` and leaves the runner's event loop open.
const Suite = createLogicSuite('settings-modal usage meters structure');
const template = settingsUsageMetersTemplate('test-progress', 'test-button', 'test-icon');
let storeSeq = 0;
/** A fresh (unconnected) element wired to its own real session store. */
function element() {
    const el = document.createElement('foundation-ai-assistant');
    storeSeq += 1;
    el._sessionRef = getSessionStore(`usage-meters-test-${storeSeq}`, false);
    return el;
}
/** Renders the meters for `el` into a detached host and returns it. */
function render(el) {
    const host = document.createElement('div');
    template.render(el, host);
    return host;
}
Suite.after(() => {
    clearAllSessionStores();
});
Suite('both meters render inside one shared column', () => {
    const el = element();
    el.contextTokens = 1000;
    el.contextLimit = 4000;
    el.setVendorBudget('anthropic', { budgetUsd: 50, spentUsd: 45 });
    const host = render(el);
    const wrapper = host.querySelector('.settings-usage-meters');
    assert.ok(wrapper, 'the shared column is rendered');
    assert.ok(wrapper.querySelector('.settings-context-usage'), 'the context indicator is inside it');
    assert.ok(wrapper.querySelector('.settings-budget-usage'), 'so is the budget meter');
    // The rhythm the wrapper exists for: every meter row is a child of a 2-unit
    // column, none of them of the section body's 4-unit one.
    assert.is(host.querySelectorAll('.settings-usage-meters').length, 1, 'one column, not one per meter');
});
Suite('neither meter visible → no wrapper at all, not an empty one', () => {
    // The stray-gap case. Nothing fed, no context figures: the section body must
    // see no flex child from the meters.
    const el = element();
    const host = render(el);
    assert.is(el.settingsContextUsageVisible, false, 'precondition: no context data');
    assert.is(el.settingsBudgetUsageVisible, false, 'precondition: no budget data');
    assert.is(host.querySelector('.settings-usage-meters'), null, 'no wrapper element');
    assert.is(host.querySelectorAll('*').length, 0, 'and no element of any kind — comment markers only');
});
Suite('one meter alone still gets the shared column, with only its own child', () => {
    // Both single-meter cases: the wrapper appears for either meter on its own,
    // and the hidden sibling contributes NO element inside it (both gate with
    // `when`, which emplaces comment markers, not empty divs — an empty div would
    // be a second stray gap, inside the column this time).
    const contextOnly = element();
    contextOnly.contextTokens = 1000;
    contextOnly.contextLimit = 4000;
    const contextHost = render(contextOnly);
    const contextWrapper = contextHost.querySelector('.settings-usage-meters');
    assert.ok(contextWrapper, 'context alone still gets the column');
    assert.is(contextWrapper.children.length, 1, 'the hidden budget meter adds no flex child');
    assert.ok(contextWrapper.querySelector('.settings-context-usage'));
    const budgetOnly = element();
    budgetOnly.setVendorBudget('gemini', { budgetUsd: 50, spentUsd: 15 });
    const budgetHost = render(budgetOnly);
    const budgetWrapper = budgetHost.querySelector('.settings-usage-meters');
    assert.ok(budgetWrapper, 'budget alone still gets the column');
    assert.is(budgetWrapper.children.length, 1, 'the hidden context indicator adds no flex child');
    assert.ok(budgetWrapper.querySelector('.settings-budget-usage'));
});
Suite.run();
