import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import "./AdminPanel.scss";
import {
  FaTh,
  FaUser,
  FaUsers,
  FaCalendarAlt,
  FaBullseye,
  FaVideo,
  FaChevronRight,
  FaPlus,
  FaList,
  FaSortDown,
  FaArrowLeft,
  FaRedo,
  FaSignOutAlt,
  FaCog,
  FaGift,
  FaGlobe,
  FaImage,
  FaMobile,
  FaQuestionCircle,
  FaBullhorn,
  FaFootballBall,
  FaBars,
  FaTimes,
} from "react-icons/fa";
import { BsPostcardFill } from "react-icons/bs";
import { HiOutlineHome } from "react-icons/hi2";

import { useAdminPanel } from "./AdminPanelContext";
import BannerSectionForm from "./AdminPanelForms/BannerSectionForm";
import CTASectionForm from "./AdminPanelForms/CTASectionForm";
import EcosystemForm from "./AdminPanelForms/EcosystemForm";
import FaqSectionForm from "./AdminPanelForms/FaqSectionForm";
import FooterForm from "./AdminPanelForms/FooterForm";
import HeroSectionForm from "./AdminPanelForms/HeroSectionForm";
import OfferingsForm from "./AdminPanelForms/OfferingsForm";
import TrendingAppsForm from "./AdminPanelForms/TrendingAppsForm";
import AppDemo from "./AdminPanelForms/AppDemo";
import BlogForm from "./AdminPanelForms/BlogForm";
import SeoForm from "./AdminPanelForms/SeoForm";
import SEO from "../Components/SEO/SEO";
import { clearSession, getSession } from "../Services/others";
import { GenerateLogout } from "../features/signInPage/signInPage";
import { useDispatch } from "react-redux";
const subDirectory = import.meta.env.BASE_URL;

