import { Injectable, signal, effect } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ThemeService {
  public highContrast = signal<boolean>(true);

  constructor() {
    // Load from localStorage
    const saved = localStorage.getItem('high-contrast');
    if (saved !== null) {
      this.highContrast.set(saved === 'true');
    } else {
      this.highContrast.set(true);
    }

    // Effect to apply class to body
    effect(() => {
      const isHigh = this.highContrast();
      if (typeof document !== 'undefined' && document.body) {
        if (isHigh) {
          document.body.classList.add('high-contrast');
        } else {
          document.body.classList.remove('high-contrast');
        }
      }
      localStorage.setItem('high-contrast', isHigh.toString());
    });
  }

  toggleContrast() {
    this.highContrast.update(v => !v);
  }
}
