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

/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useCallback, useEffect, useState } from 'react';
import { Box, color, config, Text, toRem } from 'folds';
import { RelationsEvent } from 'matrix-js-sdk/lib/models/relations';
import { RoomEvent } from 'matrix-js-sdk';
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[];
  max_selections?: number;
};

type VoteState = {
  counts: Map<string, number>;
  myVotes: Set<string>;
  total: number;
};

function computeVotes(
  mx: ReturnType<typeof useMatrixClient>,
  roomId: string,
  eventId: string,
  _isStable: boolean,
): VoteState {
  const empty: VoteState = { counts: new Map(), myVotes: new Set(), total: 0 };
  const room = mx.getRoom(roomId);
  if (!room) return empty;

  const timelineSet = room.getUnfilteredTimelineSet();
  const stableRels = timelineSet.relations.getChildEventsForEvent(
    eventId,
    'm.reference',
    'm.poll.response',
  );
  const unstableRels = timelineSet.relations.getChildEventsForEvent(
    eventId,
    'org.matrix.msc3381.poll.response' as any,
    'org.matrix.msc3381.poll.response',
  );

  // Per-sender keep only the latest response (which may include multiple selections)
  const latestBySender = new Map<string, { ts: number; answerIds: string[] }>();
  const myUserId = mx.getSafeUserId();

  const processRelations = (rels: typeof stableRels, stable: boolean) => {
    const events = rels?.getRelations() ?? [];
    for (const ev of events) {
      if (ev.isRedacted()) continue;
      const sender = ev.getSender();
      if (!sender) continue;
      const content = ev.getContent();
      let answerIds: string[] = [];
      if (stable) {
        answerIds = (content['m.selections'] as string[] | undefined) ?? [];
      } else {
        answerIds =
          ((content['org.matrix.msc3381.poll.response'] as any)?.answers as string[] | undefined) ??
          [];
      }
      if (answerIds.length === 0) continue;
      const ts = ev.getTs();
      const existing = latestBySender.get(sender);
      if (!existing || ts > existing.ts) {
        latestBySender.set(sender, { ts, answerIds });
      }
    }
  };

  processRelations(stableRels, true);
  processRelations(unstableRels, false);

  const counts = new Map<string, number>();
  const myVotes = new Set<string>();
  for (const [sender, { answerIds }] of latestBySender) {
    for (const id of answerIds) {
      counts.set(id, (counts.get(id) ?? 0) + 1);
      if (sender === myUserId) myVotes.add(id);
    }
  }

  return { counts, myVotes, total: latestBySender.size };
}

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

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

  const [votes, setVotes] = useState<VoteState>(() => {
    if (!roomId || !eventId) return { counts: new Map(), myVotes: new Set(), total: 0 };
    return computeVotes(mx, roomId, eventId, _isStable);
  });

  // Refresh votes whenever Relations events fire
  const refresh = useCallback(() => {
    if (!roomId || !eventId) return;
    setVotes(computeVotes(mx, roomId, eventId, _isStable));
  }, [mx, roomId, eventId, _isStable]);

  useEffect(() => {
    if (!roomId || !eventId) return;
    const room = mx.getRoom(roomId);
    if (!room) return;
    const timelineSet = room.getUnfilteredTimelineSet();

    const stableRels = timelineSet.relations.getChildEventsForEvent(
      eventId,
      'm.reference',
      'm.poll.response',
    );
    const unstableRels = timelineSet.relations.getChildEventsForEvent(
      eventId,
      'org.matrix.msc3381.poll.response' as any,
      'org.matrix.msc3381.poll.response',
    );

    stableRels?.on(RelationsEvent.Add, refresh);
    stableRels?.on(RelationsEvent.Remove, refresh);
    stableRels?.on(RelationsEvent.Redaction, refresh);
    unstableRels?.on(RelationsEvent.Add, refresh);
    unstableRels?.on(RelationsEvent.Remove, refresh);
    unstableRels?.on(RelationsEvent.Redaction, refresh);
    // Also listen at room level: if no votes exist yet, the Relations object is null
    // and the listeners above are no-ops. The room timeline event catches the first vote.
    const onTimeline = (ev: any) => {
      const type = ev.getType?.();
      const relatesTo = ev.getContent?.()?.['m.relates_to'];
      if (
        (type === 'm.poll.response' || type === 'org.matrix.msc3381.poll.response') &&
        relatesTo?.event_id === eventId
      ) {
        refresh();
      }
    };
    const room2 = mx.getRoom(roomId);
    room2?.on(RoomEvent.Timeline, onTimeline);

    return () => {
      stableRels?.off(RelationsEvent.Add, refresh);
      stableRels?.off(RelationsEvent.Remove, refresh);
      stableRels?.off(RelationsEvent.Redaction, refresh);
      unstableRels?.off(RelationsEvent.Add, refresh);
      unstableRels?.off(RelationsEvent.Remove, refresh);
      unstableRels?.off(RelationsEvent.Redaction, refresh);
      room2?.off(RoomEvent.Timeline, onTimeline);
    };
  }, [mx, roomId, eventId, refresh]);

  if (!poll) {
    return (
      <Text priority="300">
        <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 maxSelections = (poll as any).max_selections ?? 1;
  const isMultiple = maxSelections > 1;
  const { counts, myVotes, total } = votes;

  const handleVote = (answerId: string) => {
    if (!roomId || !eventId) return;

    const newVotes = new Set(myVotes);
    if (newVotes.has(answerId)) {
      newVotes.delete(answerId);
    } else {
      if (!isMultiple) newVotes.clear();
      newVotes.add(answerId);
    }

    // Optimistic local update
    setVotes((prev) => {
      const next = new Map(prev.counts);
      // Remove all old vote counts for this user
      for (const id of prev.myVotes) {
        const c = next.get(id) ?? 1;
        if (c <= 1) next.delete(id);
        else next.set(id, c - 1);
      }
      // Add new vote counts
      for (const id of newVotes) {
        next.set(id, (next.get(id) ?? 0) + 1);
      }
      const hadVotes = prev.myVotes.size > 0;
      const hasVotes = newVotes.size > 0;
      const newTotal = prev.total + (hasVotes && !hadVotes ? 1 : !hasVotes && hadVotes ? -1 : 0);
      return { counts: next, myVotes: newVotes, total: newTotal };
    });

    const selectionsArr = Array.from(newVotes);
    if (_isStable) {
      mx.sendEvent(roomId, 'm.poll.response' as any, {
        'm.relates_to': { rel_type: 'm.reference', event_id: eventId },
        'm.selections': selectionsArr,
      }).catch(() => undefined);
    } 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: selectionsArr },
      }).catch(() => undefined);
    }
  };

  const answers = poll.answers ?? [];

  return (
    <Box
      data-poll-content
      direction="Column"
      gap="200"
      style={{ maxWidth: '340px', paddingTop: '2px', paddingBottom: '4px' }}
    >
      <Text
        as="div"
        size="T200"
        priority="300"
        data-poll-content-label
        style={{
          fontWeight: 700,
          letterSpacing: '0.12em',
          textTransform: 'uppercase',
          marginBottom: config.space.S100,
        }}
      >
        {`◉ Poll · ${isMultiple ? 'Multiple choice' : 'Single choice'}`}
      </Text>
      <Text size="T400" style={{ fontWeight: 600 }}>
        {questionText}
      </Text>
      <Box direction="Column" gap="100" style={{ marginTop: '2px' }}>
        {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 = myVotes.has(id);
          const voteCount = counts.get(id) ?? 0;
          const pct = total > 0 ? Math.round((voteCount / total) * 100) : 0;
          return (
            <button
              key={id}
              type="button"
              data-poll-answer
              data-selected={selected}
              onClick={canVote ? () => handleVote(id) : undefined}
              style={{
                padding: `${config.space.S200} ${config.space.S300}`,
                borderRadius: config.radii.R300,
                background: selected ? color.Primary.Container : color.SurfaceVariant.Container,
                border: `${config.borderWidth.B300} solid ${
                  selected ? color.Primary.Main : color.SurfaceVariant.ContainerLine
                }`,
                lineHeight: 1.4,
                textAlign: 'left',
                cursor: canVote ? 'pointer' : 'default',
                color: 'inherit',
                display: 'flex',
                flexDirection: 'column',
                gap: config.space.S100,
                width: '100%',
                position: 'relative',
                overflow: 'hidden',
                transition: 'border-color 0.15s, background 0.15s',
              }}
            >
              {total > 0 && (
                <span
                  aria-hidden
                  style={{
                    position: 'absolute',
                    inset: 0,
                    right: 'auto',
                    width: `${pct}%`,
                    background: selected
                      ? color.Primary.ContainerActive
                      : color.SurfaceVariant.ContainerActive,
                    pointerEvents: 'none',
                    transition: 'width 0.3s ease',
                  }}
                />
              )}
              <span
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: config.space.S200,
                  position: 'relative',
                }}
              >
                <span
                  style={{
                    flexShrink: 0,
                    width: toRem(14),
                    height: toRem(14),
                    border: `${config.borderWidth.B300} solid ${
                      selected ? color.Primary.Main : color.Primary.ContainerLine
                    }`,
                    borderRadius: isMultiple ? config.radii.R300 : config.radii.Pill,
                    background: selected ? color.Primary.Main : 'transparent',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    color: color.Primary.OnMain,
                    transition: 'all 0.15s',
                  }}
                >
                  {selected && isMultiple ? (
                    <Text as="span" size="T200" style={{ lineHeight: 1 }}>
                      ✓
                    </Text>
                  ) : null}
                </span>
                <Text as="span" size="T300" style={{ flexGrow: 1 }}>
                  {text}
                </Text>
                {total > 0 && (
                  <Text as="span" size="T200" priority="300" style={{ flexShrink: 0 }}>
                    {pct}%
                  </Text>
                )}
              </span>
            </button>
          );
        })}
      </Box>
      <Text size="T200" priority="300" style={{ marginTop: '2px' }}>
        <i>
          {total > 0 ? `${total} vote${total === 1 ? '' : 's'} · ` : ''}
          {canVote
            ? isMultiple
              ? 'Select all that apply'
              : myVotes.size > 0
                ? 'Click to change'
                : 'Click to vote'
            : 'Voting not available'}
        </i>
      </Text>
    </Box>
  );
}