/**
 * Query Suggestions Theme System
 *
 * Provides comprehensive theming for query suggestions components including:
 * - CSS variables for easy customization
 * - Pre-built theme presets (light, dark, minimal, branded)
 * - Component-specific style generators
 * - Responsive utilities
 */
// ============================================================================
// Theme Presets
// ============================================================================
export const lightThemeVariables = {
    // Colors
    '--seekora-bg-surface': '#ffffff',
    '--seekora-bg-secondary': '#f9fafb',
    '--seekora-bg-tertiary': '#f3f4f6',
    '--seekora-bg-hover': '#f3f4f6',
    '--seekora-text-primary': '#111827',
    '--seekora-text-secondary': '#6b7280',
    '--seekora-text-tertiary': '#9ca3af',
    '--seekora-border-color': '#e5e7eb',
    '--seekora-primary': '#3b82f6',
    '--seekora-primary-light': '#eff6ff',
    '--seekora-primary-dark': '#1d4ed8',
    '--seekora-highlight-bg': '#fef3c7',
    '--seekora-success': '#10b981',
    '--seekora-warning': '#f59e0b',
    '--seekora-error': '#ef4444',
    // Typography
    '--seekora-font-family': '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
    '--seekora-font-size-xs': '11px',
    '--seekora-font-size-sm': '12px',
    '--seekora-font-size-base': '14px',
    '--seekora-font-size-lg': '16px',
    '--seekora-font-weight-normal': '400',
    '--seekora-font-weight-medium': '500',
    '--seekora-font-weight-semibold': '600',
    '--seekora-font-weight-bold': '700',
    '--seekora-line-height-tight': '1.25',
    '--seekora-line-height-normal': '1.5',
    '--seekora-line-height-relaxed': '1.75',
    // Spacing
    '--seekora-spacing-xs': '4px',
    '--seekora-spacing-sm': '8px',
    '--seekora-spacing-md': '12px',
    '--seekora-spacing-lg': '16px',
    '--seekora-spacing-xl': '24px',
    // Border radius
    '--seekora-border-radius-sm': '4px',
    '--seekora-border-radius': '6px',
    '--seekora-border-radius-lg': '8px',
    '--seekora-border-radius-xl': '12px',
    '--seekora-border-radius-full': '9999px',
    // Shadows
    '--seekora-shadow-sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
    '--seekora-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
    '--seekora-shadow-md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
    '--seekora-shadow-lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
    '--seekora-shadow-xl': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
    // Transitions
    '--seekora-transition-fast': '100ms ease',
    '--seekora-transition-normal': '150ms ease',
    '--seekora-transition-slow': '300ms ease',
    // Z-index
    '--seekora-z-dropdown': '1000',
    '--seekora-z-modal': '1100',
    '--seekora-z-tooltip': '1200',
};
export const darkThemeVariables = {
    ...lightThemeVariables,
    // Override colors for dark mode
    '--seekora-bg-surface': '#1f2937',
    '--seekora-bg-secondary': '#111827',
    '--seekora-bg-tertiary': '#374151',
    '--seekora-bg-hover': '#374151',
    '--seekora-text-primary': '#f9fafb',
    '--seekora-text-secondary': '#d1d5db',
    '--seekora-text-tertiary': '#9ca3af',
    '--seekora-border-color': '#4b5563',
    '--seekora-primary': '#60a5fa',
    '--seekora-primary-light': '#1e3a5f',
    '--seekora-primary-dark': '#93c5fd',
    '--seekora-highlight-bg': '#854d0e',
    // Shadows for dark mode
    '--seekora-shadow-sm': '0 1px 2px 0 rgba(0, 0, 0, 0.3)',
    '--seekora-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3)',
    '--seekora-shadow-md': '0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3)',
    '--seekora-shadow-lg': '0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3)',
    '--seekora-shadow-xl': '0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4)',
};
export const minimalThemeVariables = {
    ...lightThemeVariables,
    // Minimal styling overrides
    '--seekora-border-color': '#f3f4f6',
    '--seekora-shadow-sm': 'none',
    '--seekora-shadow': '0 1px 2px 0 rgba(0, 0, 0, 0.03)',
    '--seekora-shadow-md': '0 2px 4px 0 rgba(0, 0, 0, 0.05)',
    '--seekora-shadow-lg': '0 4px 8px 0 rgba(0, 0, 0, 0.08)',
    '--seekora-shadow-xl': '0 8px 16px 0 rgba(0, 0, 0, 0.1)',
    '--seekora-border-radius-sm': '2px',
    '--seekora-border-radius': '4px',
    '--seekora-border-radius-lg': '6px',
    '--seekora-border-radius-xl': '8px',
};
// Brand color presets
export const brandPresets = {
    blue: {
        '--seekora-primary': '#3b82f6',
        '--seekora-primary-light': '#eff6ff',
        '--seekora-primary-dark': '#1d4ed8',
    },
    green: {
        '--seekora-primary': '#10b981',
        '--seekora-primary-light': '#ecfdf5',
        '--seekora-primary-dark': '#059669',
    },
    purple: {
        '--seekora-primary': '#8b5cf6',
        '--seekora-primary-light': '#f5f3ff',
        '--seekora-primary-dark': '#7c3aed',
    },
    red: {
        '--seekora-primary': '#ef4444',
        '--seekora-primary-light': '#fef2f2',
        '--seekora-primary-dark': '#dc2626',
    },
    orange: {
        '--seekora-primary': '#f97316',
        '--seekora-primary-light': '#fff7ed',
        '--seekora-primary-dark': '#ea580c',
    },
    teal: {
        '--seekora-primary': '#14b8a6',
        '--seekora-primary-light': '#f0fdfa',
        '--seekora-primary-dark': '#0d9488',
    },
    pink: {
        '--seekora-primary': '#ec4899',
        '--seekora-primary-light': '#fdf2f8',
        '--seekora-primary-dark': '#db2777',
    },
};
// ============================================================================
// CSS Generation Utilities
// ============================================================================
/**
 * Generate CSS variables string from theme variables object
 */
