file re-org

src/pages/admin/components/ProfileManager.tsx

@@ -0,0 +1,600 @@
+// src/components/ProfileManager.tsx
+import React, { useState, useEffect } from 'react';
+import type { Profile } from '../types';
+import { updateUserPreferences, updateUserPassword, deleteUserAccount, loginUser, registerUser, requestPasswordReset, updateUserProfile, exportUserData } from '../services/apiClient';
+import { notifySuccess, notifyError } from '../../services/notificationService';
+import { logger } from '../../services/logger';
+import { LoadingSpinner } from '../../components/LoadingSpinner';
+import { XMarkIcon } from '../../components/icons/XMarkIcon';
+import { GoogleIcon } from '../../components/icons/GoogleIcon';
+import { GithubIcon } from '../../components/icons/GithubIcon';
+import { ConfirmationModal } from '../../components/ConfirmationModal';
+import { User } from '../types';
+import { PasswordInput } from './components/PasswordInput';
+
+type AuthStatus = 'SIGNED_OUT' | 'ANONYMOUS' | 'AUTHENTICATED';
+interface ProfileManagerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  user: User | null; // Can be null for login/register
+  authStatus: AuthStatus;
+  profile: Profile | null; // Can be null for login/register
+  onProfileUpdate: (updatedProfile: Profile) => void;
+  onSignOut: () => void;
+  onLoginSuccess: (user: User, token: string, rememberMe: boolean) => void; // Add login handler
+}
+
+export const ProfileManager: React.FC<ProfileManagerProps> = ({ isOpen, onClose, user, authStatus, profile, onProfileUpdate, onSignOut, onLoginSuccess }) => {
+  const [activeTab, setActiveTab] = useState('profile');
+  
+  // Profile state
+  const [fullName, setFullName] = useState(profile?.full_name || '');
+  const [avatarUrl, setAvatarUrl] = useState(profile?.avatar_url || '');
+  const [profileLoading, setProfileLoading] = useState(false);
+
+  // Password state
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [passwordLoading, setPasswordLoading] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+
+  // Data & Privacy state
+  const [exportLoading, setExportLoading] = useState(false);
+  const [isConfirmingDelete, setIsConfirmingDelete] = useState(false);
+  const [passwordForDelete, setPasswordForDelete] = useState('');
+  const [deleteLoading, setDeleteLoading] = useState(false);
+
+  // Login/Register State
+  const [isRegistering, setIsRegistering] = useState(false);
+  const [authEmail, setAuthEmail] = useState('');
+  const [authPassword, setAuthPassword] = useState('');
+  const [authFullName, setAuthFullName] = useState(''); // State for full name
+  const [authAvatarUrl, setAuthAvatarUrl] = useState(''); // State for avatar URL
+  const [authLoading, setAuthLoading] = useState(false);
+  const [isForgotPassword, setIsForgotPassword] = useState(false);
+  const [rememberMe, setRememberMe] = useState(false);
+
+
+  useEffect(() => {
+    // Only reset state when the modal is opened.
+    // Do not reset on profile changes, which can happen during sign-out.
+    if (isOpen && profile) { // Ensure profile exists before setting state
+      setFullName(profile?.full_name || '');
+      setAvatarUrl(profile?.avatar_url || '');
+      setActiveTab('profile');
+      setIsConfirmingDelete(false);
+      setPasswordForDelete('');
+      setAuthEmail('');
+      setAuthPassword('');
+      setAuthFullName('');
+      setAuthAvatarUrl('');
+      setIsRegistering(false);
+      setIsForgotPassword(false);
+      setRememberMe(false); // Reset on open
+    }
+  }, [isOpen, profile]); // Depend on isOpen and profile
+
+  const handleProfileSave = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setProfileLoading(true);
+    if (!user) {
+        notifyError("Cannot save profile, no user is logged in.");
+        setProfileLoading(false);
+        return;
+    }
+    try {
+        const updatedProfile = await updateUserProfile({ // Use the new apiClient function
+            full_name: fullName,
+            avatar_url: avatarUrl
+        });
+        onProfileUpdate(updatedProfile);
+        logger.info('User profile updated successfully.', { userId: user.user_id, fullName, avatarUrl });
+        notifySuccess('Profile updated successfully!');
+    } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred.';
+        logger.error('Failed to update user profile.', { userId: user.user_id, error: errorMessage });
+        notifyError(errorMessage);
+    } finally {
+        setProfileLoading(false);
+    }
+  };
+  
+  const handleOAuthLink = async (provider: 'google' | 'github') => {
+    // This will redirect the user to the OAuth provider to link the account.
+    // TODO: This is a placeholder. Implement OAuth account linking via the Passport.js backend.
+    if (!user) {
+        return; // Should not be possible to see this button if not logged in
+    }
+
+    const errorMessage = `Account linking with ${provider} is not yet implemented.`;
+    logger.warn(errorMessage, { userId: user.user_id });
+    notifyError(errorMessage);
+  };
+
+  const handlePasswordUpdate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+        notifyError("Passwords do not match.");
+        return;
+    }
+    if (password.length < 6) {
+        notifyError("Password must be at least 6 characters long.");
+        return;
+    }
+    setPasswordLoading(true);
+    if (!user) {
+        notifyError("Cannot update password, no user is logged in.");
+        setPasswordLoading(false);
+        return;
+    }
+    try {
+        await updateUserPassword(password); // This now uses the new apiClient function
+        logger.info('User password updated successfully.', { userId: user.user_id });
+        notifySuccess("Password updated successfully!");
+        setPassword('');
+        setConfirmPassword('');
+    } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred.';
+        logger.error('Failed to update user password.', { userId: user.user_id, error: errorMessage });
+        notifyError(errorMessage);
+    } finally {
+        setPasswordLoading(false);
+    }
+  };
+
+  const handleExportData = async () => {
+    setExportLoading(true);
+    if (!user) {
+        notifyError("Cannot export data, no user is logged in.");
+        setExportLoading(false);
+        return;
+    }
+    try {
+        logger.info('User initiated data export.', { userId: user.user_id });
+        const userData = await exportUserData(); // Call the new apiClient function
+        const jsonString = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(userData, null, 2))}`;
+        const link = document.createElement("a");
+        link.href = jsonString;
+        link.download = `flyer-crawler-data-export-${new Date().toISOString().split('T')[0]}.json`;
+        link.click();
+    } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred.';
+        logger.error("Failed to export user data:", { userId: user.user_id, error: errorMessage });
+        notifyError(`Error exporting data: ${errorMessage}`);
+    } finally {
+        setExportLoading(false);
+    }
+  };
+
+  const handleDeleteAccount = async () => {
+    setIsDeleteModalOpen(false); // Close the confirmation modal
+    setDeleteLoading(true);
+
+    if (!user) {
+      notifyError("Cannot delete account, no user is logged in.");
+      setDeleteLoading(false);
+      return;
+    }
+
+    try {
+      logger.warn('User initiated account deletion.', { userId: user.user_id });
+      await deleteUserAccount(passwordForDelete);
+      logger.warn('User account deleted successfully.', { userId: user.user_id });
+
+      // Set a success message and then sign out after a short delay
+      notifySuccess("Account deleted successfully. You will be logged out shortly.");
+      setTimeout(() => {
+        onClose();
+        onSignOut();
+      }, 3000); // 3-second delay for user to read the message
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred.';
+      logger.error('Account deletion failed for user:', { userId: user.user_id, error: errorMessage }); // This was a duplicate log, fixed.
+      notifyError(errorMessage);
+      setDeleteLoading(false); // Stop loading on failure
+    } finally {
+      // Loading state will persist on success until the component unmounts.
+    }
+  };
+
+  const handleToggleDarkMode = async (newMode: boolean) => {
+    if (!user) {
+        notifyError("Cannot update preferences, no user is logged in.");
+        return;
+    }
+    try {
+      // Call the API client function to update preferences
+      const updatedProfile = await updateUserPreferences({ darkMode: newMode });
+      // Notify parent component (App.tsx) to update its profile state
+      onProfileUpdate(updatedProfile);
+      logger.info('Dark mode preference updated.', { userId: user.user_id, darkMode: newMode });
+    } catch (e) {
+      const errorMessage = e instanceof Error ? e.message : String(e);
+      logger.error('Failed to update dark mode preference:', { userId: user.user_id, error: errorMessage });
+      notifyError(`Failed to update dark mode: ${errorMessage}`);
+    }
+  };
+
+  const handleToggleUnitSystem = async (newSystem: 'metric' | 'imperial') => {
+    if (!user) {
+        notifyError("Cannot update preferences, no user is logged in.");
+        return;
+    }
+    try {
+      // Call the API client function to update preferences
+      const updatedProfile = await updateUserPreferences({ unitSystem: newSystem });
+      // Notify parent component (App.tsx) to update its profile state
+      onProfileUpdate(updatedProfile);
+      logger.info('Unit system preference updated.', { userId: user.user_id, unitSystem: newSystem });
+    } catch (e) {
+      const errorMessage = e instanceof Error ? e.message : String(e);
+      logger.error('Failed to update unit system preference:', { userId: user.user_id, error: errorMessage });
+      notifyError(`Failed to update unit system: ${errorMessage}`);
+    }
+  };
+
+  const handleAuthSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setAuthLoading(true);
+
+    // Use a timeout to allow the UI to update to the loading state before the async operation begins.
+    // This is crucial for testing the loading state correctly.
+    setTimeout(async () => {
+        try {
+            let response;
+            if (isRegistering) {
+                response = await registerUser(authEmail, authPassword, authFullName, authAvatarUrl);
+                logger.info('New user registration successful.', { email: authEmail });
+            } else {
+                response = await loginUser(authEmail, authPassword, rememberMe);
+            }
+            onLoginSuccess(response.user, response.token, rememberMe);
+            onClose(); // Close modal on success
+        } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred.';
+            notifyError(errorMessage); // Use toast notification for consistency
+        } finally {
+            setAuthLoading(false);
+        }
+    }, 0);
+  };
+
+  const handlePasswordResetRequest = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setAuthLoading(true);
+    try {
+        const { message } = await requestPasswordReset(authEmail);
+        notifySuccess(message);
+        logger.info('Password reset email sent successfully.', { email: authEmail });
+    } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred.';
+        notifyError(errorMessage);
+        logger.error('Password reset request failed.', { email: authEmail, error: errorMessage });
+    } finally {
+        setAuthLoading(false);
+    }
+  };
+
+  const handleOAuthSignIn = (provider: 'google' | 'github') => {
+    // Redirect to the backend OAuth initiation route
+    // The backend will then handle the redirect to the OAuth provider
+    // and eventually redirect back to the frontend with a token.
+    window.location.href = '/api/auth/' + provider;
+    // Set authLoading to true to show a spinner while redirecting
+    setAuthLoading(true);
+  };
+
+
+  if (!isOpen) return null;
+
+  return (
+    <div 
+      className="fixed inset-0 bg-black bg-opacity-60 z-50 flex justify-center items-center p-4"
+      onClick={onClose}
+      aria-modal="true"
+      role="dialog"
+    >
+      <ConfirmationModal
+        isOpen={isDeleteModalOpen}
+        onClose={() => setIsDeleteModalOpen(false)}
+        onConfirm={handleDeleteAccount} // Pass the handler directly
+        title="Confirm Account Deletion"
+        message={
+          <>
+            Are you absolutely sure you want to delete your account?
+            <strong className="block mt-2">This action is permanent and cannot be undone.</strong>
+          </>
+        }
+        confirmButtonText="Yes, Delete My Account"
+      />
+      <div 
+        className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-lg relative"
+        onClick={e => e.stopPropagation()}
+      >
+        <button 
+          onClick={onClose} 
+          className="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
+          aria-label="Close profile manager"
+        >
+          <XMarkIcon className="w-6 h-6" />
+        </button>
+
+        {authStatus === 'SIGNED_OUT' ? (
+            isForgotPassword ? (
+                <div className="p-8">
+                    <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-1">Reset Password</h2>
+                    <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">Enter your email to receive a password reset link.</p>                    <form data-testid="reset-password-form" onSubmit={handlePasswordResetRequest} className="space-y-4">
+                        <div>
+                            <label htmlFor="resetEmail" className="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
+                            <input id="resetEmail" type="email" value={authEmail} onChange={e => setAuthEmail(e.target.value)} required className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm" />
+                        </div>
+                        <div className="pt-2">
+                            <button type="submit" disabled={authLoading} className="w-full bg-brand-secondary hover:bg-brand-dark disabled:bg-gray-400 text-white font-bold py-2.5 px-4 rounded-lg flex justify-center">
+                                {authLoading ? <div className="w-5 h-5"><LoadingSpinner /></div> : 'Send Reset Link'}
+                            </button>
+                        </div>
+                    </form>
+                    <div className="text-center mt-4">
+                        <button onClick={() => { setIsForgotPassword(false); }} className="text-sm font-medium text-brand-primary hover:underline">
+                            Back to Sign In
+                        </button>
+                    </div>
+                </div>
+            ) : (
+                <div className="p-8">
+                    <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-1">{isRegistering ? 'Create an Account' : 'Sign In'}</h2>
+                    <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">{isRegistering ? 'to get started.' : 'to access your account.'}</p>
+                    {/* When registering, show optional fields for full name and avatar URL */}
+                    {isRegistering && (
+                        <div className="space-y-4 mb-4">
+                            <div>
+                                <label htmlFor="authFullName" className="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
+                                <input id="authFullName" type="text" value={authFullName} onChange={e => setAuthFullName(e.target.value)} className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm" placeholder="Optional" />
+                            </div>
+                            <div>
+                                <label htmlFor="authAvatarUrl" className="block text-sm font-medium text-gray-700 dark:text-gray-300">Avatar URL</label>
+                                <input id="authAvatarUrl" type="url" value={authAvatarUrl} onChange={e => setAuthAvatarUrl(e.target.value)} className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm" placeholder="Optional, e.g., http://example.com/avatar.png" />
+                            </div>
+                        </div>
+                    )}                    <form data-testid="auth-form" onSubmit={handleAuthSubmit} className="space-y-4">
+                        <div>
+                            <label htmlFor="authEmail" className="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
+                                <input id="authEmail" type="email" value={authEmail} onChange={e => setAuthEmail(e.target.value)} required className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-brand-primary focus:border-brand-primary sm:text-sm" />
+                        </div>
+                        <div>
+                            <label htmlFor="authPassword" className="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
+                                <PasswordInput
+                                    id="authPassword"
+                                    value={authPassword}
+                                    onChange={e => setAuthPassword(e.target.value)}
+                                    required
+                                    className="mt-1"
+                                    showStrength={isRegistering}
+                                />
+                        </div>
+                        {!isRegistering && (
+                            <div className="flex items-center justify-between text-sm">
+                                <div className="flex items-center">
+                                    <input id="remember-me" name="remember-me" type="checkbox" checked={rememberMe} onChange={(e) => setRememberMe(e.target.checked)} className="h-4 w-4 text-brand-primary border-gray-300 rounded focus:ring-brand-secondary" />
+                                    <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900 dark:text-gray-300">
+                                        Remember me
+                                    </label>
+                                </div>
+                                <button type="button" onClick={() => setIsForgotPassword(true)} className="font-medium text-brand-primary hover:underline">
+                                    Forgot password?
+                                </button>
+                            </div>
+                        )}
+                        <div className="pt-2">
+                            <button type="submit" disabled={authLoading} className="w-full bg-brand-secondary hover:bg-brand-dark disabled:bg-gray-400 text-white font-bold py-2.5 px-4 rounded-lg flex justify-center">
+                                {authLoading ? <div className="w-5 h-5"><LoadingSpinner /></div> : (isRegistering ? 'Register' : 'Sign In')}
+                            </button>
+                        </div>
+                    </form>
+                    <div className="text-center mt-4">
+                        <button onClick={() => { setIsRegistering(!isRegistering); }} className="text-sm font-medium text-brand-primary hover:underline">
+                            {isRegistering ? 'Already have an account? Sign In' : "Don't have an account? Register"}
+                        </button>
+                    </div>
+                    <div className="relative my-6">
+                        <div className="absolute inset-0 flex items-center" aria-hidden="true">
+                            <div className="w-full border-t border-gray-300 dark:border-gray-600" />
+                        </div>
+                        <div className="relative flex justify-center">
+                            <span className="bg-white dark:bg-gray-800 px-2 text-sm text-gray-500 dark:text-gray-400">Or continue with</span>
+                        </div>
+                    </div>
+                    <div className="space-y-3">
+                        <button type="button" onClick={() => handleOAuthSignIn('google')} disabled={authLoading} className="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed">
+                            {authLoading ? <div className="w-5 h-5 mr-3"><LoadingSpinner /></div> : <GoogleIcon className="w-5 h-5 mr-3" />}
+                            Sign In with Google
+                        </button>
+                        <button type="button" onClick={() => handleOAuthSignIn('github')} disabled={authLoading} className="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed">
+                            {authLoading ? <div className="w-5 h-5 mr-3"><LoadingSpinner /></div> : <GithubIcon className="w-5 h-5 mr-3" />}
+                            Sign In with GitHub
+                        </button>
+                    </div>
+                </div>
+            )
+        ) : (
+            // Wrap the authenticated view in a React Fragment to return a single element
+            <>
+                <div className="p-8">
+                    <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-1">My Account</h2>
+                    <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">Manage your profile, preferences, and security.</p>
+
+                    <div className="border-b border-gray-200 dark:border-gray-700 mb-6">
+                        <nav className="-mb-px flex space-x-6" aria-label="Tabs">
+                            <button onClick={() => setActiveTab('profile')} className={`whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm ${activeTab === 'profile' ? 'border-brand-primary text-brand-primary' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>
+                                Profile
+                            </button>
+                            <button onClick={() => setActiveTab('security')} className={`whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm ${activeTab === 'security' ? 'border-brand-primary text-brand-primary' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>
+                                Security
+                            </button>
+                            <button onClick={() => setActiveTab('data')} className={`whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm ${activeTab === 'data' ? 'border-brand-primary text-brand-primary' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>
+                                Data & Privacy
+                            </button>
+                            <button onClick={() => setActiveTab('preferences')} className={`whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm ${activeTab === 'preferences' ? 'border-brand-primary text-brand-primary' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>
+                                Preferences
+                            </button>
+                        </nav>
+                    </div>
+
+                    {activeTab === 'profile' && (
+                        <form onSubmit={handleProfileSave} className="space-y-4">
+                            <div>
+                                <label htmlFor="fullName" className="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
+                                <input id="fullName" type="text" value={fullName} onChange={e => setFullName(e.target.value)} className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm" />
+                            </div>
+                            <div>
+                                <label htmlFor="avatarUrl" className="block text-sm font-medium text-gray-700 dark:text-gray-300">Avatar URL</label>
+                                <input id="avatarUrl" type="url" value={avatarUrl} onChange={e => setAvatarUrl(e.target.value)} className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm" />
+                            </div>
+                            <div className="pt-2">
+                                <button type="submit" disabled={profileLoading} className="w-full bg-brand-secondary hover:bg-brand-dark disabled:bg-gray-400 text-white font-bold py-2.5 px-4 rounded-lg flex justify-center">
+                                    {profileLoading ? <div className="w-5 h-5"><LoadingSpinner /></div> : 'Save Profile'}
+                                </button>
+                            </div>
+                        </form>
+                    )}
+
+                    {activeTab === 'security' && (
+                        <form data-testid="update-password-form" onSubmit={handlePasswordUpdate} className="space-y-4">
+                            <div>
+                                <label htmlFor="newPassword" className="block text-sm font-medium text-gray-700 dark:text-gray-300">New Password</label>
+                                <PasswordInput
+                                    id="newPassword"
+                                    value={password}
+                                    onChange={e => setPassword(e.target.value)}
+                                    placeholder="••••••••"
+                                    required
+                                    className="mt-1"
+                                    showStrength
+                                />
+                            </div>
+                            <div>
+                                <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm New Password</label>
+                                <PasswordInput
+                                    id="confirmPassword"
+                                    value={confirmPassword}
+                                    onChange={e => setConfirmPassword(e.target.value)}
+                                    placeholder="••••••••"
+                                    required
+                                    className="mt-1"
+                                />
+                            </div>
+                            <div className="pt-2">
+                                <button type="submit" disabled={passwordLoading} className="w-full bg-brand-secondary hover:bg-brand-dark disabled:bg-gray-400 text-white font-bold py-2.5 px-4 rounded-lg flex justify-center">
+                                    {passwordLoading ? <div className="w-5 h-5"><LoadingSpinner /></div> : 'Update Password'}
+                                </button>
+                            </div>
+
+                            <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
+                                <h3 className="text-md font-semibold text-gray-800 dark:text-white">Link Social Accounts</h3>
+                                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1 mb-3">Connect other accounts for easier sign-in.</p>
+                                <div className="space-y-3">
+                                    <button type="button" onClick={() => handleOAuthLink('google')} className="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">
+                                        <GoogleIcon className="w-5 h-5 mr-3" />
+                                        Link Google Account
+                                    </button>
+                                    <button type="button" onClick={() => handleOAuthLink('github')} className="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">
+                                        <GithubIcon className="w-5 h-5 mr-3" />
+                                        Link GitHub Account
+                                    </button>
+                                </div>
+                            </div>
+                        </form>
+                    )}
+
+                    {activeTab === 'data' && (
+                        <div className="space-y-6">
+                            <div>
+                                <h3 className="text-md font-semibold text-gray-800 dark:text-white">Export Your Data</h3>
+                                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Download a JSON file of your profile, watched items, and shopping lists.</p>
+                                <button onClick={handleExportData} disabled={exportLoading} className="mt-3 w-full sm:w-auto bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-white font-bold py-2 px-4 rounded-lg flex items-center justify-center">
+                                {exportLoading ? <div className="w-5 h-5"><LoadingSpinner /></div> : 'Export My Data'}
+                                </button>
+                            </div>
+
+                            <div className="border-t border-gray-200 dark:border-gray-700"></div>
+
+                            <div className="p-4 border border-red-500/50 dark:border-red-400/50 bg-red-50 dark:bg-red-900/20 rounded-lg">
+                                <h3 className="text-md font-semibold text-red-800 dark:text-red-300">Danger Zone</h3>
+                                <p className="text-sm text-red-700 dark:text-red-400 mt-1">This action is permanent and cannot be undone. All your data will be erased.</p>
+                                
+                                {!isConfirmingDelete ? (
+                                    <button type="button" onClick={() => setIsConfirmingDelete(true)} className="mt-3 w-full sm:w-auto bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg">
+                                        Delete My Account
+                                    </button>
+                                ) : (
+                                    <form data-testid="delete-account-form" onSubmit={(e) => { e.preventDefault(); setIsDeleteModalOpen(true); }} className="mt-4 space-y-3 bg-white dark:bg-gray-800 p-4 rounded-md border border-red-500/50">
+                                        <p className="text-sm font-medium text-gray-800 dark:text-white">To confirm, please enter your current password.</p>
+                                        <PasswordInput
+                                            id="delete-password"
+                                            value={passwordForDelete}
+                                            onChange={e => setPasswordForDelete(e.target.value)}
+                                            required
+                                            placeholder="Enter your password"
+                                        />
+                                        <div className="flex flex-col sm:flex-row sm:space-x-2 space-y-2 sm:space-y-0">
+                                            <button type="button" onClick={() => setIsConfirmingDelete(false)} className="flex-1 bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 text-gray-800 dark:text-white font-bold py-2 px-4 rounded-lg">
+                                                Cancel
+                                            </button>
+                                            <button type="submit" disabled={deleteLoading || !passwordForDelete} className="flex-1 bg-red-600 hover:bg-red-700 disabled:bg-red-400 text-white font-bold py-2 px-4 rounded-lg flex justify-center">
+                                                {deleteLoading ? <div className="w-5 h-5"><LoadingSpinner /></div> : 'Delete Account Permanently'}
+                                            </button>
+                                        </div>
+                                    </form>
+                                )}
+                            </div>
+                        </div>
+                    )}
+
+                    {activeTab === 'preferences' && (
+                        <div className="space-y-6">
+                            <div>
+                                <h3 className="text-md font-semibold text-gray-800 dark:text-white">Theme</h3>
+                                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Choose your preferred visual theme.</p>
+                                <div className="mt-3 flex items-center">
+                                    <label htmlFor="darkModeToggle" className="flex items-center cursor-pointer">
+                                        <div className="relative">
+                                            <input
+                                                type="checkbox"
+                                                id="darkModeToggle"
+                                                className="sr-only"
+                                                checked={profile?.preferences?.darkMode ?? false}
+                                                onChange={(e) => handleToggleDarkMode(e.target.checked)}
+                                            />
+                                            <div className="block bg-gray-300 dark:bg-gray-600 w-14 h-8 rounded-full"></div>
+                                            <div className="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
+                                        </div>
+                                        <div className="ml-3 text-gray-700 dark:text-gray-300 font-medium">
+                                            Dark Mode
+                                        </div>
+                                    </label>
+                                </div>
+                            </div>
+
+                            <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
+                                <h3 className="text-md font-semibold text-gray-800 dark:text-white">Unit System</h3>
+                                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Select your preferred system of measurement.</p>
+                                <div className="mt-3 flex space-x-4">
+                                    <label className="inline-flex items-center">
+                                        <input type="radio" className="form-radio text-brand-primary" name="unitSystem" value="imperial" checked={profile?.preferences?.unitSystem === 'imperial'} onChange={() => handleToggleUnitSystem('imperial')} />
+                                        <span className="ml-2 text-gray-700 dark:text-gray-300">Imperial (e.g., lbs, oz)</span>
+                                    </label>
+                                    <label className="inline-flex items-center">
+                                        <input type="radio" className="form-radio text-brand-primary" name="unitSystem" value="metric" checked={profile?.preferences?.unitSystem === 'metric'} onChange={() => handleToggleUnitSystem('metric')} />
+                                        <span className="ml-2 text-gray-700 dark:text-gray-300">Metric (e.g., kg, g)</span>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </>
+        )}
+      </div>
+    </div>
+  );
+};