Stirling-PDF/frontend/src/proprietary/components/shared/UpdateSeatsModal.tsx

import React, { useState, useEffect } from 'react';
import { Modal, Button, Text, Alert, Loader, Stack, Group, NumberInput } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';

interface UpdateSeatsModalProps {
  opened: boolean;
  onClose: () => void;
  currentSeats: number;
  minimumSeats: number;
  _onSuccess?: () => void;
  onError?: (error: string) => void;
  onUpdateSeats?: (newSeats: number) => Promise<string>; // Returns billing portal URL
}

type UpdateState = {
  status: 'idle' | 'loading' | 'error';
  error?: string;
};

const UpdateSeatsModal: React.FC<UpdateSeatsModalProps> = ({
  opened,
  onClose,
  currentSeats,
  minimumSeats,
  _onSuccess,
  onError,
  onUpdateSeats,
}) => {
  const { t } = useTranslation();
  const [state, setState] = useState<UpdateState>({ status: 'idle' });
  const [newSeatCount, setNewSeatCount] = useState<number>(minimumSeats);

  // Reset seat count when modal opens
  useEffect(() => {
    if (opened) {
      setNewSeatCount(minimumSeats);
      setState({ status: 'idle' });
    }
  }, [opened, minimumSeats]);

  const handleUpdateSeats = async () => {
    if (!onUpdateSeats) {
      setState({
        status: 'error',
        error: 'Update function not provided',
      });
      return;
    }

    if (newSeatCount < minimumSeats) {
      setState({
        status: 'error',
        error: t(
          'billing.seatCountTooLow',
          'Seat count must be at least {{minimum}} (current number of users)',
          { minimum: minimumSeats }
        ),
      });
      return;
    }

    if (newSeatCount === currentSeats) {
      setState({
        status: 'error',
        error: t('billing.seatCountUnchanged', 'Please select a different seat count'),
      });
      return;
    }

    try {
      setState({ status: 'loading' });

      // Call the update function (will call manage-billing)
      const portalUrl = await onUpdateSeats(newSeatCount);

      // Redirect to Stripe billing portal
      console.log('Redirecting to Stripe billing portal:', portalUrl);
      window.location.href = portalUrl;

      // Note: No need to call onSuccess here since we're redirecting
      // The return flow will handle success notification
    } catch (err) {
      const errorMessage =
        err instanceof Error ? err.message : 'Failed to update seat count';
      setState({
        status: 'error',
        error: errorMessage,
      });
      onError?.(errorMessage);
    }
  };

  const handleClose = () => {
    setState({ status: 'idle' });
    setNewSeatCount(currentSeats);
    onClose();
  };

  const renderContent = () => {
    if (state.status === 'loading') {
      return (
        <Stack align="center" justify="center" style={{ padding: '2rem 0' }}>
          <Loader size="lg" />
          <Text size="sm" c="dimmed" mt="md">
            {t('billing.preparingUpdate', 'Preparing seat update...')}
          </Text>
        </Stack>
      );
    }

    return (
      <Stack gap="lg">
        {state.status === 'error' && (
          <Alert color="red" title={t('common.error', 'Error')}>
            {state.error}
          </Alert>
        )}

        <Stack gap="md" mt="md">
          <Group justify="space-between">
            <Text size="sm" fw={500}>
              {t('billing.currentSeats', 'Current Seats')}:
            </Text>
            <Text size="sm" fw={600}>
              {currentSeats}
            </Text>
          </Group>
          <Group justify="space-between">
            <Text size="sm" fw={500}>
              {t('billing.minimumSeats', 'Minimum Seats')}:
            </Text>
            <Text size="sm" c="dimmed">
              {minimumSeats} {t('billing.basedOnUsers', '(current users)')}
            </Text>
          </Group>
        </Stack>

        <NumberInput
          label={t('billing.newSeatCount', 'New Seat Count')}
          description={t(
            'billing.newSeatCountDescription',
            'Select the number of seats for your enterprise license'
          )}
          value={newSeatCount}
          onChange={(value) => setNewSeatCount(typeof value === 'number' ? value : minimumSeats)}
          min={minimumSeats}
          max={10000}
          step={1}
          size="md"
          styles={{
            input: {
              fontSize: '1.5rem',
              fontWeight: 500,
              textAlign: 'center',
            },
          }}
        />

        <Alert color="blue" title={t('billing.whatHappensNext', 'What happens next?')}>
          <Text size="sm">
            {t(
              'billing.stripePortalRedirect',
              'You will be redirected to Stripe\'s billing portal to review and confirm the seat change. The prorated amount will be calculated automatically.'
            )}
          </Text>
        </Alert>

        <Group justify="flex-end" gap="sm">
          <Button variant="outline" onClick={handleClose}>
            {t('common.cancel', 'Cancel')}
          </Button>
          <Button
            onClick={handleUpdateSeats}
            disabled={newSeatCount === currentSeats || newSeatCount < minimumSeats}
          >
            {t('billing.updateSeats', 'Update Seats')}
          </Button>
        </Group>
      </Stack>
    );
  };

  return (
    <Modal
      opened={opened}
      onClose={handleClose}
      title={
        <Text fw={600} size="lg">
          {t('billing.updateEnterpriseSeats', 'Update Enterprise Seats')}
        </Text>
      }
      size="md"
      centered
      withCloseButton={true}
      closeOnEscape={true}
      closeOnClickOutside={false}
      zIndex={Z_INDEX_OVER_CONFIG_MODAL}
    >
      {renderContent()}
    </Modal>
  );
};

export default UpdateSeatsModal;