const KEY = 'backLayer';
const SETTLE_MS = 400;

export interface HistoryLike {
  state: unknown;
  pushState(state: unknown, unused: string, url?: string): void;
  replaceState(state: unknown, unused: string, url?: string): void;
  back(): void;
}

interface Layer {
  id: string;
  close: (id: string) => void;
}

function layerOf(state: unknown): string | undefined {
  if (state && typeof state === 'object' && KEY in state) return String((state as Record<string, unknown>)[KEY]);
  return undefined;
}

function plain(state: unknown): Record<string, unknown> {
  const { [KEY]: _drop, ...rest } = (state && typeof state === 'object' ? state : {}) as Record<string, unknown>;
  return rest;
}

export class BackStack {
  private stack: Layer[] = [];
  private queue: Array<() => void> = [];
  private waiting = false;
  private timer: ReturnType<typeof setTimeout> | null = null;

  constructor(private readonly history: HistoryLike) {}

  /** A reload can land on a layer entry whose layer no longer exists. */
  init(): void {
    if (layerOf(this.history.state) !== undefined) this.history.replaceState(plain(this.history.state), '');
  }

  get depth(): number {
    return this.stack.length;
  }

  sync(id: string, open: boolean, close: (id: string) => void): void {
    const index = this.stack.findIndex((l) => l.id === id);
    if (open && index < 0) {
      this.stack.push({ id, close });
      this.run(() => this.history.pushState({ ...plain(this.history.state), [KEY]: id }, ''));
    } else if (open) {
      this.stack[index].close = close;
    } else if (index >= 0) {
      const top = index === this.stack.length - 1;
      this.stack.splice(index, 1);
      if (top) this.run(() => this.rewind());
    }
  }

  /** Records a route, replacing the layer entry on top when layers are being dismissed by the navigation. */
  route(state: unknown, url: string): void {
    this.run(() => {
      if (this.stack.length > 0 && layerOf(this.history.state) !== undefined) {
        this.stack = [];
        this.history.replaceState(state, '', url);
      } else {
        this.history.pushState(state, '', url);
      }
    });
  }

  /** Returns true when the popstate belonged to the layer stack, false when it is a plain route change. */
  pop(state: unknown): boolean {
    if (this.waiting) {
      this.settle();
      return true;
    }
    const id = layerOf(state);
    if (id === undefined) {
      if (this.stack.length === 0) return false;
      this.closeAbove(-1);
      return true;
    }
    const index = this.stack.findIndex((l) => l.id === id);
    if (index < 0) {
      this.history.back();
      return true;
    }
    this.closeAbove(index);
    return true;
  }

  private closeAbove(index: number): void {
    const closing = this.stack.splice(index + 1);
    for (const layer of closing.reverse()) layer.close(layer.id);
  }

  private rewind(): void {
    if (layerOf(this.history.state) === undefined) return;
    this.waiting = true;
    this.timer = setTimeout(() => this.settle(), SETTLE_MS);
    this.history.back();
  }

  private settle(): void {
    this.waiting = false;
    if (this.timer !== null) clearTimeout(this.timer);
    this.timer = null;
    const next = this.queue.shift();
    if (next) this.run(next);
  }

  private run(op: () => void): void {
    if (this.waiting) {
      this.queue.push(op);
      return;
    }
    op();
    if (!this.waiting) {
      const next = this.queue.shift();
      if (next) this.run(next);
    }
  }
}

export const backStack = new BackStack(typeof window === 'undefined' ? ({} as HistoryLike) : window.history);

let instances = 0;

export function instanceLayerId(prefix: string): string {
  return `${prefix}-${++instances}`;
}