import React from 'react'
import FocusAreaNode from './FocusAreaNode'
import DetailPanel from './DetailPanel'

function HierarchyTab({ hierarchy, expandedNodes, selectedItem, loading, error, onToggleNode, onSelectItem, onUpdate }) {
  if (loading && hierarchy.length === 0) {
    return <div style={{ textAlign: 'center', padding: '40px' }}><div className="spinner"></div></div>
  }

  return (
    <div className="admin-hierarchy-container">
      {/* Tree View */}
      <div
        className="admin-tree-view"
        style={{
          display: selectedItem ? 'none' : 'block',
          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={onToggleNode}
            onSelect={onSelectItem}
            selectedId={selectedItem?.id}
            selectedType={selectedItem?._type}
          />
        ))}
      </div>

      {/* Detail Panel */}
      {selectedItem && (
        <div
          style={{
            border: '1px solid var(--border)',
            borderRadius: '12px',
            padding: '20px',
            background: 'var(--surface)'
          }}
        >
          <button
            className="btn admin-back-button"
            onClick={() => onSelectItem(null)}
            style={{ marginBottom: '16px' }}
          >
            ← Zurück zur Übersicht
          </button>
          <DetailPanel item={selectedItem} onUpdate={onUpdate} focusAreas={hierarchy} />
        </div>
      )}
    </div>
  )
}

export default HierarchyTab