cinny/src/app/components/message/content/PollContent.tsx

import React, { useState } from 'react';
import { Box, Text } from 'folds';
import { useMatrixClient } from '../../../hooks/useMatrixClient';

type PollTextValue = Array<{ body: string }> | string;

function extractText(val: PollTextValue | undefined): string {
  if (!val) return '';
  if (typeof val === 'string') return val;
  return val[0]?.body ?? '';
}

type PollAnswer = {
  'm.id'?: string;
  id?: string;
  'm.text'?: PollTextValue;
  'org.matrix.msc3381.poll.answer'?: { body: string };
};

type PollData = {
  question?: { body?: string; 'm.text'?: PollTextValue };
  answers?: PollAnswer[];
};

export function PollContent({
  content,
  roomId,
  eventId,
}: {
  content: Record<string, unknown>;
  roomId?: string;
  eventId?: string;
}) {
  const mx = useMatrixClient();
  const [myVote, setMyVote] = useState<string | null>(null);
  const isStable = !!content['m.poll'];

  const poll = (
    content['m.poll'] ?? content['org.matrix.msc3381.poll.start']
  ) as PollData | undefined;

  if (!poll) {
    return (
      <Text style={{ opacity: 0.6 }}>
        <i>Poll (unreadable format)</i>
      </Text>
    );
  }

  const questionText =
    extractText((poll.question as any)?.['m.text']) ||
    (poll.question as any)?.body ||
    'Untitled poll';

  const canVote = !!roomId && !!eventId;

  const handleVote = (answerId: string) => {
    if (!roomId || !eventId) return;
    setMyVote(answerId);
    if (isStable) {
      mx.sendEvent(roomId, 'm.poll.response' as any, {
        'm.relates_to': { rel_type: 'm.reference', event_id: eventId },
        'm.responses': [{ 'm.id': answerId }],
      });
    } else {
      mx.sendEvent(roomId, 'org.matrix.msc3381.poll.response' as any, {
        'm.relates_to': { rel_type: 'm.reference', event_id: eventId },
        'org.matrix.msc3381.poll.response': { answers: [answerId] },
      });
    }
  };

  return (
    <Box
      direction="Column"
      gap="200"
      style={{ maxWidth: '340px', paddingTop: '2px', paddingBottom: '4px' }}
    >
      <Box
        alignItems="Center"
        gap="100"
        style={{
          fontSize: '0.68rem',
          fontWeight: 700,
          letterSpacing: '0.12em',
          textTransform: 'uppercase',
          opacity: 0.55,
          marginBottom: '2px',
        }}
      >
        ◉ Poll
      </Box>
      <Text size="T400" style={{ fontWeight: 600 }}>
        {questionText}
      </Text>
      <Box direction="Column" gap="100" style={{ marginTop: '2px' }}>
        {(poll.answers ?? []).map((answer, i) => {
          const text =
            extractText((answer as any)['m.text']) ||
            (answer as any)['org.matrix.msc3381.poll.answer']?.body ||
            `Option ${i + 1}`;
          const id = answer['m.id'] ?? answer.id ?? String(i);
          const selected = myVote === id;
          return (
            <button
              key={id}
              type="button"
              onClick={canVote ? () => handleVote(id) : undefined}
              style={{
                padding: '7px 12px',
                borderRadius: '8px',
                background: selected ? 'var(--bg-surface-active)' : 'var(--bg-surface-low)',
                border: `1px solid ${selected ? 'var(--text-primary)' : 'var(--bg-surface-border)'}`,
                fontSize: '0.88rem',
                lineHeight: 1.4,
                textAlign: 'left',
                cursor: canVote ? 'pointer' : 'default',
                color: 'var(--text-primary)',
                display: 'flex',
                alignItems: 'center',
                gap: '8px',
                width: '100%',
              }}
            >
              <span style={{ flexGrow: 1 }}>{text}</span>
              {selected && (
                <span style={{ opacity: 0.8, fontSize: '1rem', flexShrink: 0 }}>✓</span>
              )}
            </button>
          );
        })}
      </Box>
      {canVote ? (
        <Text size="T200" style={{ opacity: 0.5, marginTop: '2px' }}>
          <i>{myVote ? 'Vote cast — click another to change' : 'Click an option to vote'}</i>
        </Text>
      ) : (
        <Text size="T200" style={{ opacity: 0.4, marginTop: '2px' }}>
          <i>Open in Element to vote</i>
        </Text>
      )}
    </Box>
  );
}