/* eslint-disable @typescript-eslint/no-explicit-any */
"use client"

import { Link, usePage, router } from "@inertiajs/react"

import styles from "./admin-sidebar.module.scss"

import {
  IoBagCheck
} from "react-icons/io5"

import {
  MdOutlineDashboardCustomize,
  MdOutlineSettings,
  MdAdminPanelSettings,
  MdContentPaste,
  // MdRateReview
} from "react-icons/md"

import {
  IoWallet,
  IoBookSharp,
} from "react-icons/io5"

import {
  RiBubbleChartFill,
  RiUserSettingsLine,
} from "react-icons/ri"

import {
  FaPiggyBank,
  FaLayerGroup,
} from "react-icons/fa6"

import { TbChartCandleFilled } from "react-icons/tb"

import { GrGrow } from "react-icons/gr"

import {
  BiSolidCopyAlt,
  BiLogOutCircle,
} from "react-icons/bi"

interface SidebarLinkProps {
  path: string
  label: string
  description: string
  icon: React.ReactNode
  closeBar: () => void
  isActive?: boolean
}

const SidebarLink = ({
  path,
  label,
  description,
  icon,
  closeBar,
  isActive,
}: SidebarLinkProps) => (
  <Link
    href={`/admin/${path}`}
    onClick={closeBar}
    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>

      <span className={styles["link-desc"]}>
        {description}
      </span>
    </div>
  </Link>
)

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

interface MobileAdminSidebarProps {
  closeBar: () => void
}

