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

const AdminDashboard = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { properties } = useSelector((state) => state.property);

  // Set pagination state
  const page = 1;
  const limit = 10; // Number of results per page
  const keyword = "";

  // State to track selected tab
  const [selectedTab, setSelectedTab] = useState("dashboard");

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

  console.log("properties", properties);

  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>
        <UserProperties />
        </div>;
      case "adminProperties":
        return <div>Admin Properties Content</div>;
      default:
        return (
          <div>
            Welcome to the Dashboard
            <div
              className="container-fluid"
              style={{ padding: "20px", maxwidth: "150%" }}
            >
              {/* Content Row */}
              <div className="row"  style={{ padding: "30px", maxwidth: "180%" }} >
                {/* Earnings (Monthly) Card Example */}
                <div className="col-xl-3 col-md-6 mb-4">
                  <div className="card border-left-primary shadow h-100 py-2">
                    <div className="card-body">
                      <div className="row no-gutters align-items-center">
                        <div className="col mr-2">
                          <div className="text-xs font-weight-bold text-primary text-uppercase mb-1">
                            Total Users
                          </div>
                          <div className="h5 mb-0 font-weight-bold text-gray-800">
                            40,000,000
                          </div>
                        </div>
                        <div className="col-auto">
                          <i className="fas fa-calendar fa-2x text-gray-300" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                {/* Earnings (Monthly) Card Example */}
                <div className="col-xl-3 col-md-6 mb-4">
                  <div className="card border-left-success shadow h-100 py-2">
                    <div className="card-body">
                      <div className="row no-gutters align-items-center">
                        <div className="col mr-2">
                          <div className="text-xs font-weight-bold text-success text-uppercase mb-1">
                            Total payments
                          </div>
                          <div className="h5 mb-0 font-weight-bold text-gray-800">
                            $215,000
                          </div>
                        </div>
                        <div className="col-auto">
                          <i className="fas fa-dollar-sign fa-2x text-gray-300" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                {/* Earnings (Monthly) Card Example */}
                <div className="col-xl-3 col-md-6 mb-4">
                  <div className="card border-left-info shadow h-100 py-2">
                    <div className="card-body">
                      <div className="row no-gutters align-items-center">
                        <div className="col mr-2">
                          <div className="text-xs font-weight-bold text-info text-uppercase mb-1">
                            Total Properties
                          </div>
                          <div className="row no-gutters align-items-center">
                            <div className="col-auto">
                              <div className="h5 mb-0 mr-3 font-weight-bold text-gray-800">
                                50,000
                              </div>
                            </div>
                            <div className="col">
                              <div className="progress progress-sm mr-2">
                                <div
                                  className="progress-bar bg-info"
                                  role="progressbar"
                                  style={{ width: "50%" }}
                                  aria-valuenow={50}
                                  aria-valuemin={0}
                                  aria-valuemax={100}
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                        <div className="col-auto">
                          <i className="fas fa-clipboard-list fa-2x text-gray-300" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                {/* Pending Requests Card Example */}
                <div className="col-xl-3 col-md-6 mb-4">
                  <div className="card border-left-warning shadow h-100 py-2">
                    <div className="card-body">
                      <div className="row no-gutters align-items-center">
                        <div className="col mr-2">
                          <div className="text-xs font-weight-bold text-warning text-uppercase mb-1">
                            Pending Inquires
                          </div>
                          <div className="h5 mb-0 font-weight-bold text-gray-800">
                            18
                          </div>
                        </div>
                        <div className="col-auto">
                          <i className="fas fa-comments fa-2x text-gray-300" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              {/* Content Row */}
              <div className="row">{/* Area Chart */}</div>
              {/* Content Row */}
            </div>
          </div>
        );
    }
  };

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

  return (
    <>
      <div>
        {/* Page Wrapper */}
        <div id="wrapper">
          {/* Sidebar */}
          <ul
            className="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion"
            id="accordionSidebar"
          >
            {/* Sidebar - Brand */}
            <span
              className="sidebar-brand d-flex align-items-center justify-content-center"
              href="index.html"
            >
              <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>
                </div>
              </div>
            </li>
            <hr className="sidebar-divider" />
            <div className="sidebar-heading">Addons</div>

            <li className="nav-item">
              <NavLink
                to="#"
                onClick={() => setSelectedTab("admin")}
                className="nav-link link-primary text-decoration-none"
              >
                <i className="fas fa-fw fa-chart-area" />
                Admin
              </NavLink>
            </li>

            <hr className="sidebar-divider d-none d-md-block" />

            <li className="nav-item">
              <NavLink
                to="/"
                onClick={(e) => {
                  e.preventDefault(); // Prevent the default link behavior
                  handleLogout();
                }}
                className="nav-link link-primary text-decoration-none"
              >
                <i className="fas fa-fw fa-sign-out-alt" />
                <span>Logout</span>
              </NavLink>
            </li>
          </ul>
          {/* End of Sidebar */}

          {/* Content Wrapper */}
          <div
            id="content-wrapper"
            className="content col-12"
            style={{ padding: "20px", maxwidth: "500%" }}
          >
            {/* Main Content */}
            <div className="main-content">{renderContent()}</div>
          </div>
          {/* End of Content Wrapper */}
        </div>
        {/* End of Page Wrapper */}
      </div>
    </>
  );
};

export default AdminDashboard;