<section class="form-card">
  <div class="form-card__header">
    <app-category-health-widget [items]="healthItems()" [completionPercent]="health.completionPercent" />
  </div>

  <div class="form-card__tabs" role="tablist">
    @for (group of groups; track group.id) {
      <button
        type="button"
        role="tab"
        [attr.aria-selected]="activeGroup() === group.id"
        [class.form-card__tab--active]="activeGroup() === group.id"
        class="form-card__tab"
        (click)="setGroup(group.id)"
      >
        {{ group.labelKey | translate }}
        @if (group.id === 'media' && !health.hasImage) { <app-badge variant="warning">!</app-badge> }
        @if (group.id === 'seo' && !health.hasSeo) { <app-badge variant="warning">!</app-badge> }
      </button>
    }
  </div>

  <div class="form-card__panel">
    @if (activeGroup() === 'general') {
      @if (breadcrumb.length > 0) {
        <p class="breadcrumb-preview">{{ breadcrumb.join(' / ') }}</p>
      }
      <div class="grid two">
        <app-form-field [label]="'adminCategories.title' | translate" [required]="true">
          <app-input [ngModel]="category.title" (ngModelChange)="updateTitle($event)" />
        </app-form-field>
        <app-form-field [label]="'adminCategories.slug' | translate" [required]="true" [hint]="'adminProducts.slugHint' | translate" [error]="slugCheckError ? ('adminCategories.slugCheckError' | translate) : (slugTaken ? ('adminCategories.slugTaken' | translate) : null)">
          <app-input [ngModel]="category.slug" (ngModelChange)="updateField('slug', $event)" />
        </app-form-field>
        <label><span>{{ 'adminCategories.parent' | translate }}</span>
          <select [ngModel]="category.parentId" (ngModelChange)="updateField('parentId', $event || null)">
            <option [ngValue]="null">{{ 'adminCategories.noParent' | translate }}</option>
            @for (option of parentOptions; track option.id) {
              <option [ngValue]="option.id">{{ option.title }}</option>
            }
          </select>
        </label>
        <app-form-field [label]="'adminCategories.icon' | translate" [hint]="'adminCategories.iconHint' | translate">
          <div class="icon-field">
            <app-input [ngModel]="category.icon" (ngModelChange)="updateField('icon', $event)" />
            @if (category.icon) {
              <span class="icon-field__preview" aria-hidden="true">{{ category.icon }}</span>
            }
          </div>
        </app-form-field>
      </div>

      <app-form-field [label]="'adminCategories.description' | translate">
        <textarea rows="3" [ngModel]="category.description" (ngModelChange)="updateField('description', $event)"></textarea>
      </app-form-field>

      <h4 class="form-card__subheading">{{ 'adminProducts.translations' | translate }}</h4>
      @for (locale of locales; track locale) {
        <div class="grid two sub-block">
          <app-form-field [label]="(('adminCategories.title' | translate) + ' — ' + locale)">
            <app-input [ngModel]="category.translations[locale]?.title || ''" (ngModelChange)="updateTranslation(locale, 'title', $event)" />
          </app-form-field>
          <app-form-field [label]="(('adminCategories.description' | translate) + ' — ' + locale)">
            <app-input [ngModel]="category.translations[locale]?.description || ''" (ngModelChange)="updateTranslation(locale, 'description', $event)" />
          </app-form-field>
        </div>
      }
    }

    @if (activeGroup() === 'media') {
      <app-form-field [label]="'adminCategories.image' | translate" [hint]="'adminCategories.imageHint' | translate">
        <app-image-field [value]="category.imageUrl" (valueChange)="setImage($event)" />
      </app-form-field>
      <app-form-field [label]="'contentManagement.mediaAlt' | translate">
        <app-input [ngModel]="category.imageAlt" (ngModelChange)="updateField('imageAlt', $event)" />
      </app-form-field>
    }

    @if (activeGroup() === 'seo') {
      <p class="form-card__explain">{{ 'adminProducts.seoExplain' | translate }}</p>
      <div class="seo-generate-row">
        <app-button variant="secondary" size="sm" (click)="generateSeo()">{{ 'adminProducts.seoGenerate' | translate }}</app-button>
        <span class="seo-generate-row__hint">{{ 'adminProducts.seoGenerateHint' | translate }}</span>
      </div>
      <app-form-field [label]="'adminProducts.searchTitle' | translate" [hint]="'adminProducts.searchTitleHint' | translate" [error]="!category.seo.metaTitle.trim() ? ('adminProducts.seoMissingTitle' | translate) : null">
        <app-input [ngModel]="category.seo.metaTitle" (ngModelChange)="categoryChange.emit({ seo: { ...category.seo, metaTitle: $event } })" />
      </app-form-field>
      <app-form-field [label]="'adminProducts.searchDescription' | translate" [hint]="'adminProducts.searchDescriptionHint' | translate" [error]="!category.seo.metaDescription.trim() ? ('adminProducts.seoMissingDescription' | translate) : null">
        <app-input [ngModel]="category.seo.metaDescription" (ngModelChange)="categoryChange.emit({ seo: { ...category.seo, metaDescription: $event } })" />
      </app-form-field>
      <app-form-field [label]="'adminProducts.keywords' | translate">
        <app-input [ngModel]="category.seo.keywords" (ngModelChange)="categoryChange.emit({ seo: { ...category.seo, keywords: $event } })" />
      </app-form-field>

      <div class="seo-preview">
        <p class="seo-preview__title">{{ category.seo.metaTitle || category.title }}</p>
        <p class="seo-preview__url">yourstore.com/category/{{ category.slug }}</p>
        <p class="seo-preview__description">{{ category.seo.metaDescription || category.description }}</p>
      </div>
    }

    @if (activeGroup() === 'visibility') {
      <label class="toggle-row"><app-toggle [ngModel]="category.visible" (ngModelChange)="updateField('visible', $event)" [ariaLabel]="'adminProducts.visible' | translate" /><span>{{ 'adminProducts.visible' | translate }}</span></label>
      <p class="form-card__explain">{{ 'adminCategories.visibilityExplain' | translate }}</p>
    }

    @if (activeGroup() === 'navigation') {
      <h4 class="form-card__subheading">{{ 'adminCategories.navBreadcrumb' | translate }}</h4>
      <p class="breadcrumb-hint">{{ 'adminCategories.navBreadcrumbHint' | translate }}</p>
      <p>{{ breadcrumb.length > 0 ? breadcrumb.join(' › ') : ('adminCategories.navRoot' | translate) }}</p>

      <h4 class="form-card__subheading">{{ 'adminCategories.navChildren' | translate }}</h4>
      @if (children.length === 0) {
        <p class="form-card__explain">{{ 'adminCategories.navNoChildren' | translate }}</p>
      } @else {
        <ul class="nav-children">
          @for (child of children; track child.id) { <li>{{ child.icon }} {{ child.title }}</li> }
        </ul>
      }

      <h4 class="form-card__subheading">{{ 'adminCategories.navAppearsIn' | translate }}</h4>
      <p class="form-card__explain">{{ (category.visible ? 'adminCategories.navAppearsVisible' : 'adminCategories.navAppearsHidden') | translate }}</p>
    }

    @if (activeGroup() === 'attributes') {
      <app-key-value-editor
        [rows]="category.attributes"
        [createRow]="createAttributeRow"
        [addLabel]="'adminProducts.addRow' | translate"
        [removeLabel]="'adminProducts.removeRow' | translate"
        (rowsChange)="updateAttributes($event)"
      >
        <ng-template let-row let-i="index">
          <app-input [ngModel]="row.key" [placeholder]="'adminProducts.rowKey' | translate" (ngModelChange)="updateAttributeField(i, 'key', $event)" />
          <app-input [ngModel]="row.value" [placeholder]="'adminProducts.rowValue' | translate" (ngModelChange)="updateAttributeField(i, 'value', $event)" />
        </ng-template>
      </app-key-value-editor>
    }

    @if (activeGroup() === 'advanced') {
      <div class="grid two">
        <app-form-field [label]="'adminCategories.itemsCountLabel' | translate">
          <app-input [ngModel]="category.itemsCount" [disabled]="true" />
        </app-form-field>
        <app-form-field [label]="'adminCategories.createdAtLabel' | translate">
          <app-input [ngModel]="category.createdAt | date" [disabled]="true" />
        </app-form-field>
      </div>
    }
  </div>

  <div class="actions">
    <app-button variant="secondary" (click)="saveDraft.emit()">{{ 'adminCategories.saveDraft' | translate }}</app-button>
    <app-button variant="primary" (click)="publish.emit()">{{ 'adminCategories.publish' | translate }}</app-button>
  </div>
</section>
