const STYLE_ID = 'filter-popover-liquid-styles';

export function ensureFilterPopoverStyles() {
    if (typeof document === 'undefined') return;
    if (document.getElementById(STYLE_ID)) return;
    const style = document.createElement('style');
    style.id = STYLE_ID;
    style.textContent = `
        .filter-liquid-surface {
            --filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.78);
            --filter-liquid-border: rgba(255, 255, 255, 0.32);
            --filter-liquid-chip-bg: rgba(var(--surface-rgb), 0.55);
            --filter-liquid-chip-active-bg: rgba(255, 255, 255, 0.95);
            --filter-liquid-chip-active-border: rgba(255, 255, 255, 0.6);
            --filter-liquid-track-bg: rgba(var(--overlay-rgb), 0.16);
            --filter-liquid-accent-bg: rgba(255, 255, 255, 0.72);
            --filter-liquid-text-active: rgb(var(--text-emphasis-rgb));
            --filter-liquid-text-secondary: rgb(var(--text-body-soft-rgb));
            --filter-liquid-text-muted: rgb(var(--text-muted-rgb));
            --filter-liquid-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.6),
                inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
                0 8px 20px rgba(var(--overlay-rgb), 0.16),
                0 22px 52px rgba(var(--overlay-rgb), 0.24);
        }

        .dark .filter-liquid-surface {
            --filter-liquid-panel-bg: rgba(var(--app-bg-rgb), 0.82);
            --filter-liquid-border: rgba(255, 255, 255, 0.12);
            --filter-liquid-chip-bg: rgba(255, 255, 255, 0.06);
            --filter-liquid-chip-active-bg: rgba(255, 255, 255, 0.3);
            --filter-liquid-chip-active-border: rgba(255, 255, 255, 0.38);
            --filter-liquid-track-bg: rgba(255, 255, 255, 0.1);
            --filter-liquid-accent-bg: rgba(255, 255, 255, 0.32);
            --filter-liquid-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.24),
                inset 0 -1px 0 rgba(0, 0, 0, 0.22),
                0 10px 24px rgba(0, 0, 0, 0.36),
                0 26px 60px rgba(0, 0, 0, 0.46);
        }

        .filter-liquid-panel {
            isolation: isolate;
            background: var(--filter-liquid-panel-bg) !important;
            background-image: none !important;
            border: 1px solid var(--filter-liquid-border) !important;
            box-shadow: var(--filter-liquid-shadow) !important;
            backdrop-filter: blur(28px) saturate(180%);
            -webkit-backdrop-filter: blur(28px) saturate(180%);
        }
    `;
    document.head.appendChild(style);
}

ensureFilterPopoverStyles();

export function filterChipStyle(active) {
    const background = active ? 'var(--filter-liquid-chip-active-bg)' : 'var(--filter-liquid-chip-bg)';
    const color = active ? 'var(--filter-liquid-text-active)' : 'var(--filter-liquid-text-secondary)';
    const borderRule = active
        ? 'border:1px solid var(--filter-liquid-chip-active-border);'
        : 'border:1px solid transparent;';
    const shadow = active
        ? 'box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 6px rgba(var(--overlay-rgb),0.18);'
        : 'box-shadow:none;';
    return `background:${background}; ${borderRule} color:${color}; ${shadow}`;
}