import React from 'react';
import type { CodeEditorHandle } from '../../../ui/CodeEditor';

/**
 * Snippet buttons for the Edit HTML modal. `caret` is the offset from the
 * start of the inserted text where the caret should land -- i.e. between the
 * open and close tags, so the next keystroke types content rather than
 * landing after the closing tag.
 */
export const SNIPPETS: { label: string; icon: string; title: string; text: string; caret: number }[] = [
  { label: 'div',     icon: 'fa-square-o',   title: 'Insert a div',        text: '<div></div>',   caret: 5 },
  { label: 'section', icon: 'fa-window-maximize', title: 'Insert a section', text: '<section></section>', caret: 9 },
  { label: 'h2',      icon: 'fa-header',     title: 'Insert a heading',    text: '<h2></h2>',     caret: 4 },
  { label: 'p',       icon: 'fa-paragraph',  title: 'Insert a paragraph',  text: '<p></p>',       caret: 3 },
  { label: 'a',       icon: 'fa-link',       title: 'Insert a link',       text: '<a href="#"></a>', caret: 12 },
  { label: 'ul',      icon: 'fa-list-ul',    title: 'Insert a list',       text: '<ul>\n  <li></li>\n</ul>', caret: 11 },
  { label: 'img',     icon: 'fa-image',      title: 'Insert an image',     text: '<img src="" alt="">', caret: 10 },
];

const btnStyle: React.CSSProperties = {
  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
  minWidth: 28, height: 28, padding: '0 7px',
  background: '#27272a', color: '#e4e4e7',
  border: '1px solid #3f3f46', borderRadius: 5,
  fontSize: 11, cursor: 'pointer',
};

export const HtmlToolbar: React.FC<{
  editorRef: React.RefObject<CodeEditorHandle>;
  onFormat: () => void;
}> = ({ editorRef, onFormat }) => {
  const insert = (text: string, caret?: number): void => {
    // The ref is null until CodeEditor mounts; clicking early must no-op.
    // Only forward a second argument when a caret offset was actually
    // given -- `insertAtCursor(text, undefined)` is a distinct call from
    // `insertAtCursor(text)` (an explicit undefined still occupies the
    // argument list), and the colour control relies on the latter so the
    // caret lands at the end of the inserted attribute, not mid-string.
    if (caret === undefined) {
      editorRef.current?.insertAtCursor(text);
    } else {
      editorRef.current?.insertAtCursor(text, caret);
    }
  };

  return (
    <div
      role="toolbar"
      aria-label="HTML editing tools"
      style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginBottom: 10, alignItems: 'center' }}
    >
      {SNIPPETS.map((s) => (
        <button
          key={s.label}
          type="button"
          data-snippet={s.label}
          title={s.title}
          aria-label={s.title}
          style={btnStyle}
          onClick={() => insert(s.text, s.caret)}
        >
          <i className={`fa ${s.icon}`} aria-hidden="true" />
        </button>
      ))}

      <span style={{ width: 1, height: 20, background: '#3f3f46', margin: '0 3px' }} aria-hidden="true" />

      <label
        title="Insert a colour style attribute at the cursor"
        style={{ ...btnStyle, padding: 0, overflow: 'hidden', position: 'relative' }}
      >
        <input
          type="color"
          aria-label="Insert colour"
          defaultValue="#3b82f6"
          onInput={(e) => insert(` style="color: ${(e.target as HTMLInputElement).value}"`)}
          style={{ width: 40, height: 34, border: 'none', background: 'none', cursor: 'pointer', padding: 0 }}
        />
      </label>

      <button
        type="button"
        data-action="format"
        title="Re-indent the markup"
        style={{ ...btnStyle, marginLeft: 'auto', fontWeight: 600, gap: 5 }}
        onClick={onFormat}
      >
        <i className="fa fa-indent" aria-hidden="true" /> Format
      </button>
    </div>
  );
};