import React from 'react'
import { ArrowLeft } from 'lucide-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 className="empty-state" style={{ padding: '2.5rem' }}>
        <div className="spinner" />
      </div>
    )
  }

  return (
    <div className="admin-hierarchy-container admin-hierarchy-layout">
      <div className="admin-hierarchy-pane admin-hierarchy-pane--tree" hidden={!!selectedItem}>
        <h2 className="admin-hierarchy-pane__title">Katalog-Hierarchie</h2>
        {error && <div className="admin-matrix-alert">{error}</div>}

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

      {selectedItem && (
        <div className="admin-hierarchy-pane admin-hierarchy-pane--detail">
          <button
            type="button"
            className="btn btn-secondary btn-small admin-hierarchy-back"
            onClick={() => onSelectItem(null)}
          >
            <ArrowLeft size={16} strokeWidth={2} aria-hidden />
            Zurück zur Übersicht
          </button>
          <DetailPanel item={selectedItem} onUpdate={onUpdate} focusAreas={hierarchy} />
        </div>
      )}
    </div>
  )
}

export default HierarchyTab