import { useLayoutEffect, useRef, useState, type ReactNode } from 'react';
import { GlobeIcon } from 'lucide-react';

import { classNames } from '../../lib/utils';
import { SERP_FONTS, SERP_WIDTHS, textWidth } from '../lib/text-width';

type Device = 'desktop' | 'mobile';

/** Where Google cuts, roughly, on each device, in characters. */
const LIMITS: Record<Device, { title: number; description: number }> = {
  desktop: { title: 60, description: 160 },
  mobile: { title: 78, description: 120 },
};

const cut = (text: string, max: number): string =>
  text.length > max ? `${text.slice(0, max - 3).trimEnd()}…` : text;

/**
 * Cut where Google cuts on a desktop: by the width the text takes in its
 * font, at a word, with an ellipsis. Without a canvas to measure with, by
 * characters.
 */
const cutToWidth = (
  text: string,
  font: string,
  maxPixels: number,
  maxChars: number
): string => {
  if (textWidth(text, font) === 0) {
    return cut(text, maxChars);
  }
  if (textWidth(text, font) <= maxPixels) {
    return text;
  }
  const words = text.split(' ');
  let shown = '';
  for (const word of words) {
    const next = shown ? `${shown} ${word}` : word;
    if (textWidth(`${next} …`, font) > maxPixels) {
      break;
    }
    shown = next;
  }
  return `${(shown || text.slice(0, maxChars)).replace(/[\s,;:.]+$/, '')} …`;
};

/** Google's desktop result, padding included: the title fits on one line in it. */
const DESKTOP_WIDTH = 640;

/** Smaller than this the result can no longer be read: it scrolls sideways instead. */
const MIN_SCALE = 0.75;

/**
 * The desktop result at Google's own width, scaled down to fit a narrow
 * sidebar: in the sidebar's 280 pixels the title wrapped over three or
 * four lines where Google shows one. Past a readable size it stops
 * shrinking and the box scrolls sideways.
 *
 * @param props          - Component props.
 * @param props.children - The result.
 * @return The result at Google's width.
 */
const AtGoogleWidth = ({ children }: { children: ReactNode }): JSX.Element => {
  const outer = useRef<HTMLDivElement>(null);
  const inner = useRef<HTMLDivElement>(null);
  const [fit, setFit] = useState<{ scale: number; height?: number }>({
    scale: 1,
  });
  useLayoutEffect(() => {
    const box = outer.current;
    const content = inner.current;
    if (!box || !content || typeof ResizeObserver === 'undefined') {
      return undefined;
    }
    const measure = (): void => {
      const scale = Math.max(
        MIN_SCALE,
        Math.min(1, box.clientWidth / DESKTOP_WIDTH)
      );
      setFit({ scale, height: content.offsetHeight * scale });
    };
    measure();
    const observer = new ResizeObserver(measure);
    observer.observe(box);
    observer.observe(content);
    return () => observer.disconnect();
  }, []);
  return (
    <div ref={outer} className="overflow-x-auto overflow-y-hidden">
      <div
        className="overflow-hidden"
        style={{ width: DESKTOP_WIDTH * fit.scale, height: fit.height }}
      >
        <div
          ref={inner}
          style={{
            width: DESKTOP_WIDTH,
            transform: `scale(${fit.scale})`,
            transformOrigin: 'top left',
          }}
        >
          {children}
        </div>
      </div>
    </div>
  );
};

/**
 * How the page looks in Google's results, on a desktop or a phone: the
 * site line, the title and the description, cut where Google cuts them.
 */
export const SnippetPreview = ({
  siteName,
  url,
  title,
  description,
}: {
  siteName: string;
  url: string;
  title: string;
  description: string;
}): JSX.Element => {
  const [device, setDevice] = useState<Device>('desktop');
  const mobile = device === 'mobile';
  const shownUrl = url
    .replace(/^https?:\/\//, '')
    .replace(/\/$/, '')
    .split('/')
    .join(' › ');
  const shownTitle = mobile
    ? cut(title, LIMITS.mobile.title)
    : cutToWidth(
        title,
        SERP_FONTS.title,
        SERP_WIDTHS.title,
        LIMITS.desktop.title
      );
  const shownDescription = mobile
    ? cut(description, LIMITS.mobile.description)
    : cutToWidth(
        description,
        SERP_FONTS.description,
        SERP_WIDTHS.description,
        LIMITS.desktop.description
      );

  const result = (
    <div
      className={classNames(
        'rounded-xl border border-border bg-white p-4 font-[arial,sans-serif] dark:bg-zinc-900',
        mobile && 'mx-auto w-full max-w-[400px] rounded-2xl'
      )}
      aria-label={`Search result preview on ${device}`}
    >
      <div className="flex items-center gap-2">
        <span className="flex size-7 items-center justify-center rounded-full bg-[#f1f3f4] text-[#5f6368]">
          <GlobeIcon className="size-4" />
        </span>
        <span className="flex min-w-0 flex-col leading-tight">
          <span className="truncate text-sm text-[#202124] dark:text-zinc-100">
            {siteName}
          </span>
          <span className="truncate text-xs text-[#4d5156] dark:text-zinc-400">
            {shownUrl}
          </span>
        </span>
      </div>
      <p
        className={classNames(
          'mt-2 leading-tight text-[#1a0dab] dark:text-[#8ab4f8]',
          mobile
            ? 'line-clamp-2 text-lg'
            : 'overflow-hidden text-xl whitespace-nowrap'
        )}
      >
        {shownTitle || <span className="text-[#70757a]">Your title</span>}
      </p>
      <p
        className={classNames(
          'mt-1 text-sm leading-snug text-[#4d5156] dark:text-zinc-300',
          mobile && 'line-clamp-3'
        )}
      >
        {shownDescription || (
          <span className="text-[#70757a]">
            Your description, or the first sentences of the content.
          </span>
        )}
      </p>
    </div>
  );

  return (
    <div className="flex flex-col gap-2">
      <div
        className="flex items-center gap-1 self-end rounded-md bg-muted p-0.5"
        role="tablist"
        aria-label="Preview device"
      >
        {(['desktop', 'mobile'] as Device[]).map(option => (
          <button
            key={option}
            type="button"
            role="tab"
            aria-selected={device === option}
            onClick={() => setDevice(option)}
            className={classNames(
              'rounded px-2 py-0.5 text-[11px] font-medium capitalize transition-colors',
              device === option
                ? 'bg-background text-foreground shadow-sm'
                : 'text-muted-foreground hover:text-foreground'
            )}
          >
            {option}
          </button>
        ))}
      </div>
      {mobile ? result : <AtGoogleWidth>{result}</AtGoogleWidth>}
    </div>
  );
};