/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { html } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
import NileElement from '../internal/nile-element';
import { styles } from './nile-minimap.css';

export type NileMinimapOrientation = 'horizontal' | 'vertical' | 'auto';
export type NileMinimapMode = 'segments' | 'track';
export type NileMinimapAxis = 'horizontal' | 'vertical';
export type NileMinimapSource = 'drag' | 'click' | 'wheel' | 'keyboard';

/** Formats the `aria-valuetext` in segments mode. */
export type NileMinimapValueTextFormatter = (
  first: number,
  last: number,
  total: number
) => string;

interface AxisMap {
  len: 'clientWidth' | 'clientHeight';
  size: 'scrollWidth' | 'scrollHeight';
  pos: 'scrollLeft' | 'scrollTop';
  border: 'clientLeft' | 'clientTop';
  rectStart: 'left' | 'top';
  rectExt: 'width' | 'height';
  client: 'clientX' | 'clientY';
  scrollKey: 'left' | 'top';
}

const AXES: Record<NileMinimapAxis, AxisMap> = {
  horizontal: {
    len: 'clientWidth',
    size: 'scrollWidth',
    pos: 'scrollLeft',
    border: 'clientLeft',
    rectStart: 'left',
    rectExt: 'width',
    client: 'clientX',
    scrollKey: 'left',
  },
  vertical: {
    len: 'clientHeight',
    size: 'scrollHeight',
    pos: 'scrollTop',
    border: 'clientTop',
    rectStart: 'top',
    rectExt: 'height',
    client: 'clientY',
    scrollKey: 'top',
  },
};

const MIN_THUMB = 14;
const MIN_SEG = 3;
const MAX_ITEMS = 48;

interface SegGeo {
  start: number;
  len: number;
}

const defaultValueText: NileMinimapValueTextFormatter = (
  first,
  last,
  total
) => {
  if (first === last) return `Item ${first} of ${total}`;
  return `Items ${first}–${last} of ${total}`;
};

/**
 * A small overview of any scrolling container. It mirrors the container's
 * scroll position and lets people drag, click, wheel or key to another part of
 * it. One axis at a time: horizontal for boards and wide tables, vertical for
 * long documents and lists. It adds to the native scrollbar; it never replaces
 * it.
 *
 * NxtGen theme only: styles use `--ng-*` tokens with no legacy `--nile-*`
 * fallbacks, so the page must load the NxtGen theme (e.g. `nxtgen.css`).
 *
 * @tag nile-minimap
 * @summary Scroll overview that attaches to a scroll container by id and lets people navigate it.
 *
 * @event nile-navigate - Fired before the minimap scrolls the container. Cancelable: `preventDefault()` skips the scroll. Detail: { position: number, ratio: number, source: 'drag' | 'click' | 'wheel' | 'keyboard', orientation: 'horizontal' | 'vertical' }
 * @event nile-overflow-change - Fired once on first measure, then whenever overflow on the active axis starts or stops. Detail: { overflowing: boolean, orientation: 'horizontal' | 'vertical' }
 *
 * @csspart base - The container surface.
 * @csspart track - The scaled area; drawn as a rail in track mode.
 * @csspart segment - One block per item matched by `itemSelector`.
 * @csspart viewport - The focusable, draggable thumb (`role="scrollbar"`).
 *
 * @cssproperty --nile-minimap-width - Width of the minimap (112px). Swaps with height in vertical mode.
 * @cssproperty --nile-minimap-height - Height of the minimap (40px). Swaps with width in vertical mode.
 */
@customElement('nile-minimap')
export class NileMinimap extends NileElement {
  static styles: CSSResultGroup = styles;

  /** Id of the scroll container, resolved in the minimap's root node. The only way to attach. */
  @property({ reflect: true }) for = '';

  /** Which axis the minimap represents. `auto` picks the overflowing axis (horizontal first). */
  @property({ reflect: true }) orientation: NileMinimapOrientation = 'auto';

