import { useEffect, useId, type ReactNode } from 'react';
import { ImageIcon, InfoIcon } from 'lucide-react';
import {
  Controller,
  useWatch,
  type Control,
  type FieldPath,
  type FieldValues,
  type SetValueConfig,
  type UseFormRegister,
} from 'react-hook-form';

import { classNames } from '../../lib/utils';
import { Button } from '../ui/button';
import { Input } from '../ui/input';
import { Label } from '../ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '../ui/select';
import { Switch } from '../ui/switch';
import { Textarea } from '../ui/textarea';
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
import { templateWarnings } from '../../lib/seo/template-warnings';

import {
  useOptionHighlight,
  useOptionRegister,
  useOptionSection,
} from './settings-search';
import { VariablesMenu, type VariableOption } from './variables-menu';

/**
 * How a setting explains itself: the label and the description on the left
 * of its row, and a tooltip with the effect, the reason for the default or
 * an example on the info icon.
 */
export interface OptionCopy {
  label: string;
  description?: string;
  tip?: string;
}

export interface OptionChoice {
  value: string;
  label: string;
}

/**
 * react-hook-form's setValue narrowed to string fields: the generic form
 * cannot be typed against an unknown T, and every field written here is text.
 */
export type SetStringValue<T extends FieldValues> = (
  name: FieldPath<T>,
  value: string,
  options?: SetValueConfig
) => void;

export const OptionTip = ({
  children,
}: {
  children: ReactNode;
}): JSX.Element => (
  <Tooltip>
    <TooltipTrigger
      type="button"
      aria-label="What this setting does"
      className="inline-flex size-4 shrink-0 cursor-help items-center justify-center rounded-full text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
    >
      <InfoIcon className="size-3.5" />
    </TooltipTrigger>
    <TooltipContent className="max-w-xs text-left leading-snug">
      {children}
    </TooltipContent>
  </Tooltip>
);

/**
 * One setting, laid out the way Rank Math lays out its options: the label
 * with its tip in the left column, the control in the right one and the
 * description under the control, so the eye reads name, value, meaning.
 */
export const OptionRow = ({
  copy,
  htmlFor,
  labelId,
  onLabelClick,
  error,
  hint,
  children,
}: {
  copy: OptionCopy;
  htmlFor?: string;
  labelId?: string;
  onLabelClick?: () => void;
  error?: string;
  hint?: ReactNode;
  children: ReactNode;
}): JSX.Element => {
  const rowId = useId();
  const section = useOptionSection();
  const register = useOptionRegister();
  const highlighted = useOptionHighlight() === rowId;

  useEffect(
    () =>
      register?.({
        id: rowId,
        section,
        label: copy.label,
        description: copy.description ?? '',
        tip: copy.tip ?? '',
      }),
    [register, rowId, section, copy.label, copy.description, copy.tip]
  );

  return (
    <div
      id={rowId}
      className={classNames(
        'grid gap-2 py-5 @2xl/section:grid-cols-[minmax(0,11.5rem)_minmax(0,1fr)] @2xl/section:gap-x-8',
        highlighted &&
          'rounded-md bg-primary/5 outline-2 outline-offset-8 outline-primary/50 transition-colors'
      )}
    >
      <div className="flex items-start gap-1.5 @2xl/section:pt-1.5">
        <Label
          id={labelId}
          htmlFor={htmlFor}
          onClick={onLabelClick}
          className={classNames(
            'text-sm leading-snug font-semibold text-foreground',
            onLabelClick && 'cursor-pointer'
          )}
        >
          {copy.label}
        </Label>
        {copy.tip && (
          <span className="mt-px">
            <OptionTip>{copy.tip}</OptionTip>
          </span>
        )}
      </div>
      <div className="flex min-w-0 flex-col gap-2">
        {children}
        {copy.description && (
          <p className="text-sm leading-relaxed text-muted-foreground">
            {copy.description}
          </p>
        )}
        {error ? (
          <p className="text-xs text-destructive">{error}</p>
        ) : (
          hint && <div className="text-xs text-muted-foreground">{hint}</div>
        )}
      </div>
    </div>
  );
};

