import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ProjectEditorFacade } from '../facade/project-editor.facade';
import { TranslatePipe } from '../../../i18n/translate.pipe';
import { TranslateService } from '../../../i18n/translate.service';
import { PlatformLayoutType, ThemePaletteConfig } from '../../../shared/models/config';
import { FormFieldComponent } from '../../../shared/ui/form-field/form-field.component';
import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
import { SelectComponent, SelectOption } from '../../../shared/ui/select/select.component';
import { ColorPickerComponent } from '../../../shared/ui/color-picker/color-picker.component';
import { HighlightSourceDirective } from '../../../shared/ui/highlight-source/highlight-source.directive';

export interface ThemeModeOption {
  value: 'light' | 'dark' | 'system';
  labelKey: string;
  descKey: string;
}

export interface SiteLayoutOption {
  value: PlatformLayoutType;
  labelKey: string;
  descKey: string;
}

@Component({
  selector: 'app-project-editor-theme-section',
  standalone: true,
  imports: [FormsModule, TranslatePipe, FormFieldComponent, SectionCardComponent, SelectComponent, ColorPickerComponent, HighlightSourceDirective],
  templateUrl: './theme-section.component.html',
  styleUrls: ['./section.shared.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProjectEditorThemeSectionComponent {
  private readonly facade = inject(ProjectEditorFacade);
  private readonly translate = inject(TranslateService);
  readonly bootstrap = this.facade.bootstrap;
  readonly fieldError = (key: string): string | null => {
    const messageKey = this.facade.fieldError(key);
    return messageKey ? this.translate.t(messageKey) : null;
  };
  readonly isFieldModified = (key: string): boolean => this.facade.modifiedFields().has(key);
  resetField(key: string): void {
    this.facade.resetField(key);
  }

  readonly themeModeOptions: ThemeModeOption[] = [
    { value: 'light', labelKey: 'builder.themeModeLight', descKey: 'builder.themeModeLightDesc' },
    { value: 'dark', labelKey: 'builder.themeModeDark', descKey: 'builder.themeModeDarkDesc' },
    { value: 'system', labelKey: 'builder.themeModeSystem', descKey: 'builder.themeModeSystemDesc' },
  ];

  readonly siteLayoutOptions: SiteLayoutOption[] = [
    { value: 'default', labelKey: 'builder.siteLayoutDefault', descKey: 'builder.siteLayoutDefaultDesc' },
    { value: 'sidebar-left', labelKey: 'builder.siteLayoutSidebarLeft', descKey: 'builder.siteLayoutSidebarLeftDesc' },
    { value: 'carousel-home', labelKey: 'builder.siteLayoutCarouselHome', descKey: 'builder.siteLayoutCarouselHomeDesc' },
    { value: 'minimal', labelKey: 'builder.siteLayoutMinimal', descKey: 'builder.siteLayoutMinimalDesc' },
  ];

  readonly themeModeSelectOptions = computed<SelectOption[]>(() =>
    this.themeModeOptions.map(option => ({
      value: option.value,
      label: this.translate.t(option.labelKey),
      description: this.translate.t(option.descKey)
    }))
  );

  readonly siteLayoutSelectOptions = computed<SelectOption[]>(() =>
    this.siteLayoutOptions.map(option => ({
      value: option.value,
      label: this.translate.t(option.labelKey),
      description: this.translate.t(option.descKey)
    }))
  );

  updatePalette<K extends keyof ThemePaletteConfig>(key: K, value: string): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      theme: { ...current.theme, palette: { ...current.theme.palette, [key]: value } }
    }));
  }

  updateThemeMode(mode: string): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      theme: { ...current.theme, mode: mode as 'light' | 'dark' | 'system' }
    }));
  }

  updateSiteLayout(type: string): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      layout: { ...current.layout, type: type as PlatformLayoutType }
    }));
  }
}
