import { useEffect, useMemo, useRef, useState } from 'react';
import { LoaderCircleIcon, SearchIcon, XIcon } from 'lucide-react';
import {
  Controller,
  type Control,
  type FieldPath,
  type FieldValues,
} from 'react-hook-form';

import type { ISeoObject } from '../../service/seo/seo.interface';
import { fetchSeoObjects } from '../../service/seo/seo.service';
import { Badge } from '../ui/badge';
import { Button } from '../ui/button';
import { Input } from '../ui/input';

import { OptionRow, type OptionCopy } from './option-row';

const DEBOUNCE_MS = 350;

/** The IDs a field holds, as the option stores them: "12, 40, 107". */
const parseIds = (value: string): number[] =>
  value
    .split(',')
    .map(part => Number(part.trim()))
    .filter(id => Number.isInteger(id) && id > 0);

const asList = (ids: number[]): string => ids.join(', ');

/**
 * Searches the site and reports what is chosen. Used both by the row that
 * holds a list of IDs and by the button that fills an address.
 */
export const ObjectSearch = ({
  kind,
  chosen,
  onPick,
  placeholder,
  publishedOnly = false,
}: {
  kind: 'post' | 'term';
  chosen: number[];
  onPick: (item: ISeoObject) => void;
  placeholder: string;
  /** Only what visitors can open: a redirect destination, never a draft. */
  publishedOnly?: boolean;
}): JSX.Element => {
  const [search, setSearch] = useState('');
  const [items, setItems] = useState<ISeoObject[] | null>(null);
  const [busy, setBusy] = useState(false);
  const request = useRef(0);

  useEffect(() => {
    const term = search.trim();
    if (term === '') {
      setItems(null);
      return undefined;
    }
    setBusy(true);
    const ticket = ++request.current;
    const timer = window.setTimeout(() => {
      fetchSeoObjects({ kind, search: term, published: publishedOnly })
        .then(data => {
          if (ticket === request.current) {
            setItems(data.items);
          }
        })
        .catch(() => {
          if (ticket === request.current) {
            setItems([]);
          }
        })
        .finally(() => {
          if (ticket === request.current) {
            setBusy(false);
          }
        });
    }, DEBOUNCE_MS);
    return () => window.clearTimeout(timer);
  }, [kind, search, publishedOnly]);

  return (
    <div className="flex flex-col gap-1.5">
      <div className="relative">
        <SearchIcon className="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground" />
        <Input
          value={search}
          placeholder={placeholder}
          className="pl-8"
          onChange={event => setSearch(event.target.value)}
        />
        {busy && (
          <LoaderCircleIcon className="absolute top-1/2 right-2.5 size-4 -translate-y-1/2 animate-spin text-muted-foreground" />
        )}
      </div>
      {items !== null && (
        <ul className="max-h-56 overflow-auto rounded-md border border-border">
          {items.length === 0 ? (
            <li className="px-3 py-2 text-sm text-muted-foreground">
              Nothing by that name.
            </li>
          ) : (
            items.map(item => (
              <li key={item.id}>
                <button
                  type="button"
                  disabled={chosen.includes(item.id)}
                  className="flex w-full flex-col items-start gap-0.5 px-3 py-2 text-left hover:bg-muted disabled:opacity-50"
                  onClick={() => {
                    onPick(item);
                    setSearch('');
                    setItems(null);
                  }}
                >
                  <span className="text-sm text-foreground">{item.title}</span>
                  <span className="text-xs text-muted-foreground">
                    {item.subtitle}
                  </span>
                </button>
              </li>
            ))
          )}
        </ul>
      )}
    </div>
  );
};

/**
 * The chips of what is chosen and the search under them.
 */
