import { useId, type ReactNode } from 'react';
import { ImageIcon, XIcon } from 'lucide-react';

import { OptionTip } from '../../components/seo/option-row';
import {
  VariablesMenu,
  type VariableOption,
} from '../../components/seo/variables-menu';
import { Button } from '../../components/ui/button';
import { Checkbox } from '../../components/ui/checkbox';
import { Input } from '../../components/ui/input';
import { Label } from '../../components/ui/label';
import { Switch } from '../../components/ui/switch';
import { Textarea } from '../../components/ui/textarea';
import { classNames } from '../../lib/utils';
import { useAttachmentSize, useAttachmentUrl } from '../hooks/use-seo-meta';
import { textWidth } from '../lib/text-width';

/** A label with its tooltip, compact for the 280px sidebar. */
export const FieldHeader = ({
  label,
  tip,
  htmlFor,
  children,
}: {
  label: string;
  tip?: string;
  htmlFor?: string;
  children?: ReactNode;
}): JSX.Element => (
  <div className="flex min-h-5 items-center gap-1.5">
    <Label htmlFor={htmlFor} className="text-xs font-semibold">
      {label}
    </Label>
    {tip && <OptionTip>{tip}</OptionTip>}
    {children && <span className="ml-auto flex items-center">{children}</span>}
  </div>
);

/**
 * The bar under a title or description: how long it is against the range
 * Google shows, green inside the range, amber when short, red when cut.
 */
export const LengthBar = ({
  length,
  min,
  max,
  pixels,
  maxPixels,
}: {
  length: number;
  min: number;
  max: number;
  /** The rendered width, when measured, judged against maxPixels. */
  pixels?: number;
  maxPixels?: number;
}): JSX.Element => {
  const measured =
    pixels !== undefined && maxPixels !== undefined && pixels > 0;
  const percent = Math.min(
    100,
    Math.round(
      measured ? (pixels / (maxPixels as number)) * 100 : (length / max) * 100
    )
  );
  const cut = measured ? pixels > (maxPixels as number) : length > max;
  const tone =
    length === 0
      ? 'bg-muted-foreground/30'
      : cut
        ? 'bg-red-500'
        : length < min
          ? 'bg-amber-500'
          : 'bg-emerald-500';
  return (
    <div className="flex items-center gap-2">
      <div className="h-1 flex-1 overflow-hidden rounded-full bg-muted">
        <div
          className={classNames('h-full rounded-full transition-all', tone)}
          style={{ width: `${percent}%` }}
        />
      </div>
      <span
        className="text-[11px] tabular-nums text-muted-foreground"
        title={
          measured
            ? `${pixels} of the ${maxPixels} pixels Google shows`
            : undefined
        }
      >
        {length} / {max}
        {measured && (
          <span className={classNames(cut && 'text-red-600')}>
            {' '}
            · {pixels} / {maxPixels} px
          </span>
        )}
      </span>
    </div>
  );
};

/** A template field: text plus the variables menu, the rendered preview and the length bar. */
export const TemplateField = ({
  label,
  tip,
  value,
  onChange,
  placeholder,
  variables,
  rendered,
  min,
  max,
  multiline,
  font,
  maxPixels,
}: {
  label: string;
  tip?: string;
  value: string;
  onChange: (value: string) => void;
  placeholder: string;
  variables: VariableOption[];
  rendered: string;
  min: number;
  max: number;
  multiline?: boolean;
  /** Measure the rendered text in this font against maxPixels, like Google does. */
  font?: string;
  maxPixels?: number;
}): JSX.Element => {
  const id = useId();
  const pixels = font ? textWidth(rendered, font) : undefined;
  const insert = (token: string): void => {
    const element = document.getElementById(id) as
      | HTMLInputElement
      | HTMLTextAreaElement
      | null;
    // An empty field prints its template: the variable goes into that, at
    // its end, not in its place (a title that became just %focuskw%).
    const text = value === '' ? placeholder : value;
    const start =
      value === '' ? text.length : (element?.selectionStart ?? text.length);
    const end = value === '' ? start : (element?.selectionEnd ?? start);
    const before = text.slice(0, start);
    const after = text.slice(end);
    onChange(
      `${before && !before.endsWith(' ') ? `${before} ` : before}${token}${
        after && !after.startsWith(' ') ? ` ${after}` : after
      }`
    );
    requestAnimationFrame(() => element?.focus());
  };

  return (
    <div className="flex flex-col gap-1.5">
      <FieldHeader label={label} tip={tip} htmlFor={id}>
        <VariablesMenu variables={variables} onPick={insert} />
      </FieldHeader>
      {multiline ? (
        <Textarea
          id={id}
          rows={3}
          value={value}
          placeholder={placeholder}
          onChange={event => onChange(event.target.value)}
        />
      ) : (
        <Input
          id={id}
          value={value}
          placeholder={placeholder}
          onChange={event => onChange(event.target.value)}
        />
      )}
      <LengthBar
        length={rendered.length}
        min={min}
        max={max}
        pixels={pixels}
        maxPixels={maxPixels}
      />
    </div>
  );
};

