<mat-card class="w-full max-w-[1920px] p-5">
  <mat-card-header>
    <mat-card-title>{{ 'STOPWATCH.TITLE' | translate }}</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <div class="flex flex-col items-center gap-6 mt-4">
      <div
        class="font-mono tabular-nums tracking-wider text-[clamp(2.5rem,8vw,5rem)] font-semibold leading-none rounded-2xl px-6 py-3 ring-2 ring-transparent transition-all duration-300 ease-out"
        [class]="flashing()
          ? 'scale-110 text-(--mat-sys-primary)! ring-(--mat-sys-primary)! shadow-[0_0_40px_var(--mat-sys-primary)]'
          : ''"
      >
        {{ display() }}
      </div>

      <div class="flex flex-wrap gap-3 justify-center">
        <button mat-flat-button color="primary" (click)="start()" [disabled]="state() === 'running'">
          <mat-icon>play_arrow</mat-icon>
          {{ 'STOPWATCH.START' | translate }}
        </button>
        <button mat-flat-button color="accent" (click)="pause()" [disabled]="state() !== 'running'">
          <mat-icon>pause</mat-icon>
          {{ 'STOPWATCH.PAUSE' | translate }}
        </button>
        <button mat-stroked-button (click)="stop()" [disabled]="state() === 'idle' && elapsedMs() === 0">
          <mat-icon>stop</mat-icon>
          {{ 'STOPWATCH.STOP' | translate }}
        </button>
        <button mat-stroked-button (click)="reset()" [disabled]="elapsedMs() === 0 && state() === 'idle'">
          <mat-icon>restart_alt</mat-icon>
          {{ 'STOPWATCH.RESET' | translate }}
        </button>
      </div>

      <div class="flex flex-col gap-3 items-center w-full max-w-[520px]">
        <mat-checkbox [checked]="intervalEnabled()" (change)="intervalEnabled.set($event.checked)">
          {{ 'STOPWATCH.INTERVAL_ENABLED' | translate }}
        </mat-checkbox>

        <p class="m-0 font-medium text-sm">{{ 'STOPWATCH.FIRST_INTERVAL' | translate }}</p>

        <div class="flex flex-wrap gap-3 items-center justify-center">
          <mat-form-field appearance="outline" class="w-[160px]">
            <mat-label>{{ 'STOPWATCH.INTERVAL_MINUTES' | translate }}</mat-label>
            <input
              matInput
              type="number"
              min="0"
              step="1"
              [disabled]="!intervalEnabled()"
              [ngModel]="firstIntervalMinutes()"
              (ngModelChange)="updateIntervalValue(firstIntervalMinutes, $event)"
            />
          </mat-form-field>

          <mat-form-field appearance="outline" class="w-[160px]">
            <mat-label>{{ 'STOPWATCH.INTERVAL_SECONDS' | translate }}</mat-label>
            <input
              matInput
              type="number"
              min="0"
              max="59"
              step="1"
              [disabled]="!intervalEnabled()"
              [ngModel]="firstIntervalSeconds()"
              (ngModelChange)="updateIntervalValue(firstIntervalSeconds, $event)"
            />
          </mat-form-field>
        </div>

        <mat-checkbox
          [checked]="secondIntervalEnabled()"
          [disabled]="!intervalEnabled()"
          (change)="secondIntervalEnabled.set($event.checked)"
        >
          {{ 'STOPWATCH.SECOND_INTERVAL_ENABLED' | translate }}
        </mat-checkbox>

        @if (secondIntervalEnabled()) {
          <div class="flex flex-wrap gap-3 items-center justify-center">
            <mat-form-field appearance="outline" class="w-[160px]">
              <mat-label>{{ 'STOPWATCH.INTERVAL_MINUTES' | translate }}</mat-label>
              <input
                matInput
                type="number"
                min="0"
                step="1"
                [disabled]="!intervalEnabled()"
                [ngModel]="secondIntervalMinutes()"
                (ngModelChange)="updateIntervalValue(secondIntervalMinutes, $event)"
              />
            </mat-form-field>

            <mat-form-field appearance="outline" class="w-[160px]">
              <mat-label>{{ 'STOPWATCH.INTERVAL_SECONDS' | translate }}</mat-label>
              <input
                matInput
                type="number"
                min="0"
                max="59"
                step="1"
                [disabled]="!intervalEnabled()"
                [ngModel]="secondIntervalSeconds()"
                (ngModelChange)="updateIntervalValue(secondIntervalSeconds, $event)"
              />
            </mat-form-field>
          </div>
        }

        <p class="m-0 opacity-70 text-sm text-center">
          {{ 'STOPWATCH.INTERVAL_HINT' | translate }}
        </p>

        @if (intervalEnabled() && schedulePreview()) {
          <p class="m-0 opacity-70 text-sm text-center">
            {{ 'STOPWATCH.INTERVAL_SCHEDULE' | translate }} {{ schedulePreview() }} …
          </p>
        }
      </div>
    </div>
  </mat-card-content>
</mat-card>
