<section class="form-card">
  <div class="form-card__header">
    <app-product-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.hasImages) { <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') {
      <div class="grid two">
        <app-form-field [label]="'adminProducts.name' | translate">
          <app-input [ngModel]="product.name" (ngModelChange)="updateName($event)" />
        </app-form-field>
        <app-form-field [label]="'adminProducts.slug' | translate" [hint]="'adminProducts.slugHint' | translate">
          <app-input [ngModel]="product.slug" (ngModelChange)="updateField('slug', $event)" />
        </app-form-field>
        <app-form-field [label]="'backoffice.sku' | translate" [hint]="'adminProducts.skuHint' | translate">
          <div class="field-with-action">
            <app-input [ngModel]="product.sku" (ngModelChange)="updateField('sku', $event)" />
            <app-button variant="secondary" size="sm" (click)="generateSku()">{{ 'adminProducts.generate' | translate }}</app-button>
          </div>
        </app-form-field>
        <app-form-field [label]="'adminProducts.barcode' | translate">
          <app-input [ngModel]="product.barcode" (ngModelChange)="updateField('barcode', $event)" />
        </app-form-field>
        <app-form-field [label]="'adminProducts.brand' | translate">
          <app-input [ngModel]="product.brand" (ngModelChange)="updateField('brand', $event)" />
        </app-form-field>
        <app-form-field [label]="'adminProducts.priority' | translate">
          <app-input type="number" [ngModel]="product.priority" (ngModelChange)="updateField('priority', +$event)" />
        </app-form-field>
      </div>
      <app-form-field [label]="'adminProducts.shortDescription' | translate">
        <app-input [ngModel]="product.shortDescription" (ngModelChange)="updateField('shortDescription', $event)" />
      </app-form-field>

      <details class="translations-block">
        <summary>
          <app-icon name="globe" [size]="16" />
          {{ 'adminProducts.translations' | translate }}
          <span class="translations-block__count">{{ translatedLocalesCount() }}/{{ locales.length }}</span>
        </summary>
        <p class="translations-block__hint">{{ 'adminProducts.translationsHint' | translate }}</p>
        @for (locale of locales; track locale) {
          <div class="grid two sub-block">
            <app-form-field [label]="(('adminProducts.name' | translate) + ' — ' + locale.toUpperCase())">
              <app-input [ngModel]="product.translations[locale]?.name || ''" (ngModelChange)="updateTranslation(locale, 'name', $event)" [placeholder]="product.name" />
            </app-form-field>
            <app-form-field [label]="(('adminProducts.shortDescription' | translate) + ' — ' + locale.toUpperCase())">
              <app-input [ngModel]="product.translations[locale]?.shortDescription || ''" (ngModelChange)="updateTranslation(locale, 'shortDescription', $event)" [placeholder]="product.shortDescription" />
            </app-form-field>
          </div>
        }
      </details>
    }

    @if (activeGroup() === 'media') {
      <div class="grid one">
        <app-form-field [label]="'adminProducts.primaryImage' | translate" [hint]="'adminProducts.primaryImageHint' | translate">
          <app-image-field [value]="product.media.images[0] || ''" (valueChange)="setPrimaryImage($event)" />
        </app-form-field>

        <app-form-field [label]="'adminProducts.gallery' | translate" [hint]="'adminProducts.galleryHint' | translate">
          <div class="gallery-grid">
            @for (url of product.media.gallery; track $index) {
              <div class="gallery-item">
                <img [src]="url" alt="" loading="lazy" />
                <div class="gallery-item__actions">
                  <button type="button" (click)="moveGalleryImage($index, -1)" [attr.aria-label]="'adminProducts.moveLeft' | translate">&larr;</button>
                  <button type="button" (click)="moveGalleryImage($index, 1)" [attr.aria-label]="'adminProducts.moveRight' | translate">&rarr;</button>
                  <button type="button" (click)="removeGalleryImage($index)" [attr.aria-label]="'mediaLibrary.delete' | translate">&times;</button>
                </div>
              </div>
            }
            <app-button variant="secondary" size="sm" (click)="openMediaPicker()">{{ 'adminCategories.chooseImage' | translate }}</app-button>
          </div>
          <app-media-picker [open]="mediaPickerOpen" (selected)="addGalleryImage($event)" (closed)="mediaPickerOpen = false" />
        </app-form-field>

        <label class="full"><span>{{ 'adminProducts.videos' | translate }}</span><textarea rows="3" [ngModel]="product.media.videos.join('\n')" (ngModelChange)="updateVideos($event)"></textarea></label>
      </div>
    }

    @if (activeGroup() === 'pricing') {
      <div class="grid three">
        <app-form-field [label]="'backoffice.price' | translate">
          <app-input type="number" [ngModel]="product.price" (ngModelChange)="updateField('price', +$event)" />
        </app-form-field>
        <app-form-field [label]="'adminProducts.discount' | translate">
          <app-input type="number" [ngModel]="product.discount" (ngModelChange)="updateField('discount', +$event)" />
        </app-form-field>
        <app-form-field [label]="'adminProducts.currency' | translate">
          <app-input [ngModel]="product.currency" (ngModelChange)="updateField('currency', $event)" />
        </app-form-field>
      </div>
      <p class="price-preview">{{ product.name || ('adminProducts.name' | translate) }} — {{ finalPrice() }} {{ product.currency }}
        @if (product.discount > 0) { <s>{{ product.price }} {{ product.currency }}</s> }
      </p>
    }

    @if (activeGroup() === 'inventory') {
      <div class="grid three">
        <app-form-field [label]="'adminProducts.stockQuantity' | translate" [hint]="'adminProducts.stockQuantityHint' | translate">
          <app-input type="number" [ngModel]="product.quantity" (ngModelChange)="updateField('quantity', +$event)" />
        </app-form-field>
        <app-form-field [label]="'adminProducts.availabilityStatus' | translate" [hint]="'adminProducts.availabilityStatusHint' | translate">
          <select [ngModel]="product.stockStatus" (ngModelChange)="updateField('stockStatus', $event)">
            <option value="in_stock">{{ 'adminProducts.inStock' | translate }}</option>
            <option value="low_stock">{{ 'adminProducts.lowStock' | translate }}</option>
            <option value="out_of_stock">{{ 'adminProducts.outOfStock' | translate }}</option>
          </select>
        </app-form-field>
        <app-form-field [label]="'adminProducts.availabilityNote' | translate" [hint]="'adminProducts.availabilityNoteHint' | translate">
          <app-input [ngModel]="product.availability" (ngModelChange)="updateField('availability', $event)" />
        </app-form-field>
      </div>
      <p class="form-card__explain">{{ 'adminProducts.reservedNote' | translate }}</p>
    }

    @if (activeGroup() === 'categories') {
      <app-form-field [label]="'adminProducts.category' | translate">
        <select [ngModel]="product.categoryId" (ngModelChange)="updateField('categoryId', $event)">
          @for (category of categories; track category.id) { <option [ngValue]="category.id">{{ category.title }}</option> }
        </select>
      </app-form-field>

      <h4 class="form-card__subheading">{{ 'adminProducts.relatedProducts' | translate }}</h4>
      <div class="related-grid">
        @for (other of otherProducts(); track other.id) {
          <label class="check"><input type="checkbox" [checked]="product.relatedProductIds.includes(other.id)" (change)="toggleRelated(other.id, $any($event.target).checked)" /><span>{{ other.name }}</span></label>
        }
      </div>
    }

    @if (activeGroup() === 'attributes') {
      <details class="form-card__group" open>
        <summary>{{ 'adminProducts.specifications' | translate }}</summary>
        <app-key-value-editor
          [rows]="product.specifications"
          [createRow]="createSpecRow"
          [addLabel]="'adminProducts.addRow' | translate"
          [removeLabel]="'adminProducts.removeRow' | translate"
          (rowsChange)="updateSpecifications($event)"
        >
          <ng-template let-row let-i="index">
            <app-input [ngModel]="row.key" [placeholder]="'adminProducts.rowKey' | translate" (ngModelChange)="updateSpecificationField(i, 'key', $event)" />
            <app-input [ngModel]="row.value" [placeholder]="'adminProducts.rowValue' | translate" (ngModelChange)="updateSpecificationField(i, 'value', $event)" />
          </ng-template>
        </app-key-value-editor>
      </details>

      <details class="form-card__group">
        <summary>{{ 'adminProducts.attributes' | translate }}</summary>
        <app-key-value-editor
          [rows]="product.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>
      </details>

      <details class="form-card__group" open>
        <summary>{{ 'adminProducts.variants' | translate }}</summary>
        <p class="form-card__explain">{{ 'adminProducts.variantsHint' | translate }}</p>
        <app-product-variants-editor
          [attributes]="product.variantAttributes"
          [variants]="product.variants"
          (attributesChange)="updateField('variantAttributes', $event)"
          (variantsChange)="updateField('variants', $event)"
        />
      </details>
    }

    @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]="!product.seo.metaTitle.trim() ? ('adminProducts.seoMissingTitle' | translate) : null">
        <app-input [ngModel]="product.seo.metaTitle" (ngModelChange)="productChange.emit({ seo: { ...product.seo, metaTitle: $event } })" />
      </app-form-field>
      <app-form-field [label]="'adminProducts.searchDescription' | translate" [hint]="'adminProducts.searchDescriptionHint' | translate" [error]="!product.seo.metaDescription.trim() ? ('adminProducts.seoMissingDescription' | translate) : null">
        <app-input [ngModel]="product.seo.metaDescription" (ngModelChange)="productChange.emit({ seo: { ...product.seo, metaDescription: $event } })" />
      </app-form-field>
      <app-form-field [label]="'adminProducts.keywords' | translate">
        <app-input [ngModel]="product.seo.keywords" (ngModelChange)="productChange.emit({ seo: { ...product.seo, keywords: $event } })" />
      </app-form-field>

      <div class="seo-preview">
        <p class="seo-preview__title">{{ product.seo.metaTitle || product.name }}</p>
        <p class="seo-preview__url">yourstore.com/{{ product.slug }}</p>
        <p class="seo-preview__description">{{ product.seo.metaDescription || product.shortDescription }}</p>
      </div>
    }

    @if (activeGroup() === 'visibility') {
      <div class="grid two">
        <label class="toggle-row"><app-toggle [ngModel]="product.visible" (ngModelChange)="updateField('visible', $event)" [ariaLabel]="'adminProducts.visible' | translate" /><span>{{ 'adminProducts.visible' | translate }}</span></label>
        <label class="toggle-row"><app-toggle [ngModel]="product.archived" (ngModelChange)="updateField('archived', $event)" [ariaLabel]="'adminProducts.archived' | translate" /><span>{{ 'adminProducts.archived' | translate }}</span></label>
        <label class="toggle-row"><app-toggle [ngModel]="product.featured" (ngModelChange)="updateField('featured', $event)" [ariaLabel]="'adminProducts.featured' | translate" /><span>{{ 'adminProducts.featured' | translate }}</span></label>
        <label class="toggle-row"><app-toggle [ngModel]="product.recommended" (ngModelChange)="updateField('recommended', $event)" [ariaLabel]="'adminProducts.recommended' | translate" /><span>{{ 'adminProducts.recommended' | translate }}</span></label>
        <label class="toggle-row"><app-toggle [ngModel]="product.isNew" (ngModelChange)="updateField('isNew', $event)" [ariaLabel]="'adminProducts.new' | translate" /><span>{{ 'adminProducts.new' | translate }}</span></label>
        <label class="toggle-row"><app-toggle [ngModel]="product.bestseller" (ngModelChange)="updateField('bestseller', $event)" [ariaLabel]="'adminProducts.bestseller' | translate" /><span>{{ 'adminProducts.bestseller' | translate }}</span></label>
      </div>
      <app-form-field [label]="'adminProducts.badges' | translate" [hint]="'adminProducts.badgesHint' | translate">
        <div class="badge-manager">
          @if (product.badges.length > 0) {
            <div class="badge-manager__current">
              @for (badge of product.badges; track badge) {
                <span class="badge-chip" [style.background]="badgeColor(badge)">
                  {{ badge }}
                  <button type="button" class="badge-chip__remove" (click)="removeBadge(badge)" [attr.aria-label]="('adminProducts.removeBadge' | translate) + ' ' + badge">&times;</button>
                </span>
              }
            </div>
          }
          <div class="badge-manager__known">
            @for (known of knownBadges; track known) {
              @if (!product.badges.includes(known)) {
                <button type="button" class="badge-chip badge-chip--add" [style.background]="badgeColor(known)" (click)="addBadge(known)">+ {{ known }}</button>
              }
            }
          </div>
          <div class="badge-manager__custom">
            <app-input [ngModel]="customBadge" (ngModelChange)="customBadge = $event" [placeholder]="'adminProducts.customBadgePlaceholder' | translate" />
            <app-button variant="secondary" size="sm" [disabled]="!customBadge.trim()" (click)="addCustomBadge()">{{ 'adminProducts.addBadge' | translate }}</app-button>
          </div>
        </div>
      </app-form-field>
    }

    @if (activeGroup() === 'advanced') {
      <h4 class="form-card__subheading">{{ 'adminProducts.htmlDescription' | translate }}</h4>
      <app-marketplace-html-editor [html]="product.htmlDescription" (htmlChange)="updateField('htmlDescription', $event)" />

      <details class="translations-block">
        <summary>
          <app-icon name="globe" [size]="16" />
          {{ 'adminProducts.translations' | translate }}
        </summary>
        <p class="translations-block__hint">{{ 'adminProducts.translationsHint' | translate }}</p>
        @for (locale of locales; track locale) {
          <label class="full sub-block"><span>{{ 'adminProducts.htmlDescription' | translate }} — {{ locale.toUpperCase() }}</span>
            <app-marketplace-html-editor
              [html]="product.translations[locale]?.htmlDescription || ''"
              (htmlChange)="updateTranslation(locale, 'htmlDescription', $event)"
            />
          </label>
        }
      </details>

      <h4 class="form-card__subheading">{{ 'adminProducts.customer' | translate }}</h4>
      <div class="readonly-grid">
        <article>
          <h5>{{ 'adminProducts.reviewsReadonly' | translate }}</h5>
          @if (product.reviews.length === 0) { <p>{{ 'adminProducts.noReviews' | translate }}</p> }
          @for (review of product.reviews; track review.id) { <p><strong>{{ review.author }}</strong> · {{ review.rating }}/5<br />{{ review.text }}</p> }
        </article>
        <article>
          <h5>{{ 'adminProducts.questionsReadonly' | translate }}</h5>
          @if (product.questions.length === 0) { <p>{{ 'adminProducts.noQuestions' | translate }}</p> }
          @for (question of product.questions; track question.id) { <p><strong>{{ question.question }}</strong><br />{{ question.answer || '-' }}</p> }
        </article>
      </div>
    }
  </div>

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