export const TextField = ({
  label,
  tip,
  value,
  onChange,
  placeholder,
  type = 'text',
  multiline,
  warning,
}: {
  label: string;
  tip?: string;
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  type?: 'text' | 'url';
  multiline?: boolean;
  /** A problem with the value, shown under the field. */
  warning?: string;
}): JSX.Element => {
  const id = useId();
  return (
    <div className="flex flex-col gap-1.5">
      <FieldHeader label={label} tip={tip} htmlFor={id} />
      {multiline ? (
        <Textarea
          id={id}
          rows={3}
          value={value}
          placeholder={placeholder}
          onChange={event => onChange(event.target.value)}
        />
      ) : (
        <Input
          id={id}
          type={type}
          value={value}
          placeholder={placeholder}
          aria-invalid={warning ? true : undefined}
          onChange={event => onChange(event.target.value)}
        />
      )}
      {warning && (
        <p className="text-xs text-amber-700 dark:text-amber-400">{warning}</p>
      )}
    </div>
  );
};

export const ToggleField = ({
  label,
  tip,
  checked,
  onChange,
  description,
}: {
  label: string;
  tip?: string;
  checked: boolean;
  onChange: (checked: boolean) => void;
  description?: string;
}): JSX.Element => {
  const id = useId();
  return (
    <label className="flex cursor-pointer items-start justify-between gap-3 py-1">
      <span className="flex flex-col gap-0.5">
        <span className="flex items-center gap-1.5 text-xs font-semibold text-foreground">
          {label}
          {tip && <OptionTip>{tip}</OptionTip>}
        </span>
        {description && (
          <span className="text-xs text-muted-foreground">{description}</span>
        )}
      </span>
      <Switch
        id={id}
        size="sm"
        checked={checked}
        onCheckedChange={onChange}
        className="mt-0.5"
      />
    </label>
  );
};

export const CheckboxField = ({
  label,
  tip,
  checked,
  onChange,
}: {
  label: string;
  tip?: string;
  checked: boolean;
  onChange: (checked: boolean) => void;
}): JSX.Element => (
  <label className="flex cursor-pointer items-center gap-2 text-sm">
    <Checkbox
      checked={checked}
      onCheckedChange={next => onChange(Boolean(next))}
    />
    <span className="flex items-center gap-1.5">
      {label}
      {tip && <OptionTip>{tip}</OptionTip>}
    </span>
  </label>
);

/** An image chosen from the media library, shown as a thumbnail. */
export const ImageField = ({
  label,
  tip,
  imageId,
  imageUrl,
  onChange,
  minSize,
}: {
  label: string;
  tip?: string;
  imageId: number;
  imageUrl: string;
  onChange: (image: { id: number; url: string }) => void;
  /** The size the image should have at least, said under it when smaller. */
  minSize?: { width: number; height: number };
}): JSX.Element => {
  const attachmentUrl = useAttachmentUrl(imageId);
  const size = useAttachmentSize(imageId);
  const shown = attachmentUrl || imageUrl;
  const small =
    minSize && size
      ? size.width < minSize.width || size.height < minSize.height
      : false;

  const pick = (): void => {
    const frame = window.wp?.media?.({
      title: 'Choose the image to share',
      button: { text: 'Use this image' },
      multiple: false,
      library: { type: 'image' },
    });
    if (!frame) {
      return;
    }
    frame.on('select', () => {
      const chosen = frame.state().get('selection').first().toJSON();
      onChange({ id: chosen.id, url: chosen.url });
    });
    frame.open();
  };

  return (
    <div className="flex flex-col gap-1.5">
      <FieldHeader label={label} tip={tip} />
      {shown ? (
        <div className="relative overflow-hidden rounded-lg border border-border">
          <img src={shown} alt="" className="block h-32 w-full object-cover" />
          <Button
            type="button"
            variant="secondary"
            size="icon-xs"
            aria-label="Remove image"
            className="absolute top-1.5 right-1.5"
            onClick={() => onChange({ id: 0, url: '' })}
          >
            <XIcon />
          </Button>
        </div>
      ) : (
        <Button
          type="button"
          variant="outline"
          size="sm"
          className="justify-start"
          onClick={pick}
        >
          <ImageIcon />
          Choose image
        </Button>
      )}
      {shown && small && size && minSize && (
        <p className="text-xs text-amber-700">
          {size.width} × {size.height} px: under {minSize.width} ×{' '}
          {minSize.height}, so X and Facebook show it small or cropped.
        </p>
      )}
      {shown && (
        <Button
          type="button"
          variant="ghost"
          size="xs"
          className="self-start"
          onClick={pick}
        >
          Change image
        </Button>
      )}
    </div>
  );
};