/**
 * A group of related options, one row under the other. A title marks a
 * second group inside a section; the first group of a section has none,
 * the section's header above already says what it is for.
 */
export const OptionSection = ({
  title,
  description,
  children,
}: {
  title?: string;
  description?: ReactNode;
  children: ReactNode;
}): JSX.Element => (
  <section className="@container/section">
    {title && (
      <div className="pt-6 pb-1">
        <h3 className="text-base font-semibold text-foreground">{title}</h3>
        {description && (
          <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
            {description}
          </p>
        )}
      </div>
    )}
    <div className="divide-y divide-border">{children}</div>
  </section>
);

export function ToggleRow<T extends FieldValues>({
  control,
  name,
  copy,
  disabled,
  onLabel = 'On',
  offLabel = 'Off',
}: {
  control: Control<T>;
  name: FieldPath<T>;
  copy: OptionCopy;
  disabled?: boolean;
  onLabel?: string;
  offLabel?: string;
}): JSX.Element {
  const labelId = useId();
  return (
    <Controller
      control={control}
      name={name}
      render={({ field }) => (
        <OptionRow
          copy={copy}
          labelId={labelId}
          onLabelClick={
            disabled ? undefined : () => field.onChange(!field.value)
          }
        >
          <div className="flex items-center gap-3">
            <Switch
              aria-labelledby={labelId}
              checked={Boolean(field.value)}
              onCheckedChange={field.onChange}
              onBlur={field.onBlur}
              disabled={disabled}
            />
            <span className="text-xs font-medium text-muted-foreground">
              {field.value ? onLabel : offLabel}
            </span>
          </div>
        </OptionRow>
      )}
    />
  );
}

/**
 * Whether an item is in a list field, as a toggle: "Include in sitemap" for
 * one post type flips its slug in and out of the post_types list.
 */
export function ListToggleRow<T extends FieldValues>({
  control,
  name,
  item,
  copy,
}: {
  control: Control<T>;
  name: FieldPath<T>;
  item: string;
  copy: OptionCopy;
}): JSX.Element {
  const labelId = useId();
  return (
    <Controller
      control={control}
      name={name}
      render={({ field }) => {
        const list: string[] = Array.isArray(field.value) ? field.value : [];
        const included = list.includes(item);
        const toggle = (next: boolean): void =>
          field.onChange(
            next
              ? [...list.filter(entry => entry !== item), item]
              : list.filter(entry => entry !== item)
          );
        return (
          <OptionRow
            copy={copy}
            labelId={labelId}
            onLabelClick={() => toggle(!included)}
          >
            <div className="flex items-center gap-3">
              <Switch
                aria-labelledby={labelId}
                checked={included}
                onCheckedChange={toggle}
              />
              <span className="text-xs font-medium text-muted-foreground">
                {included ? 'Included' : 'Left out'}
              </span>
            </div>
          </OptionRow>
        );
      }}
    />
  );
}

export function TextRow<T extends FieldValues>({
  register,
  name,
  copy,
  multiline,
  placeholder,
  error,
  hint,
  className,
  inputMode,
}: {
  register: UseFormRegister<T>;
  name: FieldPath<T>;
  copy: OptionCopy;
  multiline?: boolean;
  placeholder?: string;
  error?: string;
  hint?: ReactNode;
  className?: string;
  inputMode?: 'numeric' | 'text' | 'url' | 'email' | 'tel';
}): JSX.Element {
  return (
    <OptionRow copy={copy} htmlFor={name} error={error} hint={hint}>
      {multiline ? (
        <Textarea
          id={name}
          rows={2}
          placeholder={placeholder}
          aria-invalid={error ? true : undefined}
          className={className}
          {...register(name)}
        />
      ) : (
        <Input
          id={name}
          placeholder={placeholder}
          inputMode={inputMode}
          aria-invalid={error ? true : undefined}
          className={classNames('max-w-xl', className)}
          {...register(name)}
        />
      )}
    </OptionRow>
  );
}

