<ng-container *transloco="let t; prefix: 'settingsNaming'">
<div class="file-naming-container">
  <div class="settings-header">
    <h2 class="settings-title">
      <i class="pi pi-file"></i>
      {{ t('title') }}
      <app-external-doc-link docType="fileNamePatterns"></app-external-doc-link>
    </h2>
    <p class="settings-description">
      {{ t('description') }}
    </p>
  </div>

  <div class="warning-notice">
    <i class="pi pi-exclamation-triangle"></i>
    <div>
      <strong>{{ t('warning.title') }}</strong> {{ t('warning.text') }}
    </div>
  </div>

  <div class="settings-card">
    <div class="section-header">
      <h3 class="section-title">
        <i class="pi pi-bolt"></i>
        {{ t('defaultPattern.sectionTitle') }}
      </h3>
      <p class="section-description">{{ t('defaultPattern.sectionDesc') }}</p>
    </div>

    <div class="section-body">
      <div class="default-pattern-card">
        <div class="pattern-input-container">
          <div class="pattern-input-row">
            <input
              pInputText
              id="defaultPattern"
              [(ngModel)]="defaultPattern"
              [placeholder]="t('defaultPattern.placeholder')"
              (input)="onDefaultPatternChange(defaultPattern)"
              class="pattern-input"/>
            <p-button
              [label]="'common.save' | transloco"
              icon="pi pi-save"
              (onClick)="savePatterns()"
              severity="success"
              [outlined]="true"
              [disabled]="!!defaultErrorMessage">
            </p-button>
          </div>
          @if (defaultErrorMessage) {
            <span class="error-text">{{ defaultErrorMessage }}</span>
          }
          <div class="preview-row">
            <span class="preview-label">
              <i class="pi pi-eye"></i>
              {{ t('defaultPattern.preview') }}
            </span>
            <code class="preview-value">{{ generateDefaultPreview() }}</code>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="settings-card">
    <div class="section-header">
      <h3 class="section-title">
        <i class="pi pi-folder"></i>
        {{ t('libraryOverrides.sectionTitle') }}
      </h3>
      <p class="section-description">
        {{ t('libraryOverrides.sectionDesc') }}
      </p>
    </div>

    <div class="section-body">
      @if (libraries.length === 0) {
        <div class="empty-state">
          <i class="pi pi-folder-open"></i>
          <p class="empty-title">{{ t('libraryOverrides.emptyTitle') }}</p>
          <p class="empty-subtitle">{{ t('libraryOverrides.emptySubtitle') }}</p>
        </div>
      } @else {
        <div class="libraries-list">
          @for (library of libraries; track library.id) {
            <div class="library-item" [class.has-pattern]="library.fileNamingPattern">
              <div class="library-header">
                <div class="library-info">
                  <div class="library-icon">
                    <i [class]="'pi pi-' + library.icon"></i>
                  </div>
                  <span class="library-name">{{ library.name }}</span>
                  @if (library.fileNamingPattern) {
                    <span class="custom-badge">{{ t('libraryOverrides.custom') }}</span>
                  } @else {
                    <span class="default-badge">{{ t('libraryOverrides.usingDefault') }}</span>
                  }
                </div>
                <p-button
                  icon="pi pi-times"
                  severity="secondary"
                  size="small"
                  [outlined]="true"
                  [rounded]="true"
                  (onClick)="clearLibraryPattern(library)"
                  [disabled]="!library.fileNamingPattern"
                  [pTooltip]="t('libraryOverrides.clearPattern')">
                </p-button>
              </div>
              <div class="library-body">
                <div class="pattern-input-container">
                  <input
                    pInputText
                    [(ngModel)]="library.fileNamingPattern"
                    [placeholder]="t('libraryOverrides.placeholder')"
                    (input)="onLibraryPatternChange(library)"
                    class="pattern-input"/>
                  <div class="preview-row">
                    <span class="preview-label">
                      <i class="pi pi-eye"></i>
                      {{ t('libraryOverrides.preview') }}
                    </span>
                    <code class="preview-value">{{ generateLibraryPreview(library) }}</code>
                  </div>
                </div>
              </div>
            </div>
          }
        </div>

        <div class="actions-row">
          <p-button
            [label]="t('libraryOverrides.saveAll')"
            (onClick)="saveLibraryPatterns()"
            severity="success"
            icon="pi pi-save"
            [outlined]="true">
          </p-button>
        </div>
      }
    </div>
  </div>

  <div class="settings-card">
    <div class="section-header">
      <h3 class="section-title">
        <i class="pi pi-info-circle"></i>
        {{ t('placeholders.sectionTitle') }}
      </h3>
      <p class="section-description">
        {{ t('placeholders.sectionDesc') }}
      </p>
    </div>

    <div class="section-body">
      <div class="placeholders-grid">
        <div class="placeholder-group">
          <h4 class="group-title">
            <i class="pi pi-hashtag"></i>
            {{ t('placeholders.available') }}
          </h4>
          <div class="placeholder-list">
            <div class="placeholder-item"><code>{{ '{title}' }}</code><span>{{ t('placeholders.title') }}</span></div>
            <div class="placeholder-item"><code>{{ '{subtitle}' }}</code><span>{{ t('placeholders.subtitle') }}</span></div>
            <div class="placeholder-item"><code>{{ '{authors}' }}</code><span>{{ t('placeholders.authors') }}</span></div>
            <div class="placeholder-item"><code>{{ '{year}' }}</code><span>{{ t('placeholders.year') }}</span></div>
            <div class="placeholder-item"><code>{{ '{series}' }}</code><span>{{ t('placeholders.series') }}</span></div>
            <div class="placeholder-item"><code>{{ '{seriesIndex}' }}</code><span>{{ t('placeholders.seriesIndex') }}</span></div>
            <div class="placeholder-item"><code>{{ '{language}' }}</code><span>{{ t('placeholders.language') }}</span></div>
            <div class="placeholder-item"><code>{{ '{publisher}' }}</code><span>{{ t('placeholders.publisher') }}</span></div>
            <div class="placeholder-item"><code>{{ '{isbn}' }}</code><span>{{ t('placeholders.isbn') }}</span></div>
            <div class="placeholder-item"><code>{{ '{currentFilename}' }}</code><span>{{ t('placeholders.currentFilename') }}</span></div>
          </div>
        </div>

        <div class="placeholder-group">
          <h4 class="group-title">
            <i class="pi pi-code"></i>
            {{ t('placeholders.optionalBlocks') }}
          </h4>
          <p class="group-description" [innerHTML]="t('placeholders.optionalDesc', { syntax: '{<...>}' })">
          </p>
          <div class="example-block">
            <div class="example-pattern">
              <span class="pattern-prefix">{{ t('placeholders.pattern') }}</span>
              <code>{{ '{<{seriesIndex} - >{title}' }}</code>
            </div>
            <div class="example-results">
              <div class="result-item">
                <span class="result-prefix">{{ t('placeholders.withIndex') }}</span>
                <code>01 - Dune</code>
              </div>
              <div class="result-item">
                <span class="result-prefix">{{ t('placeholders.without') }}</span>
                <code>Dune</code>
              </div>
            </div>
          </div>
        </div>

        <div class="placeholder-group">
          <h4 class="group-title">
            <i class="pi pi-replay"></i>
            {{ t('placeholders.elseClause') }}
          </h4>
          <p class="group-description" [innerHTML]="t('placeholders.elseDesc')">
          </p>
          <div class="example-block">
            <div class="example-pattern">
              <span class="pattern-prefix">{{ t('placeholders.pattern') }}</span>
              <code>{{ '{<{series}|Standalone>/{title}' }}</code>
            </div>
            <div class="example-results">
              <div class="result-item">
                <span class="result-prefix">{{ t('placeholders.withSeries') }}</span>
                <code>The Kingkiller Chronicle/The Name of the Wind</code>
              </div>
              <div class="result-item">
                <span class="result-prefix">{{ t('placeholders.withoutSeries') }}</span>
                <code>Standalone/The Name of the Wind</code>
              </div>
            </div>
          </div>
        </div>

        <div class="placeholder-group">
          <h4 class="group-title">
            <i class="pi pi-wrench"></i>
            {{ t('placeholders.modifiers') }}
          </h4>
          <p class="group-description" [innerHTML]="t('placeholders.modifiersDesc')">
          </p>
          <div class="placeholder-list">
            <div class="placeholder-item"><code>{{ '{authors:first}' }}</code><span>{{ t('placeholders.modFirst') }}</span></div>
            <div class="placeholder-item"><code>{{ '{authors:sort}' }}</code><span>{{ t('placeholders.modSort') }}</span></div>
            <div class="placeholder-item"><code>{{ '{title:initial}' }}</code><span>{{ t('placeholders.modInitial') }}</span></div>
            <div class="placeholder-item"><code>{{ '{title:upper}' }}</code><span>{{ t('placeholders.modUpper') }}</span></div>
            <div class="placeholder-item"><code>{{ '{title:lower}' }}</code><span>{{ t('placeholders.modLower') }}</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="settings-card">
    <div class="section-header">
      <h3 class="section-title">
        <i class="pi pi-eye"></i>
        {{ t('examples.sectionTitle') }}
      </h3>
      <p class="section-description">
        {{ t('examples.sectionDesc') }}
      </p>
    </div>

    <div class="section-body">
      <div class="examples-container">
        <div class="metadata-reference">
          <div class="metadata-panel metadata-panel-full">
            <div class="metadata-panel-header">
              <i class="pi pi-check-circle metadata-icon-full"></i>
              <span>{{ t('examples.fullMetadata') }}</span>
            </div>
            <div class="metadata-grid">
              <span class="metadata-key">title</span><code class="metadata-val">The Name of the Wind</code>
              <span class="metadata-key">subtitle</span><code class="metadata-val">Special Edition</code>
              <span class="metadata-key">authors</span><code class="metadata-val">Patrick Rothfuss</code>
              <span class="metadata-key">series</span><code class="metadata-val">The Kingkiller Chronicle</code>
              <span class="metadata-key">seriesIndex</span><code class="metadata-val">01</code>
              <span class="metadata-key">year</span><code class="metadata-val">2007</code>
            </div>
          </div>
          <div class="metadata-panel metadata-panel-partial">
            <div class="metadata-panel-header">
              <i class="pi pi-question-circle metadata-icon-partial"></i>
              <span>{{ t('examples.partialMetadata') }}</span>
            </div>
            <div class="metadata-grid">
              <span class="metadata-key">title</span><code class="metadata-val">Project Hail Mary</code>
              <span class="metadata-key">subtitle</span><em class="metadata-val not-set">{{ t('examples.notSet') }}</em>
              <span class="metadata-key">authors</span><code class="metadata-val">Andy Weir</code>
              <span class="metadata-key">year</span><code class="metadata-val">2021</code>
              <span class="metadata-key">series</span><em class="metadata-val not-set">{{ t('examples.notSet') }}</em>
              <span class="metadata-key">seriesIndex</span><em class="metadata-val not-set">{{ t('examples.notSet') }}</em>
            </div>
          </div>
        </div>

        <div class="example-category">
          <h4 class="category-title">
            <i class="pi pi-hashtag"></i>
            {{ t('examples.basicGroup') }}
          </h4>
          <div class="example-grid">
            <div class="example-row">
              <span class="pattern-label">{{ t('examples.basicPattern') }}</span>
              <span class="pattern-col"><code>{{ '{authors} - {title}' }}</code></span>
              <span class="result-col"><code>Patrick Rothfuss - The Name of the Wind.epub</code></span>
            </div>
            <div class="example-row">
              <span class="pattern-label">{{ t('examples.seriesInFolder') }}</span>
              <span class="pattern-col"><code>{{ '{authors}/{series}/{seriesIndex} - {title}' }}</code></span>
              <span class="result-col"><code>Patrick Rothfuss/The Kingkiller Chronicle/01 - The Name of the Wind.epub</code></span>
            </div>
            <div class="example-row">
              <span class="pattern-label">{{ t('examples.titleSubtitle') }}</span>
              <span class="pattern-col"><code>{{ '{title}: {subtitle}' }}</code></span>
              <span class="result-col"><code>The Name of the Wind: Special Edition.epub</code></span>
            </div>
            <div class="example-row">
              <span class="pattern-label">{{ t('examples.absolutePath') }}</span>
              <span class="pattern-col"><code>{{ '/{authors}/{title}' }}</code></span>
              <span class="result-col"><code>/Patrick Rothfuss/The Name of the Wind.epub</code></span>
            </div>
            <div class="example-row">
              <span class="pattern-label">{{ t('examples.folderOnly') }}</span>
              <span class="pattern-col"><code>{{ '{title}/' }}</code></span>
              <span class="result-col"><code>The Name of the Wind/name_of_the_wind_original.epub</code></span>
            </div>
            <div class="example-row">
              <span class="pattern-label">{{ t('examples.yearPrefix') }}</span>
              <span class="pattern-col"><code>{{ '({year}) {title}' }}</code></span>
              <span class="result-col"><code>(2007) The Name of the Wind.epub</code></span>
            </div>
          </div>
        </div>

        <div class="section-divider"><hr></div>

        <div class="example-category">
          <h4 class="category-title">
            <i class="pi pi-code"></i>
            {{ t('examples.conditionalGroup') }}
          </h4>
          <div class="example-grid">
            <div class="example-row-conditional">
              <span class="pattern-label">{{ t('examples.optionalBlock') }}</span>
              <span class="pattern-col"><code>{{ '<{seriesIndex}. >{title}' }}</code></span>
              <div class="result-col-dual">
                <span class="result-with"><i class="pi pi-check-circle"></i> <code>01. The Name of the Wind.epub</code></span>
                <span class="result-without"><i class="pi pi-question-circle"></i> <code>Project Hail Mary.epub</code></span>
              </div>
            </div>
            <div class="example-row-conditional">
              <span class="pattern-label">{{ t('examples.subtitleConditional') }}</span>
              <span class="pattern-col"><code>{{ '{title}<: {subtitle}>' }}</code></span>
              <div class="result-col-dual">
                <span class="result-with"><i class="pi pi-check-circle"></i> <code>The Name of the Wind: Special Edition.epub</code></span>
                <span class="result-without"><i class="pi pi-question-circle"></i> <code>Project Hail Mary.epub</code></span>
              </div>
            </div>
            <div class="example-row-conditional">
              <span class="pattern-label">{{ t('examples.multipleOptional') }}</span>
              <span class="pattern-col"><code>{{ '{authors}/<{series}/><{seriesIndex}. >{title}< ({year})>' }}</code></span>
              <div class="result-col-dual">
                <span class="result-with"><i class="pi pi-check-circle"></i> <code>Patrick Rothfuss/The Kingkiller Chronicle/01. The Name of the Wind (2007).epub</code></span>
                <span class="result-without"><i class="pi pi-question-circle"></i> <code>Andy Weir/Project Hail Mary (2021).epub</code></span>
              </div>
            </div>
            <div class="example-row-conditional">
              <span class="pattern-label">{{ t('examples.elseClause') }}</span>
              <span class="pattern-col"><code>{{ '<{series}|Standalone>/{title}' }}</code></span>
              <div class="result-col-dual">
                <span class="result-with"><i class="pi pi-check-circle"></i> <code>The Kingkiller Chronicle/The Name of the Wind.epub</code></span>
                <span class="result-without"><i class="pi pi-question-circle"></i> <code>Standalone/Project Hail Mary.epub</code></span>
              </div>
            </div>
            <div class="example-row-conditional">
              <span class="pattern-label">{{ t('examples.elseClauseFallback') }}</span>
              <span class="pattern-col"><code>{{ '<{series}/{seriesIndex} - {title}|{title}>' }}</code></span>
              <div class="result-col-dual">
                <span class="result-with"><i class="pi pi-check-circle"></i> <code>The Kingkiller Chronicle/01 - The Name of the Wind.epub</code></span>
                <span class="result-without"><i class="pi pi-question-circle"></i> <code>Project Hail Mary.epub</code></span>
              </div>
            </div>
            <div class="example-row-conditional">
              <span class="pattern-label">{{ t('examples.elseWithModifier') }}</span>
              <span class="pattern-col"><code>{{ '<{series}|{authors:sort}>/{title}' }}</code></span>
              <div class="result-col-dual">
                <span class="result-with"><i class="pi pi-check-circle"></i> <code>The Kingkiller Chronicle/The Name of the Wind.epub</code></span>
                <span class="result-without"><i class="pi pi-question-circle"></i> <code>Weir, Andy/Project Hail Mary.epub</code></span>
              </div>
            </div>
          </div>
        </div>

        <div class="section-divider"><hr></div>

        <div class="example-category">
          <h4 class="category-title">
            <i class="pi pi-wrench"></i>
            {{ t('examples.modifiersGroup') }}
          </h4>
          <div class="example-grid">
            <div class="example-row">
              <span class="pattern-label">{{ t('examples.modifierSort') }}</span>
              <span class="pattern-col"><code>{{ '{authors:sort}/{title}' }}</code></span>
              <span class="result-col"><code>Rothfuss, Patrick/The Name of the Wind.epub</code></span>
            </div>
            <div class="example-row">
              <span class="pattern-label">{{ t('examples.modifierInitial') }}</span>
              <span class="pattern-col"><code>{{ '{authors:initial}/{authors:sort}/{title}' }}</code></span>
              <span class="result-col"><code>R/Rothfuss, Patrick/The Name of the Wind.epub</code></span>
            </div>
            <div class="example-row">
              <span class="pattern-label">{{ t('examples.modFirst') }}</span>
              <span class="pattern-col"><code>{{ '{authors:first}/{title}' }}</code></span>
              <span class="result-col"><code>Patrick Rothfuss/The Name of the Wind.epub</code></span>
            </div>
            <div class="example-row">
              <span class="pattern-label">{{ t('examples.modUpper') }}</span>
              <span class="pattern-col"><code>{{ '{title:upper}' }}</code></span>
              <span class="result-col"><code>THE NAME OF THE WIND.epub</code></span>
            </div>
            <div class="example-row">
              <span class="pattern-label">{{ t('examples.modLower') }}</span>
              <span class="pattern-col"><code>{{ '{title:lower}' }}</code></span>
              <span class="result-col"><code>the name of the wind.epub</code></span>
            </div>
            <div class="example-row">
              <span class="pattern-label">{{ t('examples.letterFolder') }}</span>
              <span class="pattern-col"><code>{{ '{title:initial}/{authors}/{title}' }}</code></span>
              <span class="result-col"><code>T/Patrick Rothfuss/The Name of the Wind.epub</code></span>
            </div>
            <div class="example-row">
              <span class="pattern-label">{{ t('examples.combinedMods') }}</span>
              <span class="pattern-col"><code>{{ '{authors:sort} - {title:lower}' }}</code></span>
              <span class="result-col"><code>Rothfuss, Patrick - the name of the wind.epub</code></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</ng-container>
