import { useState, useEffect } from 'react'
import { api } from '../utils/api'
import PromptEditModal from '../components/PromptEditModal'
import PipelineConfigModal from '../components/PipelineConfigModal'
import { Star, Trash2, Edit, Copy } from 'lucide-react'

export default function AdminPromptsPage() {
  const [activeTab, setActiveTab] = useState('prompts') // 'prompts' | 'pipelines'

  // Prompts state
  const [prompts, setPrompts] = useState([])
  const [filteredPrompts, setFilteredPrompts] = useState([])
  const [category, setCategory] = useState('all')
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  const [editingPrompt, setEditingPrompt] = useState(null)
  const [showNewPrompt, setShowNewPrompt] = useState(false)

  // Pipeline configs state
  const [pipelineConfigs, setPipelineConfigs] = useState([])
  const [pipelineLoading, setPipelineLoading] = useState(false)
  const [editingPipeline, setEditingPipeline] = useState(null)
  const [showNewPipeline, setShowNewPipeline] = useState(false)

  const categories = [
    { id: 'all', label: 'Alle Kategorien' },
    { id: 'körper', label: 'Körper' },
    { id: 'ernährung', label: 'Ernährung' },
    { id: 'training', label: 'Training' },
    { id: 'schlaf', label: 'Schlaf' },
    { id: 'vitalwerte', label: 'Vitalwerte' },
    { id: 'ziele', label: 'Ziele' },
    { id: 'ganzheitlich', label: 'Ganzheitlich' }
  ]

  useEffect(() => {
    loadPrompts()
    loadPipelineConfigs()
  }, [])

  useEffect(() => {
    if (category === 'all') {
      setFilteredPrompts(prompts)
    } else {
      setFilteredPrompts(prompts.filter(p => p.category === category))
    }
  }, [category, prompts])

  const loadPrompts = async () => {
    try {
      setLoading(true)
      const data = await api.listAdminPrompts()
      setPrompts(data)
      setError(null)
    } catch (e) {
      setError(e.message)
    } finally {
      setLoading(false)
    }
  }

  const handleToggleActive = async (prompt) => {
    try {
      await api.updatePrompt(prompt.id, { active: !prompt.active })
      await loadPrompts()
    } catch (e) {
      alert('Fehler: ' + e.message)
    }
  }

  const handleDelete = async (prompt) => {
    if (!confirm(`Prompt "${prompt.name}" wirklich löschen?`)) return

    try {
      await api.deletePrompt(prompt.id)
      await loadPrompts()
    } catch (e) {
      alert('Fehler: ' + e.message)
    }
  }

  const handleDuplicate = async (prompt) => {
    try {
      await api.duplicatePrompt(prompt.id)
      await loadPrompts()
    } catch (e) {
      alert('Fehler: ' + e.message)
    }
  }

  const handleMoveUp = async (prompt) => {
    const idx = filteredPrompts.findIndex(p => p.id === prompt.id)
    if (idx === 0) return // Already at top

    const above = filteredPrompts[idx - 1]
    const newOrder = filteredPrompts.map(p => p.id)
    newOrder[idx] = above.id
    newOrder[idx - 1] = prompt.id

    try {
      await api.reorderPrompts(newOrder)
      await loadPrompts()
    } catch (e) {
      alert('Fehler: ' + e.message)
    }
  }

  const handleMoveDown = async (prompt) => {
    const idx = filteredPrompts.findIndex(p => p.id === prompt.id)
    if (idx === filteredPrompts.length - 1) return // Already at bottom

    const below = filteredPrompts[idx + 1]
    const newOrder = filteredPrompts.map(p => p.id)
    newOrder[idx] = below.id
    newOrder[idx + 1] = prompt.id

    try {
      await api.reorderPrompts(newOrder)
      await loadPrompts()
    } catch (e) {
      alert('Fehler: ' + e.message)
    }
  }

  const handleSavePrompt = async () => {
    await loadPrompts()
    setEditingPrompt(null)
    setShowNewPrompt(false)
  }

  // Pipeline Config handlers
  const loadPipelineConfigs = async () => {
    try {
      setPipelineLoading(true)
      const data = await api.listPipelineConfigs()
      setPipelineConfigs(data)
    } catch (e) {
      setError(e.message)
    } finally {
      setPipelineLoading(false)
    }
  }

  const handleDeletePipeline = async (config) => {
    if (!confirm(`Pipeline-Config "${config.name}" wirklich löschen?`)) return

    try {
      await api.deletePipelineConfig(config.id)
      await loadPipelineConfigs()
    } catch (e) {
      alert('Fehler: ' + e.message)
    }
  }

  const handleSetDefaultPipeline = async (config) => {
    try {
      await api.setDefaultPipelineConfig(config.id)
      await loadPipelineConfigs()
    } catch (e) {
      alert('Fehler: ' + e.message)
    }
  }

  const handleSavePipeline = async () => {
    await loadPipelineConfigs()
    setEditingPipeline(null)
    setShowNewPipeline(false)
  }

  if (loading) {
    return (
      <div className="page">
        <div style={{textAlign:'center', padding:40}}>
          <div className="spinner"/>
        </div>
      </div>
    )
  }

  return (
    <div className="page">
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:24}}>
        <h1 className="page-title">KI-Prompts & Pipelines</h1>
        <button
          className="btn btn-primary"
          onClick={() => activeTab === 'prompts' ? setShowNewPrompt(true) : setShowNewPipeline(true)}
        >
          {activeTab === 'prompts' ? '+ Neuer Prompt' : '+ Neue Pipeline'}
        </button>
      </div>

      {/* Tab Switcher */}
      <div style={{display:'flex', gap:12, marginBottom:24, borderBottom:'2px solid var(--border)'}}>
        <button
          onClick={() => setActiveTab('prompts')}
          style={{
            padding:'12px 24px', background:'none', border:'none',
            borderBottom: activeTab === 'prompts' ? '2px solid var(--accent)' : '2px solid transparent',
            marginBottom:-2, cursor:'pointer', fontSize:14, fontWeight:activeTab === 'prompts' ? 600 : 400,
            color: activeTab === 'prompts' ? 'var(--accent)' : 'var(--text2)'
          }}
        >
          Prompts ({prompts.length})
        </button>
        <button
          onClick={() => setActiveTab('pipelines')}
          style={{
            padding:'12px 24px', background:'none', border:'none',
            borderBottom: activeTab === 'pipelines' ? '2px solid var(--accent)' : '2px solid transparent',
            marginBottom:-2, cursor:'pointer', fontSize:14, fontWeight:activeTab === 'pipelines' ? 600 : 400,
            color: activeTab === 'pipelines' ? 'var(--accent)' : 'var(--text2)'
          }}
        >
          Pipeline-Konfigurationen ({pipelineConfigs.length})
        </button>
      </div>

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

      {/* Prompts Tab */}
      {activeTab === 'prompts' && (
        <>
          {/* Category Filter */}
          <div style={{marginBottom:24}}>
        <label style={{fontSize:13, fontWeight:600, marginBottom:8, display:'block'}}>
          Kategorie filtern:
        </label>
        <select
          className="form-select"
          value={category}
          onChange={e => setCategory(e.target.value)}
          style={{maxWidth:300}}
        >
          {categories.map(cat => (
            <option key={cat.id} value={cat.id}>{cat.label}</option>
          ))}
        </select>
      </div>

      {/* Prompts Table */}
      <div className="card">
        <table style={{width:'100%', borderCollapse:'collapse'}}>
          <thead>
            <tr style={{borderBottom:'2px solid var(--border)', textAlign:'left'}}>
              <th style={{padding:'12px 8px', fontSize:12, fontWeight:600, color:'var(--text3)'}}>
                Titel
              </th>
              <th style={{padding:'12px 8px', fontSize:12, fontWeight:600, color:'var(--text3)'}}>
                Kategorie
              </th>
              <th style={{padding:'12px 8px', fontSize:12, fontWeight:600, color:'var(--text3)'}}>
                Aktiv
              </th>
              <th style={{padding:'12px 8px', fontSize:12, fontWeight:600, color:'var(--text3)'}}>
                Reihenfolge
              </th>
              <th style={{padding:'12px 8px', fontSize:12, fontWeight:600, color:'var(--text3)'}}>
                Aktionen
              </th>
            </tr>
          </thead>
          <tbody>
            {filteredPrompts.map((prompt, idx) => (
              <tr key={prompt.id} style={{borderBottom:'1px solid var(--border)'}}>
                <td style={{padding:'12px 8px'}}>
                  <div style={{fontWeight:500, fontSize:14}}>{prompt.name}</div>
                  {prompt.description && (
                    <div style={{fontSize:11, color:'var(--text3)', marginTop:2}}>
                      {prompt.description}
                    </div>
                  )}
                  <div style={{fontSize:10, color:'var(--text3)', marginTop:4}}>
                    {prompt.slug}
                  </div>
                </td>
                <td style={{padding:'12px 8px'}}>
                  <span style={{
                    padding:'4px 8px', borderRadius:4, fontSize:11, fontWeight:500,
                    background:'var(--surface2)', color:'var(--text2)'
                  }}>
                    {prompt.category || 'ganzheitlich'}
                  </span>
                </td>
                <td style={{padding:'12px 8px'}}>
                  <input
                    type="checkbox"
                    checked={prompt.active}
                    onChange={() => handleToggleActive(prompt)}
                    style={{cursor:'pointer'}}
                  />
                </td>
                <td style={{padding:'12px 8px'}}>
                  <div style={{display:'flex', gap:4}}>
                    <button
                      onClick={() => handleMoveUp(prompt)}
                      disabled={idx === 0}
                      style={{
                        padding:'4px 8px', fontSize:12, cursor: idx === 0 ? 'not-allowed' : 'pointer',
                        opacity: idx === 0 ? 0.5 : 1
                      }}
                      title="Nach oben"
                    >
                      ↑
                    </button>
                    <button
                      onClick={() => handleMoveDown(prompt)}
                      disabled={idx === filteredPrompts.length - 1}
                      style={{
                        padding:'4px 8px', fontSize:12,
                        cursor: idx === filteredPrompts.length - 1 ? 'not-allowed' : 'pointer',
                        opacity: idx === filteredPrompts.length - 1 ? 0.5 : 1
                      }}
                      title="Nach unten"
                    >
                      ↓
                    </button>
                  </div>
                </td>
                <td style={{padding:'12px 8px'}}>
                  <div style={{display:'flex', gap:6}}>
                    <button
                      className="btn"
                      onClick={() => setEditingPrompt(prompt)}
                      style={{fontSize:12, padding:'6px 12px'}}
                    >
                      Bearbeiten
                    </button>
                    <button
                      className="btn"
                      onClick={() => handleDuplicate(prompt)}
                      style={{fontSize:12, padding:'6px 12px'}}
                    >
                      Duplizieren
                    </button>
                    <button
                      className="btn"
                      onClick={() => handleDelete(prompt)}
                      style={{fontSize:12, padding:'6px 12px', color:'#D85A30'}}
                    >
                      Löschen
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>

        {filteredPrompts.length === 0 && (
          <div style={{padding:40, textAlign:'center', color:'var(--text3)'}}>
            Keine Prompts in dieser Kategorie
          </div>
        )}
      </div>
        </>
      )}

      {/* Pipelines Tab */}
      {activeTab === 'pipelines' && (
        <>
          {pipelineLoading ? (
            <div style={{textAlign:'center', padding:40}}>
              <div className="spinner"/>
            </div>
          ) : (
            <div className="card">
              <table style={{width:'100%', borderCollapse:'collapse'}}>
                <thead>
                  <tr style={{borderBottom:'2px solid var(--border)', textAlign:'left'}}>
                    <th style={{padding:'12px 8px', fontSize:12, fontWeight:600, color:'var(--text3)'}}>Name</th>
                    <th style={{padding:'12px 8px', fontSize:12, fontWeight:600, color:'var(--text3)'}}>Module</th>
                    <th style={{padding:'12px 8px', fontSize:12, fontWeight:600, color:'var(--text3)'}}>Stages</th>
                    <th style={{padding:'12px 8px', fontSize:12, fontWeight:600, color:'var(--text3)'}}>Status</th>
                    <th style={{padding:'12px 8px', fontSize:12, fontWeight:600, color:'var(--text3)'}}>Aktionen</th>
                  </tr>
                </thead>
                <tbody>
                  {pipelineConfigs.map(config => {
                    const activeModules = Object.entries(config.modules || {}).filter(([_, active]) => active)

                    return (
                      <tr key={config.id} style={{borderBottom:'1px solid var(--border)'}}>
                        <td style={{padding:'12px 8px'}}>
                          <div style={{fontWeight:500, fontSize:14}}>{config.name}</div>
                          {config.is_default && (
                            <span style={{
                              fontSize:10, padding:'2px 6px', background:'var(--accent)',
                              color:'white', borderRadius:3, marginTop:4, display:'inline-block'
                            }}>
                              Standard
                            </span>
                          )}
                          {config.description && (
                            <div style={{fontSize:11, color:'var(--text3)', marginTop:2}}>
                              {config.description}
                            </div>
                          )}
                        </td>
                        <td style={{padding:'12px 8px'}}>
                          <div style={{fontSize:11}}>
                            {activeModules.map(([name]) => name).join(', ')}
                          </div>
                          <div style={{fontSize:10, color:'var(--text3)', marginTop:2}}>
                            {activeModules.length} Module
                          </div>
                        </td>
                        <td style={{padding:'12px 8px'}}>
                          <div style={{fontSize:11}}>
                            S1: {config.stage1_prompts?.length || 0} Prompts
                          </div>
                          <div style={{fontSize:10, color:'var(--text3)'}}>
                            S2: {config.stage2_prompt ? '✓' : '-'} | S3: {config.stage3_prompt ? '✓' : '-'}
                          </div>
                        </td>
                        <td style={{padding:'12px 8px'}}>
                          <span style={{
                            fontSize:11, padding:'3px 8px', borderRadius:4,
                            background: config.active ? 'var(--accent-light)' : 'var(--surface2)',
                            color: config.active ? 'var(--accent)' : 'var(--text3)'
                          }}>
                            {config.active ? 'Aktiv' : 'Inaktiv'}
                          </span>
                        </td>
                        <td style={{padding:'12px 8px'}}>
                          <div style={{display:'flex', gap:6}}>
                            {!config.is_default && (
                              <button
                                onClick={() => handleSetDefaultPipeline(config)}
                                style={{padding:'4px 8px', fontSize:11}}
                                title="Als Standard setzen"
                              >
                                <Star size={14} />
                              </button>
                            )}
                            <button
                              onClick={() => setEditingPipeline(config)}
                              style={{padding:'4px 8px', fontSize:11}}
                              title="Bearbeiten"
                            >
                              <Edit size={14} />
                            </button>
                            <button
                              onClick={() => handleDeletePipeline(config)}
                              style={{padding:'4px 8px', fontSize:11, color:'var(--danger)'}}
                              title="Löschen"
                            >
                              <Trash2 size={14} />
                            </button>
                          </div>
                        </td>
                      </tr>
                    )
                  })}
                </tbody>
              </table>

              {pipelineConfigs.length === 0 && (
                <div style={{padding:40, textAlign:'center', color:'var(--text3)'}}>
                  Noch keine Pipeline-Konfigurationen vorhanden
                </div>
              )}
            </div>
          )}
        </>
      )}

      {/* Edit Modals */}
      {(editingPrompt || showNewPrompt) && (
        <PromptEditModal
          prompt={editingPrompt}
          onSave={handleSavePrompt}
          onClose={() => {
            setEditingPrompt(null)
            setShowNewPrompt(false)
          }}
        />
      )}

      {(editingPipeline || showNewPipeline) && (
        <PipelineConfigModal
          config={editingPipeline}
          onSave={handleSavePipeline}
          onClose={() => {
            setEditingPipeline(null)
            setShowNewPipeline(false)
          }}
        />
      )}
    </div>
  )
}