<div class="page-editor">
  <div class="page-editor__header">
    <app-button variant="ghost" size="sm" (click)="close.emit()">&larr; {{ 'contentManagement.backToPages' | translate }}</app-button>
    <h2 class="page-editor__title">{{ previewTitle() || page().slug }}</h2>
    <div class="page-editor__header-actions">
      <app-button variant="secondary" size="sm" (click)="togglePreview()">{{ 'staticPages.previewToggle' | translate }}</app-button>
      <app-button variant="secondary" size="sm" (click)="duplicatePage.emit()">{{ 'staticPages.duplicatePage' | translate }}</app-button>
      @if (page().status === 'published') {
        <app-button variant="secondary" size="sm" (click)="updatePage.emit({ status: 'draft' })">{{ 'staticPages.unpublishPageAction' | translate }}</app-button>
      } @else {
        <app-button variant="primary" size="sm" (click)="updatePage.emit({ status: 'published' })">{{ 'staticPages.publishPageAction' | translate }}</app-button>
      }
      <app-button variant="danger" size="sm" (click)="deletePage.emit()">{{ 'builder.deletePage' | translate }}</app-button>
    </div>
  </div>

  @if (previewOpen()) {
    <app-static-page-preview [html]="previewHtml()" [title]="previewTitle()" />
  }

  <div class="page-editor__tabs" role="tablist">
    @for (group of groups; track group.id) {
      <button
        type="button"
        role="tab"
        [id]="'page-editor-tab-' + group.id"
        [attr.aria-selected]="activeGroup() === group.id"
        [class.page-editor__tab--active]="activeGroup() === group.id"
        class="page-editor__tab"
        (click)="setGroup(group.id)"
      >
        {{ group.labelKey | translate }}
        @if (group.id === 'seo' && hasInvalidSeo()) {
          <app-badge variant="danger">!</app-badge>
        }
        @if (group.id === 'content' && hasEmptyTitle()) {
          <app-badge variant="danger">!</app-badge>
        }
      </button>
    }
  </div>

  <div class="page-editor__panel" role="tabpanel" [attr.aria-labelledby]="'page-editor-tab-' + activeGroup()">
    @if (activeGroup() === 'content') {
      <div class="page-editor__stack">
        @for (locale of locales(); track locale) {
          <app-form-field [label]="(('builder.translationTitle' | translate) + ' — ' + locale)" [error]="hasEmptyTitle() ? ('staticPages.emptyTitle' | translate) : null">
            <app-input [ngModel]="page().translations[locale]?.title || ''" (ngModelChange)="updateTranslation.emit({ locale, field: 'title', value: $event })" />
          </app-form-field>
        }

        <div class="page-editor__content-block">
          <h3 class="page-editor__content-heading">{{ 'contentManagement.pageContentLabel' | translate }}</h3>
          <p class="page-editor__explain">{{ 'contentManagement.pageContentDesc' | translate }}</p>
          @for (locale of locales(); track locale) {
            <label class="full page-editor__html-block">
              @if (locales().length > 1) {
                <span>{{ ('contentManagement.pageContentLabel' | translate) + ' — ' + locale }}</span>
              }
              <app-marketplace-html-editor
                [html]="page().translations[locale]?.html || ''"
                (htmlChange)="updateTranslation.emit({ locale, field: 'html', value: $event })"
              />
              @if (hasInvalidHtml()) {
                <p class="page-editor__error">{{ 'staticPages.invalidHtml' | translate }}</p>
              }
            </label>
          }
        </div>

        <div class="page-editor__media-grid">
          <div class="media-block">
            <span class="media-block__label">{{ 'staticPages.heroImageLabel' | translate }}</span>
            @if (page().heroImage) {
              <img class="media-block__preview" [src]="page().heroImage" [alt]="page().heroImageAlt || ''" />
            }
            <div class="media-block__actions">
              <app-button variant="secondary" size="sm" (click)="openMediaPicker.emit('heroImage')">
                {{ (page().heroImage ? 'contentManagement.mediaReplace' : 'contentManagement.mediaSelect') | translate }}
              </app-button>
              @if (page().heroImage) {
                <app-button variant="ghost" size="sm" (click)="clearMedia.emit('heroImage')">{{ 'contentManagement.mediaRemove' | translate }}</app-button>
              }
            </div>
            <app-form-field [label]="'contentManagement.mediaAlt' | translate">
              <app-input [ngModel]="page().heroImageAlt || ''" (ngModelChange)="updatePage.emit({ heroImageAlt: $event })" />
            </app-form-field>
            <app-form-field [label]="'contentManagement.mediaCaption' | translate">
              <app-input [ngModel]="page().heroImageCaption || ''" (ngModelChange)="updatePage.emit({ heroImageCaption: $event })" />
            </app-form-field>
          </div>

          <div class="media-block">
            <span class="media-block__label">{{ 'staticPages.thumbnailLabel' | translate }}</span>
            @if (page().thumbnail) {
              <img class="media-block__preview" [src]="page().thumbnail" alt="" />
            }
            <div class="media-block__actions">
              <app-button variant="secondary" size="sm" (click)="openMediaPicker.emit('thumbnail')">
                {{ (page().thumbnail ? 'contentManagement.mediaReplace' : 'contentManagement.mediaSelect') | translate }}
              </app-button>
              @if (page().thumbnail) {
                <app-button variant="ghost" size="sm" (click)="clearMedia.emit('thumbnail')">{{ 'contentManagement.mediaRemove' | translate }}</app-button>
              }
            </div>
          </div>
        </div>
      </div>
    }

    @if (activeGroup() === 'seo') {
      <div class="page-editor__stack">
        <p class="page-editor__explain">{{ 'contentManagement.seoExplainDesc' | translate }}</p>
        <app-form-field [label]="'builder.seoTitle' | translate" [hint]="'contentManagement.seoTitleHelp' | translate">
          <app-input [ngModel]="page().seo?.title || ''" (ngModelChange)="updateSeo.emit({ title: $event })" />
        </app-form-field>
        <app-form-field [label]="'builder.seoDescription' | translate" [hint]="'contentManagement.seoDescriptionHelp' | translate">
          <app-input [ngModel]="page().seo?.description || ''" (ngModelChange)="updateSeo.emit({ description: $event })" />
        </app-form-field>
        <app-form-field [label]="'builder.seoCanonical' | translate" [hint]="'contentManagement.seoCanonicalHelp' | translate">
          <app-input [ngModel]="page().seo?.canonical || ''" (ngModelChange)="updateSeo.emit({ canonical: $event })" />
        </app-form-field>
        <app-form-field
          [label]="'staticPages.seoRobotsLabel' | translate"
          [hint]="'contentManagement.seoRobotsHelp' | translate"
          [error]="hasInvalidSeo() ? ('staticPages.invalidSeo' | translate) : null"
        >
          <app-input [ngModel]="page().seo?.robots || ''" (ngModelChange)="updateSeo.emit({ robots: $event })" placeholder="index,follow" />
        </app-form-field>
      </div>
    }

    @if (activeGroup() === 'sharing') {
      <div class="page-editor__stack">
        <p class="page-editor__explain">{{ 'contentManagement.sharingExplain' | translate }}</p>
        <app-form-field [label]="'builder.seoOgTitle' | translate">
          <app-input [ngModel]="page().seo?.ogTitle || ''" (ngModelChange)="updateSeo.emit({ ogTitle: $event })" />
        </app-form-field>
        <app-form-field [label]="'builder.seoOgDescription' | translate">
          <app-input [ngModel]="page().seo?.ogDescription || ''" (ngModelChange)="updateSeo.emit({ ogDescription: $event })" />
        </app-form-field>
        <app-form-field [label]="'builder.seoOgImage' | translate">
          <app-input [ngModel]="page().seo?.ogImage || ''" (ngModelChange)="updateSeo.emit({ ogImage: $event })" />
        </app-form-field>
      </div>
    }

    @if (activeGroup() === 'advanced') {
      <div class="page-editor__stack">
        <div class="editor-grid three">
          <app-form-field [label]="'builder.pageId' | translate">
            <app-input [ngModel]="page().id" (ngModelChange)="updatePage.emit({ id: $event })" />
          </app-form-field>
          <app-form-field [label]="'builder.slug' | translate" [error]="hasDuplicateSlug() ? ('staticPages.duplicateSlug' | translate) : null">
            <app-input [ngModel]="page().slug" (ngModelChange)="updatePage.emit({ slug: $event })" />
          </app-form-field>
          <app-form-field [label]="'staticPages.routeLabel' | translate" [error]="hasDuplicateRoute() ? ('staticPages.duplicateRoute' | translate) : null">
            <app-input [ngModel]="page().route" (ngModelChange)="updatePage.emit({ route: $event })" />
          </app-form-field>
          <app-form-field [label]="'builder.iconLabel' | translate">
            <app-input [ngModel]="page().icon || ''" (ngModelChange)="updatePage.emit({ icon: $event })" />
          </app-form-field>
          <app-form-field [label]="'builder.footerGroup' | translate">
            <app-input [ngModel]="page().footerGroup || ''" (ngModelChange)="updatePage.emit({ footerGroup: $event })" />
          </app-form-field>
          <app-form-field [label]="'builder.orderLabel' | translate">
            <app-input type="number" [ngModel]="page().order" (ngModelChange)="updatePage.emit({ order: +$event })" />
          </app-form-field>
          <app-form-field [label]="'staticPages.customTemplateLabel' | translate">
            <app-input [ngModel]="page().customTemplate || ''" (ngModelChange)="updatePage.emit({ customTemplate: $event })" />
          </app-form-field>
          <app-form-field [label]="'staticPages.galleryLabel' | translate">
            <app-input [ngModel]="(page().gallery || []).join(', ')" (ngModelChange)="updateGallery.emit($event)" />
          </app-form-field>
        </div>

        <div class="toggle-grid">
          <label class="toggle-row">
            <app-toggle [ngModel]="page().enabled" (ngModelChange)="updatePage.emit({ enabled: $event })" [ariaLabel]="'staticPages.enabledLabel' | translate" />
            <span>{{ 'staticPages.enabledLabel' | translate }}</span>
          </label>
          <label class="toggle-row">
            <app-toggle [ngModel]="page().showInFooter" (ngModelChange)="updatePage.emit({ showInFooter: $event })" [ariaLabel]="'builder.showInFooter' | translate" />
            <span>{{ 'builder.showInFooter' | translate }}</span>
          </label>
          <label class="toggle-row">
            <app-toggle [ngModel]="page().showInHeader" (ngModelChange)="updatePage.emit({ showInHeader: $event })" [ariaLabel]="'builder.showInHeader' | translate" />
            <span>{{ 'builder.showInHeader' | translate }}</span>
          </label>
          <label class="toggle-row">
            <app-toggle [ngModel]="page().showInSitemap" (ngModelChange)="updatePage.emit({ showInSitemap: $event })" [ariaLabel]="'builder.showInSitemap' | translate" />
            <span>{{ 'builder.showInSitemap' | translate }}</span>
          </label>
          <label class="toggle-row">
            <app-toggle [ngModel]="page().requiresAuthentication" (ngModelChange)="updatePage.emit({ requiresAuthentication: $event })" [ariaLabel]="'builder.requiresAuthentication' | translate" />
            <span>{{ 'builder.requiresAuthentication' | translate }}</span>
          </label>
          <label class="toggle-row">
            <app-toggle [ngModel]="page().visibility.desktop !== false" (ngModelChange)="updatePage.emit({ visibility: { ...page().visibility, desktop: $event } })" ariaLabel="Desktop" />
            <span>{{ 'staticPages.previewDesktop' | translate }}</span>
          </label>
          <label class="toggle-row">
            <app-toggle [ngModel]="page().visibility.tablet !== false" (ngModelChange)="updatePage.emit({ visibility: { ...page().visibility, tablet: $event } })" ariaLabel="Tablet" />
            <span>{{ 'staticPages.previewTablet' | translate }}</span>
          </label>
          <label class="toggle-row">
            <app-toggle [ngModel]="page().visibility.mobile !== false" (ngModelChange)="updatePage.emit({ visibility: { ...page().visibility, mobile: $event } })" ariaLabel="Mobile" />
            <span>{{ 'staticPages.previewMobile' | translate }}</span>
          </label>
        </div>

        <app-form-field [label]="'builder.seoKeywords' | translate">
          <app-input [ngModel]="page().seo?.keywords || ''" (ngModelChange)="updateSeo.emit({ keywords: $event })" />
        </app-form-field>
      </div>
    }
  </div>
</div>
