import React, { useState } from "react";
import { toast } from "react-toastify";
import axios from "axios";

// Settings Change Password Component
const Settings = () => {
  const [passwords, setPasswords] = useState({
    oldPassword: "",
    newPassword: "",
    confirmPassword: "",
  });

  // Handle input changes
  const handleChange = (e) => {
    setPasswords({ ...passwords, [e.target.name]: e.target.value });
  };

  // Submit the form to the backend
  const handleSubmit = async (e) => {
    // Step 1: Prevent the page from reloading
    e.preventDefault();

    // Step 2: Check if the new password and confirm password are the same
    if (passwords.newPassword !== passwords.confirmPassword) {
      toast.error("New passwords do not match!");
      return;
    }

    try {
      // Step 3: Send the old and new password to the server
      const res = await axios.post(
        `${import.meta.env.VITE_APP_API_URL}/general/changePassword`,
        {
          oldPassword: passwords.oldPassword,
          newPassword: passwords.newPassword,
        },
        { withCredentials: true }
      );

      // Step 4: If everything is good, show success message
      if (res.status === 200) {
        toast.success("Password updated successfully!");
        // Clear the form inputs
        setPasswords({ oldPassword: "", newPassword: "", confirmPassword: "" });
      }
    } catch (error) {
      // Step 5: If there is an error (like wrong old password), show it
      console.log(error);
      toast.error(error.response?.data?.message || "Failed to update password");
    }
  };

  return (
    <div className="p-8 bg-gray-50 dark:bg-google-dark min-h-screen transition-colors duration-200">
      <h1 className="text-3xl font-bold text-gray-800 dark:text-google-text mb-6 border-b-2 border-red-700 pb-2 inline-block">
        Account Settings
      </h1>

      <div className="bg-white dark:bg-google-gray p-8 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 max-w-lg mt-4 mx-auto transition-colors duration-200">
        <h2 className="text-2xl font-semibold mb-6 text-red-700 dark:text-red-500 flex items-center">
          Change Password
        </h2>

        <form onSubmit={handleSubmit} className="flex flex-col gap-6">
          <div>
            <label className="block text-gray-700 dark:text-google-text mb-2 font-medium">
              Current Password
            </label>
            <input
              type="password"
              name="oldPassword"
              value={passwords.oldPassword}
              onChange={handleChange}
              placeholder="Enter your current password"
              className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all dark:bg-[#3c4043] dark:text-white"
              required
            />
          </div>

          <div>
            <label className="block text-gray-700 dark:text-google-text mb-2 font-medium">
              New Password
            </label>
            <input
              type="password"
              name="newPassword"
              value={passwords.newPassword}
              onChange={handleChange}
              placeholder="Enter new password"
              className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all dark:bg-[#3c4043] dark:text-white"
              required
            />
          </div>

          <div>
            <label className="block text-gray-700 dark:text-google-text mb-2 font-medium">
              Confirm New Password
            </label>
            <input
              type="password"
              name="confirmPassword"
              value={passwords.confirmPassword}
              onChange={handleChange}
              placeholder="Confirm new password"
              className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all dark:bg-[#3c4043] dark:text-white"
              required
            />
          </div>

          <button
            type="submit"
            className="mt-2 bg-red-700 text-white font-bold py-3 px-6 rounded-lg hover:bg-red-800 transition-colors shadow-md hover:shadow-lg transform active:scale-95 duration-200"
          >
            Update Password
          </button>
        </form>
      </div>
    </div>
  );
};

export default Settings;