<focus-mode-layout>
  <!-- Row 1 (top controls) is intentionally empty for breaks; the layout still
       reserves its height so the title/clock baseline matches the focus session. -->

  <!-- ========== ROW 2: Task module (shared with the focus session) ========== -->
  <!-- Same module as the focus session: switch · title · time · finish when a
       task is tracked through the break ("pause tracking during breaks" off);
       the relax message when tracking is paused for the break (currentTask null
       → showRelaxMessage). -->
  <div
    fmTask
    class="task-section"
  >
    <focus-mode-task-row
      [task]="currentTask() ?? null"
      [showRelaxMessage]="true"
      (switchTask)="openTaskSelector()"
      (finishTask)="finishCurrentTask()"
      (titleEdited)="updateTaskTitle($event.wasChanged, $event.newVal)"
    ></focus-mode-task-row>
  </div>

  <!-- ========== ROW 3: Clock ========== -->
  <div
    fmClock
    class="clock-display"
  >
    <focus-clock-face
      variant="ring"
      [progress]="progressPercentage()"
    >
      <div class="clock-wrapper">
        <!-- "Short break" / "Long break" / "Take a break" label, sits above
             the digits inside the circle. Mirrors the cycle counter below. -->
        <div class="break-label">{{ breakLabelKey() | translate }}</div>

        <div class="clock-time">
          {{ remainingTime() | msToMinuteClockString }}
        </div>

        @if (isPomodoro()) {
          <div class="cycle-counter">
            <mat-icon>repeat</mat-icon>
            {{ displayedCycle() }}
          </div>
        }
      </div>
    </focus-clock-face>
  </div>

  <!-- ========== ROW 4: primary actions ========== -->
  <!-- Single icon-button row, structurally identical to the focus session's
       bottom controls (no stacked tracking info) so the clock centers the same
       on both. Back to Planning + the forward CTA are icons (with aria-labels)
       so the break reads as one row rather than a stack of mixed button types. -->
  <section
    fmBottom
    class="bottom-controls"
  >
    <!-- Back to Planning (cancels the session + closes the focus overlay) -->
    <button
      mat-icon-button
      class="exit-session-btn"
      [attr.aria-label]="T.F.FOCUS_MODE.BACK_TO_PLANNING | translate"
      [matTooltip]="T.F.FOCUS_MODE.BACK_TO_PLANNING | translate"
      (click)="exitToPlanning()"
    >
      <mat-icon>arrow_back</mat-icon>
    </button>

    @if (remainingTime() > 0) {
      @if (isBreakPaused()) {
        <button
          mat-icon-button
          class="pause-resume-btn"
          [attr.aria-label]="T.F.FOCUS_MODE.RESUME_BREAK | translate"
          [matTooltip]="T.F.FOCUS_MODE.RESUME_BREAK | translate"
          (click)="resumeBreak()"
        >
          <mat-icon>play_arrow</mat-icon>
        </button>
      } @else {
        <button
          mat-icon-button
          class="pause-resume-btn"
          [attr.aria-label]="T.F.FOCUS_MODE.PAUSE_BREAK | translate"
          [matTooltip]="T.F.FOCUS_MODE.PAUSE_BREAK | translate"
          (click)="pauseBreak()"
        >
          <mat-icon>pause</mat-icon>
        </button>
      }

      <button
        mat-icon-button
        [attr.aria-label]="T.F.FOCUS_MODE.SKIP_BREAK | translate"
        [matTooltip]="T.F.FOCUS_MODE.SKIP_BREAK | translate"
        (click)="skipBreak()"
      >
        <mat-icon>skip_next</mat-icon>
      </button>
    }

    @if (isPomodoro()) {
      <button
        mat-icon-button
        [attr.aria-label]="T.F.FOCUS_MODE.RESET_CYCLES | translate"
        [matTooltip]="T.F.FOCUS_MODE.RESET_CYCLES | translate"
        (click)="resetCycles()"
      >
        <mat-icon>restart_alt</mat-icon>
      </button>
    }

    <!-- Forward CTA: start the next focus session -->
    @if (remainingTime() <= 0) {
      <button
        mat-icon-button
        color="primary"
        [attr.aria-label]="T.F.FOCUS_MODE.START_NEXT_FOCUS_SESSION | translate"
        [matTooltip]="T.F.FOCUS_MODE.START_NEXT_FOCUS_SESSION | translate"
        (click)="completeBreak()"
      >
        <mat-icon>arrow_forward</mat-icon>
      </button>
    }
  </section>
</focus-mode-layout>

<!-- Task selector — opened by the shared task row's switch / finish controls
     (anchored to :host, above the layout, like the focus session). -->
@if (isTaskSelectorOpen()) {
  <focus-mode-task-selector
    (taskSelected)="onTaskSelected($event)"
    (closed)="closeTaskSelector()"
  ></focus-mode-task-selector>
}
