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

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

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

import {
  MdOutlineDashboardCustomize,
  MdManageAccounts,
  MdOutlineEventNote,
  MdNotifications,
  MdContactMail,
} from "react-icons/md"

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

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

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

import {
  BsCreditCardFill,
  BsFillBarChartFill,
} from "react-icons/bs"

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

import { 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={`/dashboard/${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 MobileSidebarProps {
  closeBar: () => void
  user?: any
  onLogout?: () => void
}

const MobileSidebar = ({
  closeBar,
  onLogout,
}: MobileSidebarProps) => {
  const { url } = usePage()

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

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

  const unreadCount =
    navbarNotifications?.unread_count ||
    0

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

    closeBar()
  }

 const getInitials = (name = "") => {
    return name
      .trim()
      .split(" ")
      .filter(Boolean)
      .slice(0, 2)
      .map((word) => word[0])
      .join("")
      .toUpperCase();
  };

  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 HEADER */}

        <div
          className={
            styles.mobile__sidebar__top
          }
        >
          <div className={styles.profile}>
            <div
              className={
                styles.profileAvatar
              }
            >
              {getInitials(auth?.user?.name)}
            </div>

            <div
              className={
                styles.profileContent
              }
            >
              <h3>
                {auth?.user?.name}
              </h3>

              <p>
                {auth?.user?.email}
              </p>

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

        {/* SCROLLABLE CONTENT */}

        <div
          className={styles.sidebarBody}
        >
          <div
            className={
              styles.sidebar__links
            }
          >
            {/* OVERVIEW */}

            <SectionHeader title="Overview" />

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

            {/* WALLET */}

            <SectionHeader title="Wallet" />

            <SidebarLink
              path="wallet"
              label="My Wallet"
              description="Check balance"
              icon={
                <IoWallet size="1.25rem" />
              }
              closeBar={closeBar}
              isActive={pathname.includes(
                "dashboard/wallet"
              )}
            />

            <SidebarLink
              path="deposits"
              label="Deposits"
              description="Add funds"
              icon={
                <BsCreditCardFill size="1.15rem" />
              }
              closeBar={closeBar}
              isActive={pathname.includes(
                "dashboard/deposits"
              )}
            />

            <SidebarLink
              path="withdrawals"
              label="Withdrawals"
              description="Withdraw money"
              icon={
                <FaPiggyBank size="1.15rem" />
              }
              closeBar={closeBar}
              isActive={pathname.includes(
                "dashboard/withdrawals"
              )}
            />

            <SidebarLink
              path="roi"
              label="ROI Earnings"
              description="Track profits"
              icon={
                <FaChartLine size="1.15rem" />
              }
              closeBar={closeBar}
              isActive={pathname.includes(
                "dashboard/roi"
              )}
            />

            {/* TRADING */}

            <SectionHeader title="Trading" />

            <SidebarLink
              path="plans"
              label="Trading Plans"
              description="Investment plans"
              icon={
                <BsFillBarChartFill size="1.15rem" />
              }
              closeBar={closeBar}
              isActive={pathname.includes(
                "dashboard/plans"
              )}
            />

            <SidebarLink
              path="portfolio"
              label="Portfolio"
              description="Track growth"
              icon={
                <GrGrow size="1.15rem" />
              }
              closeBar={closeBar}
              isActive={pathname.includes(
                "dashboard/portfolio"
              )}
            />

            <SidebarLink
              path="signal-plans"
              label="Trading Signals"
              description="Market insights"
              icon={
                <RiBubbleChartFill size="1.15rem" />
              }
              closeBar={closeBar}
              isActive={pathname.includes(
                "dashboard/signal-plans"
              )}
            />

            {/* LEARNING */}

            <SectionHeader title="Learning & Updates" />

            <SidebarLink
              path="blogs"
              label="Market News"
              description="Latest updates"
              icon={
                <IoBookSharp size="1.15rem" />
              }
              closeBar={closeBar}
              isActive={pathname.includes(
                "dashboard/blogs"
              )}
            />

            <SidebarLink
              path="events"
              label="Events"
              description="Upcoming events"
              icon={
                <MdOutlineEventNote size="1.25rem" />
              }
              closeBar={closeBar}
              isActive={pathname.includes(
                "dashboard/events"
              )}
            />

            {/* ACCOUNT */}

            <SectionHeader title="Account" />

            <SidebarLink
              path="notifications"
              label={`Notifications ${
                unreadCount > 0
                  ? `(${unreadCount})`
                  : ""
              }`}
              description="System alerts"
              icon={
                <MdNotifications size="1.25rem" />
              }
              closeBar={closeBar}
              isActive={pathname.includes(
                "dashboard/notifications"
              )}
            />

            <SidebarLink
              path="account"
              label="My Account"
              description="Profile & Security"
              icon={
                <MdManageAccounts size="1.25rem" />
              }
              closeBar={closeBar}
              isActive={pathname.includes(
                "dashboard/account"
              )}
            />

            {/* SUPPORT */}

            <SectionHeader title="Support" />

            <SidebarLink
              path="contact-us"
              label="Contact Support"
              description="Get assistance"
              icon={
                <MdContactMail size="1.25rem" />
              }
              closeBar={closeBar}
              isActive={pathname.includes(
                "dashboard/contact-us"
              )}
            />
          </div>
        </div>

        {/* FOOTER */}

        <div
          className={styles.logoutCard}
        >
          <div
            className={
              styles.logoutContent
            }
          >
            <span>
              Securely sign out from your
              account
            </span>

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

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

export default MobileSidebar