cinny/src/app/features/room/message/RemindMeDialog.tsx

import React, { useMemo } from 'react';
import FocusTrap from 'focus-trap-react';
import {
  Box,
  Button,
  Header,
  Icon,
  IconButton,
  Icons,
  Overlay,
  OverlayBackdrop,
  OverlayCenter,
  Text,
  config,
} from 'folds';
import { stopPropagation } from '../../../utils/keyboard';
import { useReminders } from '../../../hooks/useReminders';

type RemindMeDialogProps = {
  roomId: string;
  eventId: string;
  previewText: string;
  onClose: () => void;
};

function getPresets(): Array<{ label: string; ms: number }> {
  const tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  tomorrow.setHours(9, 0, 0, 0);
  const tomorrowMs = tomorrow.getTime() - Date.now();
  const timeLabel = tomorrow.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  return [
    { label: 'In 20 minutes', ms: 20 * 60_000 },
    { label: 'In 1 hour', ms: 60 * 60_000 },
    { label: 'In 3 hours', ms: 3 * 60 * 60_000 },
    { label: `Tomorrow at ${timeLabel}`, ms: tomorrowMs },
  ];
}

export function RemindMeDialog({ roomId, eventId, previewText, onClose }: RemindMeDialogProps) {
  const { addReminder } = useReminders();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const presets = useMemo(() => getPresets(), []);

  const handlePick = async (ms: number) => {
    await addReminder({
      roomId,
      eventId,
      timestamp: Date.now() + ms,
      message: previewText || 'Reminder',
    });
    onClose();
  };

  return (
    <Overlay open backdrop={<OverlayBackdrop />}>
      <OverlayCenter>
        <FocusTrap
          focusTrapOptions={{
            initialFocus: false,
            returnFocusOnDeactivate: false,
            onDeactivate: onClose,
            clickOutsideDeactivates: true,
            escapeDeactivates: stopPropagation,
          }}
        >
          <Box
            direction="Column"
            style={{
              width: 300,
              borderRadius: 12,
              background: 'var(--bg-surface)',
              border: '1px solid var(--bg-surface-border)',
              overflow: 'hidden',
            }}
          >
            <Header variant="Surface" size="500">
              <Box grow="Yes" alignItems="Center" gap="200">
                <Icon size="100" src={Icons.Clock} />
                <Text size="H4">Remind Me</Text>
              </Box>
              <IconButton size="300" onClick={onClose} aria-label="Close">
                <Icon src={Icons.Cross} />
              </IconButton>
            </Header>
            {previewText && (
              <Box
                style={{
                  padding: `${config.space.S100} ${config.space.S400}`,
                  borderBottom: '1px solid var(--bg-surface-border)',
                }}
              >
                <Text size="T200" priority="300" truncate>
                  {previewText}
                </Text>
              </Box>
            )}
            <Box
              direction="Column"
              gap="100"
              style={{ padding: `${config.space.S200} ${config.space.S200} ${config.space.S300}` }}
            >
              {presets.map((p) => (
                <Button
                  key={p.label}
                  variant="Secondary"
                  fill="Soft"
                  size="300"
                  radii="300"
                  style={{ justifyContent: 'flex-start' }}
                  onClick={() => handlePick(p.ms)}
                >
                  <Text size="B300">{p.label}</Text>
                </Button>
              ))}
            </Box>
          </Box>
        </FocusTrap>
      </OverlayCenter>
    </Overlay>
  );
}