import { Box, Typography, Button } from '@mui/material';
import { glassBox, GRADIENT } from '../../theme/voiceStyles';
import type { RoomInfo } from '../../types/rooms';

type Props = {
  rooms: RoomInfo[];
  currentRoomId: string | null;
  onJoin: (roomId: string) => void;
  onCreate: () => void;
  onJoinByCode: () => void;
};

export function RoomsPanel({
  rooms,
  currentRoomId,
  onJoin,
  onCreate,
  onJoinByCode,
}: Props) {
  return (
    <Box
      sx={{
        width: 300,
        p: '1.2vw',
        display: 'flex',
        flexDirection: 'column',
        gap: '1vw',
        borderRadius: '1.5vw',
        ...glassBox,
      }}
    >
      <Typography
        sx={{
          fontFamily: 'Benzin-Bold',
          fontSize: '1.4vw',
          backgroundImage: GRADIENT,
          WebkitBackgroundClip: 'text',
          WebkitTextFillColor: 'transparent',
        }}
      >
        Голосовые комнаты
      </Typography>

      <Box sx={{ flex: 1, overflowY: 'auto', pr: '0.3vw' }}>
        {rooms.map((room) => {
          const active = room.id === currentRoomId;

          return (
            <Box
              key={room.id}
              onClick={() => onJoin(room.id)}
              sx={{
                p: '0.9vw',
                mb: '0.6vw',
                borderRadius: '1vw',
                cursor: 'pointer',
                transition: 'all 0.18s ease',
                background: active ? GRADIENT : 'rgba(255,255,255,0.04)',
                color: active ? '#fff' : 'rgba(255,255,255,0.9)',
                '&:hover': {
                  //transform: 'scale(1.01)',
                  background: active ? GRADIENT : 'rgba(255,255,255,0.07)',
                },
              }}
            >
              <Typography sx={{ fontWeight: 800 }}>{room.name}</Typography>

              {room.users.length > 0 && (
                <Box sx={{ mt: '0.4vw', pl: '0.8vw' }}>
                  {room.users.map((u) => (
                    <Typography
                      key={u}
                      sx={{
                        fontSize: '0.85vw',
                        opacity: 0.8,
                      }}
                    >
                      • {u}
                    </Typography>
                  ))}
                </Box>
              )}
            </Box>
          );
        })}
      </Box>

      <Button
        onClick={onCreate}
        sx={{
          borderRadius: '999px',
          py: '0.8vw',
          fontFamily: 'Benzin-Bold',
          background: GRADIENT,
          color: '#fff',
        }}
      >
        + Создать комнату
      </Button>

      <Button
        onClick={onJoinByCode}
        sx={{
          borderRadius: '999px',
          py: '0.8vw',
          fontFamily: 'Benzin-Bold',
          background: 'rgba(255,255,255,0.08)',
          color: '#fff',
        }}
      >
        Войти по коду
      </Button>
    </Box>
  );
}