interface FormatToolbarProps {
  inputRef: React.RefObject<HTMLInputElement | null>;
  setInput: (updater: (prev: string) => string) => void;
  disabled?: boolean;
}

// ponytail: wraps selected text in input with markdown syntax
function wrap(input: HTMLInputElement, prefix: string, suffix: string, set: (updater: (prev: string) => string) => void) {
  const start = input.selectionStart ?? 0;
  const end = input.selectionEnd ?? 0;
  const value = input.value;
  const selected = value.slice(start, end) || 'text';
  const before = value.slice(0, start);
  const after = value.slice(end);
  set(() => before + prefix + selected + suffix + after);
  // restore cursor after React re-renders
  requestAnimationFrame(() => {
    input.focus();
    input.setSelectionRange(start + prefix.length, start + prefix.length + selected.length);
  });
}

const FORMATS: { label: string; prefix: string; suffix: string; title: string }[] = [
  { label: 'B', prefix: '**', suffix: '**', title: 'Bold (Ctrl+B)' },
  { label: 'I', prefix: '*', suffix: '*', title: 'Italic (Ctrl+I)' },
  { label: 'S', prefix: '~~', suffix: '~~', title: 'Strikethrough' },
  { label: '`', prefix: '`', suffix: '`', title: 'Code' },
  { label: '||', prefix: '||', suffix: '||', title: 'Spoiler' },
];

export function FormatToolbar({ inputRef, setInput, disabled }: FormatToolbarProps) {
  return (
    <span className="flex items-center gap-0.5 shrink-0">
      {FORMATS.map((f) => (
        <button
          key={f.label}
          type="button"
          disabled={disabled}
          onClick={() => inputRef.current && wrap(inputRef.current, f.prefix, f.suffix, setInput)}
          title={f.title}
          className="text-gb-fg-f hover:text-gb-orange font-mono text-xs px-1 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {f.label}
        </button>
      ))}
    </span>
  );
}