import { Modal, Radio, Space, Typography, Grid } from 'antd';
import { useState } from 'react';
import type { EditMode } from '@/types/api';
import dayjs from 'dayjs';

const { Text } = Typography;

interface Props {
  open: boolean;
  onCancel: () => void;
  onConfirm: (editMode: EditMode) => void;
  shiftDate: string;
  shiftsCount: number;
}

export default function EditModeModal({
  open,
  onCancel,
  onConfirm,
  shiftDate,
  shiftsCount,
}: Props) {
  const [mode, setMode] = useState<'THIS' | 'FUTURE' | 'ALL'>('THIS');
  const screens = Grid.useBreakpoint();
  const isMobile = !screens.md;

  const handleOk = () => {
    onConfirm({
      mode,
      fromDate: mode === 'FUTURE' ? shiftDate : undefined,
    });
  };

  return (
    <Modal
      open={open}
      onCancel={onCancel}
      title="Edit Shift Series"
      okText="Continue"
      onOk={handleOk}
      width={isMobile ? '95vw' : 500}
    >
      <Text>
        This shift is part of a repeating series. What would you like to edit?
      </Text>

      <Radio.Group
        value={mode}
        onChange={(e) => setMode(e.target.value)}
        style={{ marginTop: 16, width: '100%' }}
      >
        <Space direction="vertical" style={{ width: '100%' }}>
          <Radio value="THIS">
            <strong>Only this occurrence</strong>
            <div style={{ marginLeft: 24, color: '#666' }}>
              <Text type="secondary">
                Remove this shift from the series. Future shifts remain unchanged.
              </Text>
            </div>
          </Radio>

          <Radio value="FUTURE">
            <strong>This and all future occurrences</strong>
            <div style={{ marginLeft: 24, color: '#666' }}>
              <Text type="secondary">
                Update this shift and all shifts after {dayjs(shiftDate).format('MMM D, YYYY')}.
                Past shifts remain unchanged.
              </Text>
            </div>
          </Radio>

          <Radio value="ALL">
            <strong>All occurrences in the series</strong>
            <div style={{ marginLeft: 24, color: '#666' }}>
              <Text type="secondary">
                Update all {shiftsCount} shifts in the series.
              </Text>
            </div>
          </Radio>
        </Space>
      </Radio.Group>
    </Modal>
  );
}