const ObjectsField = ({
  value,
  kind,
  placeholder,
  onChange,
}: {
  value: string;
  kind: 'post' | 'term';
  placeholder: string;
  onChange: (value: string) => void;
}): JSX.Element => {
  const [known, setKnown] = useState<Record<number, ISeoObject>>({});
  const ids = useMemo(() => parseIds(value), [value]);
  const missing = useMemo(
    () => ids.filter(id => !known[id]).join(','),
    [ids, known]
  );

  // The names behind the IDs a setting already held, asked for once.
  useEffect(() => {
    if (missing === '') {
      return;
    }
    fetchSeoObjects({ kind, ids: parseIds(missing) })
      .then(data =>
        setKnown(current => ({
          ...current,
          ...Object.fromEntries(data.items.map(item => [item.id, item])),
        }))
      )
      .catch(() => undefined);
  }, [kind, missing]);

  return (
    <div className="flex max-w-xl flex-col gap-2">
      {ids.length > 0 && (
        <ul className="flex flex-wrap gap-1.5">
          {ids.map(id => (
            <li key={id}>
              <Badge variant="secondary" className="gap-1 pr-1">
                {known[id]?.title ?? `#${id}`}
                <Button
                  type="button"
                  variant="ghost"
                  size="icon-xs"
                  aria-label={`Remove ${known[id]?.title ?? id}`}
                  onClick={() => onChange(asList(ids.filter(o => o !== id)))}
                >
                  <XIcon />
                </Button>
              </Badge>
            </li>
          ))}
        </ul>
      )}
      <ObjectSearch
        kind={kind}
        chosen={ids}
        placeholder={placeholder}
        onPick={item => {
          setKnown(current => ({ ...current, [item.id]: item }));
          onChange(asList([...ids, item.id]));
        }}
      />
    </div>
  );
};

/**
 * A setting that holds a list of IDs, shown as the names behind them: the
 * merchant searches the site and picks, instead of looking up that the
 * page they mean is number 412. What is stored stays the comma separated
 * list, so nothing else has to change.
 */
export function ObjectsRow<T extends FieldValues>({
  control,
  name,
  copy,
  kind,
  error,
  placeholder,
}: {
  control: Control<T>;
  name: FieldPath<T>;
  copy: OptionCopy;
  kind: 'post' | 'term';
  error?: string;
  placeholder: string;
}): JSX.Element {
  return (
    <Controller
      control={control}
      name={name}
      render={({ field }) => (
        <OptionRow copy={copy} error={error}>
          <ObjectsField
            value={String(field.value ?? '')}
            kind={kind}
            placeholder={placeholder}
            onChange={field.onChange}
          />
        </OptionRow>
      )}
    />
  );
}

/**
 * The custom fields the pages of a post type actually carry, offered under
 * the setting that feeds them to the analysis: the merchant clicks one
 * instead of recalling how the theme spelled it.
 */
export const MetaKeyHint = ({
  postType,
  value,
  onChange,
}: {
  postType: string;
  value: string;
  onChange: (value: string) => void;
}): JSX.Element => {
  const [items, setItems] = useState<ISeoObject[] | null>(null);
  const [busy, setBusy] = useState(false);
  const chosen = value
    .split('\n')
    .map(line => line.trim())
    .filter(Boolean);

  const load = (): void => {
    setBusy(true);
    fetchSeoObjects({ kind: 'meta', postType })
      .then(data => setItems(data.items))
      .catch(() => setItems([]))
      .finally(() => setBusy(false));
  };

  if (items === null) {
    return (
      <Button
        type="button"
        variant="link"
        size="xs"
        className="px-0"
        disabled={busy}
        onClick={load}
      >
        {busy && <LoaderCircleIcon className="animate-spin" />}
        Show the fields these pages carry
      </Button>
    );
  }

  if (items.length === 0) {
    return <span>These pages carry no custom fields of their own.</span>;
  }

  return (
    <ul className="flex flex-wrap gap-1.5">
      {items
        .filter(item => !chosen.includes(item.title))
        .map(item => (
          <li key={item.title}>
            <Button
              type="button"
              variant="outline"
              size="xs"
              onClick={() => onChange([...chosen, item.title].join('\n'))}
            >
              {item.title}
              <span className="text-muted-foreground">{item.subtitle}</span>
            </Button>
          </li>
        ))}
    </ul>
  );
};