  /** `segments` draws one block per item; `track` draws a single rail. */
  @property({ reflect: true }) mode: NileMinimapMode = 'segments';

  /** Selector queried on the container to find the segment items. */
  @property() itemSelector = ':scope > *';

  /** Hides the host while nothing overflows. */
  @property({ type: Boolean, reflect: true }) hideWhenFits = true;

  /** Smooth scroll for click and keyboard. Always off under reduced motion. */
  @property({ type: Boolean }) smooth = true;

  /** Still mirrors scrolling, but can't be used. */
  @property({ type: Boolean, reflect: true }) disabled = false;

  /** Accessible name on the viewport. */
  @property() label = 'Scroll position';

  /**
   * Keeps the minimap hidden until the container scrolls, then fades it out
   * after `hideDelay` ms without scrolling. It stays visible while it is
   * hovered, focused or being dragged. Hidden, it keeps its space and ignores
   * the pointer.
   */
  @property({ type: Boolean, reflect: true }) autoHide = false;

  /** With `autoHide`, milliseconds without scrolling before the minimap fades out. */
  @property({ type: Number }) hideDelay = 1200;

  /** Builds the `aria-valuetext` in segments mode. */
  @property({ attribute: false })
  formatValueText: NileMinimapValueTextFormatter = defaultValueText;

  @query('.base') private base!: HTMLDivElement;

  @query('.track') private trackEl!: HTMLDivElement;

  @query('.segments') private segsEl!: HTMLDivElement;

  @query('.viewport') private viewport!: HTMLDivElement;

  @state() private resolvedDir: NileMinimapAxis = 'horizontal';

  private target: HTMLElement | null = null;

  private axis: AxisMap = AXES.horizontal;

  private geo: SegGeo[] = [];

  private observed = new Set<Element>();

  private overflowing: boolean | null = null;

  private segOn = false;

  private rtl = false;

  private raf = 0;

  private full = false;

  private pending: number | null = null;

  private pendingAt = 0;

  private retried = false;

  private retryRaf = 0;

  // Live geometry cache used by the pointer/keyboard handlers.
  private contentSize = 0;

  private clientSize = 0;

  private maxScroll = 0;

  private trackLen = 0;

  private vpLen = 0;

  private ro: ResizeObserver | null = null;

  private mo: MutationObserver | null = null;

  private onScroll = () => {
    this.schedule(false);
    this.reveal();
  };

  // autoHide state: the minimap stays visible while any of these hold.
  private hideTimer = 0;

  private hovered = false;

  private focused = false;

  private onPointerEnter = () => {
    this.hovered = true;
  };

  private onPointerLeave = () => {
    this.hovered = false;
    this.queueHide();
  };

  private onFocusIn = () => {
    this.focused = true;
    this.reveal();
  };

  private onFocusOut = () => {
    this.focused = false;
    this.queueHide();
  };

  // Drag state.
  private drag: { pointer: number; start: number } | null = null;

  private dragRaf = 0;

  private lastMove: PointerEvent | null = null;

  private reduceMotion = matchMedia('(prefers-reduced-motion: reduce)');

  connectedCallback(): void {
    super.connectedCallback();
    this.addEventListener('pointerenter', this.onPointerEnter);
    this.addEventListener('pointerleave', this.onPointerLeave);
    this.addEventListener('focusin', this.onFocusIn);
    this.addEventListener('focusout', this.onFocusOut);
    if (this.hasUpdated) {
      this.attach();
    }
  }

  disconnectedCallback(): void {
    this.detach();
    this.removeEventListener('pointerenter', this.onPointerEnter);
    this.removeEventListener('pointerleave', this.onPointerLeave);
    this.removeEventListener('focusin', this.onFocusIn);
    this.removeEventListener('focusout', this.onFocusOut);
    clearTimeout(this.hideTimer);
    this.hideTimer = 0;
    super.disconnectedCallback();
  }

  firstUpdated(): void {
    this.bindInteractions();
    this.attach();
  }

