"use client"

import { Link, usePage } from "@inertiajs/react"
import { FiChevronRight, FiUserPlus } from "react-icons/fi"
import {
  MdOutlineDashboardCustomize,
  MdEventRepeat,
} from "react-icons/md"
import { BiSolidGroup, BiUser, BiShield, BiDonateHeart } from "react-icons/bi"
import { BsCalendar2EventFill } from "react-icons/bs"
import { IoWallet, IoBagCheck } from "react-icons/io5"
import { RiBubbleChartFill } from "react-icons/ri"
import { FaLayerGroup } from "react-icons/fa"
import { LuCalendarCheck } from "react-icons/lu"
import styles from "./sidebar.module.scss"

interface SidebarLinkProps {
  path: string
  label: string
  description: string
  icon: React.ReactNode
}

const SidebarLink = ({ path, label, description, icon }: SidebarLinkProps) => {
  const { url } = usePage()

  const basePath = "/dashboard"
  const fullPath = `${basePath}/${path}`

  /**
   * 🔥 FIXED ACTIVE LOGIC
   */
  let isActive = false

  if (path === "home") {
    isActive =
      url === "/dashboard/home" ||
      url === "/dashboard/home/"
  } else {
    isActive = url.startsWith(fullPath)
  }

  return (
    <Link
      href={fullPath}
      className={isActive ? styles.active : styles.link}
    >
      <div className={isActive ? styles.iconActive : styles.icon}>
        {icon}
      </div>

      <div className={styles.linkText}>
        <span className={styles.linkLabel}>{label}</span>
        <small className={styles.linkDesc}>{description}</small>
      </div>

      {isActive && (
        <FiChevronRight className={styles.activeArrow} />
      )}
    </Link>
  )
}

const Sidebar = () => {
  return (
    <aside className={styles.sidebar}>
      <div className={styles.sidebarAdmin}>
        <h3>Worker's Panel</h3>
        <small>CENSERS CHURCH INC.</small>
      </div>

      <div className={styles.sidebarLinks}>
        {/* OVERVIEW */}
        <div className={styles.section}>
          <span className={styles.sectionTitle}>OVERVIEW</span>
          <SidebarLink
            path="home"
            label="Dashboard"
            description="Church overview"
            icon={<MdOutlineDashboardCustomize size="1.1rem" />}
          />
        </div>

        {/* PEOPLE */}
        <div className={styles.section}>
          <span className={styles.sectionTitle}>PEOPLE</span>
          <SidebarLink
            path="members"
            label="Members"
            description="Church members"
            icon={<BiSolidGroup size="1.1rem" />}
          />
          <SidebarLink
            path="first-timers"
            label="First Timers"
            description="New visitors"
            icon={<FiUserPlus size="1.1rem" />}
          />
          <SidebarLink
            path="home-cell"
            label="Home Cells"
            description="Service units"
            icon={<FaLayerGroup size="1.1rem" />}
          />
        </div>

        {/* OPERATIONS */}
        <div className={styles.section}>
          <span className={styles.sectionTitle}>OPERATIONS</span>
          <SidebarLink
            path="attendance"
            label="Attendance"
            description="Track attendance"
            icon={<BsCalendar2EventFill size="1.1rem" />}
          />

          <SidebarLink
            path="businesses"
            label="Businesses"
            description="Business profiles"
            icon={<RiBubbleChartFill size="1.1rem" />}
          /> 

          <SidebarLink
            path="programs"
            label="Programs"
            description="Special programs"
            icon={<MdEventRepeat size="1.1rem" />}
          />

          <SidebarLink
            path="appointments"
            label="Appointments"
            description="Counseling & meetings"
            icon={<LuCalendarCheck size="1.1rem" />}
          />
        </div>

        {/* ADMIN */}
        <div className={styles.section}>
          <span className={styles.sectionTitle}>ADMIN</span>

          <SidebarLink
            path="donation-funds"
            label="Pledges"
            description="Pledges and donations"
            icon={<BiDonateHeart size="1.1rem" />}
          />
    
          <SidebarLink
            path="branch-remittances"
            label="Remittances"
            description="Branch Remittances"
            icon={<RiBubbleChartFill size="1.1rem" />}
          />
          
          <SidebarLink
            path="finance"
            label="Finance"
            description="Church accounting"
            icon={<IoWallet size="1.1rem" />}
          />

          <SidebarLink
            path="permissions"
            label="Roles & Permissions"
            description="Access control"
            icon={<IoBagCheck size="1.1rem" />}
          />
        </div>

        {/* SYSTEM */}
        <div className={styles.section}>
          <span className={styles.sectionTitle}>ACCOUNT</span>
          <SidebarLink
            path="my-profile"
            label="Profile"
            description="Account profile"
            icon={<BiUser size="1.1rem" />}
          />

          <SidebarLink
            path="security"
            label="Security"
            description="Account security"
            icon={<BiShield size="1.1rem" />}
          />
        </div>
      </div>

      <div className={styles.sidebarFooter}>
        <div className={styles.avatar}>AU</div>
        <div className={styles.footerText}>
          <h4>Achilles Usuoyibo</h4>
          <small>Admin • Censers Church</small>
        </div>
      </div>
    </aside>
  )
}

export default Sidebar