import { jsx as _jsx } from "react/jsx-runtime";
// @vitest-environment happy-dom
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
// The Appearance tab reads `/appearance` (settings + resolved brand), then on
// save read-modify-writes `/globals/settings`. Uploads POST `/media/upload`.
let appearanceData;
const cmsApi = vi.fn(async (endpoint, options) => {
    const method = options?.method ?? 'GET';
    if (endpoint === '/appearance' && method === 'GET')
        return { data: appearanceData, status: 200 };
    if (endpoint === '/globals/settings' && method === 'GET')
        return { data: { siteTitle: 'Actuate Media' }, status: 200 };
    if (endpoint === '/globals/settings' && method === 'PUT')
        return { data: {}, status: 200 };
    if (endpoint === '/media/upload' && method === 'POST')
        return {
            data: { id: 'new-logo', url: 'https://cdn.example.com/x.svg', mimeType: 'image/svg+xml' },
            status: 200,
        };
    if (endpoint.startsWith('/media?') && method === 'GET')
        return {
            data: {
                items: [
                    {
                        id: 'existing-logo',
                        filename: 'existing.png',
                        storageKey: 'https://cdn.example.com/existing.png',
                        url: 'https://cdn.example.com/existing.png',
                        mimeType: 'image/png',
                        fileSize: 1234,
                        width: 400,
                        height: 100,
                    },
                ],
            },
            status: 200,
        };
    return { data: {}, status: 200 };
});
vi.mock('../../lib/api.js', () => ({ cmsApi: (e, o) => cmsApi(e, o) }));
const { AppearanceTab } = await import('../../views/settings/AppearanceTab.js');
function baseData(overrides = {}) {
    return {
        appearance: {
            adminColorModeDefault: 'system',
            adminAccentColor: 'purple',
            sidebarDensity: 'default',
            contentFont: 'DM Sans',
            reduceMotion: false,
        },
        brand: { mode: 'inheritPublicBrand' },
        resolved: { admin: { initials: 'AM' } },
        assets: [],
        siteTitle: 'Actuate Media',
        ...overrides,
    };
}
beforeEach(() => {
    cmsApi.mockClear();
    appearanceData = baseData();
});
describe('AppearanceTab', () => {
    it('renders the branding/theme/typography cards with a clean (disabled) save bar', async () => {
        render(_jsx(AppearanceTab, { role: "ADMIN" }));
        await screen.findByText('Branding');
        expect(screen.getByText('Admin theme')).toBeTruthy();
        expect(screen.getByText('Typography & motion')).toBeTruthy();
        expect(screen.getByText('Brand preview')).toBeTruthy();
        expect(screen.getByRole('button', { name: 'Save Changes' }).disabled).toBe(true);
    });
    it('enables Save when the accent changes and persists appearance to the settings global', async () => {
        render(_jsx(AppearanceTab, { role: "ADMIN" }));
        await screen.findByText('Branding');
        fireEvent.click(screen.getByRole('radio', { name: 'Blue' }));
        const save = screen.getByRole('button', { name: 'Save Changes' });
        expect(save.disabled).toBe(false);
        fireEvent.click(save);
        await waitFor(() => expect(cmsApi).toHaveBeenCalledWith('/globals/settings', expect.objectContaining({
            method: 'PUT',
            body: expect.stringContaining('"adminAccentColor":"blue"'),
        })));
    });
    it('warns when dark mode is the default but no dark-mode logo is set', async () => {
        appearanceData = baseData({
            appearance: {
                adminColorModeDefault: 'dark',
                adminAccentColor: 'purple',
                sidebarDensity: 'default',
                contentFont: 'DM Sans',
                reduceMotion: false,
            },
        });
        render(_jsx(AppearanceTab, { role: "ADMIN" }));
        expect(await screen.findByText(/no dark-mode logo is set/i)).toBeTruthy();
    });
    it('uploads a logo through the Media Center and enables Save', async () => {
        render(_jsx(AppearanceTab, { role: "ADMIN" }));
        await screen.findByText('Branding');
        const input = screen.getByLabelText('Primary logo');
        const file = new File(['<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"></svg>'], 'logo.svg', { type: 'image/svg+xml' });
        fireEvent.change(input, { target: { files: [file] } });
        await waitFor(() => expect(cmsApi).toHaveBeenCalledWith('/media/upload', expect.objectContaining({ method: 'POST' })));
        await waitFor(() => expect(screen.getByRole('button', { name: 'Save Changes' }).disabled).toBe(false));
    });
    it('references an existing media-library asset without re-uploading', async () => {
        render(_jsx(AppearanceTab, { role: "ADMIN" }));
        await screen.findByText('Branding');
        fireEvent.click(screen.getByRole('button', { name: /choose primary logo from media library/i }));
        const thumb = await screen.findByRole('button', { name: /existing\.png/i });
        fireEvent.click(thumb);
        // No upload should be issued — we reference the existing asset by id.
        expect(cmsApi.mock.calls.some(([endpoint]) => endpoint === '/media/upload')).toBe(false);
        const save = await screen.findByRole('button', { name: 'Save Changes' });
        await waitFor(() => expect(save.disabled).toBe(false));
        fireEvent.click(save);
        await waitFor(() => expect(cmsApi).toHaveBeenCalledWith('/globals/settings', expect.objectContaining({
            method: 'PUT',
            body: expect.stringContaining('"publicPrimaryLogoAssetId":"existing-logo"'),
        })));
    });
    it('is read-only for non-admins', async () => {
        render(_jsx(AppearanceTab, { role: "EDITOR" }));
        expect(await screen.findByText(/read-only access to appearance/i)).toBeTruthy();
        // Upload control disabled.
        expect(screen.getByRole('button', { name: /upload primary logo/i }).disabled).toBe(true);
    });
});
//# sourceMappingURL=appearance-settings.render.test.js.map