  updated(changed: PropertyValues): void {
    if (changed.has('autoHide')) {
      clearTimeout(this.hideTimer);
      this.hideTimer = 0;
      this.toggleAttribute('data-idle', this.autoHide && !this.held);
    }
    if (changed.has('for')) {
      this.attach();
      return;
    }
    if (
      changed.has('orientation') ||
      changed.has('mode') ||
      changed.has('itemSelector') ||
      changed.has('hideWhenFits') ||
      changed.has('disabled') ||
      changed.has('label')
    ) {
      this.schedule(true);
    }
  }

  render(): TemplateResult {
    return html`
      <div
        part="base"
        class=${classMap({
          base: true,
          'base--track': !this.segOn,
          'base--disabled': this.disabled,
          'base--rtl': this.rtl && this.resolvedDir === 'horizontal',
        })}
      >
        <div part="track" class="track">
          <div class="segments"></div>
          <div
            part="viewport"
            class="viewport"
            role="scrollbar"
            tabindex=${this.disabled ? -1 : 0}
            aria-controls=${this.for}
            aria-orientation=${this.resolvedDir}
            aria-label=${this.label}
            aria-valuemin="0"
            aria-valuemax="100"
            aria-valuenow="0"
          ></div>
        </div>
      </div>
    `;
  }

  // --- autoHide -------------------------------------------------------------

  private get held(): boolean {
    return this.hovered || this.focused || this.drag !== null;
  }

  /** Shows an auto-hidden minimap and restarts the countdown to hiding it. */
  private reveal(): void {
    if (!this.autoHide) return;
    this.removeAttribute('data-idle');
    this.queueHide();
  }

  private queueHide(): void {
    clearTimeout(this.hideTimer);
    this.hideTimer = 0;
    if (!this.autoHide) return;
    this.hideTimer = window.setTimeout(() => {
      this.hideTimer = 0;
      if (this.autoHide && !this.held) this.setAttribute('data-idle', '');
    }, Math.max(0, this.hideDelay));
  }

  // --- attach / detach ------------------------------------------------------

  private resolveTarget(): HTMLElement | null {
    if (!this.for) return null;
    const root = this.getRootNode() as Document | ShadowRoot;
    if (root instanceof Document) {
      return root.getElementById(this.for);
    }
    const shadow = root as ShadowRoot;
    if (typeof shadow.getElementById === 'function') {
      return shadow.getElementById(this.for) as HTMLElement | null;
    }
    return shadow.querySelector<HTMLElement>(`#${CSS.escape(this.for)}`);
  }

  private attach(): void {
    this.detach();
    const el = this.resolveTarget();
    this.toggleAttribute('data-unresolved', !el);
    if (!el) {
      if (!this.retried && this.for) {
        this.retried = true;
        this.retryRaf = requestAnimationFrame(() => {
          this.retryRaf = 0;
          this.attach();
        });
      } else if (this.for) {
        this.retried = false;
        // eslint-disable-next-line no-console
        console.warn(
          `nile-minimap: no element with id "${this.for}" found in the minimap's root node.`
        );
      }
      return;
    }
    this.retried = false;
    this.target = el;

    this.ro = new ResizeObserver(() => this.schedule(true));
    this.mo = new MutationObserver(() => this.schedule(true));
    this.ro.observe(el);
    this.ro.observe(this);
    this.mo.observe(el, { childList: true, subtree: true });
    el.addEventListener('scroll', this.onScroll, { passive: true });

    // Defer the first measure out of the Lit update lifecycle: attach() runs
    // synchronously from firstUpdated()/updated(), and layout() sets @state
    // (resolvedDir) and calls requestUpdate(), which otherwise triggers the
    // dev-mode "scheduled an update after an update completed" warning.
    this.schedule(true);
  }