const MobileAdminSidebar = ({
  closeBar,
}: MobileAdminSidebarProps) => {
  const { url } = usePage()

  const {
    auth,
    appSettings
  } = usePage().props as any

  const pathname =
    url.replace(/^\/+/, "")

  const handleLogout = () => {
    router.post("/logout")

    closeBar()
  }

  const firstLetter =
    auth?.user?.name?.charAt(0) ||
    auth?.user?.name?.charAt(0) ||
    "A"

  return (
    <div
      className={styles.mobile__sidebar}
      onClick={closeBar}
    >
      <div
        className={
          styles.mobile__sidebar__content
        }
        onClick={(e) =>
          e.stopPropagation()
        }
      >
        {/* TOP BAR */}

        <div className={styles.sidebarTop}>
          <button
            type="button"
            onClick={closeBar}
            className={styles.closeButton}
          >
            ✕
          </button>
        </div>

        {/* PROFILE */}

        <div
          className={
            styles.mobile__sidebar__top
          }
        >
          <div className={styles.profile}>
            <div
              className={
                styles.profileAvatar
              }
            >
              {firstLetter}
            </div>

            <div
              className={
                styles.profileContent
              }
            >
              <h3>
                {appSettings?.website_name} Admin
              </h3>

              <p>
               Logged in as an account manager
              </p>

              <div
                className={
                  styles.profileMeta
                }
              >
                <span
                  className={
                    styles.profileStatus
                  }
                >
                  Administrator
                </span>
              </div>
            </div>
          </div>
        </div>

        {/* BODY */}

       {/* BODY */}

<div className={styles.sidebarBody}>
  <div className={styles.sidebar__links}>

    <SectionHeader title="Overview" />

    <SidebarLink
      path="home"
      label="Dashboard"
      description="Platform overview"
      icon={<MdOutlineDashboardCustomize size="1.2rem" />}
      closeBar={closeBar}
      isActive={pathname.includes("admin/home")}
    />

    {/* WALLET & TRANSACTIONS */}

    <SectionHeader title="Wallet & Transactions" />

    <SidebarLink
      path="deposits"
      label="Deposits"
      description="User deposit records"
      icon={<IoWallet size="1.2rem" />}
      closeBar={closeBar}
      isActive={pathname.includes("admin/deposits")}
    />

    <SidebarLink
      path="withdrawals"
      label="Withdrawals"
      description="Withdrawal approvals"
      icon={<FaPiggyBank size="1.2rem" />}
      closeBar={closeBar}
      isActive={pathname.includes("admin/withdrawals")}
    />

    {/* USERS */}

    <SectionHeader title="Users & Compliance" />

    <SidebarLink
      path="users"
      label="Manage Users"
      description="User accounts & roles"
      icon={<RiUserSettingsLine size="1.2rem" />}
      closeBar={closeBar}
      isActive={pathname.includes("admin/users")}
    />

    <SidebarLink
      path="kyc"
      label="KYC Applications"
      description="Identity verification"
      icon={<BiSolidCopyAlt size="1.2rem" />}
      closeBar={closeBar}
      isActive={pathname.includes("admin/kyc")}
    />

    <SidebarLink
      path="account-types"
      label="Account Types"
      description="Access levels & tiers"
      icon={<TbChartCandleFilled size="1.2rem" />}
      closeBar={closeBar}
      isActive={pathname.includes("admin/account-types")}
    />

    {/* INVESTMENTS */}

    <SectionHeader title="Trading & Investments" />

    <SidebarLink
      path="trading-plans"
      label="Trading Plans"
      description="Investment plans"
      icon={<FaLayerGroup size="1.2rem" />}
      closeBar={closeBar}
      isActive={pathname.includes("admin/trading-plans")}
    />

    <SidebarLink
      path="investments"
      label="User Investments"
      description="Active user investments"
      icon={<GrGrow size="1.2rem" />}
      closeBar={closeBar}
      isActive={pathname.includes("admin/investments")}
    />

    <SidebarLink
      path="signals"
      label="Trading Signals"
      description="Market signal control"
      icon={<RiBubbleChartFill size="1.2rem" />}
      closeBar={closeBar}
      isActive={pathname.includes("admin/signals")}
    />

    {/* CONTENT */}

    <SectionHeader title="Content & Events" />

    <SidebarLink
      path="publications"
      label="Publications"
      description="News & announcements"
      icon={<IoBagCheck size="1.2rem" />}
      closeBar={closeBar}
      isActive={pathname.includes("admin/publications")}
    />

    <SidebarLink
      path="events"
      label="Events"
      description="Manage platform events"
      icon={<IoBookSharp size="1.2rem" />}
      closeBar={closeBar}
      isActive={pathname.includes("admin/events")}
    />

    {/* SUPPORT */}

    <SectionHeader title="Contact & Support" />

    <SidebarLink
      path="messages"
      label="Messages"
      description="View contact messages"
      icon={<MdContentPaste size="1.2rem" />}
      closeBar={closeBar}
      isActive={pathname.includes("admin/messages")}
    />

    {/* SYSTEM */}

    <SectionHeader title="System" />
    {/* <SidebarLink
      path="testimonials"
      label="Testimonials"
      description="Manage testimonials"
      icon={<MdRateReview size="1.2rem" />}
      closeBar={closeBar}
      isActive={pathname.includes("admin/testimonials")}
    /> */}

    <SidebarLink
      path="admins"
      label="Administrators"
      description="System admins"
      icon={<MdAdminPanelSettings size="1.2rem" />}
      closeBar={closeBar}
      isActive={pathname.includes("admin/admins")}
    />

    <SidebarLink
      path="settings"
      label="App Settings"
      description="Platform configuration"
      icon={<MdOutlineSettings size="1.2rem" />}
      closeBar={closeBar}
      isActive={pathname.includes("admin/settings")}
    />

  </div>
</div>

        {/* FOOTER */}

        <div
          className={styles.logoutCard}
        >
          <div
            className={
              styles.logoutContent
            }
          >
            <span>
              Securely sign out from the
              admin panel
            </span>

            <button
              type="button"
              onClick={handleLogout}
              className={styles.logout}
            >
              <BiLogOutCircle size="1.2rem" />

              <span>Logout</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default MobileAdminSidebar