/**
 * @ai-summary Mobile banner showing pending account deletion with cancel option
 */

import React from 'react';
import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
import { useDeletionStatus, useCancelDeletion } from '../hooks/useDeletion';

export const PendingDeletionBanner: React.FC = () => {
  const { data: deletionStatus, isLoading } = useDeletionStatus();
  const cancelDeletionMutation = useCancelDeletion();

  // Don't show banner if not loading and not pending deletion
  if (isLoading || !deletionStatus?.isPendingDeletion) {
    return null;
  }

  const handleCancelDeletion = async () => {
    await cancelDeletionMutation.mutateAsync();
  };

  return (
    <GlassCard padding="md" className="bg-amber-50/80 border-amber-200/70">
      <div className="space-y-3">
        <div>
          <h3 className="text-lg font-semibold text-amber-900 mb-1">Account Deletion Pending</h3>
          <p className="text-sm text-amber-800">
            Your account is scheduled for deletion in{' '}
            <strong>{deletionStatus.daysRemaining} {deletionStatus.daysRemaining === 1 ? 'day' : 'days'}</strong>.
          </p>
          {deletionStatus.deletionScheduledFor && (
            <p className="text-xs text-amber-700 mt-1">
              Scheduled for: {new Date(deletionStatus.deletionScheduledFor).toLocaleDateString()}
            </p>
          )}
        </div>

        <button
          onClick={handleCancelDeletion}
          disabled={cancelDeletionMutation.isPending}
          className="w-full py-2.5 px-4 bg-amber-600 text-white rounded-lg font-medium hover:bg-amber-700 transition-colors disabled:opacity-50 flex items-center justify-center"
          style={{ minHeight: '44px' }}
        >
          {cancelDeletionMutation.isPending ? (
            <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
          ) : (
            'Cancel Deletion'
          )}
        </button>
      </div>
    </GlassCard>
  );
};