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

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

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

    // Effect to apply class to body
    effect(() => {
      const isHigh = this.highContrast();
      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);
  }
}
