طيب اريدك ان تضيف معلومات كثير في الملف الشخصي يضيفها المستخدم تساعدنا ع

src/app/login/page.tsx

@@ -1,13 +1,16 @@
+
 'use client';
 
 import { Button } from "@/components/ui/button";
 import { Header } from "@/components/header";
-import { Loader2, LogIn, MessageSquare, Chrome, UserPlus, MapPin, Calendar } from "lucide-react";
+import { Loader2, LogIn, MessageSquare, Chrome, UserPlus, MapPin, Calendar, Briefcase, Heart, BookOpen } from "lucide-react";
 import { useAuth } from "@/contexts/auth-context";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { useToast } from "@/hooks/use-toast";
@@ -17,10 +20,19 @@ export default function LoginPage() {
   const { user, userData, loading: authLoading, signInWithGoogle, signInWithUsername, completeProfile } = useAuth();
   const { t } = useLanguage();
   const [isSigningIn, setIsSigningIn] = useState(false);
+  
+  // Basic Fields
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [age, setAge] = useState('');
   const [location, setLocation] = useState('');
+  
+  // Extended Fields for Personalization
+  const [bio, setBio] = useState('');
+  const [gender, setGender] = useState('');
+  const [occupation, setOccupation] = useState('');
+  const [interests, setInterests] = useState('');
+
   const [showCompleteProfile, setShowCompleteProfile] = useState(false);
   
   const router = useRouter();
@@ -52,7 +64,9 @@ export default function LoginPage() {
     }
     setIsSigningIn(true);
     try {
-      await signInWithUsername(username, password, parseInt(age), location);
+      await signInWithUsername(username, password, parseInt(age), location, {
+        bio, gender, occupation, interests
+      });
     } catch (error) {
       console.error(error);
     } finally {
@@ -68,7 +82,14 @@ export default function LoginPage() {
       return;
     }
     setIsSigningIn(true);
-    await completeProfile(parseInt(age), location);
+    await completeProfile({
+      age: parseInt(age),
+      location,
+      bio,
+      gender,
+      occupation,
+      interests
+    });
     setIsSigningIn(false);
   };
 
@@ -84,38 +105,84 @@ export default function LoginPage() {
     return (
       <div className="flex h-screen w-full flex-col bg-muted/30">
         <Header title={t.loginTitle} />
-        <div className="flex flex-1 items-center justify-center p-4">
-          <Card className="w-full max-w-md radiant-card rounded-[2rem] border-none shadow-2xl overflow-hidden">
+        <div className="flex flex-1 items-center justify-center p-4 pt-20">
+          <Card className="w-full max-w-lg radiant-card rounded-[2.5rem] border-none shadow-2xl overflow-hidden overflow-y-auto max-h-[85vh] scrollbar-hide">
             <CardHeader className="bg-primary text-primary-foreground p-8">
-              <CardTitle className="text-2xl font-black">{t.completeProfile}</CardTitle>
-              <CardDescription className="text-primary-foreground/80">{t.chooseLogin}</CardDescription>
+              <CardTitle className="text-3xl font-black">{t.completeProfile}</CardTitle>
+              <CardDescription className="text-primary-foreground/90 font-bold">{t.chooseLogin}</CardDescription>
             </CardHeader>
             <form onSubmit={handleCompleteProfile}>
               <CardContent className="space-y-6 p-8">
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label className="font-bold flex items-center gap-2"><Calendar className="h-4 w-4 text-primary" /> {t.age}</Label>
+                    <Input 
+                      type="number" 
+                      value={age} 
+                      onChange={e => setAge(e.target.value)} 
+                      required 
+                      className="rounded-xl h-12 bg-muted/50 border-none"
+                      placeholder="18"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label className="font-bold flex items-center gap-2"><MapPin className="h-4 w-4 text-primary" /> {t.location}</Label>
+                    <Input 
+                      value={location} 
+                      onChange={e => setLocation(e.target.value)} 
+                      placeholder={t.location} 
+                      required 
+                      className="rounded-xl h-12 bg-muted/50 border-none"
+                    />
+                  </div>
+                </div>
+
                 <div className="space-y-2">
-                  <Label className="font-bold flex items-center gap-2"><Calendar className="h-4 w-4 text-primary" /> {t.age}</Label>
+                  <Label className="font-bold flex items-center gap-2"><Briefcase className="h-4 w-4 text-primary" /> {t.occupation}</Label>
                   <Input 
-                    type="number" 
-                    value={age} 
-                    onChange={e => setAge(e.target.value)} 
-                    required 
+                    value={occupation} 
+                    onChange={e => setOccupation(e.target.value)} 
+                    placeholder={t.occupation} 
                     className="rounded-xl h-12 bg-muted/50 border-none"
-                    placeholder="18"
                   />
                 </div>
+
+                <div className="space-y-2">
+                   <Label className="font-bold">{t.gender}</Label>
+                   <Select value={gender} onValueChange={setGender}>
+                      <SelectTrigger className="rounded-xl h-12 bg-muted/50 border-none">
+                        <SelectValue placeholder={t.gender} />
+                      </SelectTrigger>
+                      <SelectContent className="rounded-xl">
+                        <SelectItem value="male">{t.male}</SelectItem>
+                        <SelectItem value="female">{t.female}</SelectItem>
+                        <SelectItem value="other">{t.other}</SelectItem>
+                      </SelectContent>
+                    </Select>
+                </div>
+
+                <div className="space-y-2">
+                  <Label className="font-bold flex items-center gap-2"><BookOpen className="h-4 w-4 text-primary" /> {t.bio}</Label>
+                  <Textarea 
+                    value={bio} 
+                    onChange={e => setBio(e.target.value)} 
+                    placeholder={t.bioPlaceholder}
+                    className="rounded-xl bg-muted/50 border-none min-h-[80px]"
+                  />
+                </div>
+
                 <div className="space-y-2">
-                  <Label className="font-bold flex items-center gap-2"><MapPin className="h-4 w-4 text-primary" /> {t.location}</Label>
+                  <Label className="font-bold flex items-center gap-2"><Heart className="h-4 w-4 text-primary" /> {t.interests}</Label>
                   <Input 
-                    value={location} 
-                    onChange={e => setLocation(e.target.value)} 
-                    placeholder={t.location} 
-                    required 
+                    value={interests} 
+                    onChange={e => setInterests(e.target.value)} 
+                    placeholder={t.interestsPlaceholder}
                     className="rounded-xl h-12 bg-muted/50 border-none"
                   />
                 </div>
               </CardContent>
               <CardFooter className="p-8 pt-0">
-                <Button type="submit" className="w-full h-14 rounded-2xl font-black text-lg shadow-xl shadow-primary/20" disabled={isSigningIn}>
+                <Button type="submit" className="w-full h-16 rounded-2xl font-black text-xl shadow-xl shadow-primary/20" disabled={isSigningIn}>
                   {isSigningIn ? <Loader2 className="animate-spin" /> : t.loginAction}
                 </Button>
               </CardFooter>
@@ -168,7 +235,7 @@ export default function LoginPage() {
             </TabsContent>
 
             <TabsContent value="username">
-              <Card className="radiant-card border-none rounded-[2rem] shadow-2xl">
+              <Card className="radiant-card border-none rounded-[2.5rem] shadow-2xl max-h-[60vh] overflow-y-auto scrollbar-hide">
                 <form onSubmit={handleUsernameLogin}>
                   <CardHeader className="pb-2">
                     <CardTitle className="text-xl font-bold">{t.manual}</CardTitle>
@@ -215,6 +282,16 @@ export default function LoginPage() {
                         />
                       </div>
                     </div>
+
+                    <div className="space-y-2">
+                      <Label className="font-bold">{t.occupation}</Label>
+                      <Input 
+                        value={occupation} 
+                        onChange={e => setOccupation(e.target.value)} 
+                        placeholder={t.occupation}
+                        className="rounded-xl h-12 bg-muted/50 border-none"
+                      />
+                    </div>
                   </CardContent>
                   <CardFooter className="p-6 pt-0">
                     <Button type="submit" className="w-full h-14 rounded-2xl font-black text-lg shadow-xl shadow-primary/20" disabled={isSigningIn}>
@@ -230,4 +307,4 @@ export default function LoginPage() {
       </div>
     </div>
   );
-}
+}

src/app/profile/page.tsx

@@ -5,12 +5,14 @@ import { useState, useEffect } from 'react';
 import { useAuth } from '@/contexts/auth-context';
 import { useRouter } from 'next/navigation';
 import { Header } from '@/components/header';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { Loader2, Trash2, AlertTriangle } from 'lucide-react';
+import { Textarea } from '@/components/ui/textarea';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Loader2, Trash2, AlertTriangle, User, Briefcase, Heart, BookOpen } from 'lucide-react';
 import { useToast } from '@/hooks/use-toast';
 import { useLanguage } from '@/contexts/language-context';
 import {
@@ -34,6 +36,10 @@ export default function ProfilePage() {
   const [displayName, setDisplayName] = useState('');
   const [age, setAge] = useState('');
   const [location, setLocation] = useState('');
+  const [bio, setBio] = useState('');
+  const [gender, setGender] = useState('');
+  const [occupation, setOccupation] = useState('');
+  const [interests, setInterests] = useState('');
   const [isSaving, setIsSaving] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
 
@@ -47,6 +53,10 @@ export default function ProfilePage() {
     if (userData) {
       setAge(userData.age?.toString() || '');
       setLocation(userData.location || '');
+      setBio(userData.bio || '');
+      setGender(userData.gender || '');
+      setOccupation(userData.occupation || '');
+      setInterests(userData.interests || '');
     }
   }, [user, userData, loading, router]);
 
@@ -59,8 +69,12 @@ export default function ProfilePage() {
     setIsSaving(true);
     await updateUserProfile({ 
       displayName: displayName.trim(),
-      age: parseInt(age),
-      location: location.trim()
+      age: parseInt(age) || 0,
+      location: location.trim(),
+      bio: bio.trim(),
+      gender,
+      occupation: occupation.trim(),
+      interests: interests.trim()
     });
     setIsSaving(false);
   };
@@ -88,77 +102,124 @@ export default function ProfilePage() {
   return (
     <div className="flex h-screen w-full flex-col bg-background">
       <Header title={t.profileTitle} />
-      <main className="flex-1 overflow-y-auto bg-muted/40 p-4 md:p-8">
+      <main className="flex-1 overflow-y-auto bg-muted/40 p-4 md:p-8 pt-20">
         <div className="mx-auto max-w-2xl space-y-6">
-          <Card className="border-border/50 shadow-sm">
-            <CardHeader>
-              <CardTitle>{t.settings}</CardTitle>
+          <Card className="border-border/50 shadow-sm rounded-[2rem] overflow-hidden">
+            <CardHeader className="bg-primary/5 border-b border-primary/10">
+              <CardTitle className="flex items-center gap-2">
+                <User className="h-5 w-5 text-primary" />
+                {t.settings}
+              </CardTitle>
             </CardHeader>
-            <CardContent className="space-y-6">
+            <CardContent className="space-y-6 pt-6">
               <div className="flex items-center gap-4">
-                <Avatar className="h-20 w-20 border-2 border-primary/10">
+                <Avatar className="h-24 w-24 border-4 border-primary/10 shadow-lg">
                   <AvatarImage src={user.photoURL!} alt={user.displayName!} />
-                  <AvatarFallback className="text-xl bg-primary/5 text-primary">
+                  <AvatarFallback className="text-2xl bg-primary/5 text-primary font-bold">
                     {user.displayName?.charAt(0)}
                   </AvatarFallback>
                 </Avatar>
                 <div>
-                  <h3 className="text-xl font-bold">{user.displayName}</h3>
-                  <p className="text-sm text-muted-foreground">{user.email || 'Manual Account'}</p>
+                  <h3 className="text-2xl font-black tracking-tight">{user.displayName}</h3>
+                  <p className="text-sm text-muted-foreground font-medium">{user.email || 'Manual Account'}</p>
                 </div>
               </div>
-              <div className="space-y-4">
+
+              <div className="space-y-5">
+                <div className="space-y-2">
+                  <Label htmlFor="displayName" className="font-bold">{t.username}</Label>
+                  <Input id="displayName" value={displayName} onChange={(e) => setDisplayName(e.target.value)} className="rounded-xl bg-background/50" />
+                </div>
+
                 <div className="space-y-2">
-                  <Label htmlFor="displayName">{t.username}</Label>
-                  <Input id="displayName" value={displayName} onChange={(e) => setDisplayName(e.target.value)} />
+                  <Label htmlFor="bio" className="font-bold flex items-center gap-2"><BookOpen className="h-4 w-4" /> {t.bio}</Label>
+                  <Textarea 
+                    id="bio" 
+                    placeholder={t.bioPlaceholder} 
+                    value={bio} 
+                    onChange={(e) => setBio(e.target.value)} 
+                    className="rounded-xl bg-background/50 min-h-[100px]"
+                  />
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="age" className="font-bold">{t.age}</Label>
+                    <Input id="age" type="number" value={age} onChange={(e) => setAge(e.target.value)} className="rounded-xl bg-background/50" />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="gender" className="font-bold">{t.gender}</Label>
+                    <Select value={gender} onValueChange={setGender}>
+                      <SelectTrigger className="rounded-xl bg-background/50">
+                        <SelectValue placeholder={t.gender} />
+                      </SelectTrigger>
+                      <SelectContent className="rounded-xl">
+                        <SelectItem value="male">{t.male}</SelectItem>
+                        <SelectItem value="female">{t.female}</SelectItem>
+                        <SelectItem value="other">{t.other}</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
                 </div>
-                <div className="grid grid-cols-2 gap-4">
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div className="space-y-2">
-                    <Label htmlFor="age">{t.age}</Label>
-                    <Input id="age" type="number" value={age} onChange={(e) => setAge(e.target.value)} />
+                    <Label htmlFor="occupation" className="font-bold flex items-center gap-2"><Briefcase className="h-4 w-4" /> {t.occupation}</Label>
+                    <Input id="occupation" value={occupation} onChange={(e) => setOccupation(e.target.value)} className="rounded-xl bg-background/50" />
                   </div>
                   <div className="space-y-2">
-                    <Label htmlFor="location">{t.location}</Label>
-                    <Input id="location" value={location} onChange={(e) => setLocation(e.target.value)} />
+                    <Label htmlFor="location" className="font-bold">{t.location}</Label>
+                    <Input id="location" value={location} onChange={(e) => setLocation(e.target.value)} className="rounded-xl bg-background/50" />
                   </div>
                 </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="interests" className="font-bold flex items-center gap-2"><Heart className="h-4 w-4" /> {t.interests}</Label>
+                  <Input 
+                    id="interests" 
+                    placeholder={t.interestsPlaceholder} 
+                    value={interests} 
+                    onChange={(e) => setInterests(e.target.value)} 
+                    className="rounded-xl bg-background/50"
+                  />
+                </div>
               </div>
             </CardContent>
-            <CardFooter className="border-t px-6 py-4 bg-muted/20">
-              <Button onClick={handleSave} disabled={isSaving} className="rounded-xl px-8">
+            <CardFooter className="border-t px-6 py-6 bg-muted/20">
+              <Button onClick={handleSave} disabled={isSaving} className="w-full md:w-auto rounded-xl px-12 font-bold h-12 shadow-lg shadow-primary/20">
                 {isSaving && <Loader2 className="mx-2 h-4 w-4 animate-spin" />}
                 {t.saveChanges}
               </Button>
             </CardFooter>
           </Card>
 
-          <Card className="border-destructive/20 shadow-sm overflow-hidden">
+          <Card className="border-destructive/20 shadow-sm rounded-[2rem] overflow-hidden">
             <CardHeader className="bg-destructive/5">
               <div className="flex items-center gap-2 text-destructive">
                 <AlertTriangle className="h-5 w-5" />
-                <CardTitle className="text-lg">{t.dangerZone}</CardTitle>
+                <CardTitle className="text-lg font-bold">{t.dangerZone}</CardTitle>
               </div>
             </CardHeader>
             <CardContent className="pt-6">
               <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                 <div className="space-y-1">
-                  <h4 className="font-bold">{t.deleteAccount}</h4>
+                  <h4 className="font-bold text-destructive">{t.deleteAccount}</h4>
                   <p className="text-sm text-muted-foreground">{t.deleteConfirmDesc}</p>
                 </div>
                 <AlertDialog>
                   <AlertDialogTrigger asChild>
-                    <Button variant="destructive" className="rounded-xl flex items-center gap-2">
+                    <Button variant="destructive" className="rounded-xl flex items-center gap-2 px-6 h-12 font-bold">
                       <Trash2 className="h-4 w-4" /> {t.deleteAccount}
                     </Button>
                   </AlertDialogTrigger>
-                  <AlertDialogContent className="rounded-2xl">
+                  <AlertDialogContent className="rounded-3xl border-none radiant-glass p-8">
                     <AlertDialogHeader>
-                      <AlertDialogTitle>{t.deleteConfirmTitle}</AlertDialogTitle>
-                      <AlertDialogDescription>{t.deleteConfirmDesc}</AlertDialogDescription>
+                      <AlertDialogTitle className="text-2xl font-black">{t.deleteConfirmTitle}</AlertDialogTitle>
+                      <AlertDialogDescription className="text-base font-medium">{t.deleteConfirmDesc}</AlertDialogDescription>
                     </AlertDialogHeader>
-                    <AlertDialogFooter>
-                      <AlertDialogCancel>{t.cancel}</AlertDialogCancel>
-                      <AlertDialogAction onClick={handleDeleteAccount} className="bg-destructive hover:bg-destructive/90" disabled={isDeleting}>
+                    <AlertDialogFooter className="mt-6 gap-3">
+                      <AlertDialogCancel className="rounded-xl h-12 font-bold">{t.cancel}</AlertDialogCancel>
+                      <AlertDialogAction onClick={handleDeleteAccount} className="bg-destructive hover:bg-destructive/90 rounded-xl h-12 font-bold px-8" disabled={isDeleting}>
                         {t.confirmDelete}
                       </AlertDialogAction>
                     </AlertDialogFooter>

src/contexts/auth-context.tsx

@@ -7,19 +7,16 @@ import { auth, database } from '@/firebase/client';
 import { 
   onAuthStateChanged, 
   signInWithPopup,
-  signInWithRedirect,
-  getRedirectResult,
   GoogleAuthProvider, 
   signOut as firebaseSignOut, 
   updateProfile,
-  signInWithCredential,
   signInWithEmailAndPassword,
   createUserWithEmailAndPassword,
   deleteUser
 } from 'firebase/auth';
 import { ref, set, get, update, remove } from 'firebase/database';
 import { useToast } from '@/hooks/use-toast';
-import { Loader2, ShieldCheck } from 'lucide-react';
+import { Loader2 } from 'lucide-react';
 
 export interface UserMetadata {
   age: number;
@@ -28,6 +25,10 @@ export interface UserMetadata {
   displayName: string;
   email: string;
   photoURL: string;
+  bio?: string;
+  gender?: string;
+  occupation?: string;
+  interests?: string;
 }
 
 interface AuthContextType {
@@ -35,17 +36,15 @@ interface AuthContextType {
   userData: UserMetadata | null;
   loading: boolean;
   signInWithGoogle: () => Promise<void>;
-  signInWithUsername: (username: string, pass: string, age: number, location: string) => Promise<void>;
+  signInWithUsername: (username: string, pass: string, age: number, location: string, extra?: Partial<UserMetadata>) => Promise<void>;
   signOut: () => Promise<void>;
-  updateUserProfile: (data: { displayName: string, age?: number, location?: string }) => Promise<void>;
+  updateUserProfile: (data: Partial<UserMetadata>) => Promise<void>;
   deleteUserAccount: () => Promise<void>;
-  completeProfile: (age: number, location: string) => Promise<void>;
+  completeProfile: (data: Partial<UserMetadata>) => Promise<void>;
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
-const GOOGLE_CLIENT_ID = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID;
-
 export const AuthProvider = ({ children }: { children: ReactNode }) => {
   const [user, setUser] = useState<User | null>(null);
   const [userData, setUserData] = useState<UserMetadata | null>(null);
@@ -76,15 +75,19 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
     return () => unsubscribe();
   }, []);
 
-  const handleNewUser = async (user: User, data: { age: number, location: string, customName?: string }) => {
+  const handleNewUser = async (user: User, data: Partial<UserMetadata> & { customName?: string }) => {
     const userRef = ref(database, 'users/' + user.uid);
     const payload: UserMetadata = {
       displayName: data.customName || user.displayName || 'مستخدم جديد',
       email: user.email || '',
       photoURL: user.photoURL || `https://api.dicebear.com/7.x/avataaars/svg?seed=${user.uid}`,
       createdAt: new Date().toISOString(),
-      age: data.age,
-      location: data.location
+      age: data.age || 18,
+      location: data.location || '',
+      bio: data.bio || '',
+      gender: data.gender || '',
+      occupation: data.occupation || '',
+      interests: data.interests || ''
     };
     await set(userRef, payload);
     if (data.customName) {
@@ -97,11 +100,9 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
     const provider = new GoogleAuthProvider();
     try {
       const result = await signInWithPopup(auth, provider);
-      // Check if user already exists in DB
       const userRef = ref(database, 'users/' + result.user.uid);
       const snapshot = await get(userRef);
       if (!snapshot.exists()) {
-        // We will need a second step in the UI for new Google users to fill age/location
         toast({ title: "يرجى إكمال بياناتك للمتابعة" });
       } else {
         setUserData(snapshot.val());
@@ -113,16 +114,16 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
     }
   };
 
-  const signInWithUsername = async (username: string, pass: string, age: number, location: string) => {
+  const signInWithUsername = async (username: string, pass: string, age: number, location: string, extra?: Partial<UserMetadata>) => {
     const fakeEmail = `${username.toLowerCase().trim()}@proto.chat`;
     try {
       setLoading(true);
       const result = await signInWithEmailAndPassword(auth, fakeEmail, pass);
       await fetchUserData(result.user.uid);
     } catch (error: any) {
-      if (error.code === 'auth/user-not-found' || error.code === 'auth/invalid-credential') {
+      if (error.code === 'auth/user-not-found' || error.code === 'auth/invalid-credential' || error.code === 'auth/invalid-email') {
         const result = await createUserWithEmailAndPassword(auth, fakeEmail, pass);
-        await handleNewUser(result.user, { age, location, customName: username });
+        await handleNewUser(result.user, { age, location, customName: username, ...extra });
       } else {
         toast({ title: "خطأ في تسجيل الدخول", variant: "destructive" });
       }
@@ -131,19 +132,20 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
     }
   };
 
-  const completeProfile = async (age: number, location: string) => {
+  const completeProfile = async (data: Partial<UserMetadata>) => {
     if (!user) return;
     const userRef = ref(database, 'users/' + user.uid);
+    const existingData = userData || {};
     const newData = {
-      age,
-      location,
-      displayName: user.displayName || 'مستخدم',
+      ...existingData,
+      ...data,
+      displayName: data.displayName || user.displayName || 'مستخدم',
       email: user.email || '',
       photoURL: user.photoURL || `https://api.dicebear.com/7.x/avataaars/svg?seed=${user.uid}`,
-      createdAt: new Date().toISOString(),
+      createdAt: existingData.createdAt || new Date().toISOString(),
     };
     await set(userRef, newData);
-    setUserData(newData);
+    setUserData(newData as UserMetadata);
   };
 
   const signOut = async () => {
@@ -152,9 +154,11 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
     setUserData(null);
   };
 
-  const updateUserProfile = async (data: { displayName: string, age?: number, location?: string }) => {
+  const updateUserProfile = async (data: Partial<UserMetadata>) => {
     if (!user) return;
-    await updateProfile(user, { displayName: data.displayName });
+    if (data.displayName) {
+      await updateProfile(user, { displayName: data.displayName });
+    }
     const userRef = ref(database, 'users/' + user.uid);
     await update(userRef, data);
     await fetchUserData(user.uid);

src/lib/translations.ts

@@ -71,6 +71,15 @@ export const translations = {
     primaryEngine: 'الأساسي (Gemini)',
     fallbackEngine: 'الاحتياطي (Groq)',
     advancedEngine: 'المتقدم (OpenRouter)',
+    bio: 'نبذة شخصية',
+    gender: 'الجنس',
+    occupation: 'المهنة',
+    interests: 'الاهتمامات (افصل بينها بفاصلة)',
+    interestsPlaceholder: 'فلسفة، تقنية، فن، رياضة...',
+    male: 'ذكر',
+    female: 'أنثى',
+    other: 'آخر',
+    bioPlaceholder: 'أخبرنا عن فلسفتك في الحياة...',
   },
   en: {
     appTitle: 'AvadoraWorld',
@@ -141,5 +150,14 @@ export const translations = {
     primaryEngine: 'Primary (Gemini)',
     fallbackEngine: 'Fallback (Groq)',
     advancedEngine: 'Advanced (OpenRouter)',
+    bio: 'Bio',
+    gender: 'Gender',
+    occupation: 'Occupation',
+    interests: 'Interests (comma separated)',
+    interestsPlaceholder: 'Philosophy, Tech, Art, Sports...',
+    male: 'Male',
+    female: 'Female',
+    other: 'Other',
+    bioPlaceholder: 'Tell us about your philosophy...',
   }
 };