  private detach(): void {
    if (this.raf) {
      cancelAnimationFrame(this.raf);
      this.raf = 0;
    }
    if (this.retryRaf) {
      cancelAnimationFrame(this.retryRaf);
      this.retryRaf = 0;
    }
    if (this.dragRaf) {
      cancelAnimationFrame(this.dragRaf);
      this.dragRaf = 0;
    }
    this.ro?.disconnect();
    this.mo?.disconnect();
    this.ro = null;
    this.mo = null;
    this.observed.clear();
    if (this.target) {
      this.target.removeEventListener('scroll', this.onScroll);
    }
    this.target = null;
    this.drag = null;
    this.full = false;
  }

  // --- scheduling -----------------------------------------------------------

  private schedule(full: boolean): void {
    if (full) this.full = true;
    if (this.raf) return;
    this.raf = requestAnimationFrame(() => {
      this.raf = 0;
      // The held element may have been re-rendered (e.g. *ngIf): re-resolve.
      if (this.target && !this.target.isConnected) {
        this.attach();
        return;
      }
      const needsLayout = this.full;
      this.full = false;
      if (needsLayout) this.layout();
      else this.refresh();
    });
  }

  // --- measurement ----------------------------------------------------------

  private layout(): void {
    const t = this.target;
    if (!t) return;

    let dir: NileMinimapAxis;
    if (this.orientation === 'auto') {
      const vOver = t.scrollHeight - t.clientHeight > 1;
      const hOver = t.scrollWidth - t.clientWidth > 1;
      dir = !hOver && vOver ? 'vertical' : 'horizontal';
    } else {
      dir = this.orientation;
    }
    this.resolvedDir = dir;
    this.axis = AXES[dir];
    this.rtl = dir === 'horizontal' && getComputedStyle(t).direction === 'rtl';

    const a = this.axis;
    const el = t as unknown as Record<string, number>;
    const size = el[a.size];
    const client = el[a.len];
    const over = size - client > 1;

    if (over !== this.overflowing) {
      this.overflowing = over;
      this.emit(
        'nile-overflow-change',
        { overflowing: over, orientation: dir },
        true,
        true,
        false
      );
    }

    // hideWhenFits toggles an internal attribute; never the consumer's [hidden].
    if (this.hideWhenFits && !over) {
      this.setAttribute('data-fit', '');
    } else {
      this.removeAttribute('data-fit');
    }
    if (dir === 'vertical') this.setAttribute('data-vertical', '');
    else this.removeAttribute('data-vertical');

    const items =
      this.mode === 'segments'
        ? Array.from(t.querySelectorAll<HTMLElement>(this.itemSelector))
        : [];

    // Keep the per-item ResizeObserver set in sync without triggering loops.
    for (const old of Array.from(this.observed)) {
      if (!items.includes(old as HTMLElement)) {
        this.ro?.unobserve(old);
        this.observed.delete(old);
      }
    }
    for (const it of items) {
      if (!this.observed.has(it)) {
        this.ro?.observe(it);
        this.observed.add(it);
      }
    }

    const tr = t.getBoundingClientRect() as unknown as Record<string, number>;
    const scrollPos = el[a.pos];
    this.geo = items.map(it => {
      const r = it.getBoundingClientRect() as unknown as Record<string, number>;
      return {
        start: r[a.rectStart] - tr[a.rectStart] - el[a.border] + scrollPos,
        len: r[a.rectExt],
      };
    });

    const trackLen = (this.trackEl as unknown as Record<string, number>)[a.len];
    const scale = size ? trackLen / size : 0;
    const dense =
      this.geo.length > MAX_ITEMS ||
      this.geo.some(g => g.len * scale < MIN_SEG);
    this.segOn = this.mode === 'segments' && this.geo.length > 0 && !dense;

    this.renderSegments(scale);
    this.refresh();
  }

  private renderSegments(scale: number): void {
    const segs = this.segsEl;
    if (!segs) return;
    if (!this.segOn) {
      segs.textContent = '';
      this.requestUpdate();
      return;
    }
    while (segs.children.length < this.geo.length) {
      const d = document.createElement('div');
      d.className = 'segment';
      d.setAttribute('part', 'segment');
      segs.appendChild(d);
    }
    while (segs.children.length > this.geo.length) {
      segs.lastChild?.remove();
    }
    this.geo.forEach((g, i) => {
      const s = (segs.children[i] as HTMLElement).style;
      s.setProperty('--s', `${(g.start * scale).toFixed(2)}px`);
      s.setProperty('--l', `${(g.len * scale).toFixed(2)}px`);
    });
    this.requestUpdate();
  }

