import { useState, useEffect } from "react";
import { NavLink } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { getProperties } from "../../redux/features/propertySlice";
import propertydummy from "../../img/propertydummy.jpg";

const AdminDashboard = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { properties, totalPages } = useSelector((state) => state.property);
  const [page, setPage] = useState(1);
  const limit = 5; // Number of properties per page
  const keyword = "";
  const [selectedTab, setSelectedTab] = useState("dashboard");

  useEffect(() => {
    dispatch(getProperties({ page, limit, keyword }));
  }, [dispatch, page, keyword]);

  const handlePageChange = (newPage) => {
    setPage(newPage);
  };

  const renderContent = () => {
    switch (selectedTab) {
      case "activeUsers":
        return <div>Active Users Content</div>;
      case "inactiveUsers":
        return <div>Inactive Users Content</div>;
      case "addProperty":
        return <div>Add Property Content</div>;
      case "userProperties":
        return (
          <div className="container-fluid" style={{ padding: "35px", paddingLeft: "120px" }}>
            {properties.length > 0 ? (
              <>
                <ul>
                  {properties.map((property) => (
                    <li key={property._id}>
                      <div className="container">
                        <div className="col-md-12">
                          <div className="row p-2 bg-white border rounded mt-2">
                            <div className="col-md-3 mt-1">
                              <img
                                src={property.images[0].file || propertydummy}
                                className="w-70"
                                alt="Img"
                                style={{
                                  marginTop: "0px",
                                  maxWidth: "200px",
                                  maxHeight: "200px",
                                }}
                              />
                            </div>
                            <div className="col-md-6 mt-1">
                              <h5>
                                <NavLink
                                  to={`/property/${property.propertyId}`}
                                  target="_blank"
                                >
                                  {property.address}
                                  {"....."}
                                </NavLink>
                              </h5>
                              <p className="text-justify text-truncate para mb-0">
                                There are many variations of passages of
                              </p>
                            </div>
                            <div className="align-items-center align-content-center col-md-3 border-left mt-1">
                              <div className="d-flex flex-column mt-4">
                                <NavLink to={`/property/${property.propertyId}`}>
                                  <button
                                    className="btn btn-outline-primary btn-sm mt-2"
                                    type="button"
                                    style={{
                                      backgroundColor: "#fda417",
                                      border: "#fda417",
                                    }}
                                  >
                                    <span
                                      className="fa fa-eye"
                                      style={{ color: "#F74B02" }}
                                    />{" "}
                                    View Details
                                  </button>
                                </NavLink>
                                <button
                                  className="btn btn-outline-primary btn-sm mt-2"
                                  type="button"
                                  style={{
                                    backgroundColor: "#fda417",
                                    border: "#fda417",
                                  }}
                                  onClick={() => setSelectedTab("editDetails")}
                                >
                                  <span
                                    className="fa fa-edit"
                                    style={{ color: "#F74B02" }}
                                  />{" "}
                                  Edit Details
                                </button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>
                  ))}
                </ul>
                <div className="pagination">
                  <button
                    onClick={() => handlePageChange(page - 1)}
                    disabled={page === 1}
                  >
                    Previous
                  </button>
                  {Array.from({ length: totalPages }, (_, index) => index + 1).map(
                    (pageNumber) =>
                      pageNumber === page ||
                      pageNumber === 1 ||
                      pageNumber === totalPages ||
                      (pageNumber >= page - 1 && pageNumber <= page + 1) ? (
                        <button
                          key={pageNumber}
                          onClick={() => handlePageChange(pageNumber)}
                          disabled={page === pageNumber}
                        >
                          {pageNumber}
                        </button>
                      ) : pageNumber === 2 || pageNumber === totalPages - 1 ? (
                        <span key={pageNumber}>...</span>
                      ) : null
                  )}
                  <button
                    onClick={() => handlePageChange(page + 1)}
                    disabled={page === totalPages}
                  >
                    Next
                  </button>
                </div>
              </>
            ) : (
              <p>No active properties found.</p>
            )}
          </div>
        );
      case "adminProperties":
        return <div>Admin Properties Content</div>;
      case "newPage": // New page with dummy content
        return (
          <div style={{ padding: "20px" }}>
            <h3>New Page</h3>
            <p>This is some dummy text. You can replace it with your content later.</p>
          </div>
        );
      case "editDetails": // New case for the Edit Details page
        return (
          <div style={{ padding: "20px" }}>
            <h3>Edit Property Details</h3>
            <p>You can add your edit details here.</p>
          </div>
        );
      default:
        return (
          <div>
            <NavLink to={`/AdminPLogin/admininfo`}>Welcome to the Dashboard</NavLink>
          </div>
        );
    }
  };

  const handleLogout = () => {
    localStorage.removeItem("token");
    navigate("/AdminPLogin");
  };

  return (
    <div id="wrapper">
      <ul
        className="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion"
        id="accordionSidebar"
      >
        <span
          className="sidebar-brand d-flex align-items-center justify-content-center"
        >
          <div className="sidebar-brand-icon rotate-n-15">
            <i className="fas fa-laugh-wink" />
          </div>
          <div className="sidebar-brand-text mx-3">
            Admin <sup>EL</sup>
          </div>
        </span>
        <hr className="sidebar-divider my-0" />
        <li className="nav-item active">
          <NavLink
            to="#"
            onClick={() => setSelectedTab("dashboard")}
            className="nav-link link-primary text-decoration-none"
          >
            <i className="fas fa-fw fa-tachometer-alt" />
            <span>Dashboard</span>
          </NavLink>
        </li>
        <hr className="sidebar-divider" />
        <div className="sidebar-heading">Interface</div>
        <li className="nav-item">
          <a
            className="nav-link collapsed"
            href="#"
            data-toggle="collapse"
            data-target="#collapseTwo"
            aria-expanded="true"
            aria-controls="collapseTwo"
          >
            <i className="fas fa-fw fa-cog" />
            <span>Users</span>
          </a>
          <div
            id="collapseTwo"
            className="collapse"
            aria-labelledby="headingTwo"
            data-parent="#accordionSidebar"
          >
            <div className="bg-white py-2 collapse-inner rounded">
              <h6 className="collapse-header">Registered Users:</h6>
              <NavLink
                to="#"
                onClick={() => setSelectedTab("activeUsers")}
                className="collapse-item link-primary text-decoration-none"
              >
                Active Users
              </NavLink>
              <NavLink
                to="#"
                onClick={() => setSelectedTab("inactiveUsers")}
                className="collapse-item link-primary text-decoration-none"
              >
                Inactive Users
              </NavLink>
            </div>
          </div>
        </li>
        <li className="nav-item">
          <a
            className="nav-link collapsed"
            href="#"
            data-toggle="collapse"
            data-target="#collapseUtilities"
            aria-expanded="true"
            aria-controls="collapseUtilities"
          >
            <i className="fas fa-fw fa-wrench" />
            <span>Properties</span>
          </a>
          <div
            id="collapseUtilities"
            className="collapse"
            aria-labelledby="headingUtilities"
            data-parent="#accordionSidebar"
          >
            <div className="bg-white py-2 collapse-inner rounded">
              <h6 className="collapse-header">Details:</h6>
              <NavLink
                to="#"
                onClick={() => setSelectedTab("addProperty")}
                className="collapse-item link-primary text-decoration-none"
              >
                Add Property
              </NavLink>
              <NavLink
                to="#"
                onClick={() => setSelectedTab("userProperties")}
                className="collapse-item link-primary text-decoration-none"
              >
                User Properties
              </NavLink>
              <NavLink
                to="#"
                onClick={() => setSelectedTab("adminProperties")}
                className="collapse-item link-primary text-decoration-none"
              >
                Admin Properties
              </NavLink>
              <NavLink
                to="#"
                onClick={() => setSelectedTab("newPage")}
                className="collapse-item link-primary text-decoration-none"
              >
                New Page
              </NavLink>
            </div>
          </div>
        </li>
        <li className="nav-item">
          <NavLink to="#" onClick={handleLogout} className="nav-link link-primary text-decoration-none">
            <i className="fas fa-fw fa-sign-out-alt" />
            <span>Logout</span>
          </NavLink>
        </li>
      </ul>
      <div id="content-wrapper" className="d-flex flex-column">
        <div id="content">
          <div className="container-fluid">{renderContent()}</div>
        </div>
      </div>
    </div>
  );
};

export default AdminDashboard;
