import { ChangeDetectionStrategy, Component, 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 { ButtonComponent } from '../../../shared/ui/button/button.component';
import { ImageFieldComponent } from '../../../shared/ui/image-field/image-field.component';
import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
import { BrandOverviewComponent } from './brand/brand-overview.component';
import { HighlightSourceDirective } from '../../../shared/ui/highlight-source/highlight-source.directive';

type BrandingImageField = 'logoUrl' | 'logoCompactUrl' | 'faviconUrl' | 'socialImageUrl';

@Component({
  selector: 'app-project-editor-branding-section',
  standalone: true,
  imports: [FormsModule, TranslatePipe, InputComponent, FormFieldComponent, ButtonComponent, ImageFieldComponent, SectionCardComponent, BrandOverviewComponent, HighlightSourceDirective],
  templateUrl: './branding-section.component.html',
  styleUrls: ['./section.shared.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProjectEditorBrandingSectionComponent {
  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);
  }

  updateField<K extends BrandingImageField | 'brandName'>(key: K, value: string): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      branding: { ...current.branding, [key]: value }
    }));
  }

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

  addGalleryImage(): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      branding: { ...current.branding, galleryUrls: [...(current.branding.galleryUrls ?? []), ''] }
    }));
  }

  updateGalleryImage(index: number, url: string): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      branding: {
        ...current.branding,
        galleryUrls: (current.branding.galleryUrls ?? []).map((existing, i) => (i === index ? url : existing))
      }
    }));
  }

  removeGalleryImage(index: number): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      branding: { ...current.branding, galleryUrls: (current.branding.galleryUrls ?? []).filter((_, i) => i !== index) }
    }));
  }
}
