/**
 * EditorToolbar.jsx - Toolbar met opmaakknoppen voor de Markdown editor
 *
 * Biedt knoppen voor veelgebruikte Markdown opmaak en custom directives.
 * Elke knop voegt de juiste syntax in rond de huidige selectie in de textarea.
 */

import { useCallback } from 'react';

/**
 * @param {object} props
 * @param {React.RefObject} props.textareaRef - Ref naar de textarea
 * @param {function} props.onChange - Callback wanneer content wijzigt
 * @param {function} props.onSave - Callback voor opslaan
 * @param {boolean} props.isDirty - Of er onopgeslagen wijzigingen zijn
 * @param {boolean} props.isSaving - Of er momenteel opgeslagen wordt
 */
export default function EditorToolbar({ textareaRef, onChange, onSave, isDirty, isSaving }) {
  const applyFormat = useCallback((prefix, suffix = '') => {
    const textarea = textareaRef.current;
    if (!textarea) return;

    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const value = textarea.value;
    const selected = value.substring(start, end);

    const replacement = selected
      ? `${prefix}${selected}${suffix}`
      : `${prefix}tekst${suffix}`;

    const newValue = value.substring(0, start) + replacement + value.substring(end);
    textarea.value = newValue;

    if (selected) {
      textarea.selectionStart = start + prefix.length;
      textarea.selectionEnd = start + prefix.length + selected.length;
    } else {
      textarea.selectionStart = start + prefix.length;
      textarea.selectionEnd = start + prefix.length + 'tekst'.length;
    }

    textarea.focus();
    onChange(newValue);
  }, [textareaRef, onChange]);

  const insertSnippet = useCallback((snippet) => {
    const textarea = textareaRef.current;
    if (!textarea) return;

    const start = textarea.selectionStart;
    const value = textarea.value;

    const before = start > 0 && value[start - 1] !== '\n' ? '\n\n' : '\n';
    const text = before + snippet + '\n';

    const newValue = value.substring(0, start) + text + value.substring(start);
    textarea.value = newValue;
    textarea.selectionStart = start + text.length;
    textarea.selectionEnd = start + text.length;
    textarea.focus();
    onChange(newValue);
  }, [textareaRef, onChange]);

  return (
    <div className="flex items-center gap-1 flex-wrap bg-warm-100 border-b border-warm-200 px-3 py-2">
      {/* Opmaak knoppen */}
      <button onClick={() => applyFormat('**', '**')} title="Vet (Cmd+B)" className="px-2.5 py-1.5 rounded text-warm-700 hover:bg-warm-200 hover:text-warm-900 transition-colors font-bold">B</button>
      <button onClick={() => applyFormat('*', '*')} title="Cursief (Cmd+I)" className="px-2.5 py-1.5 rounded text-warm-700 hover:bg-warm-200 hover:text-warm-900 transition-colors italic">I</button>
      <button onClick={() => applyFormat('`', '`')} title="Code" className="px-2.5 py-1.5 rounded text-warm-700 hover:bg-warm-200 hover:text-warm-900 transition-colors font-mono text-sm">&lt;&gt;</button>
      <button onClick={() => applyFormat('## ', '')} title="Kop 2 (Cmd+Shift+2)" className="px-2.5 py-1.5 rounded text-warm-700 hover:bg-warm-200 hover:text-warm-900 transition-colors text-sm font-bold">H2</button>
      <button onClick={() => applyFormat('### ', '')} title="Kop 3 (Cmd+Shift+3)" className="px-2.5 py-1.5 rounded text-warm-700 hover:bg-warm-200 hover:text-warm-900 transition-colors text-sm font-bold">H3</button>
      <button onClick={() => applyFormat('[', '](url)')} title="Link (Cmd+K)" className="px-2.5 py-1.5 rounded text-warm-700 hover:bg-warm-200 hover:text-warm-900 transition-colors">&#128279;</button>
      <button onClick={() => applyFormat('![alt](', ')')} title="Afbeelding" className="px-2.5 py-1.5 rounded text-warm-700 hover:bg-warm-200 hover:text-warm-900 transition-colors">&#128247;</button>
      <button onClick={() => applyFormat('- ', '')} title="Lijst" className="px-2.5 py-1.5 rounded text-warm-700 hover:bg-warm-200 hover:text-warm-900 transition-colors text-lg">&bull;</button>

      <div className="w-px h-6 bg-warm-300 mx-1" />

      {/* Directive knoppen */}
      <button onClick={() => insertSnippet(':::tabs{os}\n::tab[Mac]\nMac instructies hier\n\n::tab[Windows]\nWindows instructies hier\n:::')} title="OS-tabbladen invoegen" className="px-2 py-1.5 rounded text-xs font-medium text-warm-600 hover:bg-warm-200 hover:text-warm-900 transition-colors">Tabs</button>
      <button onClick={() => insertSnippet(':::warning\n**Let op:** waarschuwing hier\n:::')} title="Waarschuwingsblok invoegen" className="px-2 py-1.5 rounded text-xs font-medium text-warm-600 hover:bg-warm-200 hover:text-warm-900 transition-colors">Warning</button>
      <button onClick={() => insertSnippet(':::info\n**Let op:** informatie hier\n:::')} title="Informatieblok invoegen" className="px-2 py-1.5 rounded text-xs font-medium text-warm-600 hover:bg-warm-200 hover:text-warm-900 transition-colors">Info</button>
      <button onClick={() => insertSnippet(':::accordion[Titel]\nInhoud hier\n:::')} title="Uitklapbare sectie invoegen" className="px-2 py-1.5 rounded text-xs font-medium text-warm-600 hover:bg-warm-200 hover:text-warm-900 transition-colors">Accordion</button>
      <button onClick={() => insertSnippet(':::steps\n1. Eerste stap\n2. Tweede stap\n3. Derde stap\n:::')} title="Genummerde stappen invoegen" className="px-2 py-1.5 rounded text-xs font-medium text-warm-600 hover:bg-warm-200 hover:text-warm-900 transition-colors">Steps</button>
      <button onClick={() => insertSnippet(':::if{os=windows}\nAlleen zichtbaar op Windows\n:::')} title="Conditioneel blok invoegen" className="px-2 py-1.5 rounded text-xs font-medium text-warm-600 hover:bg-warm-200 hover:text-warm-900 transition-colors">If</button>

      {/* Spacer */}
      <div className="flex-1" />

      {/* Status en opslaan */}
      <span className={`text-xs mr-2 ${isDirty ? 'text-coral-500' : 'text-teal-500'}`}>
        {isSaving ? 'Opslaan...' : isDirty ? 'Niet opgeslagen' : 'Opgeslagen'}
      </span>
      <button
        onClick={onSave}
        disabled={!isDirty || isSaving}
        className={`px-3 py-1.5 rounded text-sm font-medium transition-colors ${
          isDirty
            ? 'bg-coral-500 text-white hover:bg-coral-600'
            : 'bg-warm-200 text-warm-400 cursor-not-allowed'
        }`}
      >
        Opslaan
      </button>
    </div>
  );
}
