import { Box, Chip, Typography } from '@mui/material'
import { UserRole } from '../../domain/enums'
import { useSwitchDemoRole } from '../../hooks/useAuth'
import { useSessionStore } from '../../stores/sessionStore'

const DEMO_ROLES: { role: UserRole; label: string }[] = [
  { role: UserRole.PROPERTY_MANAGER, label: 'Verwaltung' },
  { role: UserRole.DEMAND_USER, label: 'Bürosuche' },
]

export function DemoRoleSwitcher() {
  const { currentUser } = useSessionStore()
  const switchDemoRole = useSwitchDemoRole()

  function handleSwitch(role: UserRole) {
    switchDemoRole.mutate(role)
  }

  return (
    <Box sx={{ px: 1, py: 0.5 }}>
      <Typography
        variant="caption"
        sx={{ color: 'text.secondary', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, display: 'block', mb: 0.75 }}
      >
        Demo-Modus
      </Typography>
      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
        {DEMO_ROLES.map(({ role, label }) => {
          const active = currentUser?.role === role
          return (
            <Chip
              key={role}
              label={label}
              size="small"
              clickable
              onClick={() => handleSwitch(role)}
              sx={{
                fontSize: '0.7rem',
                height: 22,
                bgcolor: active ? '#152642' : 'transparent',
                color: active ? '#fff' : 'text.secondary',
                border: '1px solid',
                borderColor: active ? '#152642' : 'divider',
                '&:hover': { bgcolor: active ? '#162d4a' : 'rgba(0,0,0,0.04)' },
              }}
            />
          )
        })}
      </Box>
    </Box>
  )
}
