import { useGateValue } from '@statsig/react-bindings';
import React, { useState } from 'react';

import { WarningIcon } from '@/icons';

import Button, { ButtonVariant } from '../button/Button';
import SpinnerSVG from '../svg/SpinnerSVG';
import Modal from './Modal';

interface Props {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => Promise<{ success: boolean; error?: Error }>;
}

const DeleteAccountWarningModal: React.FC<Props> = ({
  isOpen,
  onClose,
  onConfirm,
}) => {
  const [isDeleting, setIsDeleting] = useState(false);
  const [confirmText, setConfirmText] = useState('');

  // Check if user has defer account deletion feature (determines content type)
  const hasDeferAccountDeletion = useGateValue('defer-account-deletions');

  // Determine deletion behavior based on feature flag
  const forceImmediate = !hasDeferAccountDeletion;

  const isConfirmValid = confirmText === 'confirm_delete';

  const handleConfirmDelete = async () => {
    if (!isConfirmValid) return;

    setIsDeleting(true);
    const result = await onConfirm();

    if (!result.success) {
      // Only close modal on error so user can see error state
      setIsDeleting(false);
      onClose();
    }
    // Don't call onClose() on success - let the parent handle redirect
    // The modal will be unmounted when the page redirects
  };

  return isOpen ? (
    <Modal
      title='Are you sure?'
      onClose={isDeleting ? () => {} : onClose}
      width={600}
      titleClassName='text-3xl font-serif'
      disableOutsideClick={isDeleting}
      showCloseButton={!isDeleting}
    >
      <div className='space-y-6'>
        {/* Deletion Info */}
        <div className='space-y-3 rounded-md border border-border-primary p-4'>
          <div className='flex items-center gap-2'>
            {forceImmediate && (
              <WarningIcon className='text-warning-primary h-4 w-4' />
            )}
            <span className='font-sans text-foreground-primary'>
              {forceImmediate ? 'Delete immediately' : 'Defer deletion'}
            </span>
          </div>
          <p className='font-sans text-foreground-primary'>
            {forceImmediate
              ? 'This action cannot be undone. This will permanently delete all data associated with this account.'
              : 'Account will be recoverable for 28 days. Reach out to support@suno.com for recovery. After 28 days, the account will no longer be recoverable.'}
          </p>
        </div>

        {/* Confirmation Input */}
        <div className='space-y-2'>
          <label
            htmlFor='confirm-delete-input'
            className='block text-sm font-medium text-foreground-primary'
          >
            Type "confirm_delete" to confirm:
          </label>
          <input
            id='confirm-delete-input'
            type='text'
            value={confirmText}
            onChange={(e) => setConfirmText(e.target.value)}
            disabled={isDeleting}
            className='focus:ring-accent-primary focus:border-accent-primary w-full rounded-md border border-border-primary bg-background-primary px-3 py-2 text-foreground-primary focus:ring-2 disabled:opacity-50'
            placeholder='confirm_delete'
          />
        </div>

        <div className='flex gap-2 pt-4'>
          <Button
            variant={ButtonVariant.Primary}
            onClick={onClose}
            disabled={isDeleting}
          >
            Cancel
          </Button>
          <Button
            onClick={handleConfirmDelete}
            icon={isDeleting && <SpinnerSVG />}
            disabled={isDeleting || !isConfirmValid}
            className={!isConfirmValid ? 'cursor-not-allowed opacity-50' : ''}
          >
            Confirm Delete
          </Button>
        </div>
      </div>
    </Modal>
  ) : null;
};

export default DeleteAccountWarningModal;