  private refresh(): void {
    const t = this.target;
    if (!t) return;
    const a = this.axis;
    const el = t as unknown as Record<string, number>;
    const size = el[a.size];
    const client = el[a.len];
    const maxScroll = Math.max(0, size - client);
    const trackLen = (this.trackEl as unknown as Record<string, number>)[a.len];

    let vpLen = size
      ? Math.max(MIN_THUMB, (trackLen * client) / size)
      : trackLen;
    vpLen = Math.min(vpLen, trackLen);
    const pos = Math.abs(el[a.pos]);
    const ratio = maxScroll ? Math.min(1, Math.max(0, pos / maxScroll)) : 0;
    const vpStart = ratio * (trackLen - vpLen);

    this.contentSize = size;
    this.clientSize = client;
    this.maxScroll = maxScroll;
    this.trackLen = trackLen;
    this.vpLen = vpLen;

    const vp = this.viewport;
    if (vp) {
      vp.style.setProperty('--vs', `${vpStart.toFixed(2)}px`);
      vp.style.setProperty('--vl', `${vpLen.toFixed(2)}px`);
      vp.setAttribute('aria-orientation', this.resolvedDir);
      vp.setAttribute('aria-label', this.label);
      vp.setAttribute('aria-controls', this.for);
      vp.setAttribute('aria-valuenow', String(Math.round(ratio * 100)));
      if (this.disabled) vp.setAttribute('aria-disabled', 'true');
      else vp.removeAttribute('aria-disabled');

      let valueText = '';
      if (this.segOn) {
        const visible: number[] = [];
        this.geo.forEach((g, i) => {
          if (g.start + g.len > pos + 1 && g.start < pos + client - 1) {
            visible.push(i + 1);
          }
        });
        if (visible.length) {
          valueText = this.formatValueText(
            visible[0],
            visible[visible.length - 1],
            this.geo.length
          );
        }
      }
      if (valueText) vp.setAttribute('aria-valuetext', valueText);
      else vp.removeAttribute('aria-valuetext');
    }

    if (this.pending !== null && Math.abs(pos - this.pending) < 2) {
      this.pending = null;
    }
  }

  // --- navigation -----------------------------------------------------------

  private go(rawPos: number, source: NileMinimapSource, smooth: boolean): void {
    const t = this.target;
    if (!t) return;
    const a = this.axis;
    const el = t as unknown as Record<string, number>;
    const max = el[a.size] - el[a.len];
    const pos = Math.max(0, Math.min(max, rawPos));

    const ev = this.emit(
      'nile-navigate',
      {
        position: Math.round(pos),
        ratio: max ? Number((pos / max).toFixed(3)) : 0,
        source,
        orientation: this.resolvedDir,
      },
      true,
      true,
      true
    );
    if (ev.defaultPrevented) return;

    const sm = smooth && this.smooth && !this.reduceMotion.matches;
    this.pending = sm ? pos : null;
    this.pendingAt = performance.now();
    const signed = this.rtl ? -pos : pos;
    t.scrollTo({ [a.scrollKey]: signed, behavior: sm ? 'smooth' : 'auto' });
  }

  private cur(): number {
    if (!this.target) return 0;
    if (this.pending !== null && performance.now() - this.pendingAt < 600) {
      return this.pending;
    }
    const el = this.target as unknown as Record<string, number>;
    return Math.abs(el[this.axis.pos]);
  }

  private step(dir: number): number {
    const cur = this.cur();
    if (this.segOn && this.geo.length) {
      const inset = this.geo[0].start;
      const stops = this.geo.map(g => Math.max(0, g.start - inset));
      if (dir > 0) {
        const next = stops.find(s => s > cur + 2);
        return next === undefined ? Infinity : next;
      }
      const prev = [...stops].reverse().find(s => s < cur - 2);
      return prev === undefined ? 0 : prev;
    }
    return cur + dir * Math.max(40, this.clientSize * 0.1);
  }

