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

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 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: tomorrow.getTime() - Date.now() },
  ];
}

export function RemindMeDialog({ roomId, eventId, previewText, onClose }: RemindMeDialogProps) {
  const modalStyle = useModalStyle(320);
  const { addReminder } = useReminders();
  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,
            onDeactivate: onClose,
            clickOutsideDeactivates: true,
            escapeDeactivates: stopPropagation,
          }}
        >
          <Dialog
            variant="Surface"
            role="dialog"
            aria-modal="true"
            aria-labelledby="remind-me-title"
            style={modalStyle}
          >
            <Header
              variant="Surface"
              size="500"
              style={{
                padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
                borderBottomWidth: config.borderWidth.B300,
              }}
            >
              <Box grow="Yes" alignItems="Center" gap="200">
                <Icon src={Icons.Clock} size="100" />
                <Text id="remind-me-title" size="H4">
                  Remind Me
                </Text>
              </Box>
              <IconButton size="300" radii="300" onClick={onClose} aria-label="Close">
                <Icon src={Icons.Cross} />
              </IconButton>
            </Header>
            {previewText && (
              <>
                <Box style={{ padding: `${config.space.S200} ${config.space.S400}` }}>
                  <Text size="T200" priority="300" truncate>
                    {previewText}
                  </Text>
                </Box>
                <Line size="300" />
              </>
            )}
            <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
              {presets.map((p) => (
                <Button
                  key={p.label}
                  size="300"
                  variant="Secondary"
                  fill="Soft"
                  radii="300"
                  onClick={() => handlePick(p.ms)}
                >
                  <Text size="B300" truncate>
                    {p.label}
                  </Text>
                </Button>
              ))}
            </Box>
          </Dialog>
        </FocusTrap>
      </OverlayCenter>
    </Overlay>
  );
}