import { ChangeDetectionStrategy, Component, EventEmitter, Output, computed, input, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TranslatePipe } from '../../../../i18n/translate.pipe';
import { ButtonComponent } from '../../../../shared/ui/button/button.component';
import { InputComponent } from '../../../../shared/ui/input/input.component';
import { FormFieldComponent } from '../../../../shared/ui/form-field/form-field.component';
import { BadgeComponent } from '../../../../shared/ui/badge/badge.component';
import { ToggleComponent } from '../../../../shared/ui/toggle/toggle.component';
import { MarketplaceHtmlEditorComponent } from '../../../project-editor/components/html-editor/marketplace-html-editor.component';
import { StaticPagePreviewComponent } from '../static-page-preview/static-page-preview.component';
import { ContentPage, ContentPageSeoConfig } from '../../models/content-page.model';

export type PageEditorGroup = 'content' | 'seo' | 'sharing' | 'advanced';
export type PageMediaField = 'heroImage' | 'thumbnail';

@Component({
  selector: 'app-page-editor',
  standalone: true,
  imports: [
    FormsModule,
    TranslatePipe,
    ButtonComponent,
    InputComponent,
    FormFieldComponent,
    BadgeComponent,
    ToggleComponent,
    MarketplaceHtmlEditorComponent,
    StaticPagePreviewComponent,
  ],
  templateUrl: './page-editor.component.html',
  styleUrl: './page-editor.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PageEditorComponent {
  readonly page = input.required<ContentPage>();
  readonly locales = input.required<string[]>();
  readonly defaultLocale = input<string>('en');

  readonly hasDuplicateSlug = input(false);
  readonly hasDuplicateRoute = input(false);
  readonly hasEmptyTitle = input(false);
  readonly hasInvalidHtml = input(false);
  readonly hasInvalidSeo = input(false);

  @Output() close = new EventEmitter<void>();
  @Output() updatePage = new EventEmitter<Partial<ContentPage>>();
  @Output() updateTranslation = new EventEmitter<{ locale: string; field: 'title' | 'html'; value: string }>();
  @Output() updateSeo = new EventEmitter<Partial<ContentPageSeoConfig>>();
  @Output() updateGallery = new EventEmitter<string>();
  @Output() openMediaPicker = new EventEmitter<PageMediaField>();
  @Output() clearMedia = new EventEmitter<PageMediaField>();
  @Output() duplicatePage = new EventEmitter<void>();
  @Output() deletePage = new EventEmitter<void>();

  readonly activeGroup = signal<PageEditorGroup>('content');
  readonly previewOpen = signal(false);

  readonly groups: { id: PageEditorGroup; labelKey: string }[] = [
    { id: 'content', labelKey: 'contentManagement.groupContent' },
    { id: 'seo', labelKey: 'contentManagement.groupSeo' },
    { id: 'sharing', labelKey: 'contentManagement.groupSharing' },
    { id: 'advanced', labelKey: 'contentManagement.groupAdvanced' },
  ];

  readonly previewHtml = computed(() => {
    const translations = this.page().translations;
    return translations[this.defaultLocale()]?.html ?? Object.values(translations)[0]?.html ?? '';
  });

  readonly previewTitle = computed(() => {
    const translations = this.page().translations;
    return translations[this.defaultLocale()]?.title || this.page().title;
  });

  setGroup(group: PageEditorGroup): void {
    this.activeGroup.set(group);
  }

  togglePreview(): void {
    this.previewOpen.set(!this.previewOpen());
  }

  onCheckbox(event: Event): boolean {
    return (event.target as HTMLInputElement).checked;
  }
}
