thrilltrack-explorer/src-old/components/settings/AccountDeletionDialog.tsx

import { useReducer } from 'react';
import { invokeWithTracking } from '@/lib/edgeFunctionTracking';
import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter } from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Checkbox } from '@/components/ui/checkbox';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { supabase } from '@/lib/supabaseClient';
import { Loader2, AlertTriangle, Info } from 'lucide-react';
import {
  deletionDialogReducer,
  initialState,
  canProceedToConfirm,
  canRequestDeletion,
  canConfirmDeletion
} from '@/lib/deletionDialogMachine';
import { handleError, handleSuccess } from '@/lib/errorHandler';

interface AccountDeletionDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  userEmail: string;
  onDeletionRequested: () => void;
}

export function AccountDeletionDialog({ open, onOpenChange, userEmail, onDeletionRequested }: AccountDeletionDialogProps) {
  const [state, dispatch] = useReducer(deletionDialogReducer, initialState);

  const handleRequestDeletion = async () => {
    if (!canRequestDeletion(state)) return;
    
    // Phase 4: AAL2 check for security-critical operations
    const { data: { session } } = await supabase.auth.getSession();
    if (session) {
      // Check if user has MFA enrolled
      const { data: factorsData } = await supabase.auth.mfa.listFactors();
      const hasMFA = factorsData?.totp?.some(f => f.status === 'verified') || false;
      
      if (hasMFA) {
        const jwt = session.access_token;
        const payload = JSON.parse(atob(jwt.split('.')[1]));
        const currentAal = payload.aal || 'aal1';
        
        if (currentAal !== 'aal2') {
          handleError(
            new Error('Please verify your identity with MFA first'),
            { action: 'Request account deletion' }
          );
          sessionStorage.setItem('mfa_step_up_required', 'true');
          sessionStorage.setItem('mfa_intended_path', '/settings');
          window.location.href = '/auth';
          return;
        }
      }
    }
    
    dispatch({ type: 'SET_LOADING', payload: true });
    
    try {
      const { data, error, requestId } = await invokeWithTracking(
        'request-account-deletion',
        {},
        (await supabase.auth.getUser()).data.user?.id
      );

      if (error) throw error;

      // Clear MFA session storage
      sessionStorage.removeItem('mfa_step_up_required');
      sessionStorage.removeItem('mfa_intended_path');

      dispatch({
        type: 'REQUEST_DELETION',
        payload: { scheduledDate: data.scheduled_deletion_at }
      });
      onDeletionRequested();
      
      handleSuccess('Deletion Requested', 'Check your email for the confirmation code.');
    } catch (error: unknown) {
      handleError(error, { action: 'Request account deletion' });
      dispatch({ type: 'SET_ERROR', payload: 'Failed to request deletion' });
    }
  };

  const handleConfirmDeletion = async () => {
    if (!canConfirmDeletion(state)) {
      handleError(
        new Error('Please enter a 6-digit confirmation code and confirm you received it'),
        { action: 'Confirm deletion' }
      );
      return;
    }

    dispatch({ type: 'SET_LOADING', payload: true });
    
    try {
      const { error, requestId } = await invokeWithTracking(
        'confirm-account-deletion',
        { confirmation_code: state.confirmationCode },
        (await supabase.auth.getUser()).data.user?.id
      );

      if (error) throw error;

      handleSuccess(
        'Deletion Confirmed',
        'Your account has been deactivated and scheduled for permanent deletion.'
      );

      // Refresh the page to show the deletion banner
      window.location.reload();
    } catch (error: unknown) {
      handleError(error, { action: 'Confirm account deletion' });
    }
  };

  const handleResendCode = async () => {
    dispatch({ type: 'SET_LOADING', payload: true });
    
    try {
      const { error, requestId } = await invokeWithTracking(
        'resend-deletion-code',
        {},
        (await supabase.auth.getUser()).data.user?.id
      );

      if (error) throw error;

      handleSuccess('Code Resent', 'A new confirmation code has been sent to your email.');
    } catch (error: unknown) {
      handleError(error, { action: 'Resend deletion code' });
    } finally {
      dispatch({ type: 'SET_LOADING', payload: false });
    }
  };

  const handleClose = () => {
    dispatch({ type: 'RESET' });
    onOpenChange(false);
  };

  return (
    <AlertDialog open={open} onOpenChange={handleClose}>
      <AlertDialogContent className="max-w-2xl">
        <AlertDialogHeader>
          <AlertDialogTitle className="flex items-center gap-2 text-destructive">
            <AlertTriangle className="w-5 h-5" />
            Delete Account
          </AlertDialogTitle>
          <AlertDialogDescription className="text-left space-y-4">
            {state.step === 'warning' && (
              <>
                <Alert>
                  <Info className="w-4 h-4" />
                  <AlertDescription>
                    This action will permanently delete your account after a 2-week waiting period. Please read carefully.
                  </AlertDescription>
                </Alert>

                <div className="space-y-3">
                  <div>
                    <h4 className="font-semibold text-foreground mb-2">What will be DELETED:</h4>
                    <ul className="space-y-1 text-sm">
                      <li>✗ Your profile information (username, bio, avatar, etc.)</li>
                      <li>✗ Your reviews and ratings</li>
                      <li>✗ Your personal preferences and settings</li>
                    </ul>
                  </div>

                  <div>
                    <h4 className="font-semibold text-foreground mb-2">What will be PRESERVED:</h4>
                    <ul className="space-y-1 text-sm">
                      <li>✓ Your database submissions (park creations, ride additions, edits)</li>
                      <li>✓ Photos you've uploaded (shown as "Submitted by [deleted user]")</li>
                      <li>✓ Edit history and contributions</li>
                    </ul>
                  </div>

                  <Alert variant="destructive">
                    <AlertDescription>
                      <strong>24-Hour Code + 2-Week Waiting Period:</strong> After confirming with the code (within 24 hours), your account will be deactivated immediately. You'll then have 14 days to cancel before permanent deletion.
                    </AlertDescription>
                  </Alert>
                </div>
              </>
            )}

            {state.step === 'confirm' && (
              <Alert variant="destructive">
                <AlertDescription>
                  Are you absolutely sure? You'll receive a confirmation code via email. After confirming with the code, your account will be deactivated and scheduled for deletion in 2 weeks.
                </AlertDescription>
              </Alert>
            )}

            {state.step === 'code' && (
              <div className="space-y-4">
                <Alert>
                  <Info className="w-4 h-4" />
                  <AlertDescription>
                    A 6-digit confirmation code has been sent to <strong>{userEmail}</strong>. Enter it below within 24 hours to confirm deletion. Your account will be deactivated and scheduled for deletion on{' '}
                    <strong>{state.scheduledDate ? new Date(state.scheduledDate).toLocaleDateString() : '14 days from confirmation'}</strong>.
                  </AlertDescription>
                </Alert>

                <div className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="confirmationCode">Confirmation Code</Label>
                    <Input
                      id="confirmationCode"
                      type="text"
                      placeholder="000000"
                      maxLength={6}
                      value={state.confirmationCode}
                      onChange={(e) => dispatch({ type: 'UPDATE_CODE', payload: { code: e.target.value } })}
                      className="text-center text-2xl tracking-widest"
                    />
                  </div>

                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="codeReceived"
                      checked={state.codeReceived}
                      onCheckedChange={() => dispatch({ type: 'TOGGLE_CODE_RECEIVED' })}
                    />
                    <Label htmlFor="codeReceived" className="text-sm font-normal cursor-pointer">
                      I have received the code in my email
                    </Label>
                  </div>

                  <Button
                    variant="outline"
                    onClick={handleResendCode}
                    disabled={state.isLoading}
                    className="w-full"
                  >
                    {state.isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Resend Code'}
                  </Button>
                </div>
              </div>
            )}
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          {state.step === 'warning' && (
            <>
              <Button variant="outline" onClick={handleClose}>
                Cancel
              </Button>
              <Button 
                variant="destructive" 
                onClick={() => dispatch({ type: 'CONTINUE_TO_CONFIRM' })}
                disabled={!canProceedToConfirm(state)}
              >
                Continue
              </Button>
            </>
          )}

          {state.step === 'confirm' && (
            <>
              <Button variant="outline" onClick={() => dispatch({ type: 'GO_BACK_TO_WARNING' })}>
                Go Back
              </Button>
              <Button
                variant="destructive"
                onClick={handleRequestDeletion}
                disabled={!canRequestDeletion(state)}
              >
                {state.isLoading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : null}
                Request Deletion
              </Button>
            </>
          )}

          {state.step === 'code' && (
            <>
              <Button variant="outline" onClick={handleClose}>
                Close
              </Button>
              <Button
                variant="destructive"
                onClick={handleConfirmDeletion}
                disabled={!canConfirmDeletion(state)}
              >
                {state.isLoading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : null}
                Verify Code & Deactivate Account
              </Button>
            </>
          )}
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}