@let isCountDown = isCountTimeDown();
@let displayed = displayedTask();
<!-- Countdown Animation (full-screen overlay, sits outside the layout) -->
@if (isShowCountdown()) {
  <focus-mode-countdown
    @fade
    (countdownComplete)="onCountdownComplete()"
  ></focus-mode-countdown>
}

<focus-mode-layout>
  <!-- ========== ROW 1: TOP CONTROLS ========== -->
  <!-- Mode selector (Preparation) and simple counters (In Progress) are mutually
       exclusive; whichever is active projects into the layout's top slot. That
       slot is positioned out of flow (absolute), so swapping the active control
       in/out never shifts the centered task/clock/bottom group below. The
       selector is removed from the DOM when not in preparation — hiding it via
       visibility would leave its mat-icons painted (the global
       isMaterialSymbolsLoaded rule forces icons visible), so removal is the only
       clean way to make it disappear. -->
  @if (isShowModeSelector()) {
    <segmented-button-group
      fmTop
      class="focus-mode-select-mode"
      [options]="modeOptions()"
      [selectedId]="mode()"
      [ariaLabel]="T.F.FOCUS_MODE.SELECT_MODE | translate"
      (selectionChange)="selectMode($event)"
    ></segmented-button-group>
  }

  <!-- Simple Counter Buttons (In Progress state) -->
  @if (isShowSimpleCounters()) {
    @if (simpleCounterService.enabledSimpleCounters$ | async; as enabledSimpleCounters) {
      @if (enabledSimpleCounters.length) {
        <section
          @fadeSwap
          fmTop
          class="simple-counter-buttons"
        >
          @for (
            simpleCounter of enabledSimpleCounters;
            track trackById($index, simpleCounter)
          ) {
            <simple-counter-button
              [class.isHiddenWithoutFocus]="!simpleCounter.isOn"
              [simpleCounter]="simpleCounter"
            ></simple-counter-button>
          }
        </section>
      }
    }
  }

  <!-- ========== ROW 2: Task module (switch · title · time · finish) ========== -->
  <div
    fmTask
    class="task-section"
  >
    <focus-mode-task-row
      [task]="displayed"
      [parentTitle]="parentTaskTitle()"
      (switchTask)="openTaskSelector()"
      (finishTask)="finishCurrentTask()"
      (selectTask)="openTaskSelector()"
      (titleEdited)="updateTaskTitleIfChanged($event.wasChanged, $event.newVal)"
    ></focus-mode-task-row>
  </div>

  <!-- ========== ROW 3: Clock Display (fills, centers the clock) ========== -->
  <div
    fmClock
    class="clock-display"
  >
    <div
      class="clock-display__content"
      [class.is-duration-slider-active]="isShowDurationSlider()"
    >
      <focus-clock-face
        class="clock-face"
        [@modeSwitchFade]="mode()"
        [variant]="isCountDown ? 'ring' : 'breathing'"
        [progress]="quantizedProgress()"
        [isPaused]="!isSessionRunning()"
      >
        <div class="clock-wrapper">
          <!-- Time adjustment buttons (In Progress state) -->
          @if (isShowTimeAdjustButtons()) {
            <button
              mat-icon-button
              [matTooltip]="T.F.FOCUS_MODE.REMOVE_TIME_MINUTE | translate"
              (click)="adjustTime(-60000)"
              class="time-adjust-btn time-adjust-btn--decrease"
            >
              <mat-icon>remove</mat-icon>
            </button>
          }

          <!-- Clock time display -->
          <div
            class="clock-time"
            [matTooltip]="
              isShowDurationSlider()
                ? (T.F.FOCUS_MODE.CLICK_TO_EDIT_DURATION | translate)
                : ''
            "
            [title]="T.F.FOCUS_MODE.FOCUS_TIME_TOOLTIP | translate"
          >
            @if (focusModeService.isInOvertime()) {
              {{ timeElapsed() | msToMinuteClockString }}
            } @else if (isCountDown) {
              {{ focusModeService.timeRemaining() | msToMinuteClockString }}
            } @else {
              {{ timeElapsed() | msToMinuteClockString }}
            }
          </div>

          <!-- Pomodoro cycle counter, sits below the clock digits -->
          @if (isPomodoro()) {
            <div class="cycle-counter">
              <mat-icon>repeat</mat-icon>
              {{ focusModeService.currentCycle() }}
            </div>
          }

          @if (isShowTimeAdjustButtons()) {
            <button
              mat-icon-button
              [matTooltip]="T.F.FOCUS_MODE.ADD_TIME_MINUTE | translate"
              (click)="adjustTime(60000)"
              class="time-adjust-btn time-adjust-btn--increase"
            >
              <mat-icon>add</mat-icon>
            </button>
          }
        </div>
      </focus-clock-face>

      <!-- Overtime message -->
      @if (focusModeService.isInOvertime()) {
        <div class="overtime-msg">
          {{ T.F.FOCUS_MODE.OVERTIME_MSG | translate }}
        </div>
      }

      <!-- Duration slider (Preparation state: Countdown drags + types, Pomodoro types only) -->
      @if (isShowDurationSlider()) {
        <div
          @fadeSwap
          class="duration-slider-overlay-wrapper"
        >
          <div
            class="duration-slider-overlay"
            [@modeSwitchFade]="mode()"
          >
            <input-duration-slider
              [model]="displayDuration()"
              [bareRing]="true"
              [hideHandle]="isPomodoro()"
              [useFlexibleIncrement]="!isPomodoro()"
              [blurOnEnter]="true"
              (modelChange)="onDurationChange($event)"
            ></input-duration-slider>
          </div>
        </div>
      }
    </div>
  </div>

  <!-- ========== ROW 4: Play FAB + mode settings cog (Preparation state) ========== -->
  @if (isShowPlayButton()) {
    <div
      fmBottom
      class="play-actions"
      [class.is-launching]="isLaunching()"
    >
      <button
        mat-fab
        color="primary"
        [matTooltip]="
          isPlayButtonDisabled()
            ? (T.F.FOCUS_MODE.SELECT_TASK_FIRST | translate)
            : (T.F.FOCUS_MODE.START_FOCUS_SESSION | translate)
        "
        [disabled]="isPlayButtonDisabled() || isLaunching()"
        (click)="startSession()"
        class="play-button"
      >
        <mat-icon>play_arrow</mat-icon>
      </button>

      @if (isShowPomodoroSettings()) {
        <button
          mat-icon-button
          [matTooltip]="T.F.FOCUS_MODE.POMODORO_SETTINGS | translate"
          (click)="openPomodoroSettings()"
          class="mode-settings-btn"
        >
          <mat-icon>settings</mat-icon>
        </button>
      }

      @if (isShowFlowtimeSettings()) {
        <button
          mat-icon-button
          [matTooltip]="T.F.FOCUS_MODE.FLOWTIME_SETTINGS | translate"
          (click)="openFlowtimeSettings()"
          class="mode-settings-btn"
        >
          <mat-icon>settings</mat-icon>
        </button>
      }

      <!-- Default start: rocket overlays the play button and lifts off as the
           button/cog fade out (cross-fade), then the session begins. -->
      @if (isLaunching()) {
        <focus-mode-preparation-rocket
          class="inline-launch-rocket"
          [state]="'launch'"
          [isInline]="true"
        ></focus-mode-preparation-rocket>
      }
    </div>
  }

  <!-- ========== ROW 4: Session control row (In Progress state) ========== -->
  <!-- Back to Planning · Pause · Complete · Reset · (issue) · Notes — one bottom row. -->
  @if (isShowBottomControls()) {
    <section
      @fadeSwap
      fmBottom
      class="bottom-controls"
    >
      <!-- Back to Planning (cancels the session + closes the focus overlay) -->
      <button
        mat-icon-button
        class="exit-session-btn"
        [matTooltip]="T.F.FOCUS_MODE.BACK_TO_PLANNING | translate"
        (click)="exitToPlanning()"
      >
        <mat-icon>arrow_back</mat-icon>
      </button>

      <!-- Pause / resume the session (the task-row time stack is read-only). -->
      @if (focusModeService.isSessionPaused()) {
        <button
          mat-icon-button
          class="pause-resume-btn"
          [matTooltip]="T.F.FOCUS_MODE.RESUME_SESSION | translate"
          (click)="resumeSession()"
        >
          <mat-icon>play_arrow</mat-icon>
        </button>
      } @else {
        <button
          mat-icon-button
          class="pause-resume-btn"
          [matTooltip]="T.F.FOCUS_MODE.PAUSE_SESSION | translate"
          (click)="pauseSession()"
        >
          <mat-icon>pause</mat-icon>
        </button>
      }

      @if (isShowCompleteSessionButton()) {
        <button
          mat-icon-button
          class="complete-session-btn"
          [matTooltip]="T.F.FOCUS_MODE.COMPLETE_FOCUS_SESSION | translate"
          (click)="completeFocusSession()"
        >
          <mat-icon>done_all</mat-icon>
        </button>
      }

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

      @if (displayed && displayed.issueId && displayed.issueType !== ICAL_TYPE) {
        <a
          mat-icon-button
          [matTooltip]="T.F.FOCUS_MODE.OPEN_ISSUE_IN_BROWSER | translate"
          target="_blank"
          [href]="issueUrl$ | async"
        >
          @if (displayed.issuePoints) {
            <div class="mini-badge bgc-primary">{{ displayed.issuePoints }}</div>
          }
          <mat-icon [svgIcon]="displayed.issueType | issueIcon"></mat-icon>
        </a>
      }

      @if (displayed) {
        <button
          (click)="isFocusNotes.set(!isFocusNotes())"
          [matTooltip]="T.F.FOCUS_MODE.SHOW_HIDE_NOTES_AND_ATTACHMENTS | translate"
          class="ico-btn show-additional-info-btn"
          color=""
          mat-icon-button
        >
          @if (!isFocusNotes()) {
            <mat-icon>chat</mat-icon>
          }
          @if (isFocusNotes()) {
            <mat-icon>expand_more</mat-icon>
          }
        </button>
      }
    </section>
  }
