import { useEffect, useState } from 'react'
import { db, type FeedbackDimension, type FeedbackCategory, type FeedbackCriterionItem, type AssignmentType, type PhaseTemplate } from '../db'

export default function FeedbackStructureConfig() {
  const [dimensions, setDimensions]         = useState<FeedbackDimension[]>([])
  const [categories, setCategories]         = useState<FeedbackCategory[]>([])
  const [items, setItems]                   = useState<FeedbackCriterionItem[]>([])
  const [assignmentTypes, setAssignmentTypes] = useState<AssignmentType[]>([])
  const [expanded, setExpanded]             = useState<Set<number>>(new Set())
  const [expandedCat, setExpandedCat]       = useState<Set<number>>(new Set())
  const [showCatalogs, setShowCatalogs]     = useState(false)
  const [phaseTemplates, setPhaseTemplates] = useState<PhaseTemplate[]>([])
  const [showTypeConfig, setShowTypeConfig] = useState(false)
  const [expandedType, setExpandedType]     = useState<number | null>(null)
  const [newTypeName, setNewTypeName]       = useState('')
  const [newPhase, setNewPhase]             = useState<Record<number, { label: string; withWhom: 'lead'|'client'; isRepeatable: boolean; hasConversation: boolean; hasAssessment: boolean }>>({})
  const [typeError, setTypeError]           = useState<Record<number, string>>({})

  // Neue Einträge
  const [newDimName, setNewDimName]   = useState('')
  const [newCatName, setNewCatName]   = useState<Record<number, string>>({})
  const [newItemName, setNewItemName] = useState<Record<number, string>>({})

  const load = async () => {
    const [dims, cats, itms, types, phases] = await Promise.all([
      db.feedbackDimensions.orderBy('order').toArray(),
      db.feedbackCategories.orderBy('order').toArray(),
      db.feedbackCriterionItems.orderBy('order').toArray(),
      db.assignmentTypes.toArray(),
      db.phaseTemplates.toArray(),
    ])
    setDimensions(dims)
    setCategories(cats)
    setItems(itms)
    setAssignmentTypes(types)
    setPhaseTemplates(phases)
  }

  useEffect(() => { load() }, [])

  // ── Dimensionen ───────────────────────────────────────────────────────────

  const addDimension = async () => {
    if (!newDimName.trim()) return
    const maxOrder = dimensions.reduce((m, d) => Math.max(m, d.order), 0)
    const id = await db.feedbackDimensions.add({ name: newDimName.trim(), order: maxOrder + 1 })
    setNewDimName('')
    await load()
    setExpanded(prev => new Set([...prev, id]))
  }

  const updateDimension = async (id: number, name: string) => {
    await db.feedbackDimensions.update(id, { name })
    setDimensions(prev => prev.map(d => d.id === id ? { ...d, name } : d))
  }

  const deleteDimension = async (id: number) => {
    const cats = await db.feedbackCategories.where('dimensionId').equals(id).toArray()
    for (const cat of cats) {
      await db.feedbackCriterionItems.where('categoryId').equals(cat.id!).delete()
    }
    await db.feedbackCategories.where('dimensionId').equals(id).delete()
    await db.feedbackDimensions.delete(id)
    await load()
  }

  const moveDim = async (dim: FeedbackDimension, dir: -1 | 1) => {
    const sorted = [...dimensions].sort((a, b) => a.order - b.order)
    const idx    = sorted.findIndex(d => d.id === dim.id)
    const other  = sorted[idx + dir]
    if (!other) return
    await db.feedbackDimensions.update(dim.id!,   { order: other.order })
    await db.feedbackDimensions.update(other.id!,  { order: dim.order })
    await load()
  }

  // ── Kategorien ────────────────────────────────────────────────────────────

  const addCategory = async (dimId: number) => {
    const name = newCatName[dimId]?.trim()
    if (!name) return
    const dimCats  = categories.filter(c => c.dimensionId === dimId)
    const maxOrder = dimCats.reduce((m, c) => Math.max(m, c.order), 0)
    const id = await db.feedbackCategories.add({ dimensionId: dimId, name, order: maxOrder + 1 })
    setNewCatName(prev => ({ ...prev, [dimId]: '' }))
    await load()
    setExpandedCat(prev => new Set([...prev, id]))
  }

  const updateCategory = async (id: number, name: string) => {
    await db.feedbackCategories.update(id, { name })
    setCategories(prev => prev.map(c => c.id === id ? { ...c, name } : c))
  }

  const deleteCategory = async (id: number) => {
    await db.feedbackCriterionItems.where('categoryId').equals(id).delete()
    await db.feedbackCategories.delete(id)
    await load()
  }

  // ── Kriterium-Items ───────────────────────────────────────────────────────

  const addItem = async (catId: number) => {
    const name = newItemName[catId]?.trim()
    if (!name) return
    const catItems = items.filter(i => i.categoryId === catId)
    const maxOrder = catItems.reduce((m, i) => Math.max(m, i.order), 0)
    await db.feedbackCriterionItems.add({ categoryId: catId, name, order: maxOrder + 1 })
    setNewItemName(prev => ({ ...prev, [catId]: '' }))
    await load()
  }

  const updateItem = async (id: number, name: string) => {
    await db.feedbackCriterionItems.update(id, { name })
    setItems(prev => prev.map(i => i.id === id ? { ...i, name } : i))
  }

  const deleteItem = async (id: number) => {
    await db.feedbackCriterionItems.delete(id)
    setItems(prev => prev.filter(i => i.id !== id))
  }

  const updateItemWeight = async (id: number, weight: number) => {
    await db.feedbackCriterionItems.update(id, { weight })
    setItems(prev => prev.map(i => i.id === id ? { ...i, weight } : i))
  }

  const toggleCatalogCategory = async (type: AssignmentType, catId: number) => {
    const current = type.criteriaIds ?? []
    const next    = current.includes(catId) ? current.filter(id => id !== catId) : [...current, catId]
    await db.assignmentTypes.update(type.id!, { criteriaIds: next })
    setAssignmentTypes(prev => prev.map(t => t.id === type.id ? { ...t, criteriaIds: next } : t))
  }

  // ── AssignmentType CRUD ───────────────────────────────────────────────────

  const addAssignmentType = async () => {
    if (!newTypeName.trim()) return
    await db.assignmentTypes.add({ name: newTypeName.trim(), defaultPhaseKeys: [] })
    setNewTypeName('')
    await load()
  }

  const updateAssignmentTypeName = async (id: number, name: string) => {
    await db.assignmentTypes.update(id, { name })
    setAssignmentTypes(prev => prev.map(t => t.id === id ? { ...t, name } : t))
  }

  const deleteAssignmentType = async (id: number) => {
    const count = await db.assignments.where('assignmentTypeId').equals(id).count()
    if (count > 0) {
      setTypeError(prev => ({ ...prev, [id]: `Kann nicht gelöscht werden – ${count} Assignment(s) verwenden diesen Typ.` }))
      return
    }
    await db.phaseTemplates.where('assignmentTypeId').equals(id).delete()
    await db.assignmentTypes.delete(id)
    setTypeError(prev => { const n = { ...prev }; delete n[id]; return n })
    await load()
  }

  // ── PhaseTemplate CRUD ────────────────────────────────────────────────────

  const addPhaseTemplate = async (typeId: number) => {
    const p = newPhase[typeId]
    if (!p?.label.trim()) return
    const existing = phaseTemplates.filter(t => t.assignmentTypeId === typeId)
    await db.phaseTemplates.add({
      assignmentTypeId: typeId,
      phaseKey: p.label.trim().toLowerCase().replace(/\s+/g, '_'),
      label: p.label.trim(),
      withWhom: p.withWhom,
      isRepeatable: p.isRepeatable,
      hasConversation: p.hasConversation,
      hasAssessment: p.hasAssessment,
      criteriaIds: [],
      order: existing.length + 1,
    })
    setNewPhase(prev => ({ ...prev, [typeId]: { label: '', withWhom: 'lead', isRepeatable: false, hasConversation: false, hasAssessment: false } }))
    await load()
  }

  const updatePhaseTemplate = async (id: number, fields: Partial<PhaseTemplate>) => {
    await db.phaseTemplates.update(id, fields)
    setPhaseTemplates(prev => prev.map(t => t.id === id ? { ...t, ...fields } : t))
  }

  const deletePhaseTemplate = async (id: number) => {
    await db.phaseTemplates.delete(id)
    setPhaseTemplates(prev => prev.filter(t => t.id !== id))
  }

  const sorted = [...dimensions].sort((a, b) => a.order - b.order)

  return (
    <div className="space-y-4">
      <h2 className="text-lg font-bold text-gray-800">Feedback-Dimensionen & Kategorien</h2>

      {/* Neue Dimension */}
      <div className="flex gap-2">
        <input
          className="flex-1 border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-brand"
          placeholder="Neue Dimension…"
          value={newDimName}
          onChange={e => setNewDimName(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && addDimension()}
        />
        <button onClick={addDimension}
          className="px-4 py-2 bg-brand text-white text-sm rounded-lg font-medium">
          + Dimension
        </button>
      </div>

      {/* Dimensionen */}
      {sorted.map((dim, di) => {
        const isOpen = expanded.has(dim.id!)
        const dimCats = [...categories].filter(c => c.dimensionId === dim.id).sort((a, b) => a.order - b.order)

        return (
          <div key={dim.id} className="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
            {/* Dimension-Header */}
            <div className="flex items-center gap-2 p-3 bg-gray-50 border-b border-gray-100">
              <div className="flex flex-col gap-0.5">
                <button onClick={() => moveDim(dim, -1)} disabled={di === 0}
                  className="text-xs text-gray-400 hover:text-gray-600 leading-none disabled:opacity-30">▲</button>
                <button onClick={() => moveDim(dim, 1)} disabled={di === sorted.length - 1}
                  className="text-xs text-gray-400 hover:text-gray-600 leading-none disabled:opacity-30">▼</button>
              </div>
              <input
                className="flex-1 bg-transparent font-semibold text-sm text-gray-800 focus:outline-none border-b border-transparent focus:border-brand"
                value={dim.name}
                onChange={e => updateDimension(dim.id!, e.target.value)}
              />
              <button onClick={() => setExpanded(prev => {
                const next = new Set(prev)
                if (next.has(dim.id!)) next.delete(dim.id!); else next.add(dim.id!)
                return next
              })} className="text-xs text-gray-400 px-1">{isOpen ? '▲' : '▼'}</button>
              <button onClick={() => deleteDimension(dim.id!)}
                className="text-xs text-red-300 hover:text-red-500 px-1">🗑</button>
            </div>

            {isOpen && (
              <div className="p-3 space-y-3">
                {dimCats.map(cat => {
                  const isCatOpen  = expandedCat.has(cat.id!)
                  const catItems   = [...items].filter(i => i.categoryId === cat.id).sort((a, b) => a.order - b.order)
                  return (
                    <div key={cat.id} className="border border-gray-100 rounded-lg overflow-hidden">
                      <div className="flex items-center gap-2 px-3 py-2 bg-gray-50">
                        <input
                          className="flex-1 bg-transparent text-sm text-gray-700 focus:outline-none"
                          value={cat.name}
                          onChange={e => updateCategory(cat.id!, e.target.value)}
                        />
                        <button onClick={() => setExpandedCat(prev => {
                          const next = new Set(prev)
                          if (next.has(cat.id!)) next.delete(cat.id!); else next.add(cat.id!)
                          return next
                        })} className="text-xs text-gray-400">{isCatOpen ? '▲' : '▼'}</button>
                        <button onClick={() => deleteCategory(cat.id!)}
                          className="text-xs text-red-300 hover:text-red-500">🗑</button>
                      </div>

                      {isCatOpen && (
                        <div className="p-2 space-y-1.5">
                          {catItems.map(item => (
                            <div key={item.id} className="flex items-center gap-2">
                              <span className="text-gray-300 text-xs">·</span>
                              <input
                                className="flex-1 text-xs text-gray-600 border-b border-transparent focus:border-gray-300 focus:outline-none bg-transparent py-0.5"
                                value={item.name}
                                onChange={e => updateItem(item.id!, e.target.value)}
                              />
                              <select
                                value={item.weight ?? 1}
                                onChange={e => updateItemWeight(item.id!, Number(e.target.value))}
                                title="Gewichtung"
                                className="text-xs border border-gray-200 rounded px-1 py-0.5 text-gray-500 bg-white focus:outline-none focus:border-brand">
                                {[1,2,3,4,5].map(w => <option key={w} value={w}>×{w}</option>)}
                              </select>
                              <button onClick={() => deleteItem(item.id!)}
                                className="text-xs text-red-200 hover:text-red-400">×</button>
                            </div>
                          ))}
                          <div className="flex gap-1.5 mt-1">
                            <input
                              className="flex-1 border border-gray-200 rounded px-2 py-1 text-xs focus:outline-none focus:border-brand"
                              placeholder="Neues Kriterium…"
                              value={newItemName[cat.id!] ?? ''}
                              onChange={e => setNewItemName(p => ({ ...p, [cat.id!]: e.target.value }))}
                              onKeyDown={e => e.key === 'Enter' && addItem(cat.id!)}
                            />
                            <button onClick={() => addItem(cat.id!)}
                              className="px-2 py-1 bg-gray-100 hover:bg-gray-200 text-gray-600 text-xs rounded">+</button>
                          </div>
                        </div>
                      )}
                    </div>
                  )
                })}

                {/* Neue Kategorie */}
                <div className="flex gap-1.5">
                  <input
                    className="flex-1 border border-gray-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:border-brand"
                    placeholder="Neue Kategorie…"
                    value={newCatName[dim.id!] ?? ''}
                    onChange={e => setNewCatName(p => ({ ...p, [dim.id!]: e.target.value }))}
                    onKeyDown={e => e.key === 'Enter' && addCategory(dim.id!)}
                  />
                  <button onClick={() => addCategory(dim.id!)}
                    className="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-600 text-sm rounded-lg">
                    + Kat.
                  </button>
                </div>
              </div>
            )}
          </div>
        )
      })}

    </div>
  )
}