import {
  createContext,
  useCallback,
  useContext,
  useMemo,
  useRef,
  useState,
  type ReactNode,
} from 'react';
import { SearchIcon, XIcon } from 'lucide-react';

import { rankMatch, type SettingsEntry } from '../../lib/seo/settings-index';
import { classNames } from '../../lib/utils';
import { Button } from '../ui/button';
import { Input } from '../ui/input';
import { TabsContent } from '../ui/tabs';

/** One option as the search sees it: where it lives and what it says. */
export interface OptionEntry {
  id: string;
  section: string;
  label: string;
  description: string;
  tip: string;
}

type Register = (entry: OptionEntry) => () => void;

const RegisterContext = createContext<Register | null>(null);
const HighlightContext = createContext<string | null>(null);
const SectionContext = createContext<string>('');

export const useOptionRegister = (): Register | null =>
  useContext(RegisterContext);
export const useOptionHighlight = (): string | null =>
  useContext(HighlightContext);
export const useOptionSection = (): string => useContext(SectionContext);

/**
 * One section of a settings page. Its panel stays mounted while hidden, so
 * every option of the page is in the index whichever section is open.
 */
export const SettingsSection = ({
  value,
  children,
  className,
}: {
  value: string;
  children: ReactNode;
  className?: string;
}): JSX.Element => (
  <SectionContext.Provider value={value}>
    <TabsContent value={value} keepMounted className={className}>
      {children}
    </TabsContent>
  </SectionContext.Provider>
);

/** The index of a page's options, kept outside React state until a batch of rows has registered. */
export const useOptionIndex = (): {
  register: Register;
  entries: OptionEntry[];
} => {
  const rows = useRef(new Map<string, OptionEntry>());
  const pending = useRef(false);
  const [entries, setEntries] = useState<OptionEntry[]>([]);
  // Rows register one by one on mount; the index is published once per batch.
  const publish = useCallback((): void => {
    if (!pending.current) {
      pending.current = true;
      queueMicrotask(() => {
        pending.current = false;
        setEntries([...rows.current.values()]);
      });
    }
  }, []);
  const register = useCallback<Register>(
    entry => {
      rows.current.set(entry.id, entry);
      publish();
      return () => {
        rows.current.delete(entry.id);
        publish();
      };
    },
    [publish]
  );
  return { register, entries };
};

export const OptionIndexProvider = ({
  register,
  highlighted,
  children,
}: {
  register: Register;
  highlighted: string | null;
  children: ReactNode;
}): JSX.Element => (
  <RegisterContext.Provider value={register}>
    <HighlightContext.Provider value={highlighted}>
      {children}
    </HighlightContext.Provider>
  </RegisterContext.Provider>
);

/** Matches listed from the other pages before the list says how many more there are. */
const MAX_ELSEWHERE = 20;

/** The entries of this page a query matches, the ones matched by their label first. */
export const searchOptions = (
  entries: OptionEntry[],
  query: string
): OptionEntry[] =>
  entries
    .map(entry => ({
      entry,
      rank: rankMatch(query, [
        entry.label,
        `${entry.description} ${entry.tip}`,
      ]),
    }))
    .filter(match => match.rank > 0)
    .sort((a, b) => b.rank - a.rank)
    .map(match => match.entry);

/** The options and sections of the other settings pages a query matches, sections and labels first. */
export const searchElsewhere = (
  entries: SettingsEntry[],
  query: string
): SettingsEntry[] =>
  entries
    .map(entry => ({
      entry,
      rank: rankMatch(query, [
        entry.label,
        `${entry.detail ?? ''} ${entry.description} ${entry.tip}`,
      ]),
    }))
    .filter(match => match.rank > 0)
    .sort(
      (a, b) =>
        b.rank +
        (b.entry.isSection ? 0.25 : 0) -
        (a.rank + (a.entry.isSection ? 0.25 : 0))
    )
    .map(match => match.entry);

/**
 * The search box of a settings page, the way Rank Math offers "Search
 * options", over every SEO settings page: the options of this page first
 * (picking one opens its section with it highlighted), then the options
 * and sections of the others, which open that page there.
 */
