property-match/src/components/layout/GlobalNavMenu.tsx

import { useState } from 'react'
import { useNavigate } from 'react-router'
import { Box, ButtonBase, Divider, IconButton, Popover, Tooltip, Typography } from '@mui/material'
import { HelpCircle, LayoutGrid, LogOut, Settings, User } from 'lucide-react'
import { useSessionStore } from '../../stores/sessionStore'
import { useToastStore } from '../../stores/toastStore'
import { AgentAvatar } from '../team'
import { AGENT_WORKSPACES } from '../../lib/agentWorkspaces'
import { HOME_NAV_LABEL, MY_AGENTS_LABEL, ROUTES } from '../../lib/constants'
import { DS_BRAND, DS_NEUTRAL, DS_SLATE, DS_TEXT } from '../../lib/ds'

const ROLE_LABELS: Record<string, string> = {
  PROPERTY_MANAGER: 'Property Manager',
  DEMAND_USER: 'Demand User',
}

/**
 * Globale Navigation in der Kopfzeile (Runde 6, §11–§16).
 *
 * Sie ersetzt die entfernte Seitenleiste und das frühere Profilsymbol. Ein
 * einziges Menüsymbol neben der Glocke öffnet ein Klappmenü, das rechts an der
 * Kopfzeile ausgerichtet nach unten aufgeht.
 *
 * Aufbau: «Startseite», «Meine Agenten» mit allen Agenten als eingerückte,
 * rechts ausgerichtete Unterpunkte, und «Profil» mit denselben vier Aktionen,
 * die vorher im Profilmenü lagen.
 *
 * Die Agentenliste kommt aus `AGENT_WORKSPACES` — derselben zentralen
 * Konfiguration, die auch der Meetingraum und die Seitenköpfe verwenden. Namen,
 * Funktionen und Ziele werden dadurch an genau einer Stelle gepflegt (§24,
 * Schritt 7).
 *
 * `Popover` statt `Menu`: Ein `Menu` erwartet gleichrangige `MenuItem`-Kinder
 * und übernimmt Tastaturnavigation über eine flache Liste. Hier gibt es zwei
 * Ebenen mit unterschiedlicher Ausrichtung — das Popover lässt diese Struktur
 * zu und bringt Klick-ausserhalb und Escape von sich aus mit.
 */
