@use '../../../../styles/_globals.scss' as *;

:host {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  // The 4-row skeleton lives in <focus-mode-layout>; this host is just the
  // positioning context for that layout plus the overlays (notes, task
  // selector, drag-over) that sit above it.
  display: block;
  // Establish a stacking context so the notes-modal backdrop can't bleed
  // above the parent overlay's close (X) button.
  z-index: 0;

  // Muted controls (switch/finish/pause/complete/+/-/settings/notes/issue) are
  // hidden by default and revealed when the user is paying attention — mouse
  // over this component OR keyboard focus moving into it, AND the OS window has
  // focus. Buttons read --revealed-opacity for their opacity; the value here
  // drives whether they appear. --revealed-pointer-events mirrors it so faded
  // buttons can't capture tooltips that then get stuck after the icon
  // disappears.
  --muted-opacity: 0;
  --revealed-opacity: 0;
  --revealed-pointer-events: none;

  // :focus-within keeps the controls reachable by keyboard — tabbing onto a
  // hidden button reveals the row even without a pointer hover.
  &:hover,
  &:focus-within {
    --revealed-opacity: 1;
    --revealed-pointer-events: auto;
  }

  // Suppress the reveal when the browser window is unfocused. Class is toggled
  // by the [class.isWindowBlurred] host binding.
  &.isWindowBlurred:hover,
  &.isWindowBlurred:focus-within {
    --revealed-opacity: 0;
    --revealed-pointer-events: none;
  }

  // Touch devices: always show controls (no hover available).
  @media (hover: none) and (pointer: coarse) {
    --revealed-opacity: 1;
    --revealed-pointer-events: auto;
  }
}

// ========== ROW 1: TOP CONTROLS ==========
// Mode selector (Preparation) / simple counters (In Progress) project into the
// layout's reserved top slot; that slot's min-height keeps the row height (and
// the rows below) stable when the active control is removed.
.focus-mode-select-mode {
  // Stacking above the centered timer content is handled by the layout's .top
  // slot (z-index), which lifts the whole top row — see focus-mode-layout.scss.
  padding: 0 var(--s2);
  max-width: 600px;
}

.mode-settings-btn {
  // Match the in-progress session controls (.bottom-controls): 56px hit area,
  // 32px icon, --s2 gap to the FAB — so the cog's size and spacing read the
  // same before and during a session.
  position: absolute;
  left: 100%;
  margin-left: var(--s2);
  width: 56px !important;
  height: 56px !important;
  opacity: var(--revealed-opacity);
  transition: var(--transition-standard);
  pointer-events: var(--revealed-pointer-events);

  mat-icon {
    font-size: 32px !important;
    width: 32px !important;
    height: 32px !important;
  }
}

// ========== ROW 2: TASK SECTION ==========
// Content-height row beneath the top controls — parent title plus the
// switch · title · finish row (or the "select task" CTA when none is chosen).
.task-section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: calc(100% - var(--s2));
  max-width: var(--component-max-width);
  min-width: 0;
}

// ========== ROW 3: CLOCK DISPLAY ==========
// Projected into the layout's flexing clock row, which centers it. This wrapper
// just stacks the clock face and the overtime message.
.clock-display {
  display: flex;
  flex-direction: column;
  align-items: center;

  // Mirror the size tokens declared on focus-clock-face's :host so sibling
  // elements (the duration-slider overlay) can read them. Both pull the
  // diameter from the shared --clock-face-size-default token.
  --clock-face-size: var(--clock-face-size-default);
  --clock-time-size: calc(var(--clock-face-size) * 0.22);

  &__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: var(--s1);
  }
}

.overtime-msg {
  text-align: center;
  font-size: 14px;
  opacity: 0.8;
  margin-top: 8px;
}

// Duration slider overlays the clock face so the selector fills the full
// circle during countdown preparation.
.duration-slider-overlay-wrapper {
  position: absolute;
  top: calc(var(--clock-face-size) * 0.5);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-focus-mode-duration-slider);
  pointer-events: auto;
}

.duration-slider-overlay {
  // The slider's perimeter sits at radius=size/2 from its center, while
  // focus-clock-face's SVG ring sits at radius=15.9155/36 of viewBox (≈88.4%
  // of diameter). Shrink the slider to align its handle with the ring.
  --input-duration-slider-size: calc(var(--clock-face-size) * 0.884);
  --input-duration-slider-value-size: var(--clock-time-size);
  display: flex;
  justify-content: center;

  // The bare-ring visual (transparent chrome, dot handle, full-width value)
  // and the Pomodoro type-only behaviour now live on the slider itself, via
  // its [bareRing] / [hideHandle] inputs.
}

// The clock digits cross-fade with the duration slider (which swaps via
// @fadeSwap): when the slider takes over (countdown prep) the digits fade out;
// when it leaves (session start) the digits wait that fade-out, then fade in —
// so the swap is sequential, not a hard cut. Mirrors fadeSwapAnimation's timing
// (fade in is delayed by the leave duration).
.clock-time {
  transition: opacity var(--transition-duration-enter) var(--transition-duration-leave)
    var(--ani-enter-timing);
}

// When the duration slider is showing (countdown prep), hide the clock digits —
// the slider's own value display takes over. Toggled by a class bound to
// isShowDurationSlider() in the template.
.clock-display__content.is-duration-slider-active .clock-time {
  opacity: 0;
  // Fade out immediately (no delay) so the digits clear before the slider settles.
  transition: opacity var(--transition-duration-leave) var(--ani-leave-timing);
  // Hidden digits must not capture the slider's pointer / tooltip interactions.
  pointer-events: none;
}

