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 { InputComponent } from '../../../shared/ui/input/input.component';
import { FormFieldComponent } from '../../../shared/ui/form-field/form-field.component';
import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';

@Component({
  selector: 'app-project-editor-general-section',
  standalone: true,
  imports: [FormsModule, TranslatePipe, InputComponent, FormFieldComponent, SectionCardComponent],
  templateUrl: './general-section.component.html',
  styleUrls: ['./section.shared.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProjectEditorGeneralSectionComponent {
  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 languagesValue = computed(() => (this.bootstrap()?.localization.supportedLocales ?? []).join(', '));

  updateMarketplaceName(value: string): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      branding: { ...current.branding, brandName: value },
      tenant: { ...current.tenant, name: value }
    }));
  }

  updateDomain(value: string): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      tenant: { ...current.tenant, host: value, websiteBaseUrl: `https://${value}` }
    }));
  }

  updateDescription(value: string): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      seo: {
        ...current.seo,
        default: {
          ...current.seo.default,
          description: value
        }
      }
    }));
  }

  updateDefaultLanguage(value: string): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      tenant: { ...current.tenant, defaultLocale: value },
      localization: { ...current.localization, defaultLocale: value }
    }));
  }

  /**
   * Routes through facade.addLocale()/removeLocale() (LocaleSyncService)
   * instead of overwriting supportedLocales directly - a direct overwrite
   * skipped seeding/cleaning up per-locale nav and static-page translation
   * entries, leaving them out of sync with what this field claims is
   * supported (and Languages' add/remove buttons already do it correctly).
   */
  updateSupportedLanguages(value: string): void {
    const next = new Set(value.split(',').map(item => item.trim().toLowerCase()).filter(Boolean));
    const current = this.bootstrap()?.localization.supportedLocales ?? [];
    for (const locale of current) {
      if (!next.has(locale)) {
        this.facade.removeLocale(locale);
      }
    }
    for (const locale of next) {
      if (!current.includes(locale)) {
        this.facade.addLocale(locale);
      }
    }
  }
}