import { useRef } from 'react'

/**
 * InlineTemplateEditor - Template-Editor für Inline-Prompts
 *
 * Props:
 * - value: Template-String
 * - onChange: (template) => void
 * - onPlaceholderPick: () => void - Öffnet Placeholder Picker
 * - textareaRef: Ref für Cursor-Position (von Parent)
 */
export function InlineTemplateEditor({ value, onChange, onPlaceholderPick, textareaRef }) {
  return (
    <div className="inline-template-editor" style={{ marginTop: '12px' }}>
      <label className="form-label">Template</label>
      <div style={{ position: 'relative' }}>
        <textarea
          ref={textareaRef}
          value={value || ''}
          onChange={(e) => onChange(e.target.value)}
          placeholder="Analysiere folgende Daten:&#10;&#10;Gewicht: {{ weight_current }}&#10;Ziel: {{ goal_weight }}&#10;&#10;Gib eine Empfehlung..."
          rows={12}
          style={{
            width: '100%',
            fontFamily: 'monospace',
            fontSize: '13px',
            padding: '12px',
            paddingRight: '120px', // Platz für Button
            borderRadius: '8px',
            border: '1px solid var(--border)',
            background: 'var(--bg)',
            color: 'var(--text1)',
            resize: 'vertical',
            lineHeight: '1.5'
          }}
        />
        <button
          className="btn-secondary"
          onClick={onPlaceholderPick}
          style={{
            position: 'absolute',
            top: '8px',
            right: '8px',
            fontSize: '11px',
            padding: '6px 10px',
            whiteSpace: 'nowrap'
          }}
        >
          {'{{ }}'} Platzhalter
        </button>
      </div>
      <div
        className="help-text"
        style={{
          fontSize: '12px',
          color: 'var(--text3)',
          marginTop: '6px'
        }}
      >
        💡 Tipp: Verwende <code style={{
          background: 'var(--surface2)',
          padding: '2px 6px',
          borderRadius: '4px',
          fontFamily: 'monospace'
        }}>{'{{ placeholder_name }}'}</code> für dynamische Werte
      </div>
    </div>
  )
}