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

const ROLE_LABELS: Record<UserRole, string> = {
  [UserRole.SUPER_ADMIN]: 'Super Admin',
  [UserRole.ORGANIZATION_ADMIN]: 'Org Admin',
  [UserRole.PROPERTY_MANAGER]: 'Prop. Manager',
  [UserRole.REVIEWER]: 'Reviewer',
  [UserRole.OWNER_VIEWER]: 'Owner Viewer',
  [UserRole.DEMAND_USER]: 'Demand User',
}

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

  async function handleSwitch(role: UserRole) {
    await authService.switchDemoRole(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 }}>
        {Object.values(UserRole).map((role) => {
          const active = currentUser?.role === role
          return (
            <Chip
              key={role}
              label={ROLE_LABELS[role]}
              size="small"
              clickable
              onClick={() => handleSwitch(role)}
              sx={{
                fontSize: '0.7rem',
                height: 22,
                bgcolor: active ? '#1e3a5f' : 'transparent',
                color: active ? '#fff' : 'text.secondary',
                border: '1px solid',
                borderColor: active ? '#1e3a5f' : 'divider',
                '&:hover': { bgcolor: active ? '#162d4a' : 'rgba(0,0,0,0.04)' },
              }}
            />
          )
        })}
      </Box>
    </Box>
  )
}