  // --- interactions ---------------------------------------------------------

  private bindInteractions(): void {
    const vp = this.viewport;
    const track = this.trackEl;
    const { base } = this;

    vp.addEventListener('pointerdown', e => {
      if (this.disabled) return;
      e.preventDefault();
      e.stopPropagation();
      try {
        vp.setPointerCapture(e.pointerId);
      } catch {
        // Synthetic or already-released pointers can't be captured; drag still works.
      }
      const el = this.target as unknown as Record<string, number>;
      this.drag = {
        pointer: e[this.axis.client],
        start: this.target ? Math.abs(el[this.axis.pos]) : 0,
      };
      this.base.classList.add('base--drag');
      vp.focus({ preventScroll: true });
    });

    vp.addEventListener('pointermove', e => {
      if (!this.drag) return;
      this.lastMove = e;
      if (this.dragRaf) return;
      this.dragRaf = requestAnimationFrame(() => {
        this.dragRaf = 0;
        applyDrag();
      });
    });

    const applyDrag = () => {
      if (!this.drag || !this.lastMove) return;
      const room = this.trackLen - this.vpLen;
      if (room <= 0) return;
      const delta = this.lastMove[this.axis.client] - this.drag.pointer;
      this.go(
        this.drag.start + (delta * this.maxScroll) / room,
        'drag',
        false
      );
    };

    const end = () => {
      if (!this.drag) return;
      // Flush a move still waiting for its frame so the release position isn't lost.
      if (this.dragRaf) {
        cancelAnimationFrame(this.dragRaf);
        this.dragRaf = 0;
        applyDrag();
      }
      this.lastMove = null;
      this.drag = null;
      this.base.classList.remove('base--drag');
      this.queueHide();
    };
    vp.addEventListener('pointerup', end);
    vp.addEventListener('pointercancel', end);
    vp.addEventListener('lostpointercapture', end);

    track.addEventListener('pointerdown', e => {
      if (e.target === vp || this.disabled || !this.target) return;
      const r = track.getBoundingClientRect() as unknown as Record<
        string,
        number
      >;
      const p = e[this.axis.client] - r[this.axis.rectStart];
      this.go(
        (p / this.trackLen) * this.contentSize - this.clientSize / 2,
        'click',
        true
      );
    });

    base.addEventListener(
      'wheel',
      e => {
        if (this.disabled || !this.overflowing || !this.target) return;
        let d = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
        if (e.deltaMode === 1) d *= 16;
        else if (e.deltaMode === 2) d *= this.clientSize;
        const el = this.target as unknown as Record<string, number>;
        const cur = Math.abs(el[this.axis.pos]);
        if ((d < 0 && cur <= 0) || (d > 0 && cur >= this.maxScroll - 1)) return;
        e.preventDefault();
        this.pending = null;
        this.go(cur + d, 'wheel', false);
      },
      { passive: false }
    );

    vp.addEventListener('keydown', e => {
      if (this.disabled || !this.target) return;
      let n: number | null = null;
      switch (e.key) {
        case 'ArrowRight':
        case 'ArrowDown':
          n = this.step(1);
          break;
        case 'ArrowLeft':
        case 'ArrowUp':
          n = this.step(-1);
          break;
        case 'PageDown':
          n = this.cur() + this.clientSize;
          break;
        case 'PageUp':
          n = this.cur() - this.clientSize;
          break;
        case 'Home':
          n = 0;
          break;
        case 'End':
          n = this.maxScroll;
          break;
        default:
          n = null;
      }
      if (n !== null) {
        e.preventDefault();
        this.go(n, 'keyboard', true);
      }
    });
  }
}

export default NileMinimap;

declare global {
  interface HTMLElementTagNameMap {
    'nile-minimap': NileMinimap;
  }
}