/**
 * Shared helpers for the branding-context test split.
 */

import { lightTheme, ThemeProvider } from "@suaveplan/react-ui/theme";
import type { ReactNode } from "react";
import {
    useBranding,
    useLogo,
    useTenantBranding,
} from "../../src/context/branding-context.js";
import type {
    BrandingContextValue,
    TenantBranding,
} from "../../src/types/branding.types.js";

export interface Capture<T> {
    value: T;
}

export function jsonResponse(body: unknown, status = 200): Response {
    return new Response(JSON.stringify(body), {
        status,
        headers: { "Content-Type": "application/json" },
    });
}

export const STATIC_BRANDING: TenantBranding = {
    tenantId: "acme",
    name: "Acme Co",
    primaryColor: "rgb(255, 0, 0)",
    secondaryColor: "rgb(0, 255, 0)",
    accentColor: "rgb(0, 0, 255)",
    fontFamily: "Inter, sans-serif",
    logo: "https://cdn/logo.svg",
    logoLight: "https://cdn/logo-light.svg",
    logoDark: "https://cdn/logo-dark.svg",
    favicon: "https://cdn/favicon.ico",
    customCss: ":root { --x: 1 }",
};

export function CaptureBranding({
    capture,
}: {
    capture: Capture<BrandingContextValue | null>;
}): ReactNode {
    capture.value = useBranding();
    return null;
}

export function CaptureTenant({
    capture,
}: {
    capture: Capture<TenantBranding | null>;
}): ReactNode {
    capture.value = useTenantBranding();
    return null;
}

export function CaptureLogo({
    capture,
    preferDark,
}: {
    capture: Capture<string | undefined>;
    preferDark?: boolean;
}): ReactNode {
    capture.value = useLogo(preferDark);
    return null;
}

export function wrapTheme(children: ReactNode): ReactNode {
    return (
        <ThemeProvider themes={[lightTheme]} defaultTheme="light">
            {children}
        </ThemeProvider>
    );
}

export function resetBrandingDom(): void {
    const root = document.documentElement;
    for (const prop of [
        "--brand-primary",
        "--brand-secondary",
        "--brand-accent",
        "--brand-font",
    ]) {
        root.style.removeProperty(prop);
    }
    document.title = "";
    const styleEl = document.getElementById("tenant-custom-css");
    if (styleEl !== null) {
        styleEl.remove();
    }
}