import { useState } from "react";
import Footer from "./Footer";
import Navbar from "./Navbar";
import profilepic from "../img/samplepic.jpg";
import Addproperty from "./Addproperty";
import UserProperties from "./UserProperties";
import "../dashboard.css";
import { useSelector } from "react-redux";
import UserProfile from "./UserProfile";
import { NavLink } from "react-router-dom";
import FundingsReceived from "./FundingsReceived";
import OffersSubmitted from "./OffersSubmitted";
import FundToInvest from "./FundToInvest";

const Dashboard = () => {
  const [activeTab, setActiveTab] = useState("dashboard");
  const { user } = useSelector((state) => state.auth);

  const renderTabContent = () => {
    switch (activeTab) {
      case "Userdetails":
        return <UserProfile />;
      case "FundToInvest":
        return <FundToInvest />;
      case "addProperty":
        return <Addproperty />;
      case "activeProperties":
        return (
          <div>
            <h3>Active Properties</h3>
            <UserProperties />
          </div>
        );

      case "Fundings Received":
        return (
          <div>
            <h3>Fundings Received</h3>
            <FundingsReceived />
          </div>
        );

      case "Offers Submitted":
        return (
          <div>
            <h3>Offers Submitted</h3>
            <OffersSubmitted />
          </div>
        );

      case "closedProperties":
        return <p>These are your closed properties.</p>;
      default:
        return <></>;
    }
  };

  return (
    <>
      <Navbar />
      <br /> <br />
      <div className="d-flex" style={{ margin: "0", padding: "0" }}>
        {/* Left sidebar */}
        <div
          className="col-md-3 p-1"
          style={{ paddingRight: "2px", margin: "0" }}
        >
          <div className="card card1 p-5">
            <img
              className="img-fluid"
              src={user.result.profileImage || profilepic}
              alt="ProfileImage"
              style={{
                maxWidth: "250px",
                maxHeight: "250px",
              }}
            />
            <hr className="hline" />
            <div className="d-flex flex-column align-items-center">
              <button
                className={`btn ${activeTab === "dashboard" ? "active" : ""}`}
                onClick={() => setActiveTab("dashboard")}
              >
                <i className="fa fa-dashboard" style={{ color: "#F74B02" }} />
                <span>Dashboard</span>
              </button>

              <button
                className={`btn mt-3 ${
                  activeTab === "Userdetails" ? "active" : ""
                }`}
                onClick={() => setActiveTab("Userdetails")}
              >
                {/* <span className="fa fa-home" style={{ color: "#F74B02" }} /> */}
                <span>User Profile</span>
              </button>

              <button
                className={`btn mt-3 ${
                  activeTab === "FundToInvest" ? "active" : ""
                }`}
                onClick={() => setActiveTab("FundToInvest")}
              >
                {/* <span className="fa fa-home" style={{ color: "#F74B02" }} /> */}
                <span>Fund To Invest</span>
              </button>

              <button
                className={`btn mt-3 ${
                  activeTab === "addProperty" ? "active" : ""
                }`}
                onClick={() => setActiveTab("addProperty")}
              >
                {/* <span className="fa fa-home" style={{ color: "#F74B02" }} /> */}
                <span>Add Property</span>
              </button>
              <button
                className={`btn mt-3 ${
                  activeTab === "activeProperties" ? "active" : ""
                }`}
                onClick={() => setActiveTab("activeProperties")}
              >
                {/* <span className="fa fa-home" style={{ color: "#F74B02" }} /> */}
                <span>Active Properties</span>
              </button>

              <button
                className={`btn mt-3 ${
                  activeTab === "Fundings Received" ? "active" : ""
                }`}
                onClick={() => setActiveTab("Fundings Received")}
              >
                {/* <span className="fa fa-home" style={{ color: "#F74B02" }} /> */}
                <span>Fundings Received</span>
              </button>

              <button
                className={`btn mt-3 ${
                  activeTab === "Offers Submitted" ? "active" : ""
                }`}
                onClick={() => setActiveTab("Offers Submitted")}
              >
                {/* <span className="fa fa-home" style={{ color: "#F74B02" }} /> */}
                <span>Offers Submitted</span>
              </button>

              <button
                className={`btn mt-3 ${
                  activeTab === "closedProperties" ? "active" : ""
                }`}
                onClick={() => setActiveTab("closedProperties")}
              >
                {/* <span className="fa fa-home" style={{ color: "#F74B02" }} /> */}
                <span>Closed Properties</span>
              </button>
            </div>
          </div>
        </div>

        {/* Main content area */}
        <div
          className="col-md-9 p-1"
          style={{ paddingLeft: "2px", margin: "0" }}
        >
          <div className="card card2 p-2">
            <span>
              <br /> <br />
              Welcome to{" "}
              <span style={{ color: "#067ADC" }}>
                <NavLink
                  to={`/profile/${user.result.userId}`}
                  className="link-primary text-decoration-none"
                >
                  {user.result.title}. {user.result.firstName}{" "}
                  {user.result.middleName} {user.result.lastName}
                </NavLink>
              </span>
              <span style={{ color: "#067ADC" }}>
                <NavLink
                  to={`/addproperty`}
                  className="link-primary text-decoration-none"
                >
                  add
                </NavLink>
              </span>
            </span>
            {activeTab === "dashboard" && (
              <>
                <br />
                <div className="banner_taital">
                  <h1
                    style={{
                      color: "#fda417",
                      fontSize: "30px",
                      padding: "10px",
                      fontWeight: "normal",
                    }}
                    className="services_taital"
                  >
                    Now you are accessing the world's only portal which has
                    Streamlined the
                    <h1
                      style={{
                        fontSize: "30px",
                        padding: "10px",
                        fontWeight: "normal",
                      }}
                    >
                      {" "}
                      investor-borrower interactions,{" "}
                    </h1>
                  </h1>
                  <h1
                    className="services_taital"
                    style={{
                      color: "#fda417",
                      fontSize: "30px",
                      padding: "10px",
                      fontWeight: "normal",
                    }}
                  >
                    gaining complete visibility into your data, and using smart
                    filters to
                    <h1
                      className="services_taital"
                      style={{
                        fontSize: "30px",
                        padding: "10px",
                        fontWeight: "normal",
                      }}
                    >
                      create automatic workflows{" "}
                    </h1>
                  </h1>
                  <br /> <br /> <br /> <br /> <br />
                  <br />
                </div>
              </>
            )}
            <br />
            {renderTabContent()}
          </div>
        </div>
      </div>
      <Footer />
    </>
  );
};

export default Dashboard;
