import { Injectable } from '@angular/core';

import { StationConfig } from '../interfaces/station-config';

/** CSS custom property names mapped from StationConfig color fields. */
const COLOR_MAP: ReadonlyArray<{ field: keyof StationConfig; prop: string }> = [
  { field: 'color_primary', prop: '--color-primary' },
  { field: 'color_primary_light', prop: '--color-primary-light' },
  { field: 'color_primary_dark', prop: '--color-primary-dark' },
  { field: 'color_primary_muted', prop: '--color-primary-muted' },
  { field: 'color_accent', prop: '--color-accent' },
  { field: 'color_accent_light', prop: '--color-accent-light' },
  { field: 'color_accent_dark', prop: '--color-accent-dark' },
  { field: 'color_accent_muted', prop: '--color-accent-muted' },
  { field: 'color_background', prop: '--color-cream' },
  { field: 'color_text', prop: '--color-dark' },
  { field: 'color_success', prop: '--color-success' },
  { field: 'color_danger', prop: '--color-danger' },
  { field: 'color_info', prop: '--color-info' },
];

/** Build a gradient CSS value from three color stops. */
function gradient(from: string, mid: string, to: string): string {
  return `linear-gradient(135deg, ${from} 0%, ${mid} 40%, ${to} 100%)`;
}

@Injectable({
  providedIn: 'root',
})
export class ThemeService {
  /**
   * Apply color theme from StationConfig as CSS custom properties on `:root`.
   * Also generates derived gradient variables.
   */
  apply(config: StationConfig): void {
    const root = document.documentElement.style;

    for (const { field, prop } of COLOR_MAP) {
      const value = (config as any)[field];
      if (value) {
        root.setProperty(prop, value);
      }
    }

    // Derived gradients
    root.setProperty(
      '--sky-gradient',
      gradient(
        config.color_primary_dark,
        config.color_primary,
        config.color_primary_light,
      ),
    );
    root.setProperty(
      '--sunset-gradient',
      gradient(
        config.color_accent_dark,
        config.color_accent,
        config.color_accent_light,
      ),
    );
    root.setProperty(
      '--mixed-gradient',
      `linear-gradient(135deg, ${config.color_primary_dark} 0%, ${config.color_primary} 50%, ${config.color_accent} 100%)`,
    );
  }
}