/**
 * An image as a URL, typed or picked from the media library, with the
 * picture under it once there is one.
 *
 * @param props - Component props.
 * @param props.id - The input's id, for its label.
 * @param props.title - The media library's title.
 * @param props.value - The URL.
 * @param props.onChange - Told the new URL.
 * @param props.onBlur - Told when the input loses focus.
 * @param props.error - Marks the input invalid.
 * @return The field.
 */
export const ImageField = ({
  id,
  title,
  value,
  onChange,
  onBlur,
  error,
}: {
  id: string;
  title: string;
  value: string;
  onChange: (url: string) => void;
  onBlur?: () => void;
  error?: string;
}): JSX.Element => {
  const pick = (): void => {
    const frame = window.wp?.media?.({
      title,
      button: { text: 'Use this image' },
      multiple: false,
      library: { type: 'image' },
    });
    if (!frame) {
      return;
    }
    frame.on('select', () =>
      onChange(frame.state().get('selection').first().toJSON().url)
    );
    frame.open();
  };

  return (
    <div className="flex max-w-xl flex-col gap-2">
      <div className="flex items-center gap-2">
        <Input
          id={id}
          inputMode="url"
          placeholder="https://"
          value={value}
          aria-invalid={error ? true : undefined}
          onChange={event => onChange(event.target.value)}
          onBlur={onBlur}
        />
        <Button
          type="button"
          variant="outline"
          size="sm"
          className="shrink-0"
          onClick={pick}
        >
          <ImageIcon className="size-4" />
          Choose
        </Button>
      </div>
      {value !== '' && (
        <img
          src={value}
          alt=""
          className="h-24 w-auto max-w-full self-start rounded-md border border-border object-cover"
        />
      )}
    </div>
  );
};

/** An image setting: the row with its copy and an {@link ImageField}. */
export function ImageRow<T extends FieldValues>({
  control,
  name,
  copy,
  error,
}: {
  control: Control<T>;
  name: FieldPath<T>;
  copy: OptionCopy;
  error?: string;
}): JSX.Element {
  return (
    <Controller
      control={control}
      name={name}
      render={({ field }) => (
        <OptionRow copy={copy} htmlFor={name} error={error}>
          <ImageField
            id={name}
            title={copy.label}
            value={String(field.value ?? '')}
            onChange={field.onChange}
            onBlur={field.onBlur}
            error={error}
          />
        </OptionRow>
      )}
    />
  );
}

/**
 * A title or description template: the field carries an "Insert variable"
 * menu that writes the variable where the caret is, and shows below what
 * the template renders to; left empty, what it falls back to.
 */
