<ng-container *transloco="let t; prefix: 'settingsTasks'">
<div class="main-container">
  <div class="settings-header">
    <h2 class="settings-title">
      <i class="pi pi-list-check"></i>
      {{ t('title') }}
      <app-external-doc-link docType="taskManagement"></app-external-doc-link>
    </h2>
    <p class="settings-description" [innerHTML]="t('description')"></p>
  </div>

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

    <div class="section-body">
      @if (loading && taskInfos.length === 0) {
        <div class="loading-state">
          <i class="pi pi-spin pi-spinner"></i>
          <span>{{ t('loading') }}</span>
        </div>
      }

      @if (!loading && taskInfos.length === 0) {
        <div class="empty-state">
          <i class="pi pi-check-circle"></i>
          <p class="empty-title">{{ t('emptyTitle') }}</p>
        </div>
      }

      <div class="tasks-list">
        @for (taskInfo of taskInfos; track taskInfo.taskType) {
          <div class="task-item" [class.is-running]="isTaskRunning(taskInfo.taskType)" [class.is-stale]="isTaskStale(getTaskHistory(taskInfo.taskType))">
            <div class="task-header">
              <div class="task-info">
                <div class="task-icon">
                  <i class="pi" [ngClass]="getTaskIcon(taskInfo.taskType)"></i>
                </div>
                <div class="task-details">
                  <div class="task-name-row">
                    <span class="task-name">{{ getTaskLabel(taskInfo.taskType) }}</span>
                    @if (isTaskRunning(taskInfo.taskType)) {
                      <span class="status-badge running">
                        <i class="pi pi-spin pi-spinner"></i>
                        {{ t('status.running') }}
                      </span>
                    } @else if (isTaskStale(getTaskHistory(taskInfo.taskType))) {
                      <span class="status-badge stale">
                        <i class="pi pi-exclamation-triangle"></i>
                        {{ t('status.stale') }}
                      </span>
                    } @else if (getTaskHistory(taskInfo.taskType)?.id) {
                      <span class="status-badge" [ngClass]="getLastRunInfoClass(taskInfo.taskType)">
                        <span class="status-dot"></span>
                        {{ getLastRunMessage(taskInfo.taskType) }}
                      </span>
                    }
                  </div>
                  <p class="task-description">{{ getTaskDescription(taskInfo.taskType) }}</p>
                </div>
              </div>

              <div class="task-controls">
                @if (!isTaskRunning(taskInfo.taskType) && isCronSupported(taskInfo.taskType) && getCronConfig(taskInfo.taskType)) {
                  <div class="cron-section">
                    <div class="cron-row">
                      <i class="pi pi-clock"></i>
                      @if (!isEditingCron(taskInfo.taskType)) {
                        @if (getCronConfig(taskInfo.taskType)?.cronExpression) {
                          <code class="cron-value">{{ getCronConfig(taskInfo.taskType)!.cronExpression }}</code>
                        } @else {
                          <span class="cron-empty">{{ t('cron.noSchedule') }}</span>
                        }
                        <p-button
                          icon="pi pi-pencil"
                          size="small"
                          [text]="true"
                          [rounded]="true"
                          severity="info"
                          [disabled]="cronUpdating"
                          [pTooltip]="t('cron.edit')"
                          (onClick)="startEditingCron(taskInfo.taskType)">
                        </p-button>
                      } @else {
                        <div class="cron-edit">
                          <input
                            type="text"
                            class="cron-input"
                            [class.has-error]="!!cronValidationError"
                            [(ngModel)]="editingCronExpression"
                            (ngModelChange)="onCronExpressionChange()"
                            [placeholder]="t('cron.placeholder')"
                            (keyup.enter)="saveCronExpression(taskInfo.taskType)"
                            (keyup.escape)="cancelEditingCron()">
                          <p-button
                            [icon]="cronUpdating ? 'pi pi-spinner pi-spin' : 'pi pi-check'"
                            size="small"
                            [rounded]="true"
                            severity="success"
                            [disabled]="!!cronValidationError || cronUpdating"
                            (onClick)="saveCronExpression(taskInfo.taskType)">
                          </p-button>
                          <p-button
                            icon="pi pi-times"
                            size="small"
                            [rounded]="true"
                            severity="secondary"
                            (onClick)="cancelEditingCron()">
                          </p-button>
                        </div>
                      }
                      <p-toggleswitch
                        [ngModel]="getCronConfig(taskInfo.taskType)?.enabled ?? false"
                        [disabled]="isEditingCron(taskInfo.taskType) || cronUpdating"
                        (ngModelChange)="toggleCronEnabled(taskInfo.taskType)">
                      </p-toggleswitch>
                    </div>
                    @if (isEditingCron(taskInfo.taskType) && cronValidationError) {
                      <div class="cron-error">
                        <i class="pi pi-exclamation-circle"></i>
                        <span>{{ cronValidationError }}</span>
                      </div>
                    }
                  </div>
                }

                <div class="task-actions">
                  @if (canExecuteTask(taskInfo.taskType) || isTaskStale(getTaskHistory(taskInfo.taskType))) {
                    <p-button
                      [label]="getTaskButtonLabel(taskInfo.taskType)"
                      [icon]="getTaskButtonIcon(taskInfo.taskType)"
                      severity="info"
                      [outlined]="true"
                      [disabled]="isTaskExecuting(taskInfo.taskType)"
                      (onClick)="executeTask(taskInfo.taskType)">
                    </p-button>
                  }
                  @if (canCancelTask(getTaskHistory(taskInfo.taskType)) && !isTaskStale(getTaskHistory(taskInfo.taskType))) {
                    <p-button
                      [label]="'common.cancel' | transloco"
                      [icon]="getCancelButtonIcon(taskInfo.taskType)"
                      severity="danger"
                      [outlined]="true"
                      [disabled]="isTaskExecuting(taskInfo.taskType)"
                      (onClick)="cancelTask(taskInfo.taskType)">
                    </p-button>
                  }
                </div>
              </div>
            </div>

            <div class="task-body">
              @if (!isTaskRunning(taskInfo.taskType) && hasMetadata(taskInfo.taskType)) {
                <div class="task-metadata">
                  <i class="pi" [ngClass]="getMetadataIcon(taskInfo.taskType)"></i>
                  <span>{{ getTaskMetadata(taskInfo.taskType) }}</span>
                </div>
              }

              @if (!isTaskRunning(taskInfo.taskType) && taskInfo.taskType === TaskType.REFRESH_LIBRARY_METADATA) {
                <div class="task-options">
                  <label class="option-label">{{ t('metadataReplace.label') }}</label>
                  <p-select
                    [options]="metadataReplaceOptions"
                    [(ngModel)]="selectedMetadataReplaceMode"
                    size="small"
                    optionValue="value"
                    [placeholder]="t('metadataReplace.selectMode')"
                    class="mode-select">
                    <ng-template let-option pTemplate="item">
                      {{ option.translationKey | transloco }}
                    </ng-template>
                    <ng-template let-option pTemplate="selectedItem">
                      {{ option.translationKey | transloco }}
                    </ng-template>
                  </p-select>
                  <span class="option-hint">{{ getMetadataReplaceDescription(selectedMetadataReplaceMode) }}</span>
                </div>
              }

              @if (isTaskRunning(taskInfo.taskType)) {
                <div class="task-progress">
                  @if (isTaskStale(getTaskHistory(taskInfo.taskType))) {
                    <div class="stale-warning">
                      <i class="pi pi-exclamation-triangle"></i>
                      <span>{{ t('progress.staleWarning') }}</span>
                    </div>
                  }
                  @if (getTaskHistory(taskInfo.taskType)?.message) {
                    <div class="progress-row">
                      <span class="progress-label">{{ t('progress.statusLabel') }}</span>
                      <span class="progress-value">{{ getTaskStatusMessage(taskInfo.taskType) }}</span>
                    </div>
                  }
                  @if (getTaskProgressPercentage(taskInfo.taskType) !== null) {
                    <div class="progress-row">
                      <span class="progress-label">{{ t('progress.progressLabel') }}</span>
                      <div class="progress-bar-container">
                        <p-progressbar [value]="getTaskProgressPercentage(taskInfo.taskType)!"></p-progressbar>
                        <span class="progress-percent">{{ getTaskProgressPercentage(taskInfo.taskType) }}%</span>
                      </div>
                    </div>
                  }
                  @if (getTaskUpdatedAt(taskInfo.taskType)) {
                    <div class="progress-row">
                      <span class="progress-label">{{ t('progress.startedLabel') }}</span>
                      <span class="progress-value">{{ formatDate(getTaskUpdatedAt(taskInfo.taskType)!) }}</span>
                    </div>
                  }
                </div>
              }
            </div>
          </div>
        }
      </div>
    </div>
  </div>
</div>
</ng-container>
