import {
  Component,
  ChangeDetectionStrategy,
  input,
  output,
  signal,
  computed,
  effect,
  untracked,
  AfterViewInit,
  OnDestroy,
  ElementRef,
  viewChild,
} from '@angular/core';
import { Tower, Block } from '../../models';
import { BlockComponent } from '../block/block.component';
import { TasksComponent } from '../tasks/tasks.component';
import { BlockEditComponent, BlockEditSave } from '../modal/block-edit.component';
import { ModalComponent } from '../modal/modal.component';
import { TowerSettingsComponent, TowerSettingsResult } from '../modal/tower-settings.component';
import { toCss } from '../../utils/color';

/** Tracks which entry path the block-edit modal was opened from. */
export interface EditEntry {
  filter: 'done' | 'pending';
  activeId: string | null;
}

export function editEntryForNewBlock(keepTasksOpen: boolean): EditEntry {
  return {
    filter: keepTasksOpen ? 'pending' : 'done',
    activeId: null,
  };
}

/** A done block augmented with per-render animation state. */
export interface StyledBlock extends Block {
  _anim: '' | 'descend' | 'ascend';
  _transform: string;
  _opacity: string;
}

/** One rendered square. A block draws `difficulty` squares, all sharing the
 *  block's color + animation state. */
interface RenderSquare {
  key: string;
  block: StyledBlock;
}

const BLOCKS_PER_ROW = 6;

/** How many squares a block draws (its difficulty, clamped to >= 1). */
function squareCount(block: Block): number {
  const n = Math.floor(block.difficulty ?? 1);
  return Number.isFinite(n) && n > 0 ? n : 1;
}

function totalSquares(blocks: Block[]): number {
  return blocks.reduce((sum, block) => sum + squareCount(block), 0);
}

/** Pick the newest blocks (array tail) whose cumulative square-count (each
 *  block costs `difficulty` squares) fits within `limit`, preserving order. */
function fitNewestBySquares(blocks: StyledBlock[], limit: number): StyledBlock[] {
  const chosen: StyledBlock[] = [];
  let used = 0;
  for (let i = blocks.length - 1; i >= 0; i--) {
    const cost = squareCount(blocks[i]);
    if (used + cost > limit) break;
    used += cost;
    chosen.unshift(blocks[i]);
  }
  return chosen;
}

export function selectVisibleStyledBlocks(
  styled: StyledBlock[],
  visibleLimit: number,
  enteringInRangeId: string | null,
  prevVisibleIds: ReadonlySet<string> = new Set(),
): { visibleStyled: StyledBlock[]; hiddenCount: number } {
  // `visibleLimit` is a number of SQUARE slots. A block draws `difficulty`
  // squares, so we cap by cumulative square cost, not by raw block count.
  const normalizedLimit = Math.max(0, visibleLimit);
  const restingBlocks = styled.filter((b) => b._opacity === '1');
  let shownRestingBlocks = fitNewestBySquares(restingBlocks, normalizedLimit);
  const enteringBlock =
    enteringInRangeId === null ? undefined : restingBlocks.find((b) => b.id === enteringInRangeId);

  if (enteringBlock && !shownRestingBlocks.some((b) => b.id === enteringBlock.id)) {
    // Guarantee the just-completed block a slot, then fill the remaining
    // square budget with the newest of the others.
    const reservedBudget = Math.max(0, normalizedLimit - squareCount(enteringBlock));
    const others = restingBlocks.filter((b) => b.id !== enteringBlock.id);
    shownRestingBlocks = [enteringBlock, ...fitNewestBySquares(others, reservedBudget)];
  }

  const hiddenCount = Math.max(0, totalSquares(restingBlocks) - totalSquares(shownRestingBlocks));

  // Blocks leaving past the upper date bound (opacity 0, `_anim: 'ascend'`) must
  // stay in the render list so their fly-up transition actually plays — even
  // when the resting stack already fills the whole square budget. Without this,
  // a capped stack (e.g. the example page) destroys the element the instant the
  // slider hides it and it just vanishes. Restrict to blocks that were visible a
  // moment ago: ones already off-screen have nothing to animate from, so leaving
  // them out keeps the rendered set (and the phantom flex slots) bounded.
  const exitingBlocks = styled.filter((b) => b._opacity !== '1' && prevVisibleIds.has(b.id));

  const shownIds = new Set([
    ...shownRestingBlocks.map((b) => b.id),
    ...exitingBlocks.map((b) => b.id),
  ]);

  return {
    hiddenCount,
    visibleStyled: styled.filter((b) => shownIds.has(b.id)),
  };
}