export const OptionSearch = ({
  entries,
  elsewhere = [],
  sectionLabel,
  onPick,
  onPickElsewhere,
}: {
  entries: OptionEntry[];
  /** The options and sections of the other settings pages. */
  elsewhere?: SettingsEntry[];
  sectionLabel: (section: string) => string;
  onPick: (entry: OptionEntry) => void;
  onPickElsewhere?: (entry: SettingsEntry) => void;
}): JSX.Element => {
  const [query, setQuery] = useState('');
  const results = useMemo(
    () => searchOptions(entries, query),
    [entries, query]
  );
  const others = useMemo(
    () => (onPickElsewhere ? searchElsewhere(elsewhere, query) : []),
    [elsewhere, query, onPickElsewhere]
  );
  const open = query.trim() !== '';
  const shownOthers = others.slice(0, MAX_ELSEWHERE);

  const pick = (entry: OptionEntry): void => {
    setQuery('');
    onPick(entry);
  };
  const pickElsewhere = (entry: SettingsEntry): void => {
    setQuery('');
    onPickElsewhere?.(entry);
  };

  const row = (
    key: string,
    label: string,
    where: string,
    description: string,
    onClick: () => void
  ): JSX.Element => (
    <li key={key} role="option" aria-selected={false}>
      <button
        type="button"
        onClick={onClick}
        className={classNames(
          'flex w-full flex-col items-start gap-0.5 rounded-md px-2.5 py-2 text-left transition-colors outline-none',
          'hover:bg-muted focus-visible:bg-muted'
        )}
      >
        <span className="flex w-full items-baseline justify-between gap-2">
          <span className="text-sm font-medium text-foreground">{label}</span>
          <span className="shrink-0 text-right text-xs text-muted-foreground">
            {where}
          </span>
        </span>
        {description && (
          <span className="line-clamp-1 text-xs text-muted-foreground">
            {description}
          </span>
        )}
      </button>
    </li>
  );

  return (
    <div className="relative w-full max-w-xs">
      <SearchIcon className="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground" />
      <Input
        type="text"
        role="searchbox"
        autoComplete="off"
        value={query}
        onChange={event => setQuery(event.target.value)}
        onKeyDown={event => {
          if (event.key === 'Enter' && results[0]) {
            event.preventDefault();
            pick(results[0]);
          } else if (event.key === 'Enter' && shownOthers[0]) {
            event.preventDefault();
            pickElsewhere(shownOthers[0]);
          } else if (event.key === 'Escape') {
            setQuery('');
          }
        }}
        placeholder="Search all settings"
        aria-label="Search all settings"
        className="pr-8 pl-8"
      />
      {open && (
        <Button
          type="button"
          variant="ghost"
          size="icon-xs"
          aria-label="Clear search"
          className="absolute top-1/2 right-1 -translate-y-1/2"
          onClick={() => setQuery('')}
        >
          <XIcon />
        </Button>
      )}
      {open && (
        <ul
          role="listbox"
          aria-label="Matching options"
          className="absolute right-0 left-0 z-20 mt-1 max-h-96 overflow-y-auto rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-md"
        >
          {results.length === 0 && others.length === 0 && (
            <li className="px-2.5 py-2 text-sm text-muted-foreground">
              No option matches.
            </li>
          )}
          {results.length > 0 && others.length > 0 && (
            <li className="px-2.5 pt-1.5 pb-1 text-[11px] font-semibold tracking-wide text-muted-foreground uppercase">
              On this page
            </li>
          )}
          {results.map(entry =>
            row(
              entry.id,
              entry.label,
              sectionLabel(entry.section),
              entry.description,
              () => pick(entry)
            )
          )}
          {shownOthers.length > 0 && (
            <li className="px-2.5 pt-2 pb-1 text-[11px] font-semibold tracking-wide text-muted-foreground uppercase">
              Other settings pages
            </li>
          )}
          {shownOthers.map(entry =>
            row(
              `${entry.page}|${entry.section}|${entry.label}|${entry.detail ?? ''}`,
              entry.isSection ? `${entry.label} (section)` : entry.label,
              [entry.pageLabel, entry.detail].filter(Boolean).join(' · '),
              entry.description,
              () => pickElsewhere(entry)
            )
          )}
          {others.length > shownOthers.length && (
            <li className="px-2.5 py-2 text-xs text-muted-foreground">
              {others.length - shownOthers.length} more on other pages: add a
              word to narrow it down.
            </li>
          )}
        </ul>
      )}
    </div>
  );
};