export function generateCSSVariables(variables) {
    return Object.entries(variables)
        .map(([key, value]) => `${key}: ${value};`)
        .join('\n');
}
/**
 * Generate a style tag with CSS variables for a specific scope
 */
export function generateThemeStyleTag(variables, scope = ':root') {
    return `
    ${scope} {
      ${generateCSSVariables(variables)}
    }
  `;
}
/**
 * Create a complete theme object from variables
 */
export function createSuggestionsTheme(baseTheme = 'light', overrides = {}, brandColor) {
    const baseVariables = {
        light: lightThemeVariables,
        dark: darkThemeVariables,
        minimal: minimalThemeVariables,
    }[baseTheme];
    const brandOverrides = brandColor ? brandPresets[brandColor] : {};
    return {
        ...baseVariables,
        ...brandOverrides,
        ...overrides,
    };
}
// ============================================================================
// Component Style Generators
// ============================================================================
/**
 * Generate styles for dropdown container
 */
export function getDropdownContainerStyles(theme) {
    return {
        backgroundColor: `var(--seekora-bg-surface, ${theme['--seekora-bg-surface']})`,
        border: `1px solid var(--seekora-border-color, ${theme['--seekora-border-color']})`,
        borderRadius: `var(--seekora-border-radius-lg, ${theme['--seekora-border-radius-lg']})`,
        boxShadow: `var(--seekora-shadow-xl, ${theme['--seekora-shadow-xl']})`,
        fontFamily: `var(--seekora-font-family, ${theme['--seekora-font-family']})`,
        fontSize: `var(--seekora-font-size-base, ${theme['--seekora-font-size-base']})`,
        color: `var(--seekora-text-primary, ${theme['--seekora-text-primary']})`,
    };
}
/**
 * Generate styles for suggestion item
 */
export function getSuggestionItemStyles(theme, isActive = false) {
    return {
        padding: `var(--seekora-spacing-md, ${theme['--seekora-spacing-md']}) var(--seekora-spacing-lg, ${theme['--seekora-spacing-lg']})`,
        cursor: 'pointer',
        transition: `background-color var(--seekora-transition-fast, ${theme['--seekora-transition-fast']})`,
        backgroundColor: isActive
            ? `var(--seekora-bg-hover, ${theme['--seekora-bg-hover']})`
            : 'transparent',
    };
}
/**
 * Generate styles for product card
 */
export function getProductCardStyles(theme, isHovered = false) {
    return {
        backgroundColor: `var(--seekora-bg-surface, ${theme['--seekora-bg-surface']})`,
        borderRadius: `var(--seekora-border-radius-lg, ${theme['--seekora-border-radius-lg']})`,
        border: `1px solid var(--seekora-border-color, ${theme['--seekora-border-color']})`,
        overflow: 'hidden',
        cursor: 'pointer',
        transition: `transform var(--seekora-transition-normal, ${theme['--seekora-transition-normal']}), box-shadow var(--seekora-transition-normal, ${theme['--seekora-transition-normal']})`,
        transform: isHovered ? 'translateY(-2px)' : 'none',
        boxShadow: isHovered
            ? `var(--seekora-shadow-md, ${theme['--seekora-shadow-md']})`
            : 'none',
    };
}
/**
 * Generate styles for highlight/mark
 */
