Campus-Plug/frontend/src/pages/Settings.jsx

import { useState, useEffect } from "react";
import { User, Lock, Trash2, History, Search, Shield } from "lucide-react";
import FloatingAlert from "../components/FloatingAlert"; // adjust path if needed

const Settings = () => {
  const [userData, setUserData] = useState({
    userId: "",
    name: "",
    email: "",
    phone: "",
    UCID: "",
    address: "",
    currentPassword: "",
    newPassword: "",
    confirmPassword: "",
  });

  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);
  const [showAlert, setShowAlert] = useState(false);
  const storedUser = JSON.parse(sessionStorage.getItem("user"));

  // Fetch user data when component mounts
  useEffect(() => {
    const fetchUserData = async () => {
      try {
        setIsLoading(true);
        setError(null);

        // Get the user's data from localStorage
        const storedUser = JSON.parse(sessionStorage.getItem("user"));
        console.log(storedUser);

        if (!storedUser || !storedUser.email) {
          throw new Error("User details not found. Please log in again.");
        }

        // Make API call to fetch user data
        const response = await fetch(
          "http://localhost:3030/api/user/find_user",
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              email: storedUser.email,
            }),
          },
        );

        const data = await response.json();
        console.log(data);

        if (data.found) {
          // Update state with fetched data
          setUserData((prevData) => ({
            ...prevData,
            userId: storedUser.ID, // Try both sources
            name: data.name || storedUser.name || "",
            email: data.email || storedUser.email || "",
            UCID: data.UCID || storedUser.UCID || "",
            phone: data.phone || storedUser.phone || "",
            address: data.address || storedUser.address || "",
            // Reset password fields
            currentPassword: "",
            newPassword: "",
            confirmPassword: "",
          }));
        } else {
          throw new Error(data.error || "Failed to retrieve user data");
        }
      } catch (error) {
        console.error("Error fetching user data:", error);
        setError(
          error.message || "An error occurred while loading your profile",
        );
      } finally {
        setIsLoading(false);
      }
    };

    fetchUserData();
  }, []);

  const handleInputChange = (e) => {
    const { id, value } = e.target;
    setUserData((prevData) => ({
      ...prevData,
      [id]: value,
    }));
  };

  const removeHistory = async () => {
    const response = await fetch(
      "http://localhost:3030/api/history/delHistory",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          userID: storedUser.ID,
        }),
      },
    );

    if (response.ok) {
      setShowAlert(true);
    }
  };

  const handleUpdateProfile = async () => {
    try {
      // Ensure userId is present
      if (!userData.userId) {
        throw new Error("User ID is missing. Unable to update profile.");
      }

      setIsLoading(true);
      setError(null);

      const response = await fetch("http://localhost:3030/api/user/update", {
        method: "POST", // or "PUT" if your backend supports it
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(userData),
      });

      const result = await response.json();

      if (!response.ok) {
        throw new Error(result.error || "Failed to update profile");
      }

      console.log("Profile updated successfully:", result);
      alert("Profile updated successfully!");
    } catch (error) {
      console.error("Error updating profile:", error);
      setError(
        error.message || "An error occurred while updating your profile.",
      );
    } finally {
      setIsLoading(false);
    }
  };

  const handlePasswordUpdate = async (e) => {
    e.preventDefault();
    try {
      // Validate passwords match
      if (userData.newPassword !== userData.confirmPassword) {
        alert("New passwords do not match!");
        return;
      }

      // TODO: Implement the actual password update API call
      console.log("Password updated");

      // Update password in localStorage
      const storedUser = JSON.parse(localStorage.getItem("user"));
      const updatedUser = {
        ...storedUser,
        password: userData.newPassword,
      };
      localStorage.setItem("user", JSON.stringify(updatedUser));

      // Reset password fields
      setUserData((prevData) => ({
        ...prevData,
        currentPassword: "",
        newPassword: "",
        confirmPassword: "",
      }));

      alert("Password updated successfully!");
    } catch (error) {
      console.error("Error updating password:", error);
      alert("Failed to update password: " + error.message);
    }
  };

  const handleDeleteAccount = async () => {
    if (
      window.confirm(
        "Are you sure you want to delete your account? This action cannot be undone.",
      )
    ) {
      try {
        // Get user ID from state or localStorage
        const storedUser = JSON.parse(sessionStorage.getItem("user"));
        const userId = storedUser.ID;

        if (!userId) {
          throw new Error("User ID not found");
        }

        // Make API call to delete the account
        const response = await fetch("http://localhost:3030/api/user/delete", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            userId: userId,
          }),
        });

        const data = await response.json();

        if (data.success) {
          alert("Account deleted successfully. You will be logged out.");
          // Clear user data from localStorage and redirect to login
          sessionStorage.removeItem("user");
          sessionStorage.removeItem("isAuthenticated");
          window.location.href = "/login";
        } else {
          throw new Error(data.error || "Failed to delete account");
        }
      } catch (error) {
        console.error("Error deleting account:", error);

        alert("Cannot delete account, Please logout and retry:");
      }
    }
  };

  // Show loading state
  if (isLoading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-green-500"></div>
      </div>
    );
  }

  return (
    <div className="max-w-3xl mx-auto">
      <h1 className="text-2xl font-bold text-gray-800 mb-6">
        Account Settings
      </h1>

      {/* Error message if any */}
      {error && (
        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
          {error}
        </div>
      )}

      {/* Profile Information Section */}
      <div className="bg-white border border-gray-200 mb-6">
        <div className="border-b border-gray-200 p-4">
          <div className="flex items-center">
            <User className="h-5 w-5 text-gray-500 mr-2" />
            <h2 className="text-lg font-medium text-gray-800">
              Profile Information
            </h2>
          </div>
        </div>

        <div className="p-4">
          <form onSubmit={handleUpdateProfile}>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
              <div>
                <label
                  htmlFor="name"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >
                  Full Name
                </label>
                <input
                  type="text"
                  id="name"
                  value={userData.name}
                  onChange={handleInputChange}
                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-green-500"
                  required
                />
              </div>

              <div>
                <label
                  htmlFor="email"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >
                  Email Address
                </label>
                <input
                  type="email"
                  id="email"
                  value={userData.email}
                  onChange={handleInputChange}
                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-green-500"
                  required
                  readOnly // Email is often used as identifier and not changeable
                />
              </div>

              <div>
                <label
                  htmlFor="phone"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >
                  Phone Number
                </label>
                <input
                  type="tel"
                  id="phone"
                  value={userData.phone}
                  onChange={handleInputChange}
                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-green-500"
                />
              </div>

              <div>
                <label
                  htmlFor="UCID"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >
                  UCID
                </label>
                <input
                  type="text"
                  id="UCID"
                  value={userData.UCID}
                  onChange={handleInputChange}
                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-green-500"
                  required
                />
              </div>

              <div>
                <label
                  htmlFor="address"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >
                  Address
                </label>
                <input
                  type="text"
                  id="address"
                  value={userData.address}
                  onChange={handleInputChange}
                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-green-500"
                />
              </div>
            </div>

            <button
              type="submit"
              className="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4"
            >
              Update Profile
            </button>
          </form>
        </div>
      </div>

      {/* Security Section */}
      <div className="bg-white border border-gray-200 mb-6">
        <div className="border-b border-gray-200 p-4">
          <div className="flex items-center">
            <Lock className="h-5 w-5 text-gray-500 mr-2" />
            <h2 className="text-lg font-medium text-gray-800">Password</h2>
          </div>
        </div>

        <div className="p-4">
          <form onSubmit={handlePasswordUpdate}>
            <div className="space-y-4 mb-4">
              <div>
                <label
                  htmlFor="currentPassword"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >
                  Current Password
                </label>
                <input
                  type="password"
                  id="currentPassword"
                  value={userData.currentPassword}
                  onChange={handleInputChange}
                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-green-500"
                  required
                />
              </div>

              <div>
                <label
                  htmlFor="newPassword"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >
                  New Password
                </label>
                <input
                  type="password"
                  id="newPassword"
                  value={userData.newPassword}
                  onChange={handleInputChange}
                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-green-500"
                  required
                />
              </div>

              <div>
                <label
                  htmlFor="confirmPassword"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >
                  Confirm New Password
                </label>
                <input
                  type="password"
                  id="confirmPassword"
                  value={userData.confirmPassword}
                  onChange={handleInputChange}
                  className="w-full p-2 border border-gray-300 focus:outline-none focus:border-green-500"
                  required
                />
              </div>
            </div>

            <button
              type="submit"
              className="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4"
            >
              Change Password
            </button>
          </form>
        </div>
      </div>

      {/* Privacy Section */}
      {showAlert && (
        <FloatingAlert
          message="Removed Your History! 😉"
          onClose={() => setShowAlert(false)}
        />
      )}
      <div className="bg-white border border-gray-200 mb-6">
        <div className="border-b border-gray-200 p-4">
          <div className="flex items-center">
            <Shield className="h-5 w-5 text-gray-500 mr-2" />
            <h2 className="text-lg font-medium text-gray-800">Privacy</h2>
          </div>
        </div>

        <div className="p-4">
          <div className="space-y-4">
            <div className="flex justify-between items-center pb-4 border-b border-gray-100">
              <div className="flex items-start">
                <History className="h-5 w-5 text-gray-500 mr-2 mt-0.5" />
                <div>
                  <h3 className="font-medium text-gray-800"> History</h3>
                  <p className="text-sm text-gray-500">
                    Delete all your history on Market
                  </p>
                </div>
              </div>
              <button
                onClick={() => removeHistory()}
                className="bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 flex items-center"
              >
                <Trash2 className="h-4 w-4 mr-1" />
                Delete
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Delete Account (Danger Zone) */}
      <div className="bg-white border border-red-200 mb-6">
        <div className="border-b border-red-200 p-4 bg-red-50">
          <h2 className="text-lg font-medium text-red-700">Danger Zone !!!</h2>
        </div>

        <div className="p-4">
          <div className="flex justify-between items-center">
            <div>
              <h3 className="font-medium text-gray-800">Delete Account</h3>
              <p className="text-sm text-gray-500">
                Once you delete your account, there is no going back. Please be
                certain.
              </p>
            </div>
            <button
              className="bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4"
              onClick={handleDeleteAccount}
            >
              Delete Account
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Settings;