import React, { useState, useEffect } from "react";
import axios from "axios";
import { useNavigate, useParams } from "react-router-dom";
import Sidebar from "../../Sidebar";
import Header from "../../Header";

function ProjectDetails() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const token = localStorage.getItem("token");
  const [user, setUser] = useState(null);
  const [selectedRole, setSelectedRole] = useState("");
  const { projectId } = useParams();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUserDetails = async () => {
      try {
        const response = await axios.get(
          `http://localhost:5000/apiTender/projects/${projectId}`,
          {
            headers: {
              "Content-Type": "application/json",
              auth: token,
            },
          }
        );
        setUser(response.data.User[0]);
        setSelectedRole(response.data.User[0].userRole);
        setLoading(false);
      } catch (error) {
        console.error(error);
        setError("Failed to fetch project details");
        setLoading(false);
      }
    };

    fetchUserDetails();
  }, [projectId, token]);

  const handleDelete = async () => {
    try {
      // Make API call to delete the user
      await axios.delete(`http://localhost:5000/apiTender/projects/${projectId}`, {
        headers: {
          "Content-Type": "application/json",
          auth: token,
        },
      });

      alert("Deleted");
      navigate("/dashboard/projects");
    } catch (error) {
      console.error(error);
      setError("Failed to delete the project");
    }
  };

  const handleRoleChange = (event) => {
    setSelectedRole(event.target.value);
  };

  const handleUpdateRole = async () => {
    try {
      // Make API call to update the user role
      await axios.put(
        `http://localhost:5000/apiTender/projects/${projectId}`,
        {
          projectId: projectId,
          userRole: selectedRole,
        },
        {
          headers: {
            "Content-Type": "application/json",
            auth: token,
          },
        }
      );

      alert("Role updated successfully");
    } catch (error) {
      console.error(error);
      setError("Failed to update the role");
    }
  };

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error} {projectId}</div>;
  }

  return (
    <div className="flex h-screen overflow-hidden">
      {/* Sidebar */}
      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />

      {/* Content area */}
      <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
        <main>
          {/* Site header */}
          <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
          <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
            {/* Dashboard actions */}
            <div className="container mx-auto py-8 px-4">
              <div className="max-w-lg mx-auto bg-white shadow-lg rounded-lg p-6 flex flex-col">
                <div>
                  <h1 className="text-3xl font-bold mb-6 text-gray-800">
                    Project Details
                  </h1>
                  <p className="mb-2 text-gray-700">
                    <strong className="text-gray-900">PNR:</strong>{" "}
                    <span className="ml-2">{user.pnr}</span>
                  </p>
                  <p className="mb-2 text-gray-700">
                    <strong className="text-gray-900">Company Name:</strong>{" "}
                    <span className="ml-2">{user.companyname}</span>
                  </p>
                  <p className="mb-2 text-gray-700">
                    <strong className="text-gray-900">User Role:</strong>{" "}
                    <span className="ml-2">{user.userRole}</span>
                  </p>
                  <p className="mb-2 text-gray-700">
                    <strong className="text-gray-900">Detail:</strong>{" "}
                    <span className="ml-2">{user.detail}</span>
                  </p>
                  <p className="mb-2 text-gray-700">
                    <strong className="text-gray-900">Value:</strong>{" "}
                    <span className="ml-2">{user.value}</span>
                  </p>
                  <p className="mb-2 text-gray-700">
                    <strong className="text-gray-900">Status:</strong>{" "}
                    <span className="ml-2">{user.status}</span>
                  </p>
                  <p className="mb-2 text-gray-700">
                    <strong className="text-gray-900">Country:</strong>{" "}
                    <span className="ml-2">{user.country}</span>
                  </p>
                  <p className="mb-2 text-gray-700">
                    <strong className="text-gray-900">State:</strong>{" "}
                    <span className="ml-2">{user.state}</span>
                  </p>
                  <p className="mb-2 text-gray-700">
                    <strong className="text-gray-900">City:</strong>{" "}
                    <span className="ml-2">{user.city}</span>
                  </p>
                </div>
                <div className="mt-4">
                  <label
                    className="block text-gray-700 text-sm font-bold mb-2"
                    htmlFor="userRole"
                  >
                    Update Role:
                  </label>
                  <select
                    className="w-1/4 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 mb-2"
                    id="userRole"
                    name="userRole"
                    value={selectedRole}
                    onChange={handleRoleChange}
                  >
                    <option value="hr">HR</option>
                    <option value="admin">Admin</option>
                    <option value="employee">Employee</option>
                    <option value="user">User</option>
                  </select>
                  <div className="mt-4 flex justify-between">
                    <button
                      className="bg-[#182235] hover:bg-[#111a2b] text-white font-bold py-2 px-4 rounded"
                      onClick={handleUpdateRole}
                    >
                      Update Role
                    </button>
                    <button
                      className="bg-[#182235] hover:bg-[#111a2b] text-white font-bold py-2 px-4 rounded"
                      onClick={handleDelete}
                    >
                      Delete
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}

export default ProjectDetails;

getting this error in above code 

DashboardRoutes.jsx:156 Warning: Failed prop type: The prop `title` is marked as required in `UserCards`, but its value is `undefined`.
    at UserCards (http://localhost:5173/src/Admin/partials/dashboard/userDashboards/UserCards.jsx:23:45)
    at DashboardRoutes
    at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=5ed32307:3265:5)
    at Routes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=5ed32307:3718:5)
    at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=5ed32307:3665:15)
    at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=5ed32307:4132:5)
    at App
    at Provider (http://localhost:5173/node_modules/.vite/deps/react-redux.js?v=5ed32307:1313:3)
printWarning @ react-jsx-dev-runtime.development.js:87
error @ react-jsx-dev-runtime.development.js:61
checkPropTypes @ react-jsx-dev-runtime.development.js:631
validatePropTypes @ react-jsx-dev-runtime.development.js:1164
jsxWithValidation @ react-jsx-dev-runtime.development.js:1284
DashboardRoutes @ DashboardRoutes.jsx:156
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 16 more frames
DashboardProjectDetail.jsx:33 TypeError: Cannot read properties of undefined (reading '0')
    at fetchUserDetails (DashboardProjectDetail.jsx:29:31)
fetchUserDetails @ DashboardProjectDetail.jsx:33
await in fetchUserDetails (async)
(anonymous) @ DashboardProjectDetail.jsx:39
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
(anonymous) @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 11 more frames
DashboardProjectDetail.jsx:33 TypeError: Cannot read properties of undefined (reading '0')
    at fetchUserDetails (DashboardProjectDetail.jsx:29:31)
fetchUserDetails @ DashboardProjectDetail.jsx:33
await in fetchUserDetails (async)
(anonymous) @ DashboardProjectDetail.jsx:39
commitHookEffectListMount @ react-dom.development.js:23150
invokePassiveEffectMountInDEV @ react-dom.development.js:25154
invokeEffectsInDev @ react-dom.development.js:27351
commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27330
flushPassiveEffectsImpl @ react-dom.development.js:27056
flushPassiveEffects @ react-dom.development.js:26984
(anonymous) @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 10 more frames
64a8e9b5028b475d428d0a26:1 Error handling response: TypeError: Cannot read properties of null (reading '1')
    at chrome-extension://pgjjikdiikihdfpoppgaidccahalehjh/webspeed.js:9:73298
    at chrome-extension://pgjjikdiikihdfpoppgaidccahalehjh/webspeed.js:9:73485

and showing this in page 
Error: Failed to fetch project details 64a8e9b5028b475d428d0a26