import React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import HowToVoteIcon from '@mui/icons-material/HowToVote';
import { useQuery } from '@tanstack/react-query';
import { nextcloudApi } from '../../services/nextcloud';

interface PollMessageContentProps {
  roomToken: string;
  pollId: number;
  pollName: string;
  isOwnMessage: boolean;
}

const PollMessageContent: React.FC<PollMessageContentProps> = ({ roomToken, pollId, pollName, isOwnMessage }) => {
  const { data: poll } = useQuery({
    queryKey: ['nextcloud', 'poll', roomToken, pollId],
    queryFn: () => nextcloudApi.getPollDetails(roomToken, pollId),
    staleTime: 60_000,
  });

  return (
    <Box
      sx={{
        mt: 0.5,
        p: 1,
        borderRadius: 1,
        border: '1px solid',
        borderColor: isOwnMessage ? 'rgba(255,255,255,0.3)' : 'divider',
        bgcolor: isOwnMessage ? 'rgba(255,255,255,0.1)' : 'action.hover',
      }}
    >
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 0.5 }}>
        <HowToVoteIcon sx={{ fontSize: '1rem', opacity: 0.7 }} />
        <Typography variant="caption" sx={{ opacity: 0.7 }}>Abstimmung</Typography>
      </Box>
      <Typography variant="body2" sx={{ fontWeight: 600, mb: 0.5 }}>
        {poll?.question ?? pollName}
      </Typography>
      {poll?.options && poll.options.slice(0, 4).map((opt, idx) => (
        <Typography key={idx} variant="caption" sx={{ display: 'block', opacity: 0.8 }}>
          • {opt}
        </Typography>
      ))}
      {poll?.options && poll.options.length > 4 && (
        <Typography variant="caption" sx={{ opacity: 0.6 }}>
          +{poll.options.length - 4} weitere Optionen
        </Typography>
      )}
    </Box>
  );
};

export default PollMessageContent;