export function TemplateRow<T extends FieldValues>({
  control,
  register,
  setValue,
  name,
  copy,
  variables,
  preview,
  multiline,
  error,
  fallback,
}: {
  control: Control<T>;
  register: UseFormRegister<T>;
  setValue: SetStringValue<T>;
  name: FieldPath<T>;
  copy: OptionCopy;
  variables: VariableOption[];
  preview: (template: string) => string;
  multiline?: boolean;
  error?: string;
  /** What an empty field prints instead, and what that is. */
  fallback?: { template: string; label: string };
}): JSX.Element {
  const value = useWatch({ control, name });
  const current = typeof value === 'string' ? value : '';
  const rendered = preview(current);
  const fallbackRendered =
    current.trim() === '' && fallback ? preview(fallback.template) : '';
  const warnings = templateWarnings(
    String(name).split('.').pop() ?? '',
    current,
    variables
  );

  const insert = (token: string): void => {
    const element = document.getElementById(name) as
      | HTMLInputElement
      | HTMLTextAreaElement
      | null;
    let start = element?.selectionStart ?? current.length;
    let end = element?.selectionEnd ?? start;
    // Never split a variable the caret sits inside: land after it instead.
    for (const match of current.matchAll(/%[a-z_]+(?:\([^)]*\))?%/gi)) {
      const from = match.index ?? 0;
      const to = from + match[0].length;
      if (start > from && start < to) {
        start = to;
        end = Math.max(end, to);
      }
    }
    const before = current.slice(0, start);
    const after = current.slice(end);
    const spaced = `${before && !before.endsWith(' ') ? `${before} ` : before}${token}${after && !after.startsWith(' ') ? ` ${after}` : after}`;
    setValue(name, spaced, { shouldDirty: true, shouldValidate: true });
    const caret = spaced.length - after.length;
    requestAnimationFrame(() => {
      element?.focus();
      element?.setSelectionRange(caret, caret);
    });
  };

  return (
    <OptionRow
      copy={copy}
      htmlFor={name}
      error={error}
      hint={
        <span className="flex min-w-0 flex-col gap-1">
          <span className="flex min-w-0 items-center justify-between gap-3">
            <span className="flex min-w-0 items-baseline gap-1">
              <span className="shrink-0 font-medium text-foreground/70">
                Preview:
              </span>
              <span className="truncate">
                {rendered ||
                  (fallbackRendered ? (
                    <>
                      {fallbackRendered}{' '}
                      <span className="italic">({fallback?.label})</span>
                    </>
                  ) : (
                    <span className="italic">nothing</span>
                  ))}
              </span>
            </span>
            <VariablesMenu variables={variables} onPick={insert} />
          </span>
          {warnings.map(warning => (
            <span key={warning} className="text-amber-700 dark:text-amber-400">
              {warning}
            </span>
          ))}
        </span>
      }
    >
      {multiline ? (
        <Textarea
          id={name}
          rows={2}
          aria-invalid={error ? true : undefined}
          {...register(name)}
        />
      ) : (
        <Input
          id={name}
          aria-invalid={error ? true : undefined}
          {...register(name)}
        />
      )}
    </OptionRow>
  );
}

export function SelectRow<T extends FieldValues>({
  control,
  name,
  copy,
  options,
  className,
}: {
  control: Control<T>;
  name: FieldPath<T>;
  copy: OptionCopy;
  options: OptionChoice[];
  className?: string;
}): JSX.Element {
  return (
    <Controller
      control={control}
      name={name}
      render={({ field }) => (
        <OptionRow copy={copy} htmlFor={name}>
          <Select
            items={options}
            value={String(field.value ?? '')}
            onValueChange={value => field.onChange(value)}
          >
            <SelectTrigger
              id={name}
              className={classNames('w-full max-w-xl', className)}
            >
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {options.map(option => (
                <SelectItem key={option.value} value={option.value}>
                  {option.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </OptionRow>
      )}
    />
  );
}

/**
 * A short list of choices as a button group, the way Rank Math offers its
 * separator characters; a free field beside it takes anything else.
 */
export function ChoiceRow<T extends FieldValues>({
  control,
  register,
  setValue,
  name,
  copy,
  choices,
  error,
}: {
  control: Control<T>;
  register: UseFormRegister<T>;
  setValue: SetStringValue<T>;
  name: FieldPath<T>;
  copy: OptionCopy;
  choices: string[];
  error?: string;
}): JSX.Element {
  const value = useWatch({ control, name });
  return (
    <OptionRow copy={copy} htmlFor={name} error={error}>
      <div className="flex flex-wrap items-center gap-2">
        <span className="flex flex-wrap items-center gap-1">
          {choices.map(choice => (
            <Button
              key={choice}
              type="button"
              variant={value === choice ? 'default' : 'outline'}
              size="icon-sm"
              aria-label={`Use ${choice}`}
              onClick={() =>
                setValue(name, choice, {
                  shouldDirty: true,
                  shouldValidate: true,
                })
              }
            >
              {choice}
            </Button>
          ))}
        </span>
        <Input
          id={name}
          maxLength={3}
          aria-label="Custom character"
          aria-invalid={error ? true : undefined}
          className="w-16 text-center"
          {...register(name)}
        />
      </div>
    </OptionRow>
  );
}