</focus-mode-layout>

<!-- ========== OVERLAYS (anchored to :host, above the layout) ========== -->

<!-- Task Selector Overlay -->
@if (isTaskSelectorOpen()) {
  <focus-mode-task-selector
    (taskSelected)="onTaskSelected($event)"
    (closed)="closeTaskSelector()"
  ></focus-mode-task-selector>
}

<!-- Notes and Attachments (In Progress only) -->
@if (isShowBottomControls() && displayed && isFocusNotes()) {
  <div
    class="notes-backdrop"
    (click)="isFocusNotes.set(false)"
    @fade
  ></div>

  <div
    class="notes-and-attachments"
    @slideInOutFromBottom
  >
    <button
      (click)="isFocusNotes.set(false)"
      class="hide-notes-btn"
      color=""
      mat-mini-fab
    >
      <mat-icon>expand_more</mat-icon>
    </button>

    <div class="notes-panel">
      <!-- No [isFocus]: the panel opens showing the rendered note (read mode);
           tapping it enters edit mode. isHidePreviewWhileEditing keeps the
           compact panel to a single view at a time — rendered note when
           reading, plain textarea when editing — never both at once. -->
      <inline-markdown
        (blur)="isFocusNotes.set(false)"
        (blurred)="isFocusNotes.set(false)"
        (changed)="changeTaskNotes($event); isFocusNotes.set(false)"
        [isHidePreviewWhileEditing]="true"
        [isShowControls]="true"
        [isDefaultText]="!displayed.notes"
        [model]="displayed.notes || defaultTaskNotes()"
        [taskId]="displayed.id"
      ></inline-markdown>
    </div>
    @if (displayed.attachments.length) {
      <div
        class="attachment-list-wrapper"
        @fade
      >
        <task-attachment-list
          [taskId]="displayed.id"
          [attachments]="displayed.attachments"
        ></task-attachment-list>
      </div>
    }
  </div>
}

<!-- Drag Over Message -->
@if (displayed && isDragOver()) {
  <div class="bgc-accent drag-over-msg">
    <mat-icon>add</mat-icon>
    {{ T.F.TASK.CMP.DROP_ATTACHMENT | translate: { title: displayed.title } }}
  </div>
}