import { useEffect, useState } from 'react'
import { RoadmapPlanSection } from './RoadmapPlanSection.jsx'
import { GateMapView } from './GateMapView.jsx'
import { resolveGatesViewMode, storeGatesViewMode } from '../plan/gateGraphLayout.js'

export function GatesPlanPanel({
  initiativeId,
  items,
  canManage,
  onCreate,
  onReorder,
  onDelete,
  busy,
}) {
  const [viewMode, setViewMode] = useState(() => resolveGatesViewMode(initiativeId, items.length))

  useEffect(() => {
    setViewMode(resolveGatesViewMode(initiativeId, items.length))
  }, [initiativeId, items.length])

  function handleViewChange(mode) {
    setViewMode(mode)
    storeGatesViewMode(initiativeId, mode)
  }

  return (
    <div className="gates-plan-panel">
      <div className="gates-plan-panel__toolbar" role="tablist" aria-label="Zielzustände Ansicht">
        <button
          type="button"
          role="tab"
          aria-selected={viewMode === 'list'}
          className={
            'gates-plan-panel__tab' + (viewMode === 'list' ? ' gates-plan-panel__tab--active' : '')
          }
          onClick={() => handleViewChange('list')}
        >
          Liste
        </button>
        <button
          type="button"
          role="tab"
          aria-selected={viewMode === 'graph'}
          className={
            'gates-plan-panel__tab' + (viewMode === 'graph' ? ' gates-plan-panel__tab--active' : '')
          }
          onClick={() => handleViewChange('graph')}
        >
          Graph
        </button>
      </div>

      {viewMode === 'list' ? (
        <RoadmapPlanSection
          initiativeId={initiativeId}
          items={items}
          canManage={canManage}
          onCreate={onCreate}
          onReorder={onReorder}
          onDelete={onDelete}
          busy={busy}
        />
      ) : (
        <GateMapView initiativeId={initiativeId} items={items} />
      )}
    </div>
  )
}