export const RECIPE_SEARCH_SHELL_BASE_SHADOW =
    '0 5px 10px rgba(0,0,0,0.16), 0 14px 22px rgba(0,0,0,0.24), 0 22px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04), inset 0 2px 6px rgba(0,0,0,0.16), inset 0 -1px 2px rgba(255,255,255,0.02)';

function escapeHtml(s) {
    return String(s)
        .replace(/&/g, '&')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;');
}

export function getRecipeSearchFieldHTML({
    shellId,
    inputId,
    placeholder = 'Szukaj przepisów...',
    inputAriaLabel = '',
    inputValue = '',
    filterButtonId = '',
    filterButtonAction = '',
    filterButtonLabel = 'Otwórz filtry',
} = {}) {
    const hasFilterButton = Boolean(filterButtonId);
    const actionAttr = hasFilterButton && filterButtonAction
        ? ` onclick="${escapeHtml(filterButtonAction)}"`
        : '';
    const inputPadding = hasFilterButton ? 'pl-8 pr-14' : 'pl-8 pr-8';
    const ariaLabel = inputAriaLabel || placeholder;

    return `
        <div id="${escapeHtml(shellId)}" class="relative z-[1] mx-auto flex items-center w-full overflow-hidden" style="width:min(calc(100% - 0.5rem), 22.4rem); background:#393937 !important; border:1px solid #41423f !important; border-radius:999px !important; box-shadow:${RECIPE_SEARCH_SHELL_BASE_SHADOW} !important; transition:box-shadow 180ms ease;">
            <input type="text" id="${escapeHtml(inputId)}" value="${escapeHtml(inputValue)}" placeholder="${escapeHtml(placeholder)}" aria-label="${escapeHtml(ariaLabel)}" class="w-full bg-transparent outline-none text-[15px] text-center py-[12px] ${inputPadding}" style="background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important;">
            ${hasFilterButton
                ? `
                <button id="${escapeHtml(filterButtonId)}"${actionAttr} class="absolute right-2 top-1/2 -translate-y-1/2 w-9 h-9 text-[#c9c3b8] hover:text-[#f0e8dc] flex items-center justify-center transition-colors" style="background:transparent !important; border:none !important; box-shadow:none !important;" aria-label="${escapeHtml(filterButtonLabel)}">
                    <i class="fas fa-sliders-h" aria-hidden="true"></i>
                </button>`
                : ''}
        </div>
    `;
}

export function syncRecipeSearchShellShadow(searchShell) {
    if (!searchShell) return;
    searchShell.style.boxShadow = RECIPE_SEARCH_SHELL_BASE_SHADOW;
}