'use client'

import { useState, useEffect } from 'react'
import { LibraryComponent, EnergySource, LIBRARY_CATEGORIES } from './types'
import { ComponentTypeIcon } from './ComponentTypeIcon'

export function ComponentLibraryModal({
  onAdd,
  onClose,
}: {
  onAdd: (components: LibraryComponent[], energySources: EnergySource[]) => void
  onClose: () => void
}) {
  const [libraryComponents, setLibraryComponents] = useState<LibraryComponent[]>([])
  const [energySources, setEnergySources] = useState<EnergySource[]>([])
  const [selectedComponents, setSelectedComponents] = useState<Set<string>>(new Set())
  const [selectedEnergySources, setSelectedEnergySources] = useState<Set<string>>(new Set())
  const [search, setSearch] = useState('')
  const [filterCategory, setFilterCategory] = useState('')
  const [activeTab, setActiveTab] = useState<'components' | 'energy'>('components')
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    async function fetchData() {
      try {
        const [compRes, enRes] = await Promise.all([
          fetch('/api/sdk/v1/iace/component-library'),
          fetch('/api/sdk/v1/iace/energy-sources'),
        ])
        if (compRes.ok) {
          const json = await compRes.json()
          setLibraryComponents(json.components || [])
        }
        if (enRes.ok) {
          const json = await enRes.json()
          setEnergySources(json.energy_sources || [])
        }
      } catch (err) {
        console.error('Failed to fetch library:', err)
      } finally {
        setLoading(false)
      }
    }
    fetchData()
  }, [])

  function toggleComponent(id: string) {
    setSelectedComponents(prev => {
      const next = new Set(prev)
      if (next.has(id)) next.delete(id)
      else next.add(id)
      return next
    })
  }

  function toggleEnergySource(id: string) {
    setSelectedEnergySources(prev => {
      const next = new Set(prev)
      if (next.has(id)) next.delete(id)
      else next.add(id)
      return next
    })
  }

  function toggleAllInCategory(category: string) {
    const items = libraryComponents.filter(c => c.category === category)
    const allIds = items.map(i => i.id)
    const allSelected = allIds.every(id => selectedComponents.has(id))
    setSelectedComponents(prev => {
      const next = new Set(prev)
      allIds.forEach(id => allSelected ? next.delete(id) : next.add(id))
      return next
    })
  }

  function handleAdd() {
    const selComps = libraryComponents.filter(c => selectedComponents.has(c.id))
    const selEnergy = energySources.filter(e => selectedEnergySources.has(e.id))
    onAdd(selComps, selEnergy)
  }

  const categories = Object.keys(LIBRARY_CATEGORIES)
  const filtered = libraryComponents.filter(c => {
    if (filterCategory && c.category !== filterCategory) return false
    if (search) {
      const q = search.toLowerCase()
      return c.name_de.toLowerCase().includes(q) || c.name_en.toLowerCase().includes(q) || c.description_de.toLowerCase().includes(q)
    }
    return true
  })

  const grouped = filtered.reduce<Record<string, LibraryComponent[]>>((acc, c) => {
    if (!acc[c.category]) acc[c.category] = []
    acc[c.category].push(c)
    return acc
  }, {})

  const totalSelected = selectedComponents.size + selectedEnergySources.size

  if (loading) {
    return (
      <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
        <div className="bg-white dark:bg-gray-800 rounded-xl p-8 text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600 mx-auto" />
          <p className="mt-3 text-sm text-gray-500">Bibliothek wird geladen...</p>
        </div>
      </div>
    )
  }

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white dark:bg-gray-800 rounded-xl w-full max-w-4xl max-h-[85vh] flex flex-col">
        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Komponentenbibliothek</h3>
            <button onClick={onClose} className="p-1 text-gray-400 hover:text-gray-600 rounded">
              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
          <div className="flex gap-2 mb-4">
            <button onClick={() => setActiveTab('components')}
              className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors ${activeTab === 'components' ? 'bg-purple-100 text-purple-700' : 'text-gray-500 hover:bg-gray-100'}`}>
              Komponenten ({libraryComponents.length})
            </button>
            <button onClick={() => setActiveTab('energy')}
              className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors ${activeTab === 'energy' ? 'bg-purple-100 text-purple-700' : 'text-gray-500 hover:bg-gray-100'}`}>
              Energiequellen ({energySources.length})
            </button>
          </div>
          {activeTab === 'components' && (
            <div className="flex gap-3">
              <input type="text" value={search} onChange={e => setSearch(e.target.value)} placeholder="Suchen..."
                className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white" />
              <select value={filterCategory} onChange={e => setFilterCategory(e.target.value)}
                className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                <option value="">Alle Kategorien</option>
                {categories.map(cat => <option key={cat} value={cat}>{LIBRARY_CATEGORIES[cat]}</option>)}
              </select>
            </div>
          )}
        </div>

        <div className="flex-1 overflow-auto p-4">
          {activeTab === 'components' ? (
            <div className="space-y-4">
              {Object.entries(grouped)
                .sort(([a], [b]) => categories.indexOf(a) - categories.indexOf(b))
                .map(([category, items]) => (
                  <div key={category}>
                    <div className="flex items-center gap-2 mb-2 sticky top-0 bg-white dark:bg-gray-800 py-1 z-10">
                      <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">{LIBRARY_CATEGORIES[category] || category}</h4>
                      <span className="text-xs text-gray-400">({items.length})</span>
                      <button onClick={() => toggleAllInCategory(category)} className="text-xs text-purple-600 hover:text-purple-700 ml-auto">
                        {items.every(i => selectedComponents.has(i.id)) ? 'Alle abwaehlen' : 'Alle waehlen'}
                      </button>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                      {items.map(comp => (
                        <label key={comp.id}
                          className={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${
                            selectedComponents.has(comp.id) ? 'border-purple-400 bg-purple-50 dark:bg-purple-900/20' : 'border-gray-200 hover:bg-gray-50 dark:border-gray-700'
                          }`}>
                          <input type="checkbox" checked={selectedComponents.has(comp.id)} onChange={() => toggleComponent(comp.id)} className="mt-0.5 accent-purple-600" />
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center gap-2">
                              <span className="text-xs font-mono text-gray-400">{comp.id}</span>
                              <ComponentTypeIcon type={comp.maps_to_component_type} />
                            </div>
                            <div className="text-sm font-medium text-gray-900 dark:text-white">{comp.name_de}</div>
                            {comp.description_de && <div className="text-xs text-gray-500 mt-0.5 line-clamp-2">{comp.description_de}</div>}
                          </div>
                        </label>
                      ))}
                    </div>
                  </div>
                ))}
              {filtered.length === 0 && <div className="text-center py-8 text-gray-500">Keine Komponenten gefunden</div>}
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
              {energySources.map(es => (
                <label key={es.id}
                  className={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${
                    selectedEnergySources.has(es.id) ? 'border-purple-400 bg-purple-50 dark:bg-purple-900/20' : 'border-gray-200 hover:bg-gray-50 dark:border-gray-700'
                  }`}>
                  <input type="checkbox" checked={selectedEnergySources.has(es.id)} onChange={() => toggleEnergySource(es.id)} className="mt-0.5 accent-purple-600" />
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2"><span className="text-xs font-mono text-gray-400">{es.id}</span></div>
                    <div className="text-sm font-medium text-gray-900 dark:text-white">{es.name_de}</div>
                    {es.description_de && <div className="text-xs text-gray-500 mt-0.5 line-clamp-2">{es.description_de}</div>}
                  </div>
                </label>
              ))}
            </div>
          )}
        </div>

        <div className="p-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
          <span className="text-sm text-gray-500">
            {selectedComponents.size} Komponenten, {selectedEnergySources.size} Energiequellen ausgewaehlt
          </span>
          <div className="flex gap-3">
            <button onClick={onClose} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">Abbrechen</button>
            <button onClick={handleAdd} disabled={totalSelected === 0}
              className={`px-6 py-2 rounded-lg font-medium transition-colors ${totalSelected > 0 ? 'bg-purple-600 text-white hover:bg-purple-700' : 'bg-gray-200 text-gray-400 cursor-not-allowed'}`}>
              {totalSelected > 0 ? `${totalSelected} hinzufuegen` : 'Auswaehlen'}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}
