import React, { useState, useEffect } from 'react'
import { api } from '../utils/api'

/**
 * AdminHierarchyPage - Hierarchische Katalog-Verwaltung
 *
 * Layout:
 * ┌─ Tree (links) ─────────┬─ Detail Panel (rechts) ─┐
 * │ ▼ Fokusbereich         │                          │
 * │   ├─ Stilrichtungen    │  [Edit-Form für          │
 * │   └─ Trainingstypen    │   ausgewähltes Element]  │
 * └────────────────────────┴──────────────────────────┘
 */

function AdminHierarchyPage() {
  const [hierarchy, setHierarchy] = useState([])
  const [expandedNodes, setExpandedNodes] = useState(new Set())
  const [selectedItem, setSelectedItem] = useState(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

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

  async function loadHierarchy() {
    setLoading(true)
    setError('')
    try {
      const data = await api.getAdminHierarchy()
      setHierarchy(data)
      // Auto-expand first focus area
      if (data.length > 0) {
        setExpandedNodes(new Set([`fa-${data[0].id}`]))
      }
    } catch (e) {
      setError(e.message)
    } finally {
      setLoading(false)
    }
  }

  function toggleNode(nodeId) {
    const newExpanded = new Set(expandedNodes)
    if (newExpanded.has(nodeId)) {
      newExpanded.delete(nodeId)
    } else {
      newExpanded.add(nodeId)
    }
    setExpandedNodes(newExpanded)
  }

  function selectItem(item, type) {
    setSelectedItem({ ...item, _type: type })
  }

  if (loading && hierarchy.length === 0) {
    return (
      <div style={{ padding: '20px', textAlign: 'center' }}>
        <div className="spinner"></div>
      </div>
    )
  }

  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '400px 1fr',
      gap: '16px',
      padding: '16px',
      height: 'calc(100vh - 100px)',
      overflow: 'hidden'
    }}>
      {/* Left: Tree View */}
      <div style={{
        overflowY: 'auto',
        border: '1px solid var(--border)',
        borderRadius: '12px',
        padding: '16px',
        background: 'var(--surface)'
      }}>
        <h2 style={{ marginTop: 0 }}>Katalog-Hierarchie</h2>
        {error && <div style={{ color: 'var(--danger)', marginBottom: '16px' }}>{error}</div>}

        {hierarchy.map(fa => (
          <FocusAreaNode
            key={fa.id}
            focusArea={fa}
            expanded={expandedNodes}
            onToggle={toggleNode}
            onSelect={selectItem}
            selectedId={selectedItem?.id}
            selectedType={selectedItem?._type}
          />
        ))}
      </div>

      {/* Right: Detail Panel */}
      <div style={{
        overflowY: 'auto',
        border: '1px solid var(--border)',
        borderRadius: '12px',
        padding: '20px',
        background: 'var(--surface)'
      }}>
        {selectedItem ? (
          <DetailPanel item={selectedItem} onUpdate={loadHierarchy} />
        ) : (
          <div style={{ textAlign: 'center', color: 'var(--text2)', paddingTop: '60px' }}>
            <p>← Wähle ein Element aus dem Baum</p>
          </div>
        )}
      </div>
    </div>
  )
}

// ============================================================================
// Tree Node Components
// ============================================================================

