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

@Component({
  selector: 'app-project-editor-footer-section',
  standalone: true,
  imports: [FormsModule, TranslatePipe, InputComponent, FormFieldComponent],
  templateUrl: './footer-section.component.html',
  styleUrls: ['./section.shared.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProjectEditorFooterSectionComponent {
  private readonly facade = inject(ProjectEditorFacade);
  readonly bootstrap = this.facade.bootstrap;
  readonly paymentIconsValue = computed(() => (this.bootstrap()?.footer?.paymentIcons ?? []).map(icon => `${icon.src}|${icon.alt}`).join('\n'));
  readonly socialLinksValue = computed(() => (this.bootstrap()?.footer?.socialLinks ?? []).map(link => `${link.id}|${link.label}|${link.url}`).join('\n'));
  readonly staticPagesValue = computed(() => (this.bootstrap()?.footer?.staticPageKeys ?? this.bootstrap()?.footer?.legalPageKeys ?? []).join(', '));
  readonly copyrightValue = computed(() => {
    const value = this.bootstrap()?.footer?.copyrightText;
    return typeof value === 'string' ? value : '';
  });

  updateCompanyName(value: string): void { this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, companyName: value } })); }
  updateAddress(value: string): void { this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, address: { ...current.company.address, street: value } } })); }
  updatePhone(value: string): void { this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, contacts: { ...current.company.contacts, phone: value } }, branding: { ...current.branding, supportPhone: value } })); }
  updateEmail(value: string): void { this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, contacts: { ...current.company.contacts, email: value } }, branding: { ...current.branding, supportEmail: value } })); }
  updateCopyright(value: string): void { this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, copyrightText: value } })); }
  updatePaymentIcons(value: string): void {
    const paymentIcons = value.split('\n').map(line => line.trim()).filter(Boolean).map((line, index) => {
      const [src, alt] = line.split('|');
      return { src: src?.trim() ?? '', alt: alt?.trim() ?? `icon-${index + 1}` };
    });
    this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, paymentIcons } }));
  }
  updateSocialLinks(value: string): void {
    const socialLinks = value.split('\n').map(line => line.trim()).filter(Boolean).map((line, index) => {
      const [id, label, url] = line.split('|');
      return { id: id?.trim() || `social-${index + 1}`, label: label?.trim() || '', url: url?.trim() || '' };
    });
    this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, socialLinks } }));
  }
  updateStaticPages(value: string): void {
    const staticPageKeys = value.split(',').map(item => item.trim()).filter(Boolean);
    this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, staticPageKeys, legalPageKeys: staticPageKeys } }));
  }
}