userdetails,resetpass müködöképes lett

SerpentRace_Frontend/src/components/Userdetails/Userdetails.jsx

@@ -1,54 +1,210 @@
-import React, { useState } from "react"
+import React, { useState, useEffect } from "react"
+import { useNavigate } from "react-router-dom"
 import {
   FaCommentDots,
   FaUserFriends,
   FaBriefcase,
-  FaFacebookF,
-  FaTwitter,
-  FaDribbble,
-  FaSun,
-  FaMoon,
-  FaMedal
+  FaMedal,
+  FaEdit,
+  FaSave,
+  FaTimes,
+  FaTrash,
+  FaEye,
+  FaEyeSlash
 } from "react-icons/fa"
+import Navbar from "../Navbar/Navbar"
+import Footer from "../Footer/Footer"
+import Background from "../../assets/backgrounds/Background"
+import { getUserProfile, updateUserProfile, deleteUserProfile } from "../../api/userApi"
+import { notifySuccess, notifyError, notifyWarning } from "../Toastify/toastifyServices"
 
 const ProfileCard = () => {
-  const [darkMode, setDarkMode] = useState(false)
-  const activityLevel = 87
-  const isPremium = true
+  const navigate = useNavigate()
+  
+  // State
+  const [user, setUser] = useState(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [isEditing, setIsEditing] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
+  
+  // Edit form state
+  const [editForm, setEditForm] = useState({
+    username: "",
+    email: "",
+    fname: "",
+    lname: "",
+    phone: "",
+    password: ""
+  })
 
+  // Load user profile on mount
+  useEffect(() => {
+    loadUserProfile()
+  }, [])
+
+  const loadUserProfile = async () => {
+    setIsLoading(true)
+    try {
+      const data = await getUserProfile()
+      setUser(data)
+      setEditForm({
+        username: data.username || "",
+        email: data.email || "",
+        fname: data.fname || "",
+        lname: data.lname || "",
+        phone: data.phone || "",
+        password: ""
+      })
+    } catch (error) {
+      console.error('Failed to load user profile:', error)
+      notifyError('Hiba történt a profil betöltése során')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleEditToggle = () => {
+    if (isEditing) {
+      setEditForm({
+        username: user.username || "",
+        email: user.email || "",
+        fname: user.fname || "",
+        lname: user.lname || "",
+        phone: user.phone || "",
+        password: ""
+      })
+    }
+    setIsEditing(!isEditing)
+  }
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target
+    setEditForm(prev => ({ ...prev, [name]: value }))
+  }
+
+  const handleSaveProfile = async () => {
+    try {
+      const updates = {}
+      if (editForm.username !== user.username) updates.username = editForm.username
+      if (editForm.email !== user.email) updates.email = editForm.email
+      if (editForm.fname !== user.fname) updates.fname = editForm.fname
+      if (editForm.lname !== user.lname) updates.lname = editForm.lname
+      if (editForm.phone !== user.phone) updates.phone = editForm.phone
+      if (editForm.password && editForm.password.trim() !== "") updates.password = editForm.password
+
+      if (Object.keys(updates).length === 0) {
+        notifyWarning('Nincs változtatás')
+        return
+      }
+
+      const updatedUser = await updateUserProfile(updates)
+      setUser(updatedUser)
+      setIsEditing(false)
+      setEditForm(prev => ({ ...prev, password: "" }))
+      notifySuccess('Profil sikeresen frissítve!')
+    } catch (error) {
+      console.error('Failed to update profile:', error)
+      const errorMessage = error?.response?.data?.error || error.message || 'Ismeretlen hiba'
+      notifyError('Hiba történt a mentés során: ' + errorMessage)
+    }
+  }
+
+  const handleDeleteProfile = () => {
+    setShowDeleteModal(true)
+  }
+
+  const handleConfirmDelete = async () => {
+    try {
+      await deleteUserProfile()
+      notifySuccess("Profil sikeresen törölve!")
+      localStorage.removeItem("authLevel")
+      localStorage.removeItem("username")
+      navigate("/")
+    } catch (err) {
+      console.error("Profil törlési hiba:", err)
+      notifyError(err.response?.data?.message || "Hiba a profil törlésekor!")
+    } finally {
+      setShowDeleteModal(false)
+    }
+  }
+
+  const handleCancelDelete = () => {
+    setShowDeleteModal(false)
+  }
+
+  if (isLoading) {
+    return (
+      <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
+        <div className="fixed inset-0 -z-10 pointer-events-none">
+          <Background />
+        </div>
+        <div className="fixed top-0 left-0 right-0 z-30">
+          <Navbar />
+        </div>
+        <main className="flex-1 min-h-[calc(100vh-64px)] flex mt-[64px] items-center justify-center">
+          <div className="text-center">
+            <div className="text-6xl mb-4">⏳</div>
+            <p className="text-xl text-[color:var(--color-text)]">Betöltés...</p>
+          </div>
+        </main>
+      </div>
+    )
+  }
+
+  if (!user) {
+    return (
+      <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
+        <div className="fixed inset-0 -z-10 pointer-events-none">
+          <Background />
+        </div>
+        <div className="fixed top-0 left-0 right-0 z-30">
+          <Navbar />
+        </div>
+        <main className="flex-1 min-h-[calc(100vh-64px)] flex mt-[64px] items-center justify-center">
+          <div className="text-center">
+            <div className="text-6xl mb-4">😢</div>
+            <p className="text-xl text-[color:var(--color-text)]">Nem sikerült betölteni a profilt</p>
+          </div>
+        </main>
+      </div>
+    )
+  }
+
+  const isPremium = user.state === 2
+  const activityLevel = user.activity_level || 65
+  
   let activityColor = ""
   let activityEmoji = ""
   let blocksToColor = 1
-  let celebrationEmoji = ""
 
   if (activityLevel <= 24) {
-    activityColor = "red-600"
+    activityColor = "error"
     activityEmoji = "😞"
     blocksToColor = 1
   } else if (activityLevel <= 49) {
-    activityColor = "orange-500"
+    activityColor = "warning"
     activityEmoji = "😐"
     blocksToColor = 2
   } else if (activityLevel <= 74) {
-    activityColor = "yellow-400"
+    activityColor = "secondary"
     activityEmoji = "🙂"
     blocksToColor = 3
   } else {
-    activityColor = "emerald-500"
+    activityColor = "success"
     activityEmoji = "😄"
     blocksToColor = 4
-    celebrationEmoji = "🎉"
   }
 
   const colorMap = {
-    "red-600": "#dc2626",
-    "orange-500": "#f97316",
-    "yellow-400": "#facc15",
-    "emerald-500": "#10b981"
+    success: "#5fa985",
+    warning: "#e6c04f",
+    error: "#e15b64",
+    secondary: "#8d8e83"
   }
 
   const getBlockStyle = (index) => ({
-    backgroundColor: index < blocksToColor ? colorMap[activityColor] : (darkMode ? "#4b5563" : "#d1d5db")
+    backgroundColor: index < blocksToColor ? colorMap[activityColor] : "#314045"
   })
 
   const stats = [
@@ -61,101 +217,333 @@ const ProfileCard = () => {
   const badges = ["🏆", "🔥", "🎯", "🧠", "💎", "🚀"]
 
   return (
-    <div className={`${darkMode ? "bg-gray-900" : "bg-gray-100"} min-h-screen flex flex-col justify-center items-center px-4 py-12 transition-colors duration-500`}>
-      <div className={`relative max-w-sm w-full rounded-xl shadow-lg overflow-hidden border 
-          ${darkMode ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}`}>
-
-        <button
-          onClick={() => setDarkMode(!darkMode)}
-          className={`absolute top-4 right-4 p-2 rounded-full focus:outline-none 
-            ${darkMode ? "bg-yellow-400 text-gray-900 hover:bg-yellow-300" : "bg-gray-800 text-yellow-400 hover:bg-gray-700"}`}
-          aria-label="Toggle dark mode"
-        >
-          {darkMode ? <FaSun size={24} /> : <FaMoon size={24} />}
-        </button>
-
-        <div className="p-6 text-center space-y-6">
-          <img
-            src="https://i.pravatar.cc/150?img=12"
-            alt="Avatar"
-            className={`w-24 h-24 mx-auto rounded-full border-4 mb-4 ${darkMode ? "border-blue-700" : "border-blue-200"}`}
-          />
-
-          <div className="space-y-2">
-            <h2 className={`text-xl font-semibold ${darkMode ? "text-gray-100" : "text-gray-800"}`}>
-              BÉKAAAAA
-            </h2>
-            <div>
-              <div className={`inline-block px-3 py-1 rounded-full text-xs font-semibold 
-                ${darkMode
-                  ? (isPremium ? "bg-green-600 text-white" : "bg-gray-600 text-gray-200")
-                  : (isPremium ? "bg-green-200 text-green-800" : "bg-blue-200 text-blue-800")}`}>
-                {isPremium ? "Premium Account" : "Free Account"}
-              </div>
-            </div>
-            <p className={`text-sm ${darkMode ? "text-gray-400" : "text-gray-500"}`}>
-              Active | Male | 23.05.1992
-            </p>
-          </div>
-
-          <div className="flex justify-center items-center space-x-2">
-            <p className={`text-sm font-medium flex items-center space-x-1`} style={{ color: colorMap[activityColor] }}>
-              <span>Activity Level: {activityLevel}%</span>
-              <span className="text-xl">{activityEmoji}</span>
-              {celebrationEmoji && <span className="text-xl ml-1">{celebrationEmoji}</span>}
-            </p>
-          </div>
-
-          <div className="flex justify-center space-x-1 mb-4">
-            {[0, 1, 2, 3].map(i => (
-              <div
-                key={i}
-                className="w-8 h-1 rounded-full"
-                style={getBlockStyle(i)}
-              />
-            ))}
-          </div>
-
-          {/* Badge szekció */}
-          <div className={`rounded-lg p-4 ${darkMode ? "bg-blue-900" : "bg-blue-200"}`}>
-            <h3 className={`text-sm font-bold mb-2 ${darkMode ? "text-white" : "text-blue-800"}`}>Badge-ek</h3>
-            <div className="flex justify-center flex-wrap gap-2">
-              {badges.map((badge, i) => (
-                <span key={i} className="text-xl">
-                  {badge}
-                </span>
-              ))}
+    <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
+      <div className="fixed inset-0 -z-10 pointer-events-none">
+        <Background />
+      </div>
+      <div className="fixed top-0 left-0 right-0 z-30">
+        <Navbar />
+      </div>
+      <main className="flex-1 min-h-[calc(100vh-64px)] flex mt-[64px] flex-col items-center justify-center py-8 px-4">
+        <div className="relative max-w-5xl w-full animate-fadeInUp">
+          
+          {/* Hero Section - Cover Photo */}
+          <div className="relative rounded-t-2xl overflow-hidden bg-gradient-to-r from-[color:var(--color-mint)] via-[color:var(--color-success)] to-[color:var(--color-mint)] h-32 shadow-lg">
+            <div className="absolute inset-0 opacity-10">
+              <div className="absolute inset-0" style={{
+                backgroundImage: 'radial-gradient(circle, white 1px, transparent 1px)',
+                backgroundSize: '20px 20px'
+              }}></div>
             </div>
           </div>
 
-          {/* Statisztikák */}
-          <div className={`flex flex-wrap justify-around items-center rounded-lg py-6 mt-4 text-white ${darkMode ? "bg-blue-700" : "bg-blue-500"}`}>
-            {stats.map((s, i) => (
-              <div key={i} className="text-center px-2 w-1/2 sm:w-1/4 mb-4">
-                <div className="mb-1 flex justify-center">{s.icon}</div>
-                <p className="text-sm font-semibold">{s.value}</p>
-                <p className="text-xs">{s.label}</p>
+          {/* Main Profile Card */}
+          <div className="relative bg-[color:var(--color-card)] rounded-b-2xl shadow-2xl border-2 border-[color:var(--color-surface-selected)] -mt-16">
+            
+            {/* Avatar & Name Section */}
+            <div className="flex flex-col sm:flex-row items-center sm:items-end gap-6 px-8 pb-6">
+              {/* Avatar */}
+              <div className="relative -mt-12 flex-shrink-0">
+                <div className="w-32 h-32 rounded-2xl bg-gradient-to-br from-[color:var(--color-mint)] to-[color:var(--color-success)] flex items-center justify-center shadow-2xl ring-4 ring-[color:var(--color-card)] transform hover:scale-105 transition-transform">
+                  <span className="text-white text-4xl font-bold">
+                    {user.lname?.[0]?.toUpperCase() || ''}.{user.fname?.[0]?.toUpperCase() || ''}
+                  </span>
+                </div>
               </div>
-            ))}
-          </div>
 
-          <p className={`text-xs mb-4 ${darkMode ? "text-gray-400" : "text-gray-500"}`}>
-            Gyere és játsz velünk!
-          </p>
+              {/* Name & Status */}
+              <div className="flex-1 text-center sm:text-left">
+                <div className="flex flex-col sm:flex-row sm:items-center gap-3 mb-2">
+                  <h1 className="text-3xl font-bold text-[color:var(--color-text)]">
+                    {user.username}
+                  </h1>
+                  <div
+                    className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold shadow-md ${
+                      isPremium
+                        ? "bg-gradient-to-r from-[color:var(--color-mint)] to-[color:var(--color-success)] text-white"
+                        : "bg-[color:var(--color-surface)] text-[color:var(--color-text-muted)] border border-[color:var(--color-surface-selected)]"
+                    }`}
+                  >
+                    {isPremium ? "👑 Premium" : user.state === 1 ? "✓ Verified" : "Free"}
+                  </div>
+                </div>
+                <p className="text-lg text-[color:var(--color-text)] font-medium">
+                  {user.fname} {user.lname}
+                </p>
+              </div>
 
-          <div className={`flex justify-center gap-6 text-2xl ${darkMode ? "text-blue-400" : "text-blue-600"}`}>
-            <FaFacebookF className="cursor-pointer hover:text-blue-600" />
-            <FaTwitter className="cursor-pointer hover:text-sky-400 hover:text-sky-500" />
-            <FaDribbble className="cursor-pointer hover:text-pink-400" />
+              {/* Action Buttons */}
+              {!isEditing && (
+                <div className="flex gap-2 flex-shrink-0">
+                  <button
+                    onClick={handleEditToggle}
+                    className="px-4 py-2 rounded-lg bg-[color:var(--color-mint)] text-white font-semibold hover:opacity-90 transition-all flex items-center gap-2 shadow-md"
+                  >
+                    <FaEdit /> Szerkesztés
+                  </button>
+                  <button
+                    onClick={handleDeleteProfile}
+                    className="p-2 rounded-lg bg-[color:var(--color-error)] text-white hover:opacity-90 transition-all shadow-md"
+                    title="Profil törlése"
+                  >
+                    <FaTrash />
+                  </button>
+                </div>
+              )}
+            </div>
+
+            {/* Content Grid */}
+            <div className="px-8 pb-8 space-y-6">
+              
+              {!isEditing ? (
+                <>
+                  {/* Contact Info & Activity Row */}
+                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    
+                    {/* Contact Information */}
+                    <div className="lg:col-span-2 space-y-4">
+                      <h3 className="text-lg font-bold text-[color:var(--color-text)] border-b-2 border-[color:var(--color-mint)] pb-2">
+                        📋 Kapcsolati adatok
+                      </h3>
+                      
+                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                        <div className="flex items-center gap-3 p-3 rounded-lg bg-[color:var(--color-surface)] border border-[color:var(--color-surface-selected)]">
+                          <span className="text-2xl">📧</span>
+                          <div>
+                            <p className="text-xs text-[color:var(--color-text-muted)] font-medium">Email</p>
+                            <p className="text-sm text-[color:var(--color-text)] font-semibold">{user.email}</p>
+                          </div>
+                        </div>
+                        
+                        <div className="flex items-center gap-3 p-3 rounded-lg bg-[color:var(--color-surface)] border border-[color:var(--color-surface-selected)]">
+                          <span className="text-2xl">📱</span>
+                          <div>
+                            <p className="text-xs text-[color:var(--color-text-muted)] font-medium">Telefon</p>
+                            <p className="text-sm text-[color:var(--color-text)] font-semibold">{user.phone || "Nincs megadva"}</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Activity Level */}
+                    <div className="space-y-4">
+                      <h3 className="text-lg font-bold text-[color:var(--color-text)] border-b-2 border-[color:var(--color-mint)] pb-2">
+                        ⚡ Aktivitás
+                      </h3>
+                      <div className="p-4 rounded-lg bg-gradient-to-br from-[color:var(--color-surface)] to-[color:var(--color-surface-selected)] border border-[color:var(--color-surface-selected)]">
+                        <div className="flex justify-between items-center mb-3">
+                          <span className="text-sm font-medium text-[color:var(--color-text)]">Szint</span>
+                          <span
+                            className="text-sm font-bold px-3 py-1 rounded-full text-white"
+                            style={{ backgroundColor: colorMap[activityColor] }}
+                          >
+                            {activityLevel}% {activityEmoji}
+                          </span>
+                        </div>
+                        <div className="flex gap-1.5">
+                          {[0, 1, 2, 3].map((i) => (
+                            <div
+                              key={i}
+                              className="flex-1 h-2.5 rounded-full transition-all duration-500"
+                              style={getBlockStyle(i)}
+                            />
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Stats Grid */}
+                  <div>
+                    <h3 className="text-lg font-bold text-[color:var(--color-text)] border-b-2 border-[color:var(--color-mint)] pb-2 mb-4">
+                      📊 Statisztikák
+                    </h3>
+                    <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+                      {stats.map((s, i) => (
+                        <div
+                          key={i}
+                          className="relative group overflow-hidden p-4 rounded-xl bg-gradient-to-br from-[color:var(--color-mint)] to-[color:var(--color-success)] text-white shadow-lg hover:shadow-xl transition-all"
+                        >
+                          <div className="relative z-10">
+                            <div className="text-3xl mb-2 opacity-80">{s.icon}</div>
+                            <p className="text-2xl font-bold mb-1">{s.value}</p>
+                            <p className="text-xs opacity-90">{s.label}</p>
+                          </div>
+                          <div className="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity"></div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Badges */}
+                  <div>
+                    <h3 className="text-lg font-bold text-[color:var(--color-text)] border-b-2 border-[color:var(--color-mint)] pb-2 mb-4">
+                      🏆 Badge-ek
+                    </h3>
+                    <div className="flex flex-wrap gap-3 p-4 rounded-lg bg-[color:var(--color-surface)] border border-[color:var(--color-surface-selected)]">
+                      {badges.map((badge, i) => (
+                        <div
+                          key={i}
+                          className="w-14 h-14 flex items-center justify-center bg-gradient-to-br from-[color:var(--color-mint)]/20 to-[color:var(--color-success)]/20 rounded-lg hover:scale-110 transition-transform cursor-pointer border border-[color:var(--color-mint)]/30"
+                        >
+                          <span className="text-2xl">{badge}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <>
+                  {/* Edit Mode */}
+                  <div className="max-w-2xl mx-auto space-y-6">
+                    <h3 className="text-xl font-bold text-[color:var(--color-text)] text-center mb-6">
+                      ✏️ Profil szerkesztése
+                    </h3>
+
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                      <div className="sm:col-span-2">
+                        <label className="block text-sm font-bold text-[color:var(--color-text)] mb-2">
+                          Felhasználónév
+                        </label>
+                        <input
+                          type="text"
+                          name="username"
+                          value={editForm.username}
+                          onChange={handleInputChange}
+                          className="w-full px-4 py-2.5 rounded-lg bg-[color:var(--color-surface)] border-2 border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-mint)] focus:border-[color:var(--color-mint)] outline-none transition-all"
+                        />
+                      </div>
+
+                      <div>
+                        <label className="block text-sm font-bold text-[color:var(--color-text)] mb-2">
+                          Keresztnév
+                        </label>
+                        <input
+                          type="text"
+                          name="fname"
+                          value={editForm.fname}
+                          onChange={handleInputChange}
+                          className="w-full px-4 py-2.5 rounded-lg bg-[color:var(--color-surface)] border-2 border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-mint)] focus:border-[color:var(--color-mint)] outline-none transition-all"
+                        />
+                      </div>
+
+                      <div>
+                        <label className="block text-sm font-bold text-[color:var(--color-text)] mb-2">
+                          Vezetéknév
+                        </label>
+                        <input
+                          type="text"
+                          name="lname"
+                          value={editForm.lname}
+                          onChange={handleInputChange}
+                          className="w-full px-4 py-2.5 rounded-lg bg-[color:var(--color-surface)] border-2 border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-mint)] focus:border-[color:var(--color-mint)] outline-none transition-all"
+                        />
+                      </div>
+
+                      <div className="sm:col-span-2">
+                        <label className="block text-sm font-bold text-[color:var(--color-text)] mb-2">
+                          Email
+                        </label>
+                        <input
+                          type="email"
+                          name="email"
+                          value={editForm.email}
+                          disabled
+                          className="w-full px-4 py-2.5 rounded-lg bg-[color:var(--color-surface)] border-2 border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] outline-none opacity-50 cursor-not-allowed"
+                        />
+                      </div>
+
+                      <div className="sm:col-span-2">
+                        <label className="block text-sm font-bold text-[color:var(--color-text)] mb-2">
+                          Telefonszám
+                        </label>
+                        <input
+                          type="tel"
+                          name="phone"
+                          value={editForm.phone}
+                          onChange={handleInputChange}
+                          className="w-full px-4 py-2.5 rounded-lg bg-[color:var(--color-surface)] border-2 border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-mint)] focus:border-[color:var(--color-mint)] outline-none transition-all"
+                        />
+                      </div>
+
+                      <div className="sm:col-span-2">
+                        <label className="block text-sm font-bold text-[color:var(--color-text)] mb-2">
+                          Új jelszó (opcionális)
+                        </label>
+                        <div className="relative">
+                          <input
+                            type={showPassword ? "text" : "password"}
+                            name="password"
+                            value={editForm.password}
+                            onChange={handleInputChange}
+                            placeholder="Hagyd üresen ha nem változtatod"
+                            className="w-full px-4 py-2.5 rounded-lg bg-[color:var(--color-surface)] border-2 border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-mint)] focus:border-[color:var(--color-mint)] outline-none pr-12 transition-all"
+                          />
+                          <button
+                            type="button"
+                            onClick={() => setShowPassword(!showPassword)}
+                            className="absolute right-3 top-1/2 -translate-y-1/2 text-[color:var(--color-text-muted)] hover:text-[color:var(--color-mint)] transition-colors"
+                          >
+                            {showPassword ? <FaEyeSlash size={18} /> : <FaEye size={18} />}
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Save/Cancel buttons */}
+                    <div className="flex gap-3 pt-4">
+                      <button
+                        onClick={handleSaveProfile}
+                        className="flex-1 px-6 py-3 rounded-lg bg-gradient-to-r from-[color:var(--color-success)] to-[color:var(--color-mint)] text-white font-bold hover:shadow-lg transition-all flex items-center justify-center gap-2"
+                      >
+                        <FaSave /> Mentés
+                      </button>
+                      <button
+                        onClick={handleEditToggle}
+                        className="flex-1 px-6 py-3 rounded-lg bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] font-bold hover:bg-[color:var(--color-surface)] transition-all flex items-center justify-center gap-2"
+                      >
+                        <FaTimes /> Mégse
+                      </button>
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
           </div>
         </div>
-      </div>
+      </main>
+
+      {/* Delete Confirmation Modal */}
+      {showDeleteModal && (
+        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
+          <div className="bg-white rounded-xl shadow-xl p-6 w-80 text-center animate-fadeIn">
+            <h3 className="text-lg font-semibold mb-4 text-gray-800">
+              Biztosan törölni szeretnéd a profilodat?
+            </h3>
+            <p className="text-sm text-gray-600 mb-6">
+              Ez a művelet nem visszavonható!
+            </p>
+            <div className="flex justify-center gap-4">
+              <button
+                onClick={handleConfirmDelete}
+                className="bg-[color:var(--color-error)] text-white px-4 py-2 rounded-lg hover:opacity-80 transition"
+              >
+                Igen, törlöm
+              </button>
+              <button
+                onClick={handleCancelDelete}
+                className="bg-gray-200 px-4 py-2 rounded-lg hover:bg-gray-300 transition"
+              >
+                Mégse
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <Footer />
     </div>
   )
 }
 
 export default ProfileCard
-
-
-import UserProfile from "../../components/Userdetails/Userdetails.jsx"
-