'use client'
import React, { useState } from "react";
import axios from "axios";
import authAxios from "@/utils/axios";

const ChangePassword = () => {
  const [oldPassword, setOldPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmNewPassword, setConfirmNewPassword] = useState("");
  const [error, setError] = useState("");
  const [success, setSuccess] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();

    
    if (!oldPassword || !newPassword || !confirmNewPassword) {
      setError("All fields are required.");
      return;
    }

    
    if (newPassword !== confirmNewPassword) {
      setError("New passwords do not match.");
      return;
    }

    
    setError("");

    try {
      
      const response = await authAxios.post(
        "/account/change-password/", 
        {
          old_password: oldPassword,
          new_password: newPassword,
          confirm_new_password: confirmNewPassword,
        }
      );

      if (response.data.status) {
        setSuccess("Password updated successfully.");
      } else {
        setError(response.data.message || "Something went wrong.");
      }
    } catch (err) {
      setError("Failed to change password. Please try again.");
    }
  };

  return (
    <div>
      <h1 className="text-3xl font-semibold border-b pb-4 text-zinc-700">
        Change Password
      </h1>
      <form onSubmit={handleSubmit}>
        <div className="sm:w-3/4 p-4">
          <label className="block font-medium my-3 text-zinc-700 sm:text-xl text-lg">
            Old Password
          </label>
          <input
            type="password"
            className="mt-1 block w-full sm:w-3/5 rounded-md p-3 border"
            value={oldPassword}
            onChange={(e) => setOldPassword(e.target.value)}
          />

          <label className="block font-medium my-3 text-zinc-700 sm:text-xl text-lg">
            New Password
          </label>
          <input
            type="password"
            className="mt-1 block w-full sm:w-3/5 rounded-md p-3 border"
            value={newPassword}
            onChange={(e) => setNewPassword(e.target.value)}
          />

          <label className="block my-3 font-medium text-zinc-700 sm:text-xl text-lg">
            Confirm New Password
          </label>
          <input
            type="password"
            className="mt-1 block w-full sm:w-3/5 rounded-md p-3 border"
            value={confirmNewPassword}
            onChange={(e) => setConfirmNewPassword(e.target.value)}
          />

          {error && (
            <div className="text-red-600 mt-2">
              <p>{error}</p>
            </div>
          )}

          {success && (
            <div className="text-green-600 mt-2">
              <p>{success}</p>
            </div>
          )}

          <button
            type="submit"
            className="bg-[#AC8C6B] bg-opacity-70 text-white px-4 py-3 rounded-md mt-3"
          >
            Submit
          </button>
        </div>
      </form>
    </div>
  );
};

export default ChangePassword;