<ng-container *transloco="let t; prefix: 'settingsDevice'">
<p-toast position="top-right"></p-toast>
<p-confirmDialog></p-confirmDialog>

<div class="main-container">
  <div class="settings-header">
    <h2 class="settings-title">
      <i class="pi pi-tablet"></i>
      {{ t('kobo.title') }}
      <app-external-doc-link docType="kobo"></app-external-doc-link>
    </h2>
    <p class="settings-description">
      {{ t('kobo.description') }}
    </p>
  </div>

  @if (hasKoboTokenPermission) {
    <div class="settings-content">
      <div class="preferences-section">
        <div class="section-header">
          <h3 class="section-title">
            <i class="pi pi-sync"></i>
            {{ t('kobo.syncConfig') }}
          </h3>
          <p class="section-description">
            {{ t('kobo.syncConfigDesc') }}
          </p>
        </div>

        <div class="settings-card">
          <div class="setting-item">
            <div class="setting-info">
              <div class="setting-label-row">
                <label class="setting-label">{{ t('kobo.enableSync') }}</label>
                <p-toggle-switch
                  id="syncEnabled"
                  name="syncEnabled"
                  [(ngModel)]="koboSyncSettings.syncEnabled"
                  (ngModelChange)="onSyncToggle()">
                </p-toggle-switch>
              </div>
              <p class="setting-description">
                {{ t('kobo.enableSyncDesc') }}
              </p>
            </div>
          </div>

          @if (koboSyncSettings.syncEnabled) {
            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">{{ t('kobo.twoWaySyncLabel') }}</label>
                  <p-toggle-switch
                    id="twoWayProgressSync"
                    name="twoWayProgressSync"
                    [(ngModel)]="koboSyncSettings.twoWayProgressSync"
                    (ngModelChange)="onTwoWaySyncToggle()">
                  </p-toggle-switch>
                </div>
                <p class="setting-description">
                  {{ t('kobo.twoWaySyncDesc') }}
                  <br>
                  <strong>{{ t('kobo.twoWaySyncNote') }}</strong>
                </p>
              </div>
            </div>
          }

          @if (koboSyncSettings.syncEnabled) {
            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">{{ t('kobo.token') }}</label>
                  <div class="token-input-group">
                    <input
                      pInputText
                      id="koboToken"
                      [(ngModel)]="koboSyncSettings.token"
                      [type]="showToken ? 'text' : 'password'"
                      readonly
                      name="koboToken"
                      class="token-input"
                    />
                    <p-button
                      icon="pi pi-copy"
                      outlined="true"
                      severity="info"
                      size="small"
                      (onClick)="copyText(koboSyncSettings.token, 'Token')"
                      [disabled]="!koboSyncSettings.token">
                    </p-button>
                    <p-button
                      [icon]="showToken ? 'pi pi-eye-slash' : 'pi pi-eye'"
                      outlined="true"
                      severity="info"
                      size="small"
                      (onClick)="toggleShowToken()"
                      [disabled]="!koboSyncSettings.token">
                    </p-button>
                    <p-button
                      icon="pi pi-refresh"
                      outlined="true"
                      severity="warn"
                      size="small"
                      (onClick)="confirmRegenerateToken()"
                      [disabled]="!credentialsSaved">
                    </p-button>
                  </div>
                </div>
                <p class="setting-description">
                  {{ t('kobo.tokenDesc') }}
                </p>
              </div>
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">{{ t('kobo.markAsReading', {value: koboSyncSettings.progressMarkAsReadingThreshold?.toFixed(0)}) }}</label>
                  <div class="slider-container">
                    <p-slider
                      id="markAsReadingThreshold"
                      name="markAsReadingThreshold"
                      [(ngModel)]="koboSyncSettings.progressMarkAsReadingThreshold"
                      [min]="1"
                      [max]="10"
                      [step]="1"
                      (ngModelChange)="onProgressThresholdsChange()">
                    </p-slider>
                  </div>
                </div>
                <p class="setting-description">
                  {{ t('kobo.markAsReadingDesc') }}
                  <br>
                  <strong>{{ t('kobo.recommended') }}</strong> {{ t('kobo.markAsReadingRec') }}
                </p>
              </div>
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">{{ t('kobo.markAsFinished', {value: koboSyncSettings.progressMarkAsFinishedThreshold?.toFixed(0)}) }}</label>
                  <div class="slider-container">
                    <p-slider
                      id="markAsFinishedThreshold"
                      name="markAsFinishedThreshold"
                      [(ngModel)]="koboSyncSettings.progressMarkAsFinishedThreshold"
                      [min]="90"
                      [max]="100"
                      [step]="1"
                      (ngModelChange)="onProgressThresholdsChange()">
                    </p-slider>
                  </div>
                </div>
                <p class="setting-description">
                  {{ t('kobo.markAsFinishedDesc') }}
                  <br>
                  <strong>{{ t('kobo.recommended') }}</strong> {{ t('kobo.markAsFinishedRec') }}
                </p>
              </div>
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">{{ t('kobo.autoAddLabel') }}</label>
                  <p-toggle-switch
                    id="autoAddToShelf"
                    name="autoAddToShelf"
                    [(ngModel)]="koboSyncSettings.autoAddToShelf"
                    (ngModelChange)="onAutoAddToggle()">
                  </p-toggle-switch>
                </div>
                <p class="setting-description">
                  {{ t('kobo.autoAddDesc') }}
                </p>
              </div>
            </div>
          }
        </div>
      </div>

      @if (isAdmin) {
        <div class="preferences-section">
          <div class="section-header">
            <h3 class="section-title">
              <i class="pi pi-cog"></i>
              {{ t('kobo.adminSettings') }}
            </h3>
            <p class="section-description">
              {{ t('kobo.adminSettingsDesc') }}
            </p>
          </div>

          <div class="settings-card">
            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">{{ t('kobo.convertKepub') }}</label>
                  <p-toggle-switch
                    id="convertToKepub"
                    [(ngModel)]="koboSettings.convertToKepub"
                    (ngModelChange)="onToggleChange()">
                  </p-toggle-switch>
                </div>
                <p class="setting-description">
                  <strong>{{ t('kobo.pros') }}</strong> {{ t('kobo.convertKepubPros') }}
                  <br>
                  <strong>{{ t('kobo.cons') }}</strong> {{ t('kobo.convertKepubCons') }}
                </p>
              </div>
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">{{ t('kobo.conversionSizeLimit', {value: koboSettings.conversionLimitInMb}) }}</label>
                  <div class="slider-container">
                    <p-slider
                      id="conversionLimit"
                      [(ngModel)]="koboSettings.conversionLimitInMb"
                      [min]="1"
                      [max]="250"
                      [step]="1"
                      (ngModelChange)="onSliderChange()">
                    </p-slider>
                  </div>
                </div>
                <p class="setting-description">
                  {{ t('kobo.conversionSizeLimitDesc') }}
                  <br>
                  <strong>{{ t('kobo.recommended') }}</strong> {{ t('kobo.conversionSizeLimitRec') }}
                </p>
              </div>
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">{{ t('kobo.forceHyphenation') }}</label>
                  <p-toggle-switch
                    id="forceEnableHyphenation"
                    [(ngModel)]="koboSettings.forceEnableHyphenation"
                    (ngModelChange)="onToggleChange()">
                  </p-toggle-switch>
                </div>
                <p class="setting-description" [innerHTML]="t('kobo.forceHyphenationDesc')">
                </p>
              </div>
            </div>

            <p-divider></p-divider>

            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">{{ t('kobo.convertCbx') }}</label>
                  <p-toggle-switch
                    id="convertCbxToEpub"
                    [(ngModel)]="koboSettings.convertCbxToEpub"
                    (ngModelChange)="onToggleChange()">
                  </p-toggle-switch>
                </div>
                <p class="setting-description">
                  {{ t('kobo.convertCbxDesc') }}
                </p>
              </div>
            </div>
            <div class="setting-item">
              <div class="setting-info">
            <div class="setting-label-row">
              <label class="setting-label">{{ t('kobo.imageCompression', {value: koboSettings.conversionImageCompressionPercentage}) }}</label>
              <div class="slider-container">
                <p-slider
                  id="conversionLimit"
                  [(ngModel)]="koboSettings.conversionImageCompressionPercentage"
                  [min]="1"
                  [max]="100"
                  [step]="1"
                  (ngModelChange)="onSliderChange()">
                </p-slider>
              </div>
            </div>
                <p class="setting-description">
                  {{ t('kobo.imageCompressionDesc') }}
                </p>
              </div>
            </div>
            <div class="setting-item">
              <div class="setting-info">
                <div class="setting-label-row">
                  <label class="setting-label">{{ t('kobo.cbxSizeLimit', {value: koboSettings.conversionLimitInMbForCbx}) }}</label>
                  <div class="slider-container">
                    <p-slider
                      id="conversionLimitForCbx"
                      [(ngModel)]="koboSettings.conversionLimitInMbForCbx"
                      [min]="1"
                      [max]="500"
                      [step]="1"
                      (ngModelChange)="onSliderChange()">
                    </p-slider>
                  </div>
                </div>
                <p class="setting-description">
                  {{ t('kobo.cbxSizeLimitDesc') }}
                  <br>
                  <strong>{{ t('kobo.recommended') }}</strong> {{ t('kobo.cbxSizeLimitRec') }}
                </p>
              </div>
            </div>
          </div>
        </div>
      }
    </div>
  } @else {
    <div class="settings-content">
      <div class="access-denied-card">
        <i class="pi pi-lock"></i>
        <div class="access-denied-content">
          <h3>{{ t('accessRestricted') }}</h3>
          <p>
            {{ t('kobo.accessDenied') }}
            <br>
            {{ t('contactAdmin') }}
          </p>
        </div>
      </div>
    </div>
  }
</div>
</ng-container>