// In-circle buttons (+/-, reset-cycles) — opacity is driven globally by
// --revealed-opacity (host hover + window focus). Positioning is owned by
// focus-clock-face's ::ng-deep rules.
.clock-wrapper button {
  opacity: var(--revealed-opacity);
  transition: var(--transition-standard);
  pointer-events: var(--revealed-pointer-events);
}

// Pomodoro cycle counter — sits inside the circle, just below the digits.
// One step less intense than the clock time so it reads as a subtitle.
.cycle-counter {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--s-half);
  color: var(--text-color-muted);
  font-size: var(--s3);
  line-height: 1;
  font-variant-numeric: tabular-nums;

  mat-icon {
    font-size: var(--s3);
    width: var(--s3);
    height: var(--s3);
  }
}

// ========== ROW 4 (Preparation): PLAY BUTTON + SETTINGS COG ==========
// Content-height bottom row. The cog floats next to the FAB via absolute
// positioning (anchored to this relative row), so adding/removing it never
// shifts the centered FAB.
.play-actions {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
}

.play-button {
  width: var(--s8);
  height: var(--s8);
  // Smoothly cross-fade out when the launch starts (see .is-launching below).
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;

  mat-icon {
    font-size: 36px;
    width: 36px;
    height: 36px;
  }
}

// Default start: the play button shrinks away (implodes) as the rocket rises up
// into its place and lifts off. The play button and rocket share the primary
// colour, so a plain opacity cross-fade in place reads as "blue stays blue" —
// the scale-down here + the rocket's rise-in (see the keyframe) give the handoff
// visible motion instead of an invisible same-colour fade.
.play-actions.is-launching {
  .play-button,
  .mode-settings-btn {
    opacity: 0;
    transform: scale(0.4);
    pointer-events: none;
  }
}

// Inline rocket launch, centered over the play FAB (button stays in flow so the
// row keeps its size). The launch keyframe fades it in, lifts it off, fades out.
.inline-launch-rocket {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--s8);
  height: var(--s8);
  overflow: visible;
  pointer-events: none;
}

// ========== ROW 1 (In Progress): SIMPLE COUNTER BUTTONS ==========
.simple-counter-buttons {
  display: flex;
  justify-content: center;
  z-index: var(--z-focus-mode-simple-counter);
  gap: var(--s);

  simple-counter-button.isHiddenWithoutFocus {
    @include mousePrimaryDevice {
      transition: var(--transition-standard);
      opacity: 0;
      transform: translateY(-10px);
      pointer-events: none;
    }

    :host:hover & {
      transition: var(--transition-standard);
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
  }
}

// ========== ROW 4 (In Progress): SESSION CONTROL ROW ==========
// Back to Planning · Pause · Complete · Reset · (issue) · Notes — one
// content-height bottom row. Keeps the hover/window-focus reveal
// (--revealed-opacity) so it stays distraction-free, matching the rest of
// focus mode.
.bottom-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s2);
  opacity: var(--revealed-opacity);
  pointer-events: var(--revealed-pointer-events);
  transition: var(--transition-standard);

  a {
    justify-content: center;
    align-items: center;
    display: inline-flex;
    color: inherit;
  }

  a,
  button {
    width: 56px !important;
    height: 56px !important;
    position: relative;

    mat-icon {
      font-size: 32px !important;
      width: 32px !important;
      height: 32px !important;
    }

    .extend-label {
      position: absolute;
      bottom: 4px;
      right: 4px;
      background: var(--c-accent);
      color: var(--c-on-accent);
      border-radius: 50%;
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: bold;
      line-height: 1;
    }
  }
}

// ========== NOTES AND ATTACHMENTS ==========
// The notes panel acts as a modal: full-viewport backdrop dims and intercepts
// clicks (closes the panel), while the panel itself slides up from the bottom
// over the unmoved timer.
.notes-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  z-index: 20;
}

.notes-and-attachments {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 21;
}

.notes-panel {
  border-radius: var(--card-border-radius);
  margin: auto;
  padding: var(--s2);
  width: 100%;
  flex-grow: 1;
  max-width: var(--component-max-width);
  min-height: 60px;
  max-height: 50vh;
  display: flex;

  inline-markdown {
    max-height: 100%;
    width: 100%;
    @include noteStyle;
    display: flex;

    ::ng-deep .markdown-wrapper {
      width: 100%;
      overflow: auto;
      height: auto !important;
    }

    ::ng-deep .markdown-parsed,
    ::ng-deep textarea {
      min-height: 60px;
    }

    ::ng-deep textarea {
      width: 100%;
      background: inherit;
      color: inherit;
      border: none;
      box-sizing: border-box;
      overflow-wrap: break-word;
      display: block;
      resize: none;
      min-height: 60px;
      overflow: auto;
      padding: var(--s) var(--s2);

      &:focus {
        outline: none;
      }
    }
  }
}

.attachment-list-wrapper {
  margin-top: var(--s);
  max-width: 100vw;
  padding: 0 var(--s);
  overflow-x: auto;
  min-height: 111px;

  @include mousePrimaryDevice {
    visibility: hidden;
  }

  :host:hover & {
    visibility: visible;
  }

  ::ng-deep ul {
    display: block;
    white-space: nowrap;
    text-align: center;
    margin: 0;

    li {
      display: inline-block;
    }
  }
}

.drag-over-msg {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 1;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  display: flex;
  z-index: var(--z-focus-mode-drag-over);
}

.hide-notes-btn {
  position: absolute;
  z-index: var(--z-focus-mode-hide-notes);
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}
