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";

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

  const renderTabContent = () => {
    switch (activeTab) {
      case "Userdetails":
        return <UserProfile />;
      case "addProperty":
        return <Addproperty />;
      case "activeProperties":
        return (
          <div>
            <h3>Active Properties</h3>
            <UserProperties />
          </div>
        );
      case "closedProperties":
        return <p>These are your closed properties.</p>;
      default:
        return <></>;
    }
  };

  return (
    <>
      <Navbar />
      <br />      <br />      <br />      <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 === "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 === "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 />
              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>
            {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;