@Component({
  selector: 'lt-tower',
  standalone: true,
  imports: [BlockComponent, TasksComponent, ModalComponent, TowerSettingsComponent, BlockEditComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div #towerRoot class="tower">
      <div class="tower-header">
        <input
          #nameInput
          type="text"
          [value]="tower().name"
          [style.color]="towerNameCss()"
          (pointerdown)="$event.stopPropagation()"
          (blur)="onRename($event)"
          (keydown.enter)="nameInput.blur()"
        />

        <button
          type="button"
          class="edit-tower"
          aria-label="Edit tower"
          (click)="$event.stopPropagation(); showSettings.set(true)"
        >
          <img src="assets/pen.svg" alt="" />
        </button>
      </div>

      <div
        class="container"
      >
        <lt-tasks
          [pending]="pending()"
          [baseColor]="tower().base_color"
          [initiallyOpen]="keepTasksOpen()"
          (pointerdown)="$event.stopPropagation()"
          (markDone)="onMarkTaskDone($event)"
          (edit)="onEditBlock($event)"
        />

        <div
          #stackZone
          class="stack-zone"
          [style.--block-stack-height]="blockStackHeight()"
        >
          <img
            src="assets/plus-sign.svg"
            class="add-block"
            alt="Add block"
            role="button"
            tabindex="0"
            (pointerdown)="$event.stopPropagation()"
            (click)="$event.stopPropagation(); openAddBlock()"
            (keydown.enter)="$event.stopPropagation(); openAddBlock()"
            (keydown.space)="$event.preventDefault(); $event.stopPropagation(); openAddBlock()"
          />

          <div class="block-container-container">
            <div class="block-container">
              @for (sq of squares(); track sq.key; let i = $index) {
                <lt-block
                  [block]="sq.block"
                  [baseColor]="tower().base_color"
                  [hovered]="hoveredBlockId() === sq.block.id"
                  [attr.data-block-id]="sq.block.id"
                  [class.descend]="sq.block._anim === 'descend'"
                  [class.ascend]="sq.block._anim === 'ascend'"
                  [style.transform]="sq.block._transform"
                  [style.opacity]="sq.block._opacity"
                  [style.z-index]="squares().length - i"
                  (pointerenter)="onBlockPointerEnter(sq.block.id)"
                  (pointerleave)="onBlockPointerLeave(sq.block.id, $event)"
                  (clicked)="onEditBlock(sq.block)"
                />
              }
            </div>
          </div>
        </div>
      </div>

      @if (hiddenBlockCount() > 0) {
        <p class="more-blocks">+ {{ hiddenBlockCount() }} more</p>
      }
    </div>

    @if (editEntry(); as entry) {
      <lt-modal (close)="closeEdit()">
        <lt-block-edit
          [viewTitle]="editViewTitle()"
          [blocks]="filteredForEntry()"
          [activeBlockId]="entry.activeId"
          [tags]="towerTags()"
          [baseColor]="tower().base_color"
          [defaultDone]="entry.filter === 'done'"
          (save)="onBlockSave($event)"
          (delete)="onBlockDelete($event)"
          (close)="closeEdit()"
        />
      </lt-modal>
    }

    @if (showSettings()) {
      <lt-modal (close)="showSettings.set(false)">
        <lt-tower-settings
          [tower]="tower()"
          (save)="onTowerSave($event)"
          (delete)="onTowerDelete()"
          (close)="showSettings.set(false)"
        />
      </lt-modal>
    }
  `,
  styles: `
    @import '../../../library/main';

    :host {
      display: block;
      cursor: pointer;
      min-height: 0;

      &.cdk-drag-animating {
        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
      }

      &.cdk-drag-placeholder {
        opacity: 0;
      }

      &:hover {
        @media (min-width: $mobile-width) {
          div.container {
            box-shadow: $shadow;
          }
        }
      }

      &.cdk-drag-preview {
        div.container {
          @media (max-width: $mobile-width) {
            @keyframes shadow {
              from { box-shadow: none; }
              to   { box-shadow: $shadow; }
            }
            animation: shadow $long-animation-time forwards;
          }
        }
      }

      &.trash-highlight {
        .container {
          transform: scale(0.75);
          position: relative;

          &::before {
            opacity: 0.5 !important;
          }
        }

        .tower-header {
          display: none;
        }
      }

      .tower {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        max-width: 100%;
        height: 100%;
        min-height: 0;

        @include inner-spacing(var(--small-padding));

        .container {
          display: flex;
          flex-direction: column;
          flex: 1 1 auto;
          margin-bottom: 0;
          min-height: 0;
          position: relative;
          box-sizing: border-box;
          container-type: inline-size;
          --block-stack-height: 0px;
          --add-block-size: 48px;
          --add-block-clearance: var(--medium-padding);
          --add-block-center-offset: 0px;

          @include card();
          overflow: hidden;
          transition: transform $short-animation-time, box-shadow $long-animation-time;

          @include inner-spacing(var(--medium-padding));

          @media (max-width: $mobile-width) {
            @include inner-spacing(var(--small-padding));
            padding: 0;
            --add-block-size: 32px;
            --add-block-clearance: var(--small-padding);
          }

          width: 100%;

          &::before {
            content: '';
            pointer-events: none;
            position: absolute;
            z-index: 2;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: red;
            opacity: 0;
            border-radius: var(--border-radius);
            transition: opacity $short-animation-time;
          }

          lt-tasks {
            flex: 0 1 auto;
            min-height: 56px;
            max-height: min(30vh, 45%);
            overflow: auto;
            display: block;
            width: 100%;

            @media (max-width: $mobile-width) {
              min-height: 44px;
              max-height: min(25vh, 45%);
            }

            .container {
              max-height: 100%;
              overflow-y: auto;
            }
          }

          .stack-zone {
            position: relative;
            flex: 1 1 auto;
            min-height: 0;
            width: 100%;

            img {
              position: relative;
              z-index: 2;
              height: 48px;

              @media (max-width: $mobile-width) {
                height: 32px;
              }

              opacity: 0.33;
              transition: opacity $long-animation-time;
              cursor: pointer;

              &:hover {
                opacity: 1;
              }
            }

            img.add-block {
              position: absolute;
              z-index: 3;
              left: 50%;
              top: max(
                0px,
                min(
                  calc(50% - var(--add-block-size) / 2 - var(--add-block-center-offset)),
                  calc(100% - var(--block-stack-height) - var(--add-block-clearance) - var(--add-block-size))
                )
              );
              transform: translateX(-50%);
            }

            .block-container-container {
              position: absolute;
              inset: 0;

              .block-container {
                display: flex;
                flex-flow: row wrap;
                justify-content: flex-start;
                align-content: flex-start;
                align-items: flex-end;
                position: absolute;
                bottom: 0;
                width: 100%;
                transform: scaleY(-1);

                /* Default resting position for all blocks before JS sets them */
                * {
                  transform: translateY(500%);
                }

                .descend {
                  transition: transform 1.5s cubic-bezier(0.5, 0, 1, 0),
                              opacity 500ms cubic-bezier(0.5, 0, 1, 0);
                }

                .ascend {
                  transition: transform 1.5s cubic-bezier(0.5, 0, 1, 0),
                              opacity 500ms cubic-bezier(0.5, 0, 1, 0) 1s;
                }
              }
            }
          }
        }

        .more-blocks {
          @include small-text();
          position: absolute;
          top: calc(100% + var(--small-padding));
          left: 0;
          right: 0;
          margin: 0;
          line-height: 1;
          color: rgba($text-color, 0.72);
          text-align: center;
          pointer-events: none;
          user-select: none;
        }

        .tower-header {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;

          input[type='text'] {
            box-sizing: border-box;
            min-width: 0;
            font-size: var(--small-font-size);
            text-align: center;

            /* Truncate long titles with an ellipsis instead of wrapping. */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            /* Reserve a symmetric gutter on each side. The right one keeps the
               title and its focus underline clear of the absolutely-positioned
               pen (so the underline stops before it); the equal left one keeps
               the centered title optically centered. (pen 22px + 4px gap.) */
            width: calc(100% - 52px);

            @media (max-width: $mobile-width) {
              width: calc(100% - 60px);
            }
          }

          .edit-tower {
            all: unset;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            box-sizing: border-box;
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--border-radius);
            cursor: pointer;
            opacity: 0.35;
            transition: opacity $short-animation-time, box-shadow $long-animation-time, background-color $short-animation-time;

            /* Suppress the global button's animated hover underline
               (button::after), which the 'all: unset' reset doesn't reach. */
            &:after {
              content: none;
            }

            img {
              width: 13px;
              height: 13px;
              opacity: 1;
            }

            &:hover,
            &:focus-visible {
              opacity: 1;
              background-color: rgba($light-color, 0.86);
              box-shadow: $shadow-border;
            }

            @media (max-width: $mobile-width) {
              width: 26px;
              height: 26px;
              opacity: 0.55;
            }
          }
        }
      }
    }
  `,
})
export class TowerComponent implements AfterViewInit, OnDestroy {
  // ── Inputs ─────────────────────────────────────────────────────────────────
  readonly tower = input.required<Tower>();
  /** Optional date range filter — when set, blocks with `created_at`
   *  outside [from, to] are hidden from the falling stack. */
  readonly dateRange = input<{ from: number; to: number } | null>(null);
  /** When true, the tasks accordion starts expanded on load. */
  readonly keepTasksOpen = input<boolean>(false);
  /** When true, completed blocks descend on this tower's first measured render. */
  readonly animateInitialStack = input<boolean>(false);

  // ── Outputs ────────────────────────────────────────────────────────────────
  readonly updateTower = output<TowerSettingsResult>();
  readonly deleteTowerRequest = output<void>();
  /** Emitted when a new block is created from the carousel's "Create now" card. */
  readonly addBlock = output<{ tag: string; description: string; is_done: boolean; difficulty: number }>();
  /** Emitted when an existing block is patched from the carousel. */
  readonly saveBlock = output<{
    blockId: string;
    result: { tag: string; description: string; is_done: boolean; difficulty: number };
  }>();
  readonly deleteBlock = output<string>();

  // ── UI state ───────────────────────────────────────────────────────────────
  /** The single source of truth for "block-edit modal open" — encodes both
   *  which list of blocks to show and which one to focus initially. */
  readonly editEntry = signal<EditEntry | null>(null);
  readonly showSettings = signal(false);
  readonly hiddenBlockCount = signal(0);
  readonly hoveredBlockId = signal<string | null>(null);

  private readonly stackZone = viewChild<ElementRef<HTMLElement>>('stackZone');
  private readonly towerRoot = viewChild<ElementRef<HTMLElement>>('towerRoot');
  private readonly maxVisibleBlocks = signal<number | null>(null);
  private resizeObserver: ResizeObserver | null = null;
  private destroyed = false;
  private readonly animationFrames = new Set<number>();

  // ── Derived ────────────────────────────────────────────────────────────────
  /** Pending (not-done) blocks — fed to the tasks accordion. */
  readonly pending = computed(() => this.tower().blocks.filter((b) => !b.is_done));

  /** CSS color string for the tower name input. */
  readonly towerNameCss = computed(() => toCss(this.tower().base_color));

  /** Filtered list passed to the block-edit carousel. */
  readonly filteredForEntry = computed(() => {
    const entry = this.editEntry();
    if (!entry) return [];
    const isDone = entry.filter === 'done';
    return this.tower().blocks.filter((b) => b.is_done === isDone);
  });

  readonly editViewTitle = computed(() => {
    const entry = this.editEntry();
    if (!entry) return '';
    const prefix = entry.filter === 'done' ? 'Completed tasks' : 'Tasks';
    return `${prefix} of ${this.tower().name}`;
  });

  /** Unique tags from existing blocks of this tower. */
  readonly towerTags = computed(() => {
    const set = new Set<string>();
    for (const b of this.tower().blocks) if (b.tag) set.add(b.tag);
    return [...set];
  });

  // ── Falling animation ──────────────────────────────────────────────────────
  // Same approach as the legacy: detect "exactly one done block was added"
  // and snap that last block to translateY(500%)/opacity:0, then on next
  // tick flip it back to translateY(0)/opacity:1 with .descend so the
  // 1.5s gravity transition fires.

  private readonly _visibleBlocks = signal<StyledBlock[]>([]);
  readonly visibleBlocks = this._visibleBlocks.asReadonly();

  /** Flat list of squares to render: each visible block expands into
   *  `difficulty` adjacent squares that wrap (via the flex container) into
   *  the row above. All squares of a block share its animation state. */
  readonly squares = computed<RenderSquare[]>(() => {
    const out: RenderSquare[] = [];
    for (const b of this.visibleBlocks()) {
      const n = squareCount(b);
      for (let k = 0; k < n; k++) {
        out.push({ key: `${b.id}#${k}`, block: b });
      }
    }
    return out;
  });

  readonly blockStackHeight = computed(() => {
    const rows = Math.ceil(this.squares().length / BLOCKS_PER_ROW);
    const cqw = rows * (100 / BLOCKS_PER_ROW);
    return rows === 0 ? '0px' : `${Number(cqw.toFixed(4))}cqw`;
  });

  private prevDoneIds: string[] = [];
  private isFirstRun = true;

  constructor() {
    effect(() => {
      const range = this.dateRange();
      const maxVisibleBlocks = this.maxVisibleBlocks();
      const animateInitialStack = this.animateInitialStack();
      // Reconcile all done blocks, then cap the rendered stack to the rows
      // that fit below the tasks and add button.
      const allDone = this.tower().blocks.filter((b) => b.is_done);
      untracked(() => this.reconcile(allDone, range, maxVisibleBlocks, animateInitialStack));
    });
  }

  ngAfterViewInit(): void {
    const stackZone = this.stackZone()?.nativeElement;
    if (!stackZone) return;

    this.measureBlockCapacity();

    if (typeof ResizeObserver !== 'undefined') {
      this.resizeObserver = new ResizeObserver(() => this.measureBlockCapacity());
      this.resizeObserver.observe(stackZone);
    }

    if (typeof requestAnimationFrame === 'function') {
      requestAnimationFrame(() => this.measureBlockCapacity());
    }
  }

  ngOnDestroy(): void {
    this.destroyed = true;
    for (const id of this.animationFrames) cancelAnimationFrame(id);
    this.animationFrames.clear();
    this.resizeObserver?.disconnect();
  }

  private measureBlockCapacity(): void {
    const stackZone = this.stackZone()?.nativeElement;
    if (!stackZone) return;

    const width = stackZone.clientWidth;
    const height = stackZone.clientHeight;
    if (width <= 0 || height <= 0) {
      this.maxVisibleBlocks.set(0);
      return;
    }

    const styles = getComputedStyle(stackZone);
    const addBlockSize = this.parseCssPixels(styles.getPropertyValue('--add-block-size'), 48);
    this.measureAddBlockCenterOffset(stackZone);
    const fallbackClearance = addBlockSize <= 32 ? 7.5 : 15;
    const clearance = this.parseCssPixels(
      styles.getPropertyValue('--add-block-clearance'),
      fallbackClearance,
    );

    const rowHeight = width / BLOCKS_PER_ROW;
    const availableHeight = Math.max(0, height - addBlockSize - 2 * clearance);
    const rows = Math.floor((availableHeight + 0.5) / rowHeight);
    this.maxVisibleBlocks.set(Math.max(0, rows) * BLOCKS_PER_ROW);
  }

  private measureAddBlockCenterOffset(stackZone: HTMLElement): void {
    const towerRoot = this.towerRoot()?.nativeElement;
    if (!towerRoot) return;

    const stackRect = stackZone.getBoundingClientRect();
    const towerRect = towerRoot.getBoundingClientRect();
    const stackCenter = stackRect.top + stackRect.height / 2;
    const towerCenter = towerRect.top + towerRect.height / 2;
    const offset = Math.max(0, stackCenter - towerCenter);
    stackZone.style.setProperty('--add-block-center-offset', `${offset}px`);
  }

  private parseCssPixels(value: string, fallback: number): number {
    const parsed = Number.parseFloat(value);
    return Number.isFinite(parsed) ? parsed : fallback;
  }

  private reconcile(
    allDone: Block[],
    range: { from: number; to: number } | null,
    maxVisibleBlocks: number | null,
    animateInitialStack: boolean,
  ): void {
    if (this.isFirstRun && animateInitialStack && maxVisibleBlocks === null) {
      this._visibleBlocks.set([]);
      this.hiddenBlockCount.set(0);
      this.prevDoneIds = allDone.map((b) => b.id);
      this.isFirstRun = false;
      return;
    }

    const ids = allDone.map((b) => b.id);
    const prev = this.prevDoneIds;
    const prevSet = new Set(prev);
    const newIds = ids.filter((id) => !prevSet.has(id));
    const grewByOne =
      !this.isFirstRun &&
      ids.length === prev.length + 1 &&
      newIds.length === 1 &&
      prev.every((id) => ids.includes(id)); // no IDs disappeared

    const styled: StyledBlock[] = [];
    for (const b of allDone) {
      if (range && b.created_at < range.from) {
        // Below min-thumb boundary → drop entirely (instant shuffle, no animation).
        continue;
      }
      if (range && b.created_at > range.to) {
        // Above max-thumb boundary → fly up off the tower with gravity animation.
        styled.push({
          ...b,
          _anim: 'ascend',
          _transform: 'translateY(500%)',
          _opacity: '0',
        });
        continue;
      }
      // In range — descend into position (or appear instantly on first run).
      styled.push({
        ...b,
        _anim: this.isFirstRun ? '' : 'descend',
        _transform: 'translateY(0)',
        _opacity: '1',
      });
    }

    const newInRangeId = grewByOne ? newIds[0] : null;
    // Captured before any `_visibleBlocks.set` below — lets the cap keep
    // currently-shown blocks that are now flying out so their exit animates.
    const prevVisibleIds = new Set(this._visibleBlocks().map((b) => b.id));
    const visibleLimit =
      maxVisibleBlocks === null ? Number.POSITIVE_INFINITY : Math.max(0, maxVisibleBlocks);
    let visibleStyled = styled;
    let hiddenCount = 0;
    if (Number.isFinite(visibleLimit)) {
      ({ visibleStyled, hiddenCount } = selectVisibleStyledBlocks(
        styled,
        visibleLimit,
        newInRangeId,
        prevVisibleIds,
      ));
    }
    this.hiddenBlockCount.set(hiddenCount);

    if (this.isFirstRun && animateInitialStack) {
      const initialBlocks = visibleStyled.filter((b) => b._opacity === '1');
      if (initialBlocks.length > 0) {
        this.startDescendAnimation(visibleStyled, initialBlocks);
        this.prevDoneIds = ids;
        this.isFirstRun = false;
        return;
      }
    }

    if (grewByOne) {
      const newId = newIds[0];
      const newBlock = visibleStyled.find((b) => b.id === newId);
      if (newBlock) {
        // Snap newly-added in-range block to start position, then on the next
        // paint flip it back to rest — that's what makes it visibly fall.
        this.startDescendAnimation(visibleStyled, [newBlock]);
        this.prevDoneIds = ids;
        this.isFirstRun = false;
        return;
      }
    }
    // existing fall-through path (no growth, first run, or new block out of range):
    this._visibleBlocks.set(visibleStyled);

    this.prevDoneIds = ids;
    this.isFirstRun = false;
  }

  private startDescendAnimation(visibleStyled: StyledBlock[], blocks: StyledBlock[]): void {
    for (const block of blocks) {
      block._anim = '';
      block._transform = 'translateY(500%)';
      block._opacity = '0';
    }
    this._visibleBlocks.set(visibleStyled);
    this.requestFrame(() => {
      this.requestFrame(() => {
        if (this.destroyed) return;
        this.finishDescendAnimation(blocks);
      });
    });
  }

  private requestFrame(callback: () => void): void {
    if (typeof requestAnimationFrame !== 'function') {
      callback();
      return;
    }
    const id = requestAnimationFrame(() => {
      this.animationFrames.delete(id);
      if (!this.destroyed) callback();
    });
    this.animationFrames.add(id);
  }

  private finishDescendAnimation(blocks: StyledBlock[]): void {
    for (const block of blocks) {
      block._anim = 'descend';
      block._transform = 'translateY(0)';
      block._opacity = '1';
    }
    this._visibleBlocks.set([...this._visibleBlocks()]);
  }

  // ── Event handlers ─────────────────────────────────────────────────────────

  onRename(event: Event): void {
    const input = event.target as HTMLInputElement;
    const newName = input.value.trim();
    if (!newName) {
      input.value = this.tower().name;
      return;
    }
    if (newName !== this.tower().name) {
      this.updateTower.emit({ name: newName, base_color: this.tower().base_color });
    } else {
      input.value = this.tower().name;
    }
  }

  onEditBlock(block: Block): void {
    this.hoveredBlockId.set(null);
    this.editEntry.set({ filter: block.is_done ? 'done' : 'pending', activeId: block.id });
  }

  onBlockPointerEnter(blockId: string): void {
    this.hoveredBlockId.set(blockId);
  }

  onBlockPointerLeave(blockId: string, event: PointerEvent): void {
    if (this.relatedTargetBelongsToBlock(event.relatedTarget, blockId)) return;
    if (this.hoveredBlockId() === blockId) this.hoveredBlockId.set(null);
  }

  private relatedTargetBelongsToBlock(target: EventTarget | null, blockId: string): boolean {
    const towerRoot = this.towerRoot()?.nativeElement;
    let element = target instanceof Element ? target : null;

    while (element && element !== towerRoot) {
      if (element instanceof HTMLElement && element.dataset['blockId'] === blockId) return true;
      element = element.parentElement;
    }

    return false;
  }

  /** Tickbox in the tasks accordion — flip is_done to true without opening the carousel. */
  onMarkTaskDone(block: Block): void {
    this.saveBlock.emit({
      blockId: block.id,
      result: {
        tag: block.tag,
        description: block.description,
        is_done: true,
        difficulty: block.difficulty,
      },
    });
  }

  /** Called by the template "Add block" plus-icon. */
  openAddBlock(): void {
    this.editEntry.set(editEntryForNewBlock(this.keepTasksOpen()));
  }

  closeEdit(): void {
    this.editEntry.set(null);
  }

  onBlockSave(ev: BlockEditSave): void {
    if (ev.id === null) {
      this.addBlock.emit({
        tag: ev.tag,
        description: ev.description,
        is_done: ev.is_done,
        difficulty: ev.difficulty,
      });
    } else {
      this.saveBlock.emit({
        blockId: ev.id,
        result: {
          tag: ev.tag,
          description: ev.description,
          is_done: ev.is_done,
          difficulty: ev.difficulty,
        },
      });
    }
  }

  onBlockDelete(id: string): void {
    // Don't close the carousel — the deleted block disappears from `blocks()`
    // and the carousel re-renders in place. The user keeps editing siblings.
    this.deleteBlock.emit(id);
  }

  onTowerSave(result: TowerSettingsResult): void {
    // Tower edits auto-save, so this fires on every change and must NOT close
    // the modal — the user closes it via the exit button / backdrop.
    this.updateTower.emit(result);
  }

  onTowerDelete(): void {
    this.showSettings.set(false);
    this.deleteTowerRequest.emit();
  }
}