import { useRef } from 'react'

/**
 * EndNodeConfig - Konfiguration für End Nodes
 *
 * Props:
 * - node: React Flow Node object (type='end')
 * - onChange: (nodeId, updates) => void
 * - onOpenPlaceholderPicker: () => void (optional, für späteren Placeholder Picker)
 * - textareaRef: React ref für Textarea (für Cursor-Position beim Einfügen)
 *
 * Features:
 * - Output Mode: AUTO (concatenate all analyses) vs. TEMPLATE (custom Jinja2 template)
 * - Template Editor (Textarea für Jinja2 syntax)
 * - Cursor-Positionserhaltung beim Platzhalter-Einfügen
 */
export function EndNodeConfig({ node, onChange, onOpenPlaceholderPicker, textareaRef }) {
  const localTextareaRef = useRef(null)
  const activeRef = textareaRef || localTextareaRef

  const outputMode = node.data.output_mode || 'auto'
  const template = node.data.template || ''

  const handleModeChange = (e) => {
    const newMode = e.target.value
    onChange(node.id, { output_mode: newMode })

    // Wenn zu TEMPLATE gewechselt wird und kein Template vorhanden, Beispiel einfügen
    if (newMode === 'template' && !template) {
      onChange(node.id, {
        output_mode: newMode,
        template: '# Finale Analyse\n\n{{ analysis_core }}\n\n---\nGeneriert mit Workflow Engine'
      })
    }
  }

  const handleTemplateChange = (e) => {
    onChange(node.id, { template: e.target.value })
  }

  return (
    <div className="config-section">
      <h3>End Node Konfiguration</h3>

      <label>Output-Modus</label>
      <select
        value={outputMode}
        onChange={handleModeChange}
        style={{
          width: '100%',
          padding: '8px',
          borderRadius: '4px',
          border: '1px solid var(--border)',
          background: 'var(--surface)',
          color: 'var(--text1)'
        }}
      >
        <option value="auto">AUTO - Automatisch zusammenfassen</option>
        <option value="template">TEMPLATE - Eigenes Template</option>
      </select>

      <div
        className="help-text"
        style={{
          marginTop: '8px',
          fontSize: '12px',
          color: 'var(--text3)',
          lineHeight: '1.4'
        }}
      >
        {outputMode === 'auto' && (
          <>
            <strong>AUTO-Modus:</strong> Alle analysis_core Werte werden automatisch
            zusammengefasst (backward compatible).
          </>
        )}
        {outputMode === 'template' && (
          <>
            <strong>TEMPLATE-Modus:</strong> Verwende Jinja2-Syntax für eigenes Output-Format.
            Verfügbare Variablen: Alle Node-IDs und deren Outputs.
          </>
        )}
      </div>

      {outputMode === 'template' && (
        <>
          <label style={{ marginTop: '16px' }}>
            Jinja2 Template
            {onOpenPlaceholderPicker && (
              <button
                onClick={onOpenPlaceholderPicker}
                style={{
                  marginLeft: '8px',
                  padding: '4px 8px',
                  fontSize: '11px',
                  background: 'var(--accent)',
                  color: 'white',
                  border: 'none',
                  borderRadius: '4px',
                  cursor: 'pointer'
                }}
                title="Placeholder-Auswahl öffnen"
              >
                📋 Platzhalter
              </button>
            )}
          </label>
          <textarea
            ref={activeRef}
            value={template}
            onChange={handleTemplateChange}
            placeholder="# Finale Analyse&#10;&#10;{{ node_1.analysis_core }}&#10;&#10;{{ node_2.analysis_core }}"
            rows={12}
            style={{
              width: '100%',
              padding: '8px',
              borderRadius: '4px',
              border: '1px solid var(--border)',
              background: 'var(--bg)',
              color: 'var(--text1)',
              fontFamily: 'monospace',
              fontSize: '13px',
              lineHeight: '1.6',
              resize: 'vertical'
            }}
          />

          <div
            className="help-text"
            style={{
              marginTop: '8px',
              fontSize: '11px',
              color: 'var(--text3)'
            }}
          >
            💡 Beispiel-Syntax:
            <pre
              style={{
                marginTop: '4px',
                padding: '6px',
                background: 'var(--surface2)',
                borderRadius: '4px',
                fontSize: '10px',
                overflow: 'auto'
              }}
            >
{`{{ node_1.analysis_core }}
{% if node_2.signal_intensity == "hoch" %}
  Hohe Intensität erkannt!
{% endif %}`}
            </pre>
          </div>
        </>
      )}

      <div
        className="help-text"
        style={{
          marginTop: '16px',
          fontSize: '11px',
          color: 'var(--text3)',
          paddingTop: '12px',
          borderTop: '1px solid var(--border)'
        }}
      >
        🏁 Part 3: End Node Template Engine
      </div>
    </div>
  )
}
