/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-unused-vars */
import styles from "./admin-sidebar.module.scss";
import { Link } from "@inertiajs/react";
import {
  MdOutlineDashboardCustomize,
  MdOutlineSettings,
  MdContentPaste,
  MdAdminPanelSettings,
} from "react-icons/md";
import { IoBagCheck, IoWallet, IoBookSharp } from "react-icons/io5";
import { RiBubbleChartFill, RiUserSettingsLine } from "react-icons/ri";
import { FaPiggyBank, FaLayerGroup } from "react-icons/fa6";
import { BsFillBarChartFill } from "react-icons/bs";
import { TbChartCandleFilled } from "react-icons/tb";
import { GrGrow } from "react-icons/gr";
import { BiSolidCopyAlt, BiLogOutCircle } from "react-icons/bi";
import { FiChevronRight } from "react-icons/fi";
import {usePage} from "@inertiajs/react";
import { MdRateReview } from "react-icons/md";

export interface SidebarLinkProps {
  path: string;
  label: string;
  description: string;
  icon: any;
}

const SidebarLink = ({ path, label, description, icon }: SidebarLinkProps) => {
  const basePath = "/admin";
  const pathname = window.location.pathname;

  const isActive = pathname.startsWith(`${basePath}/${path}`);

  return (
    <Link
      href={`${basePath}/${path}`}
      className={isActive ? styles.active : styles.link}
    >
      <div className={isActive ? styles["icon-active"] : styles.icon}>
        {icon}
      </div>

      <div className={styles["link-text"]}>
        <span className={styles["link-label"]}>{label}</span>
        <small className={styles["link-desc"]}>{description}</small>
      </div>

      {isActive && <FiChevronRight className={styles["active-arrow"]} />}
    </Link>
  );
};

const SectionHeader = ({ title }: { title: string }) => (
  <div className={styles.section}>
    <span>{title}</span>
  </div>
);

const AdminSidebar = () => {
  const { appSettings } = usePage().props as any;

  return (
    <div className={styles.admin__sidebar}>
      {/* LOGO */}
      <div className={styles.admin__sidebar__logo}>
        <Link href="/">
          <div className={styles.logoWrapper}>
            <img
              src={appSettings?.website_logo}
              alt={ `${appSettings?.website_name} logo` }
            />
          </div>
        </Link>
      </div>

      {/* LINKS */}
      <div className={styles.admin__sidebar__links}>
        <SectionHeader title="Overview" />
        <SidebarLink
          path="home"
          label="Dashboard"
          description="Platform overview"
          icon={<MdOutlineDashboardCustomize size="1.2rem" />}
        />

        <SectionHeader title="Wallet & Transactions" />
        <SidebarLink
          path="deposits"
          label="Deposits"
          description="User deposit records"
          icon={<IoWallet size="1.2rem" />}
        />
        <SidebarLink
          path="withdrawals"
          label="Withdrawals"
          description="Withdrawal approvals"
          icon={<FaPiggyBank size="1.2rem" />}
        />

        <SectionHeader title="Users & Compliance" />
        <SidebarLink
          path="users"
          label="Manage Users"
          description="User accounts & roles"
          icon={<RiUserSettingsLine size="1.2rem" />}
        />
        <SidebarLink
          path="kyc"
          label="KYC Applications"
          description="Identity verification"
          icon={<BiSolidCopyAlt size="1.2rem" />}
        />
        <SidebarLink
          path="account-types"
          label="Account Types"
          description="Access levels & tiers"
          icon={<TbChartCandleFilled size="1.2rem" />}
        />

        <SectionHeader title="Trading & Investments" />
        <SidebarLink
          path="trading-plans"
          label="Trading Plans"
          description="Investment plans"
          icon={<FaLayerGroup size="1.2rem" />}
        />
        <SidebarLink
          path="investments"
          label="User Investments"
          description="Active user investments"
          icon={<GrGrow size="1.2rem" />}
        />
        <SidebarLink
          path="signals"
          label="Trading Signals"
          description="Market signal control"
          icon={<RiBubbleChartFill size="1.2rem" />}
        />

        <SectionHeader title="Content & Events" />
        <SidebarLink
          path="publications"
          label="Publications"
          description="News & announcements"
          icon={<IoBagCheck size="1.2rem" />}
        />
        <SidebarLink
          path="events"
          label="Events"
          description="Manage platform events"
          icon={<IoBookSharp size="1.2rem" />}
        />

        <SectionHeader title="Contact & Support" />
        <SidebarLink
          path="messages"
          label="Messages"
          description="View contact messages"
          icon={<MdContentPaste size="1.2rem" />}
        />

        <SectionHeader title="System" />
        {/* <SidebarLink
          path="testimonials"
          label="Testimonials"
          description="Manage testimonials"
          icon={<MdRateReview size="1.2rem" />}
        /> */}
        <SidebarLink
          path="admins"
          label="Administrators"
          description="System admins"
          icon={<MdAdminPanelSettings size="1.2rem" />}
        />
        <SidebarLink
          path="settings"
          label="App Settings"
          description="Platform configuration"
          icon={<MdOutlineSettings size="1.2rem" />}
        />

      </div>

      {/* FOOTER */}
      <div className={styles.admin__sidebar__footer}>
        <span className={styles.admin__badge}>ADMIN PANEL</span>
        <small className={styles.admin__role}>Administrator Access</small>
      </div>
    </div>
  );
};

export default AdminSidebar;