import { useState, useEffect, useRef } from 'react'
import { api } from '../utils/api'
import { X, Plus, Trash2, MoveUp, MoveDown, Code } from 'lucide-react'
import PlaceholderPicker from './PlaceholderPicker'

/**
 * Unified Prompt Editor Modal (Issue #28 Phase 3)
 *
 * Supports both prompt types:
 * - Base: Single reusable template
 * - Pipeline: Multi-stage workflow with dynamic stages
 */
export default function UnifiedPromptModal({ prompt, onSave, onClose }) {
  const [name, setName] = useState('')
  const [slug, setSlug] = useState('')
  const [displayName, setDisplayName] = useState('')
  const [description, setDescription] = useState('')
  const [type, setType] = useState('pipeline') // 'base' or 'pipeline'
  const [category, setCategory] = useState('ganzheitlich')
  const [active, setActive] = useState(true)
  const [sortOrder, setSortOrder] = useState(0)

  // Base prompt fields
  const [template, setTemplate] = useState('')
  const [outputFormat, setOutputFormat] = useState('text')

  // Pipeline prompt fields
  const [stages, setStages] = useState([
    {
      stage: 1,
      prompts: []
    }
  ])

  // Available prompts for reference selection
  const [availablePrompts, setAvailablePrompts] = useState([])

  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)
  const [showPlaceholderPicker, setShowPlaceholderPicker] = useState(false)
  const [pickerTarget, setPickerTarget] = useState(null) // 'base' or {stage, promptIdx}
  const [cursorPosition, setCursorPosition] = useState(null) // Track cursor position for insertion
  const baseTemplateRef = useRef(null)
  const stageTemplateRefs = useRef({}) // Map of stage_promptIdx -> ref

  // Test functionality
  const [testing, setTesting] = useState(false)
  const [testResult, setTestResult] = useState(null)
  const [showDebug, setShowDebug] = useState(false)

  useEffect(() => {
    loadAvailablePrompts()

    if (prompt) {
      // Edit mode
      setName(prompt.name || '')
      setSlug(prompt.slug || '')
      setDisplayName(prompt.display_name || '')
      setDescription(prompt.description || '')
      setType(prompt.type || 'pipeline')
      setCategory(prompt.category || 'ganzheitlich')
      setActive(prompt.active ?? true)
      setSortOrder(prompt.sort_order || 0)
      setTemplate(prompt.template || '')
      setOutputFormat(prompt.output_format || 'text')

      // Parse stages if editing pipeline
      if (prompt.type === 'pipeline' && prompt.stages) {
        try {
          const parsedStages = typeof prompt.stages === 'string'
            ? JSON.parse(prompt.stages)
            : prompt.stages
          setStages(parsedStages.length > 0 ? parsedStages : [{ stage: 1, prompts: [] }])
        } catch (e) {
          console.error('Failed to parse stages:', e)
          setStages([{ stage: 1, prompts: [] }])
        }
      }
    }
  }, [prompt])

  const loadAvailablePrompts = async () => {
    try {
      const prompts = await api.listAdminPrompts()
      setAvailablePrompts(prompts)
    } catch (e) {
      setError('Fehler beim Laden der Prompts: ' + e.message)
    }
  }

  const addStage = () => {
    const nextStageNum = Math.max(...stages.map(s => s.stage), 0) + 1
    setStages([...stages, { stage: nextStageNum, prompts: [] }])
  }

  const removeStage = (stageNum) => {
    if (stages.length === 1) {
      setError('Mindestens eine Stage erforderlich')
      return
    }
    setStages(stages.filter(s => s.stage !== stageNum))
  }

  const moveStage = (stageNum, direction) => {
    const idx = stages.findIndex(s => s.stage === stageNum)
    if (idx === -1) return

    const newStages = [...stages]
    if (direction === 'up' && idx > 0) {
      [newStages[idx], newStages[idx - 1]] = [newStages[idx - 1], newStages[idx]]
    } else if (direction === 'down' && idx < newStages.length - 1) {
      [newStages[idx], newStages[idx + 1]] = [newStages[idx + 1], newStages[idx]]
    }

    // Renumber stages
    newStages.forEach((s, i) => s.stage = i + 1)
    setStages(newStages)
  }

  const addPromptToStage = (stageNum) => {
    setStages(stages.map(s => {
      if (s.stage === stageNum) {
        return {
          ...s,
          prompts: [...s.prompts, {
            source: 'inline',
            template: '',
            output_key: `output_${Date.now()}`,
            output_format: 'text'
          }]
        }
      }
      return s
    }))
  }

  const removePromptFromStage = (stageNum, promptIdx) => {
    setStages(stages.map(s => {
      if (s.stage === stageNum) {
        return {
          ...s,
          prompts: s.prompts.filter((_, i) => i !== promptIdx)
        }
      }
      return s
    }))
  }

  const updateStagePrompt = (stageNum, promptIdx, field, value) => {
    setStages(stages.map(s => {
      if (s.stage === stageNum) {
        const newPrompts = [...s.prompts]
        newPrompts[promptIdx] = { ...newPrompts[promptIdx], [field]: value }
        return { ...s, prompts: newPrompts }
      }
      return s
    }))
  }

  const handleSave = async () => {
    // Validation
    if (!name.trim() || !slug.trim()) {
      setError('Name und Slug sind Pflichtfelder')
      return
    }

    if (type === 'base' && !template.trim()) {
      setError('Basis-Prompts benötigen ein Template')
      return
    }

    if (type === 'pipeline' && stages.length === 0) {
      setError('Pipeline-Prompts benötigen mindestens eine Stage')
      return
    }

    if (type === 'pipeline') {
      // Validate all stages have at least one prompt
      const emptyStages = stages.filter(s => s.prompts.length === 0)
      if (emptyStages.length > 0) {
        setError(`Stage ${emptyStages[0].stage} hat keine Prompts`)
        return
      }

      // Validate all prompts have required fields
      for (const stage of stages) {
        for (const p of stage.prompts) {
          if (!p.output_key) {
            setError(`Stage ${stage.stage}: Output-Key fehlt`)
            return
          }
          if (p.source === 'inline' && !p.template) {
            setError(`Stage ${stage.stage}: Inline-Prompt ohne Template`)
            return
          }
          if (p.source === 'reference' && !p.slug) {
            setError(`Stage ${stage.stage}: Referenz-Prompt ohne Slug`)
            return
          }
        }
      }
    }

    setLoading(true)
    setError(null)

    try {
      const data = {
        name,
        slug,
        display_name: displayName,
        description,
        type,
        category,
        active,
        sort_order: sortOrder,
        output_format: outputFormat
      }

      if (type === 'base') {
        data.template = template
        data.stages = null
      } else {
        data.template = null
        data.stages = stages
      }

      if (prompt?.id) {
        await api.updateUnifiedPrompt(prompt.id, data)
      } else {
        await api.createUnifiedPrompt(data)
      }

      onSave()
    } catch (e) {
      setError(e.message)
    } finally {
      setLoading(false)
    }
  }

  const handleExport = () => {
    // Export complete prompt configuration as JSON
    const exportData = {
      name,
      slug,
      display_name: displayName,
      description,
      type,
      category,
      active,
      sort_order: sortOrder,
      output_format: outputFormat,
      template: type === 'base' ? template : null,
      stages: type === 'pipeline' ? stages : null
    }

    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `prompt-${slug || 'new'}-${new Date().toISOString().split('T')[0]}.json`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
  }

  const handleTest = async () => {
    // Can only test existing prompts (need slug in database)
    if (!prompt?.slug) {
      setError('Bitte erst speichern, dann testen')
      return
    }

    setTesting(true)
    setError(null)
    setTestResult(null)

    try {
      const result = await api.executeUnifiedPrompt(prompt.slug, null, null, true)
      setTestResult(result)
      setShowDebug(true)
    } catch (e) {
      // Show error AND try to extract debug info from error
      const errorMsg = e.message
      let debugData = null

      // Try to parse error message for embedded debug info
      try {
        const parsed = JSON.parse(errorMsg)
        if (parsed.detail) {
          setError('Test-Fehler: ' + parsed.detail)
          debugData = parsed
        } else {
          setError('Test-Fehler: ' + errorMsg)
        }
      } catch {
        setError('Test-Fehler: ' + errorMsg)
      }

      // Set result with error info so debug viewer shows it
      setTestResult({
        error: true,
        error_message: errorMsg,
        debug: debugData || { error: errorMsg }
      })
      setShowDebug(true) // ALWAYS show debug on test, even on error
    } finally {
      setTesting(false)
    }
  }

  const handleExportPlaceholders = () => {
    if (!testResult) return

    // Extract all placeholder data from test result
    const debug = testResult.debug || testResult
    const exportData = {
      export_date: new Date().toISOString(),
      prompt_slug: prompt?.slug || 'unknown',
      prompt_name: name || 'Unnamed Prompt',
      placeholders: {}
    }

    // For pipeline prompts, collect from all stages
    if (debug.stages && Array.isArray(debug.stages)) {
      debug.stages.forEach(stage => {
        exportData.placeholders[`stage_${stage.stage}`] = {
          available_variables: stage.available_variables || [],
          prompts: stage.prompts?.map(p => ({
            source: p.source,
            resolved: p.resolved_placeholders || p.ref_debug?.resolved_placeholders || {},
            unresolved: p.unresolved_placeholders || p.ref_debug?.unresolved_placeholders || []
          })) || []
        }
      })
    }

    // For base prompts or direct execution
    if (debug.resolved_placeholders) {
      exportData.placeholders.resolved = debug.resolved_placeholders
    }
    if (debug.unresolved_placeholders) {
      exportData.placeholders.unresolved = debug.unresolved_placeholders
    }
    if (debug.available_variables) {
      exportData.available_variables = debug.available_variables
    }
    if (debug.initial_variables) {
      exportData.initial_variables = debug.initial_variables
    }

    // Download as JSON
    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `placeholders-${prompt?.slug || 'test'}-${new Date().toISOString().split('T')[0]}.json`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
  }

  return (
    <div style={{
      position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      zIndex: 1000, padding: 20, overflow: 'auto'
    }}>
      <div style={{
        background: 'var(--bg)', borderRadius: 12, maxWidth: 1000, width: '100%',
        maxHeight: '90vh', overflow: 'auto', padding: 24
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
          <h2 style={{ margin: 0, fontSize: 20, fontWeight: 600 }}>
            {prompt ? 'Prompt bearbeiten' : 'Neuer Prompt'}
          </h2>
          <button
            onClick={onClose}
            style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4 }}
          >
            <X size={24} color="var(--text3)" />
          </button>
        </div>

        {error && (
          <div style={{
            padding: 12, background: '#fee', color: '#c00', borderRadius: 8, marginBottom: 16, fontSize: 13
          }}>
            {error}
          </div>
        )}

        {/* Basic Info */}
        <div style={{ display: 'grid', gap: 16, marginBottom: 24 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <div>
              <label className="form-label">Name *</label>
              <input
                className="form-input"
                value={name}
                onChange={e => setName(e.target.value)}
                placeholder="Interner Name"
                style={{ width: '100%', textAlign: 'left' }}
              />
            </div>

            <div>
              <label className="form-label">Slug *</label>
              <input
                className="form-input"
                value={slug}
                onChange={e => setSlug(e.target.value)}
                placeholder="technischer_name"
                style={{ width: '100%', textAlign: 'left' }}
                disabled={!!prompt}
              />
            </div>
          </div>

          <div>
            <label className="form-label">Anzeigename</label>
            <input
              className="form-input"
              value={displayName}
              onChange={e => setDisplayName(e.target.value)}
              placeholder="Name für Benutzer (optional)"
              style={{ width: '100%', textAlign: 'left' }}
            />
          </div>

          <div>
            <label className="form-label">Beschreibung</label>
            <textarea
              className="form-input"
              value={description}
              onChange={e => setDescription(e.target.value)}
              rows={2}
              placeholder="Kurze Beschreibung des Prompts"
              style={{ width: '100%', textAlign: 'left', resize: 'vertical' }}
            />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
            <div>
              <label className="form-label">Typ *</label>
              <select
                className="form-select"
                value={type}
                onChange={e => setType(e.target.value)}
                style={{ width: '100%' }}
                disabled={!!prompt}
              >
                <option value="base">Basis-Prompt</option>
                <option value="pipeline">Pipeline</option>
              </select>
            </div>

            <div>
              <label className="form-label">Kategorie</label>
              <select
                className="form-select"
                value={category}
                onChange={e => setCategory(e.target.value)}
                style={{ width: '100%' }}
              >
                <option value="ganzheitlich">Ganzheitlich</option>
                <option value="körper">Körper</option>
                <option value="ernährung">Ernährung</option>
                <option value="training">Training</option>
                <option value="schlaf">Schlaf</option>
                <option value="pipeline">Pipeline</option>
              </select>
            </div>

            <div>
              <label className="form-label">Output-Format</label>
              <select
                className="form-select"
                value={outputFormat}
                onChange={e => setOutputFormat(e.target.value)}
                style={{ width: '100%' }}
              >
                <option value="text">Text</option>
                <option value="json">JSON</option>
              </select>
            </div>
          </div>

          <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
            <label style={{ display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }}>
              <input
                type="checkbox"
                checked={active}
                onChange={e => setActive(e.target.checked)}
              />
              <span style={{ fontSize: 13 }}>Aktiv</span>
            </label>

            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <label className="form-label" style={{ margin: 0 }}>Sortierung:</label>
              <input
                type="number"
                className="form-input"
                value={sortOrder}
                onChange={e => setSortOrder(parseInt(e.target.value) || 0)}
                style={{ width: 80, padding: '4px 8px' }}
              />
            </div>
          </div>
        </div>

        {/* Type-specific editor */}
        {type === 'base' && (
          <div style={{ marginBottom: 24 }}>
            <h3 style={{ fontSize: 16, fontWeight: 600, marginBottom: 12 }}>Template</h3>
            <textarea
              ref={baseTemplateRef}
              className="form-input"
              value={template}
              onChange={e => setTemplate(e.target.value)}
              onClick={e => setCursorPosition(e.target.selectionStart)}
              onKeyUp={e => setCursorPosition(e.target.selectionStart)}
              rows={12}
              placeholder="Prompt-Template mit {{placeholders}}..."
              style={{ width: '100%', textAlign: 'left', resize: 'vertical', fontFamily: 'monospace', fontSize: 12 }}
            />
            <div style={{ fontSize: 11, color: 'var(--text3)', marginTop: 4 }}>
              <button
                className="btn"
                onClick={() => {
                  setPickerTarget('base')
                  setShowPlaceholderPicker(true)
                }}
                style={{
                  fontSize: 12,
                  padding: '6px 12px',
                  display: 'flex',
                  alignItems: 'center',
                  gap: 6
                }}
              >
                <Code size={14} />
                Platzhalter einfügen
              </button>
            </div>
          </div>
        )}

        {type === 'pipeline' && (
          <div style={{ marginBottom: 24 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
              <h3 style={{ fontSize: 16, fontWeight: 600, margin: 0 }}>Stages ({stages.length})</h3>
              <button className="btn" onClick={addStage} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Plus size={16} /> Stage hinzufügen
              </button>
            </div>

            {stages.map((stage, sIdx) => (
              <div key={stage.stage} style={{
                background: 'var(--surface)', padding: 16, borderRadius: 8,
                border: '1px solid var(--border)', marginBottom: 12
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
                  <h4 style={{ margin: 0, fontSize: 14, fontWeight: 600 }}>Stage {stage.stage}</h4>
                  <div style={{ display: 'flex', gap: 4 }}>
                    {sIdx > 0 && (
                      <button
                        className="btn"
                        onClick={() => moveStage(stage.stage, 'up')}
                        style={{ padding: '4px 8px' }}
                      >
                        <MoveUp size={14} />
                      </button>
                    )}
                    {sIdx < stages.length - 1 && (
                      <button
                        className="btn"
                        onClick={() => moveStage(stage.stage, 'down')}
                        style={{ padding: '4px 8px' }}
                      >
                        <MoveDown size={14} />
                      </button>
                    )}
                    <button
                      className="btn"
                      onClick={() => removeStage(stage.stage)}
                      style={{ padding: '4px 8px', color: 'var(--danger)' }}
                      disabled={stages.length === 1}
                    >
                      <Trash2 size={14} />
                    </button>
                  </div>
                </div>

                {/* Prompts in this stage */}
                {stage.prompts.map((p, pIdx) => (
                  <div key={pIdx} style={{
                    background: 'var(--bg)', padding: 12, borderRadius: 6, marginBottom: 8,
                    border: '1px solid var(--border)'
                  }}>
                    <div style={{ display: 'grid', gap: 8 }}>
                      <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr 120px auto', gap: 8, alignItems: 'center' }}>
                        <select
                          className="form-select"
                          value={p.source || 'inline'}
                          onChange={e => updateStagePrompt(stage.stage, pIdx, 'source', e.target.value)}
                          style={{ fontSize: 12 }}
                        >
                          <option value="inline">Inline</option>
                          <option value="reference">Referenz</option>
                        </select>

                        <input
                          className="form-input"
                          value={p.output_key || ''}
                          onChange={e => updateStagePrompt(stage.stage, pIdx, 'output_key', e.target.value)}
                          placeholder="output_key"
                          style={{ fontSize: 12, textAlign: 'left' }}
                        />

                        <select
                          className="form-select"
                          value={p.output_format || 'text'}
                          onChange={e => updateStagePrompt(stage.stage, pIdx, 'output_format', e.target.value)}
                          style={{ fontSize: 12 }}
                        >
                          <option value="text">Text</option>
                          <option value="json">JSON</option>
                        </select>

                        <button
                          onClick={() => removePromptFromStage(stage.stage, pIdx)}
                          style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4 }}
                        >
                          <Trash2 size={16} color="var(--danger)" />
                        </button>
                      </div>

                      {p.source === 'reference' ? (
                        <select
                          className="form-select"
                          value={p.slug || ''}
                          onChange={e => updateStagePrompt(stage.stage, pIdx, 'slug', e.target.value)}
                          style={{ fontSize: 12 }}
                        >
                          <option value="">-- Prompt wählen --</option>
                          {availablePrompts
                            .filter(ap => ap.type === 'base' || !ap.type)
                            .map(ap => (
                              <option key={ap.slug} value={ap.slug}>
                                {ap.display_name || ap.name} ({ap.slug})
                              </option>
                            ))}
                        </select>
                      ) : (
                        <div>
                          <textarea
                            ref={el => stageTemplateRefs.current[`${stage.stage}_${pIdx}`] = el}
                            className="form-input"
                            value={p.template || ''}
                            onChange={e => updateStagePrompt(stage.stage, pIdx, 'template', e.target.value)}
                            onClick={e => {
                              setCursorPosition(e.target.selectionStart)
                              setPickerTarget({ stage: stage.stage, promptIdx: pIdx })
                            }}
                            onKeyUp={e => {
                              setCursorPosition(e.target.selectionStart)
                              setPickerTarget({ stage: stage.stage, promptIdx: pIdx })
                            }}
                            rows={3}
                            placeholder="Inline-Template mit {{placeholders}}..."
                            style={{ width: '100%', fontSize: 12, textAlign: 'left', resize: 'vertical', fontFamily: 'monospace' }}
                          />
                          <div style={{ fontSize: 10, color: 'var(--text3)', marginTop: 4 }}>
                            <button
                              className="btn"
                              onClick={() => {
                                setPickerTarget({ stage: stage.stage, promptIdx: pIdx })
                                setShowPlaceholderPicker(true)
                              }}
                              style={{
                                fontSize: 11,
                                padding: '4px 8px',
                                display: 'flex',
                                alignItems: 'center',
                                gap: 4
                              }}
                            >
                              <Code size={12} />
                              Platzhalter
                            </button>
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                ))}

                <button
                  className="btn"
                  onClick={() => addPromptToStage(stage.stage)}
                  style={{ fontSize: 12, display: 'flex', alignItems: 'center', gap: 4 }}
                >
                  <Plus size={14} /> Prompt hinzufügen
                </button>
              </div>
            ))}
          </div>
        )}

        {/* Debug Output */}
        {showDebug && testResult && (
          <div style={{
            marginTop: 16,
            padding: 16,
            background: 'var(--surface2)',
            borderRadius: 8,
            border: '1px solid var(--border)'
          }}>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              marginBottom: 12
            }}>
              <h3 style={{ margin: 0, fontSize: 14, fontWeight: 600 }}>
                🔬 Debug-Info
              </h3>
              <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                <button
                  className="btn"
                  onClick={handleExportPlaceholders}
                  style={{
                    padding: '4px 8px',
                    fontSize: 11,
                    background: 'var(--accent)',
                    color: 'white'
                  }}
                  title="Exportiere alle Platzhalter mit Werten als JSON"
                >
                  📋 Platzhalter exportieren
                </button>
                <button
                  onClick={() => setShowDebug(false)}
                  style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4 }}
                >
                  <X size={16} color="var(--text3)" />
                </button>
              </div>
            </div>
            <pre style={{
              fontSize: 11,
              fontFamily: 'monospace',
              background: 'var(--bg)',
              padding: 12,
              borderRadius: 6,
              overflow: 'auto',
              maxHeight: 400,
              lineHeight: 1.5,
              color: 'var(--text2)'
            }}>
              {JSON.stringify(testResult.debug || testResult, null, 2)}
            </pre>
          </div>
        )}

        {/* Actions */}
        <div style={{
          display: 'flex', gap: 12, justifyContent: 'space-between',
          paddingTop: 16, borderTop: '1px solid var(--border)'
        }}>
          <div style={{ display: 'flex', gap: 8 }}>
            <button
              className="btn"
              onClick={handleTest}
              disabled={testing || loading}
              style={{
                background: testing ? 'var(--surface)' : 'var(--accent)',
                color: testing ? 'var(--text3)' : 'white'
              }}
              title={!prompt?.slug ? 'Bitte erst speichern, dann testen' : 'Test mit Debug-Modus ausführen'}
            >
              {testing ? '🔬 Teste...' : '🔬 Test ausführen'}
            </button>
            <button
              className="btn"
              onClick={handleExport}
              disabled={loading}
              title="Exportiere Prompt-Konfiguration als JSON"
            >
              📥 Export
            </button>
          </div>
          <div style={{ display: 'flex', gap: 12 }}>
            <button className="btn" onClick={onClose}>
              Abbrechen
            </button>
            <button
              className="btn btn-primary"
              onClick={handleSave}
              disabled={loading}
            >
              {loading ? 'Speichern...' : 'Speichern'}
            </button>
          </div>
        </div>
      </div>

      {/* Placeholder Picker */}
      {showPlaceholderPicker && (
        <PlaceholderPicker
          onSelect={(placeholder) => {
            if (pickerTarget === 'base') {
              // Insert into base template at cursor position
              const pos = cursorPosition ?? template.length
              const newTemplate = template.slice(0, pos) + placeholder + template.slice(pos)
              setTemplate(newTemplate)

              // Restore focus and cursor position after insertion
              setTimeout(() => {
                if (baseTemplateRef.current) {
                  baseTemplateRef.current.focus()
                  const newPos = pos + placeholder.length
                  baseTemplateRef.current.setSelectionRange(newPos, newPos)
                  setCursorPosition(newPos)
                }
              }, 0)
            } else if (pickerTarget && typeof pickerTarget === 'object') {
              // Insert into pipeline stage template at cursor position
              const { stage: stageNum, promptIdx } = pickerTarget
              setStages(stages.map(s => {
                if (s.stage === stageNum) {
                  const newPrompts = [...s.prompts]
                  const currentTemplate = newPrompts[promptIdx].template || ''
                  const pos = cursorPosition ?? currentTemplate.length
                  const newTemplate = currentTemplate.slice(0, pos) + placeholder + currentTemplate.slice(pos)

                  newPrompts[promptIdx] = {
                    ...newPrompts[promptIdx],
                    template: newTemplate
                  }

                  // Restore focus and cursor position
                  setTimeout(() => {
                    const refKey = `${stageNum}_${promptIdx}`
                    const textarea = stageTemplateRefs.current[refKey]
                    if (textarea) {
                      textarea.focus()
                      const newPos = pos + placeholder.length
                      textarea.setSelectionRange(newPos, newPos)
                      setCursorPosition(newPos)
                    }
                  }, 0)

                  return { ...s, prompts: newPrompts }
                }
                return s
              }))
            }
          }}
          onClose={() => {
            setShowPlaceholderPicker(false)
            setPickerTarget(null)
          }}
        />
      )}
    </div>
  )
}