export function GlobalNavMenu() {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
  // Beim Öffnen festgehaltene Ankerstelle: oben unter der Kopfzeile, rechts
  // exakt an der Fensterkante.
  const [ankerStelle, setAnkerStelle] = useState({ top: 64, left: 0 })
  const { currentUser, logout } = useSessionStore()
  const navigate = useNavigate()
  const showToast = useToastStore(s => s.showToast)
  const open = !!anchorEl

  const close = () => setAnchorEl(null)

  /** Menüpunkt und Ziel gehören zusammen: erst schliessen, dann navigieren. */
  const go = (path: string) => {
    close()
    navigate(path)
  }

  const handleLogout = () => {
    close()
    logout()
    navigate('/auth/login')
  }

  return (
    <>
      <Tooltip title="Menü">
        <IconButton
          size="small"
          onClick={e => {
            if (open) { setAnchorEl(null); return }
            const b = e.currentTarget.getBoundingClientRect()
            setAnkerStelle({ top: b.bottom + 8, left: document.documentElement.clientWidth })
            setAnchorEl(e.currentTarget)
          }}
          aria-label="Menü öffnen"
          aria-haspopup="true"
          aria-expanded={open}
          sx={{ color: DS_TEXT.primary }}
        >
          <LayoutGrid size={20} />
        </IconButton>
      </Tooltip>

      <Popover
        open={open}
        anchorEl={anchorEl}
        onClose={close}
        /*
         * An eine Bildschirmstelle statt an das Symbol gebunden: das Symbol liegt
         * um den Innenabstand der Kopfzeile eingerückt, und ein daran
         * ausgerichtetes Menü erbte genau diesen Abstand als Spalt zur rechten
         * Fensterkante (§5.1). `marginThreshold={0}` hebt zusätzlich den
         * Sicherheitsabstand auf, den MUI sonst zum Fensterrand hält.
         * Gerechnet wird mit `clientWidth` statt `innerWidth`, also ohne den
         * Scrollbalken — sonst entstünde ein waagrechter Scrollbalken.
         */
        anchorReference="anchorPosition"
        anchorPosition={ankerStelle}
        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
        marginThreshold={0}
        slotProps={{
          paper: {
            sx: {
              width: 320,
              borderRadius: 2,
              boxShadow: '0 18px 50px rgba(15,25,35,0.22)',
              overflow: 'hidden',
            },
          },
        }}
      >
        <MenuSection>
          <MainItem label={HOME_NAV_LABEL} onClick={() => go(ROUTES.SUPPLY.PROPERTIES)} />
        </MenuSection>

        <Divider />

        <MenuSection>
          <MainItem label={MY_AGENTS_LABEL} onClick={() => go(ROUTES.SUPPLY.TEAM)} />
          {/* Unterpunkte: kleiner, eingerückt und rechts ausgerichtet (§14). */}
          {AGENT_WORKSPACES.map(agent => (
            <SubItem key={agent.id} onClick={() => go(agent.path)}>
              <Typography sx={{ fontSize: '0.8125rem', fontWeight: 500, color: DS_TEXT.primary }}>
                {agent.name}
              </Typography>
              <Typography sx={{ fontSize: '0.6875rem', color: DS_TEXT.secondary }}>
                {agent.role}
              </Typography>
              <AgentAvatar agent={agent} size={26} />
            </SubItem>
          ))}
        </MenuSection>

        <Divider />

        <MenuSection>
          <MainItem label="Profil" onClick={() => showProfileHint(showToast, close)} />
          {currentUser && (
            <Typography
              sx={{
                px: 2, pb: 0.75, textAlign: 'right',
                fontSize: '0.6875rem', color: DS_TEXT.muted,
              }}
            >
              {currentUser.name} · {ROLE_LABELS[currentUser.role] ?? currentUser.role}
              {currentUser.organizationName ? ` · ${currentUser.organizationName}` : ''}
            </Typography>
          )}

          <SubItem onClick={() => showProfileHint(showToast, close)}>
            <ProfileLabel icon={<User size={15} />} label="Profil" />
          </SubItem>
          <SubItem onClick={() => { close(); showToast('Einstellungen sind in Kürze verfügbar.', 'info') }}>
            <ProfileLabel icon={<Settings size={15} />} label="Einstellungen" />
          </SubItem>
          <SubItem
            onClick={() => {
              // Bestehende Logik: die Tour zeigt sich erneut, sobald die Merkung
              // entfernt ist. Nicht neu gebaut (§16).
              close()
              localStorage.removeItem('property_match_welcomed')
              window.location.reload()
            }}
          >
            <ProfileLabel icon={<HelpCircle size={15} />} label="Produkttour starten" />
          </SubItem>
          <SubItem onClick={handleLogout}>
            <ProfileLabel icon={<LogOut size={15} />} label="Abmelden" />
          </SubItem>
        </MenuSection>
      </Popover>
    </>
  )
}

function showProfileHint(showToast: (m: string, t: 'info') => void, close: () => void) {
  close()
  showToast('Profilseite ist in Kürze verfügbar.', 'info')
}

function MenuSection({ children }: { children: React.ReactNode }) {
  return <Box sx={{ py: 1 }}>{children}</Box>
}

/** Hauptpunkt: linksbündig, kräftig — er trägt die Hierarchie. */
function MainItem({ label, onClick }: { label: string; onClick: () => void }) {
  return (
    <ButtonBase
      onClick={onClick}
      sx={{
        width: '100%',
        justifyContent: 'flex-start',
        px: 2, py: 1,
        '&:hover': { bgcolor: DS_SLATE[50] },
        '&.Mui-focusVisible': { bgcolor: DS_SLATE[100], outline: `2px solid ${DS_NEUTRAL.gold}`, outlineOffset: -2 },
      }}
    >
      <Typography sx={{ fontWeight: 700, fontSize: '0.9375rem', color: DS_BRAND.main }}>
        {label}
      </Typography>
    </ButtonBase>
  )
}

/**
 * Unterpunkt: kleiner, eingerückt und am rechten Rand ausgerichtet (§14/§16).
 * Die Rechtsausrichtung ist die Vorgabe — sie trennt die Ebenen auch ohne
 * Einrückungslinien sichtbar voneinander.
 */
function SubItem({ children, onClick }: { children: React.ReactNode; onClick: () => void }) {
  return (
    <ButtonBase
      onClick={onClick}
      sx={{
        width: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-end',
        gap: 1,
        pl: 4, pr: 2, py: 0.75,
        textAlign: 'right',
        '&:hover': { bgcolor: DS_SLATE[50] },
        '&.Mui-focusVisible': { bgcolor: DS_SLATE[100], outline: `2px solid ${DS_NEUTRAL.gold}`, outlineOffset: -2 },
      }}
    >
      {children}
    </ButtonBase>
  )
}

function ProfileLabel({ icon, label }: { icon: React.ReactNode; label: string }) {
  return (
    <>
      <Typography sx={{ fontSize: '0.8125rem', color: DS_TEXT.primary }}>{label}</Typography>
      <Box sx={{ display: 'flex', color: DS_TEXT.secondary }}>{icon}</Box>
    </>
  )
}