function FocusAreaNode({ focusArea, expanded, onToggle, onSelect, selectedId, selectedType }) {
  const nodeId = `fa-${focusArea.id}`
  const isExpanded = expanded.has(nodeId)
  const isSelected = selectedType === 'focus_area' && selectedId === focusArea.id

  return (
    <div style={{ marginBottom: '12px' }}>
      {/* Focus Area Header */}
      <div
        onClick={() => onSelect(focusArea, 'focus_area')}
        style={{
          display: 'flex',
          alignItems: 'center',
          padding: '8px 12px',
          borderRadius: '8px',
          cursor: 'pointer',
          background: isSelected ? 'var(--accent)' : 'transparent',
          color: isSelected ? 'white' : 'var(--text1)',
          fontWeight: 600
        }}
      >
        <span
          onClick={(e) => { e.stopPropagation(); onToggle(nodeId) }}
          style={{ marginRight: '8px', cursor: 'pointer', fontSize: '18px' }}
        >
          {isExpanded ? '▼' : '▶'}
        </span>
        <span style={{ marginRight: '8px' }}>{focusArea.icon}</span>
        <span>{focusArea.name}</span>
      </div>

      {/* Children: Style Directions + Training Types */}
      {isExpanded && (
        <div style={{ marginLeft: '28px', marginTop: '8px' }}>
          {/* Style Directions Section */}
          {focusArea.style_directions && focusArea.style_directions.length > 0 && (
            <div style={{ marginBottom: '12px' }}>
              <div style={{ fontSize: '12px', color: 'var(--text3)', marginBottom: '6px', textTransform: 'uppercase' }}>
                Stilrichtungen
              </div>
              {focusArea.style_directions.map(sd => (
                <StyleDirectionNode
                  key={sd.id}
                  styleDirection={sd}
                  onSelect={onSelect}
                  isSelected={selectedType === 'style_direction' && selectedId === sd.id}
                />
              ))}
            </div>
          )}

          {/* Training Types Section */}
          {focusArea.training_types && focusArea.training_types.length > 0 && (
            <div>
              <div style={{ fontSize: '12px', color: 'var(--text3)', marginBottom: '6px', textTransform: 'uppercase' }}>
                Trainingstypen
              </div>
              {focusArea.training_types.map(tt => (
                <TrainingTypeNode
                  key={tt.id}
                  trainingType={tt}
                  onSelect={onSelect}
                  isSelected={selectedType === 'training_type' && selectedId === tt.id}
                />
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  )
}

function StyleDirectionNode({ styleDirection, onSelect, isSelected }) {
  return (
    <div
      onClick={() => onSelect(styleDirection, 'style_direction')}
      style={{
        padding: '6px 12px',
        marginBottom: '4px',
        borderRadius: '6px',
        cursor: 'pointer',
        background: isSelected ? 'var(--accent)' : 'var(--surface2)',
        color: isSelected ? 'white' : 'var(--text1)',
        fontSize: '14px'
      }}
    >
      {styleDirection.name}
      {styleDirection.abbreviation && (
        <span style={{ marginLeft: '8px', opacity: 0.7, fontSize: '12px' }}>
          ({styleDirection.abbreviation})
        </span>
      )}
      {styleDirection.target_groups && styleDirection.target_groups.length > 0 && (
        <div style={{ fontSize: '11px', opacity: 0.8, marginTop: '4px' }}>
          Zielgruppen: {styleDirection.target_groups.map(tg => tg.name).join(', ')}
        </div>
      )}
    </div>
  )
}

function TrainingTypeNode({ trainingType, onSelect, isSelected }) {
  return (
    <div
      onClick={() => onSelect(trainingType, 'training_type')}
      style={{
        padding: '6px 12px',
        marginBottom: '4px',
        borderRadius: '6px',
        cursor: 'pointer',
        background: isSelected ? 'var(--accent)' : 'var(--surface2)',
        color: isSelected ? 'white' : 'var(--text1)',
        fontSize: '14px'
      }}
    >
      {trainingType.name}
      {trainingType.abbreviation && (
        <span style={{ marginLeft: '8px', opacity: 0.7, fontSize: '12px' }}>
          ({trainingType.abbreviation})
        </span>
      )}
    </div>
  )
}

// ============================================================================
// Detail Panel (Edit Forms)
// ============================================================================

function DetailPanel({ item, onUpdate }) {
  if (!item) return null

  const type = item._type

  if (type === 'focus_area') {
    return <FocusAreaDetail focusArea={item} onUpdate={onUpdate} />
  } else if (type === 'style_direction') {
    return <StyleDirectionDetail styleDirection={item} onUpdate={onUpdate} />
  } else if (type === 'training_type') {
    return <TrainingTypeDetail trainingType={item} onUpdate={onUpdate} />
  }

  return null
}

function FocusAreaDetail({ focusArea, onUpdate }) {
  const [editing, setEditing] = useState(false)
  const [form, setForm] = useState({
    name: focusArea.name,
    icon: focusArea.icon,
    description: focusArea.description || ''
  })

  async function handleSave() {
    try {
      await api.updateFocusArea(focusArea.id, form)
      setEditing(false)
      onUpdate()
    } catch (e) {
      alert('Fehler: ' + e.message)
    }
  }

  if (!editing) {
    return (
      <div>
        <h2>{focusArea.icon} {focusArea.name}</h2>
        {focusArea.description && <p style={{ color: 'var(--text2)' }}>{focusArea.description}</p>}
        <button className="btn btn-primary" onClick={() => setEditing(true)}>
          Bearbeiten
        </button>
      </div>
    )
  }

  return (
    <div>
      <h2>Fokusbereich bearbeiten</h2>
      <div className="form-row">
        <label className="form-label">Name</label>
        <input
          className="form-input"
          value={form.name}
          onChange={e => setForm({ ...form, name: e.target.value })}
        />
      </div>
      <div className="form-row">
        <label className="form-label">Icon</label>
        <input
          className="form-input"
          value={form.icon}
          onChange={e => setForm({ ...form, icon: e.target.value })}
        />
      </div>
      <div className="form-row">
        <label className="form-label">Beschreibung</label>
        <textarea
          className="form-input"
          value={form.description}
          onChange={e => setForm({ ...form, description: e.target.value })}
          rows={4}
        />
      </div>
      <div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
        <button className="btn btn-primary" onClick={handleSave}>Speichern</button>
        <button className="btn" onClick={() => setEditing(false)}>Abbrechen</button>
      </div>
    </div>
  )
}

function StyleDirectionDetail({ styleDirection, onUpdate }) {
  return (
    <div>
      <h2>{styleDirection.name}</h2>
      {styleDirection.abbreviation && <p style={{ color: 'var(--text2)' }}>Kürzel: {styleDirection.abbreviation}</p>}
      {styleDirection.description && <p style={{ color: 'var(--text2)' }}>{styleDirection.description}</p>}

      {styleDirection.target_groups && styleDirection.target_groups.length > 0 && (
        <div style={{ marginTop: '16px' }}>
          <h3>Zugeordnete Zielgruppen</h3>
          <ul>
            {styleDirection.target_groups.map(tg => (
              <li key={tg.id}>
                {tg.name} {tg.is_primary && <span style={{ color: 'var(--accent)' }}>★ Primär</span>}
              </li>
            ))}
          </ul>
        </div>
      )}

      <button className="btn btn-primary" style={{ marginTop: '16px' }}>
        Bearbeiten
      </button>
    </div>
  )
}

function TrainingTypeDetail({ trainingType, onUpdate }) {
  return (
    <div>
      <h2>{trainingType.name}</h2>
      {trainingType.abbreviation && <p style={{ color: 'var(--text2)' }}>Kürzel: {trainingType.abbreviation}</p>}
      {trainingType.description && <p style={{ color: 'var(--text2)' }}>{trainingType.description}</p>}

      <button className="btn btn-primary" style={{ marginTop: '16px' }}>
        Bearbeiten
      </button>
    </div>
  )
}

export default AdminHierarchyPage