import * as React from 'react';

/**
 * A hash router in a hundred lines, so the showcase adds no dependency.
 *
 * The hash carries the page, the global toggles and the playground's own props —
 * `#/button?theme=dark&p.variant=outline` — which makes any view of the gallery,
 * down to a single configured instance, a shareable link.
 */

export interface Route {
  /** Path segment of the hash, always starting with `/`. */
  path: string;
  /** Query segment — the toolbar's global toggles plus any `p.*` prop. */
  params: URLSearchParams;
}

/**
 * Prefix for a playground prop.
 *
 * It does two jobs. It keeps an axis named `size` or `theme` from colliding with
 * a page filter or a global toggle, and — because the prefix makes prop params
 * recognisable — it lets `Link`/`navigate` drop them when the path changes. See
 * `stripProps`.
 */
export const PROP_PREFIX = 'p.';

/**
 * `history.replaceState` does not fire `hashchange`, so a replacing write has to
 * announce itself. Both are subscribed below, and the store is the hash string,
 * so a duplicate notification is a no-op rather than a double render.
 */
const ROUTE_EVENT = 'showcase:route';

function subscribe(onChange: () => void) {
  window.addEventListener('hashchange', onChange);
  window.addEventListener(ROUTE_EVENT, onChange);
  return () => {
    window.removeEventListener('hashchange', onChange);
    window.removeEventListener(ROUTE_EVENT, onChange);
  };
}

function readHash() {
  return window.location.hash.slice(1) || '/';
}

function parse(hash: string): Route {
  const [path, query = ''] = hash.split('?');
  return { path: path || '/', params: new URLSearchParams(query) };
}

/** `#/button?theme=dark` — the string an `<a href>` or a shared link needs. */
export function hrefFor(path: string, params: URLSearchParams): string {
  const query = params.toString();
  return `#${path}${query ? `?${query}` : ''}`;
}

/**
 * The same link, absolute — what goes on the clipboard.
 *
 * Resolved against the current document rather than assembled from parts, so a
 * `SHOWCASE_BASE` sub-path deployment (`https://host/kit/#/button`) comes out
 * right without this file knowing the base exists.
 */
export function absoluteHref(path: string, params: URLSearchParams): string {
  return new URL(hrefFor(path, params), window.location.href).href;
}

/**
 * Drops every playground prop, in place.
 *
 * `Link` carries the current params across navigation on purpose — a dark-themed
 * Button page should not throw you back to light. A prop is the opposite: it
 * belongs to the component you are leaving, and `p.variant=outline` following
 * you onto the Badge page would silently reconfigure it.
 */
export function stripProps(params: URLSearchParams): URLSearchParams {
  for (const key of [...params.keys()]) {
    if (key.startsWith(PROP_PREFIX)) params.delete(key);
  }
  return params;
}

/**
 * `replace` writes through `history.replaceState` instead of pushing an entry.
 *
 * The playground writes on every control change; without this, ten clicks on a
 * `<select>` mean ten presses of Back to leave the page. `location.pathname` and
 * `location.search` are restated because `replaceState` takes a whole URL, and
 * dropping them would rewrite a `SHOWCASE_BASE` sub-path deployment to the root.
 */
function write(route: Route, replace = false) {
  const hash = hrefFor(route.path, route.params);
  if (!replace) {
    window.location.hash = hash;
    return;
  }
  window.history.replaceState(null, '', `${window.location.pathname}${window.location.search}${hash}`);
  window.dispatchEvent(new Event(ROUTE_EVENT));
}

export function useRoute(): Route {
  const hash = React.useSyncExternalStore(
    subscribe,
    readHash,
    () => '/'
  );
  return React.useMemo(() => parse(hash), [hash]);
}

/**
 * Read and write one global toggle, leaving the path and the other toggles
 * alone. A value equal to `fallback` is dropped from the URL rather than
 * written out, so the default state has a clean link.
 */
export function useParam(
  key: string,
  fallback: string,
  /** Update the current history entry instead of pushing one. */
  replace = false
): [string, (value: string) => void] {
  const { params } = useRoute();
  const value = params.get(key) ?? fallback;

  const set = React.useCallback(
    (next: string) => {
      const current = parse(readHash());
      if (next === fallback) current.params.delete(key);
      else current.params.set(key, next);
      write(current, replace);
    },
    [key, fallback, replace]
  );

  return [value, set];
}

/**
 * Change several params in one write.
 *
 * `useParam`'s setter is per key, and the playground has to be able to clear a
 * whole prop bag; doing that one `useParam` at a time would be one hash write —
 * and one render — per axis. The mutation runs against the *live* hash rather
 * than a render-time snapshot, which is what keeps two writes in one tick from
 * clobbering each other.
 */
export function useParamWriter(): (
  mutate: (params: URLSearchParams) => void,
  options?: { replace?: boolean }
) => void {
  return React.useCallback((mutate, options) => {
    const current = parse(readHash());
    mutate(current.params);
    write(current, options?.replace ?? false);
  }, []);
}

export function navigate(path: string) {
  const current = parse(readHash());
  write({ path, params: path === current.path ? current.params : stripProps(current.params) });
}

/**
 * An `<a>` that keeps the current toggles. Navigating from a dark-themed Button
 * page to the Badge page should not throw you back to light — but it does drop
 * that page's playground props, which describe a component you are leaving.
 *
 * Everything but `to` is forwarded to the anchor, and that is load-bearing:
 * `<Button asChild><Link …/></Button>` works by cloning the child with the
 * button's `className`, its `ref` and its event handlers, so a `Link` that
 * accepted only `className` would render a rail item with no styling and no
 * focus management.
 */
export function Link({
  to,
  keepProps = false,
  children,
  ...rest
}: {
  to: string;
  /**
   * Carry the `p.*` props across a path change anyway.
   *
   * One caller: the embed page's way back into the gallery. `#/embed/button` and
   * `#/button` are two views of the same configured component, so dropping the
   * configuration between them would be the bug the strip exists to prevent,
   * inverted.
   */
  keepProps?: boolean;
} & Omit<React.ComponentProps<'a'>, 'href'>) {
  const { path, params } = useRoute();
  /* A copy, because `stripProps` mutates and `params` belongs to the store. */
  const next = new URLSearchParams(params);
  if (to !== path && !keepProps) stripProps(next);
  return (
    <a href={hrefFor(to, next)} {...rest}>
      {children}
    </a>
  );
}