import { useState } from 'react'
import { Box } from '@mui/material'
import {
  TeamPageHeader,
  TeamSectionHeader,
  TeamKpiSection,
  TeamLevelTabs,
  TeamOverviewRing,
  ConnectionSummaryList,
} from '../../components/team'
import { ErrorState } from '../../components/ui'
import type { AgentLevel } from '../../domain/agentDirectory'
import { AgentLevel as Level } from '../../domain/agentDirectory'
import { useTeamAgents } from '../../hooks/useTeamAgents'
import { useAgentConnections } from '../../hooks/useAgentConnections'
import { ROUTES } from '../../lib/constants'

/**
 * Startseite des Property-On-Bereichs.
 *
 * Aufbau: die Belegschaft als Kreis direkt unter dem Seitentitel, darunter die
 * Auswertung und die Verbindungen. Der Kreis steht bewusst zuoberst — er ist die
 * Antwort auf die Frage, mit der ein Bewirtschafter die Seite öffnet: «wer
 * arbeitet hier eigentlich für mich?»
 *
 * Kopfbereich bewusst ohne Beschreibungstext und ohne «Demo zurücksetzen»: der
 * Platz gehört der Visualisierung.
 */
export default function Teamuebersicht() {
  const [level, setLevel] = useState<AgentLevel>(Level.CORE)
  const { data: agents = [], isError, refetch } = useTeamAgents()
  const { data: connections = [] } = useAgentConnections()

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
      <TeamPageHeader title="Teamübersicht" />


      <Box sx={{ flex: 1, overflowY: 'auto', px: 3, pb: 5 }}>
        {isError ? (
          <ErrorState message="Das digitale Team konnte nicht geladen werden." onRetry={() => refetch()} />
        ) : (
          <>
            <Box component="section" sx={{ pt: 3 }}>
              <Box sx={{ display: 'flex', justifyContent: 'center', mb: 1 }}>
                <TeamLevelTabs value={level} onChange={setLevel} />
              </Box>
              <TeamOverviewRing level={level} />
            </Box>

            <Box component="section" sx={{ mt: 6 }}>
              <TeamKpiSection agents={agents} />
            </Box>

            <Box component="section" sx={{ mt: 2 }}>
              <TeamSectionHeader
                title="Kanäle & Systeme"
                description="Womit das digitale Team heute verbunden ist."
                quickLink={{ label: 'Alle Kanäle & Systeme', to: ROUTES.SUPPLY.TEAM_CONNECTIONS }}
              />
              <ConnectionSummaryList connections={connections} agents={agents} />
            </Box>
          </>
        )}
      </Box>
    </Box>
  )
}