/**
 * @ai-summary Mobile modal for requesting account deletion with 30-day grace period
 */

import React, { useState, useEffect } from 'react';
import { useRequestDeletion } from '../hooks/useDeletion';

interface DeleteAccountModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({ isOpen, onClose }) => {
  const [confirmationText, setConfirmationText] = useState('');
  const requestDeletionMutation = useRequestDeletion();

  // Clear form when modal closes
  useEffect(() => {
    if (!isOpen) {
      setConfirmationText('');
    }
  }, [isOpen]);

  if (!isOpen) return null;

  const handleSubmit = async () => {
    if (confirmationText !== 'DELETE') {
      return;
    }

    await requestDeletionMutation.mutateAsync({ confirmationText });
    onClose();
  };

  const isValid = confirmationText === 'DELETE';

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-white dark:bg-scuro rounded-lg p-6 max-w-md w-full">
        <h3 className="text-xl font-semibold text-slate-800 dark:text-avus mb-4">Delete Account</h3>

        {/* Warning Alert */}
        <div className="mb-4 p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 rounded-lg">
          <p className="font-semibold text-amber-900 dark:text-amber-200 mb-2">30-Day Grace Period</p>
          <p className="text-sm text-amber-800 dark:text-amber-300">
            Your account will be scheduled for deletion in 30 days. You can cancel this request at any time during
            the grace period by logging back in.
          </p>
        </div>

        {/* Confirmation Input */}
        <div className="mb-6">
          <label className="block text-sm font-medium text-slate-700 dark:text-avus mb-1">
            Type DELETE to confirm
          </label>
          <input
            type="text"
            value={confirmationText}
            onChange={(e) => setConfirmationText(e.target.value)}
            placeholder="DELETE"
            className={`w-full px-3 py-2 border rounded-lg focus:ring-2 dark:bg-scuro dark:text-avus ${
              confirmationText.length > 0 && confirmationText !== 'DELETE'
                ? 'border-red-300 dark:border-red-700 focus:ring-red-500 focus:border-red-500'
                : 'border-slate-300 dark:border-silverstone focus:ring-red-500 focus:border-red-500'
            }`}
            style={{ fontSize: '16px', minHeight: '44px' }}
          />
          <p className="text-xs text-slate-500 dark:text-titanio mt-1">Type the word "DELETE" (all caps) to confirm</p>
        </div>

        {/* Action Buttons */}
        <div className="flex space-x-3">
          <button
            onClick={onClose}
            disabled={requestDeletionMutation.isPending}
            className="flex-1 py-2.5 px-4 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-lg font-medium hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors disabled:opacity-50"
            style={{ minHeight: '44px' }}
          >
            Cancel
          </button>
          <button
            onClick={handleSubmit}
            disabled={!isValid || requestDeletionMutation.isPending}
            className="flex-1 py-2.5 px-4 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 transition-colors disabled:opacity-50 flex items-center justify-center"
            style={{ minHeight: '44px' }}
          >
            {requestDeletionMutation.isPending ? (
              <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
            ) : (
              'Delete Account'
            )}
          </button>
        </div>
      </div>
    </div>
  );
};