export function getHighlightStyles(theme) {
    return {
        backgroundColor: `var(--seekora-highlight-bg, ${theme['--seekora-highlight-bg']})`,
        fontWeight: `var(--seekora-font-weight-semibold, ${theme['--seekora-font-weight-semibold']})`,
        padding: '0 2px',
        borderRadius: '2px',
    };
}
// ============================================================================
// CSS Classes Generator
// ============================================================================
/**
 * Generate complete CSS stylesheet for suggestions components
 */
export function generateSuggestionsStylesheet(theme = lightThemeVariables) {
    return `
    /* Seekora Query Suggestions Styles */
    .seekora-suggestions {
      ${generateCSSVariables(theme)}
    }

    /* Container */
    .seekora-suggestions-container {
      background-color: var(--seekora-bg-surface);
      border: 1px solid var(--seekora-border-color);
      border-radius: var(--seekora-border-radius-lg);
      box-shadow: var(--seekora-shadow-xl);
      font-family: var(--seekora-font-family);
      font-size: var(--seekora-font-size-base);
      color: var(--seekora-text-primary);
      overflow: hidden;
    }

    /* Section */
    .seekora-suggestions-section {
      padding: var(--seekora-spacing-sm) 0;
    }

    .seekora-suggestions-section-title {
      font-size: var(--seekora-font-size-xs);
      font-weight: var(--seekora-font-weight-bold);
      color: var(--seekora-text-tertiary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: var(--seekora-spacing-sm) var(--seekora-spacing-lg) var(--seekora-spacing-xs);
      margin: 0;
    }

    /* Item */
    .seekora-suggestions-item {
      display: flex;
      align-items: center;
      gap: var(--seekora-spacing-md);
      padding: var(--seekora-spacing-md) var(--seekora-spacing-lg);
      cursor: pointer;
      transition: background-color var(--seekora-transition-fast);
    }

    .seekora-suggestions-item:hover,
    .seekora-suggestions-item--active {
      background-color: var(--seekora-bg-hover);
    }

    .seekora-suggestions-item-icon {
      width: 16px;
      height: 16px;
      color: var(--seekora-text-secondary);
      flex-shrink: 0;
    }

    .seekora-suggestions-item-text {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .seekora-suggestions-item-count {
      font-size: var(--seekora-font-size-sm);
      color: var(--seekora-text-tertiary);
    }

    /* Highlight */
    .seekora-suggestions mark,
    .seekora-suggestions-highlight {
      background-color: var(--seekora-highlight-bg);
      font-weight: var(--seekora-font-weight-semibold);
      padding: 0 2px;
      border-radius: 2px;
    }

    /* Product Card */
    .seekora-product-card {
      background-color: var(--seekora-bg-surface);
      border: 1px solid var(--seekora-border-color);
      border-radius: var(--seekora-border-radius-lg);
      overflow: hidden;
      cursor: pointer;
      transition: transform var(--seekora-transition-normal), box-shadow var(--seekora-transition-normal);
    }

    .seekora-product-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--seekora-shadow-md);
    }

    .seekora-product-card-image {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
      background-color: var(--seekora-bg-secondary);
    }

    .seekora-product-card-info {
      padding: var(--seekora-spacing-md);
    }

    .seekora-product-card-title {
      font-size: var(--seekora-font-size-sm);
      font-weight: var(--seekora-font-weight-medium);
      color: var(--seekora-text-primary);
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .seekora-product-card-price {
      font-size: var(--seekora-font-size-base);
      font-weight: var(--seekora-font-weight-bold);
      color: var(--seekora-primary);
      margin-top: var(--seekora-spacing-xs);
    }

    /* Tabs */
    .seekora-suggestions-tabs {
      display: flex;
      gap: var(--seekora-spacing-xs);
      padding: var(--seekora-spacing-md) var(--seekora-spacing-lg);
      border-bottom: 1px solid var(--seekora-border-color);
      overflow-x: auto;
    }

    .seekora-suggestions-tab {
      display: inline-flex;
      align-items: center;
      gap: var(--seekora-spacing-sm);
      padding: var(--seekora-spacing-sm) var(--seekora-spacing-md);
      font-size: var(--seekora-font-size-sm);
      font-weight: var(--seekora-font-weight-medium);
      color: var(--seekora-text-secondary);
      background-color: transparent;
      border: 1px solid transparent;
      border-radius: var(--seekora-border-radius-full);
      cursor: pointer;
      white-space: nowrap;
      transition: all var(--seekora-transition-fast);
    }

    .seekora-suggestions-tab:hover {
      background-color: var(--seekora-bg-hover);
    }

    .seekora-suggestions-tab--active {
      color: var(--seekora-primary);
      background-color: var(--seekora-primary-light);
      border-color: var(--seekora-primary);
    }

    /* Brand chip */
    .seekora-brand-chip {
      display: inline-flex;
      align-items: center;
      gap: var(--seekora-spacing-sm);
      padding: var(--seekora-spacing-sm) var(--seekora-spacing-md);
      font-size: var(--seekora-font-size-sm);
      font-weight: var(--seekora-font-weight-medium);
      color: var(--seekora-text-primary);
      background-color: var(--seekora-bg-surface);
      border: 1px solid var(--seekora-border-color);
      border-radius: var(--seekora-border-radius-lg);
      cursor: pointer;
      transition: all var(--seekora-transition-fast);
    }

    .seekora-brand-chip:hover {
      border-color: var(--seekora-primary);
      background-color: var(--seekora-primary-light);
    }

    /* Category pill */
    .seekora-category-pill {
      display: inline-flex;
      align-items: center;
      gap: var(--seekora-spacing-xs);
      padding: 3px var(--seekora-spacing-sm);
      font-size: var(--seekora-font-size-xs);
      font-weight: var(--seekora-font-weight-medium);
      color: var(--seekora-text-secondary);
      background-color: var(--seekora-bg-tertiary);
      border-radius: var(--seekora-border-radius-full);
      cursor: pointer;
      transition: all var(--seekora-transition-fast);
    }

    .seekora-category-pill:hover {
      background-color: var(--seekora-primary-light);
      color: var(--seekora-primary);
    }

    /* Loading */
    .seekora-suggestions-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--seekora-spacing-xl);
      color: var(--seekora-text-secondary);
    }

    /* Empty state */
    .seekora-suggestions-empty {
      padding: var(--seekora-spacing-xl);
      text-align: center;
      color: var(--seekora-text-secondary);
    }

    /* Footer */
    .seekora-suggestions-footer {
      padding: var(--seekora-spacing-md) var(--seekora-spacing-lg);
      border-top: 1px solid var(--seekora-border-color);
      background-color: var(--seekora-bg-secondary);
      font-size: var(--seekora-font-size-sm);
      color: var(--seekora-text-secondary);
    }

    /* Keyboard hint */
    .seekora-keyboard-key {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 20px;
      height: 18px;
      padding: 0 4px;
      border-radius: 3px;
      background-color: var(--seekora-bg-secondary);
      border: 1px solid var(--seekora-border-color);
      font-size: 10px;
      font-weight: var(--seekora-font-weight-medium);
    }

    /* Animations */
    @keyframes seekora-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes seekora-fade-in {
      from { opacity: 0; transform: translateY(-8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes seekora-fade-out {
      from { opacity: 1; transform: translateY(0); }
      to { opacity: 0; transform: translateY(-8px); }
    }

    .seekora-suggestions--entering {
      animation: seekora-fade-in var(--seekora-transition-normal) ease-out;
    }

    .seekora-suggestions--exiting {
      animation: seekora-fade-out var(--seekora-transition-normal) ease-in;
    }
  `;
}
// ============================================================================
// React Style Injection Hook
// ============================================================================
let stylesInjected = false;
/**
 * Inject suggestions styles into the document
 */
export function injectSuggestionsStyles(theme = lightThemeVariables, force = false) {
    if (typeof document === 'undefined')
        return;
    if (stylesInjected && !force)
        return;
    const styleId = 'seekora-suggestions-styles';
    let styleElement = document.getElementById(styleId);
    if (!styleElement) {
        styleElement = document.createElement('style');
        styleElement.id = styleId;
        styleElement.type = 'text/css';
        document.head.appendChild(styleElement);
    }
    styleElement.textContent = generateSuggestionsStylesheet(theme);
    stylesInjected = true;
}
/**
 * Update injected styles with new theme
 */
export function updateSuggestionsStyles(theme) {
    injectSuggestionsStyles(theme, true);
}
export default {
    lightThemeVariables,
    darkThemeVariables,
    minimalThemeVariables,
    brandPresets,
    createSuggestionsTheme,
    generateSuggestionsStylesheet,
    injectSuggestionsStyles,
    updateSuggestionsStyles,
};
