<ng-container *transloco="let t; prefix: 'book.addPhysicalBook'">
<div class="add-physical-book">
  <div class="panel-header">
    <div class="header-icon-wrapper">
      <i class="pi pi-book header-icon"></i>
    </div>
    <div class="header-text">
      <h2 class="panel-title">{{ t('title') }}</h2>
      <p class="panel-description">{{ t('description') }}</p>
    </div>
    <p-button
      icon="pi pi-times"
      (click)="cancel()"
      severity="secondary"
      [text]="true"
      [rounded]="true"
      class="close-button"
      [pTooltip]="t('closeTooltip')"
      tooltipPosition="left"/>
  </div>

  <div class="form-container">
    <div class="form-group highlight-group">
      <label for="library" class="form-label">
        <i class="pi pi-folder label-icon"></i>
        {{ t('libraryLabel') }}
        <span class="required-indicator">*</span>
      </label>
      <p-select
        id="library"
        [options]="libraries"
        [(ngModel)]="selectedLibraryId"
        optionLabel="name"
        optionValue="id"
        [placeholder]="t('libraryPlaceholder')"
        [style]="{'width': '100%'}"/>
    </div>

    <div class="gradient-divider"></div>

    <div class="top-section">
      @if (coverUrl) {
        <div class="cover-preview">
          <img [src]="coverUrl" alt="Book cover"/>
        </div>
      }

      <div class="top-fields">
        <div class="form-row">
          <div class="form-group highlight-group flex-2">
            <label for="title" class="form-label">
              <i class="pi pi-tag label-icon"></i>
              {{ t('titleLabel') }}
            </label>
            <div class="input-wrapper">
              <input
                id="title"
                type="text"
                pInputText
                [(ngModel)]="title"
                class="input-full"
                [placeholder]="t('titlePlaceholder')"
                [class.filled]="title.trim()"/>
            </div>
          </div>

          <div class="form-group highlight-group flex-1">
            <label for="isbn" class="form-label">
              <i class="pi pi-barcode label-icon"></i>
              {{ t('isbnLabel') }}
            </label>
            <div class="isbn-input-row">
              <input
                id="isbn"
                type="text"
                pInputText
                [(ngModel)]="isbn"
                class="input-full"
                [placeholder]="t('isbnPlaceholder')"/>
              <p-button
                icon="pi pi-search"
                [rounded]="true"
                [text]="true"
                severity="info"
                (onClick)="fetchMetadataByIsbn()"
                [disabled]="!isbn.trim() || isFetchingMetadata"
                [loading]="isFetchingMetadata"
                [pTooltip]="t('fetchMetadataTooltip')"
                tooltipPosition="top"/>
            </div>
          </div>
        </div>

        <div class="form-group highlight-group">
          <label for="authors" class="form-label">
            <i class="pi pi-user label-icon"></i>
            {{ t('authorsLabel') }}
          </label>
          <div class="autocomplete-wrapper">
            <p-autoComplete
              appendTo="body"
              [(ngModel)]="authors"
              [multiple]="true"
              [fluid]="true"
              [dropdown]="false"
              [suggestions]="filteredAuthors"
              [forceSelection]="false"
              [showClear]="false"
              [placeholder]="t('authorsPlaceholder')"
              (completeMethod)="filterAuthors($event)"
              (onKeyUp)="onAutoCompleteKeyUp('authors', $event)"
              (onSelect)="onAutoCompleteSelect('authors', $event)">
            </p-autoComplete>
          </div>
        </div>
      </div>
    </div>

    <div class="gradient-divider"></div>

    <div class="form-group highlight-group">
      <label for="description" class="form-label">
        <i class="pi pi-align-left label-icon"></i>
        {{ t('descriptionLabel') }}
      </label>
      <textarea
        id="description"
        pTextarea
        [(ngModel)]="description"
        rows="3"
        [placeholder]="t('descriptionPlaceholder')"
        class="input-full"></textarea>
    </div>

    <div class="gradient-divider"></div>

    <div class="form-row">
      <div class="form-group highlight-group flex-1">
        <label for="publisher" class="form-label">
          <i class="pi pi-building label-icon"></i>
          {{ t('publisherLabel') }}
        </label>
        <input
          id="publisher"
          type="text"
          pInputText
          [(ngModel)]="publisher"
          class="input-full"
          [placeholder]="t('publisherPlaceholder')"/>
      </div>

      <div class="form-group highlight-group flex-1">
        <label for="publishedDate" class="form-label">
          <i class="pi pi-calendar label-icon"></i>
          {{ t('publishedDateLabel') }}
        </label>
        <input
          id="publishedDate"
          type="text"
          pInputText
          [(ngModel)]="publishedDate"
          class="input-full"
          [placeholder]="t('publishedDatePlaceholder')"/>
      </div>
    </div>

    <div class="form-row">
      <div class="form-group highlight-group flex-1">
        <label for="language" class="form-label">
          <i class="pi pi-globe label-icon"></i>
          {{ t('languageLabel') }}
        </label>
        <input
          id="language"
          type="text"
          pInputText
          [(ngModel)]="language"
          class="input-full"
          [placeholder]="t('languagePlaceholder')"/>
      </div>

      <div class="form-group highlight-group flex-1">
        <label for="pageCount" class="form-label">
          <i class="pi pi-file label-icon"></i>
          {{ t('pageCountLabel') }}
        </label>
        <p-inputnumber
          id="pageCount"
          [(ngModel)]="pageCount"
          [useGrouping]="false"
          [placeholder]="t('pageCountPlaceholder')"
          class="input-full">
        </p-inputnumber>
      </div>
    </div>

    <div class="gradient-divider"></div>

    <div class="form-group highlight-group">
      <label for="categories" class="form-label">
        <i class="pi pi-tags label-icon"></i>
        {{ t('categoriesLabel') }}
      </label>
      <div class="autocomplete-wrapper">
        <p-autoComplete
          appendTo="body"
          [(ngModel)]="categories"
          [multiple]="true"
          [fluid]="true"
          [dropdown]="false"
          [suggestions]="filteredCategories"
          [forceSelection]="false"
          [showClear]="true"
          [placeholder]="t('categoriesPlaceholder')"
          (completeMethod)="filterCategories($event)"
          (onKeyUp)="onAutoCompleteKeyUp('categories', $event)"
          (onSelect)="onAutoCompleteSelect('categories', $event)">
        </p-autoComplete>
      </div>
    </div>
  </div>

  <div class="dialog-footer">
    <div class="validation-status">
      @if (!selectedLibraryId) {
        <div class="validation-message error">
          <i class="pi pi-exclamation-circle"></i>
          <span>{{ t('validationLibraryRequired') }}</span>
        </div>
      } @else if (!title.trim() && !isbn.trim()) {
        <div class="validation-message error">
          <i class="pi pi-exclamation-circle"></i>
          <span>{{ t('validationTitleOrIsbn') }}</span>
        </div>
      } @else {
        <div class="validation-message success">
          <i class="pi pi-check-circle"></i>
          <span>{{ t('validationReady') }}</span>
        </div>
      }
    </div>
    <div class="footer-actions">
      <p-button
        [label]="t('cancelButton')"
        severity="secondary"
        [outlined]="true"
        (onClick)="cancel()"/>
      <p-button
        [label]="t('addButton')"
        icon="pi pi-plus"
        severity="success"
        (onClick)="createBook()"
        [disabled]="!canCreate() || isLoading"
        [loading]="isLoading"/>
    </div>
  </div>
</div>
</ng-container>