const AdminPanel = () => {
  // Default to first option (HeroSectionForm)
  const [selectedId, setSelectedId] = useState(0);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const UserType = getSession("UserType");
  console.log(UserType, "UserTypeUserType")

  const sidebarOptions = [
    // { id: 1, title: "Dashboard", subtitle: "Overview", icon: <FaTh /> },
    {
      id: 0,
      title: "Blog",
      subtitle: "Post Content Control",
      icon: <BsPostcardFill size={25} />,
      component: BlogForm,
      key: "BlogSection",
    },
    {
      id: 10,
      title: "SEO",
      subtitle: "Content Management",
      icon: <FaUser />,
      component: SeoForm,
      key: "SEOForm",
    },
    // {
    //   id: 1,
    //   title: "HeroSection",
    //   subtitle: "Hero Section Management",
    //   icon: <FaUser />,
    //   component: HeroSectionForm,
    //   key: "HeroSection",
    // },
    // {
    //   id: 2,
    //   title: "Offerings",
    //   subtitle: "Offering Section Management",
    //   icon: <FaGift />,
    //   component: OfferingsForm,
    //   key: "OfferingSection",
    // },
    // {
    //   id: 3,
    //   title: "Industries",
    //   subtitle: "Ecosystem Management",
    //   icon: <FaGlobe />,
    //   component: EcosystemForm,
    //   key: "Industries",
    // },
    // {
    //   id: 4,
    //   title: "AppDemo",
    //   subtitle: "Video Section Management",
    //   icon: <FaVideo />,
    //   component: AppDemo,
    //   key: "VideoDemo",
    // },
    // {
    //   id: 5,
    //   title: "BannerSection",
    //   subtitle: "Banner Section Management",
    //   icon: <FaImage />,
    //   component: BannerSectionForm,
    //   key: "BannerSection",
    // },
    // {
    //   id: 6,
    //   title: "TrendingApps",
    //   subtitle: "Trending Apps Management",
    //   icon: <FaMobile />,
    //   component: TrendingAppsForm,
    //   key: "TrendingApps",
    // },
    // {
    //   id: 7,
    //   title: "FaqSection",
    //   subtitle: "FAQ Management",
    //   icon: <FaQuestionCircle />,
    //   component: FaqSectionForm,
    //   key: "FAQSection",
    // },
    // {
    //   id: 8,
    //   title: "CTASection",
    //   subtitle: "Call-to-Action Management",
    //   icon: <FaBullhorn />,
    //   component: CTASectionForm,
    //   key: "CTASection",
    // },
    // {
    //   id: 9,
    //   title: "Footer",
    //   subtitle: "Footer Management",
    //   icon: <FaFootballBall />,
    //   component: FooterForm,
    //   key: "FooterSection",
    // },
  ];

  const currentSection = sidebarOptions.find(
    (option) => option.id === selectedId
  );

  const handleSideBarSelect = (option) => {
    setSelectedId(option?.id);
    setIsMobileMenuOpen(false); // Close mobile menu on selection
  };

  const handleSignOut = async () => {
    const UserId = getSession("UserId");
    const status = "N";
    const res = await dispatch(GenerateLogout({ UserId, status })).unwrap();
    if (res?.data?.statusCode === 1) {
      clearSession();
      navigate(`${subDirectory}`);
    }
  }

  return (
    <>
      <SEO
        title="PozoApp Admin Panel - Manage Your Business Settings"
        description="Access PozoApp's comprehensive admin panel to configure your business settings, manage users, and customize your experience."
        keywords="admin panel, business settings, user management, configuration"
        url={`${subDirectory}admin-panel`}
        image="/og/admin-og.jpg"
        type="website"
        noindex={true}
      />
      <div className="admin-panel-container">
        {/* Mobile Menu Toggle */}
        <div className="admin-panel-mobile-header">
          <div className="admin-panel-mobile-logo">
            <FaCog /> Admin Panel
          </div>
          <button
            className="admin-panel-mobile-toggle"
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
          >
            {isMobileMenuOpen ? <FaTimes /> : <FaBars />}
          </button>
        </div>

        {/* Sidebar Navigation */}
        <div
          className={`admin-panel-sidebar ${isMobileMenuOpen ? "mobile-open" : ""
            }`}
        >
          <div className="admin-panel-sidebar-header">
            <div className="admin-panel-logo">
              <FaCog />
              <h1>Admin Panel</h1>
            </div>
          </div>

          <nav className="admin-panel-sidebar-nav">
            {sidebarOptions.map((option) => (
              <div
                key={option.id}
                className={`admin-panel-nav-item ${selectedId === option.id ? "active" : ""
                  }`}
                onClick={() => handleSideBarSelect(option)}
              >
                <div className="admin-panel-nav-icon">{option.icon}</div>
                <div className="admin-panel-nav-content">
                  <span className="admin-panel-nav-title">{option.title}</span>
                  <span className="admin-panel-nav-subtitle">
                    {option.subtitle}
                  </span>
                </div>
                {selectedId === option.id && (
                  <div className="admin-panel-active-indicator"></div>
                )}
              </div>
            ))}
          </nav>

          <div className="admin-panel-sidebar-footer">
            <div className="admin-panel-user-profile">
              <div className="admin-panel-user-avatar">SA</div>
              <div className="admin-panel-user-info">
                <span className="admin-panel-user-name">
                  Marketing Administrator
                </span>
                <span className="admin-panel-user-role">Super Admin</span>
              </div>
            </div>
            <button
              className="admin-panel-signout-btn"
              onClick={handleSignOut}
            >
              <FaSignOutAlt /> Sign Out
            </button>
          </div>
        </div>

        {/* Mobile Overlay */}
        {isMobileMenuOpen && (
          <div
            className="admin-panel-mobile-overlay"
            onClick={() => setIsMobileMenuOpen(false)}
          ></div>
        )}

        {/* Main Content */}
        <div className="admin-panel-main-content">
          {/* Top Header with Breadcrumbs */}
          <div className="admin-panel-top-header">
            <div className="admin-panel-breadcrumbs">
              <span>Dashboard</span>
              {currentSection && (
                <>
                  <FaChevronRight className="admin-panel-breadcrumb-arrow" />
                  <span>{currentSection.title} Management</span>
                </>
              )}
            </div>
            <div
              className="backtohomefromAdminpanel"
              onClick={() => UserType === "Super Admin" ? navigate(`${subDirectory}landing-page/home`) : navigate(`${subDirectory}`)}
            >
              Back to Home <HiOutlineHome size={18} />
            </div>
          </div>

          {/* Content Area */}
          <div className="admin-panel-content-area">
            {currentSection?.component ? (
              <currentSection.component sectionKey={currentSection.key} />
            ) : (
              <div className="admin-panel-placeholder-content">
                <div className="admin-panel-placeholder-icon">
                  <FaTh />
                </div>
                <h2>Welcome to Admin Panel</h2>
                <p>Select a section from the sidebar to get started</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  );
};

export default AdminPanel;