"use client";

import { Link, usePage } from "@inertiajs/react";
import { FiChevronRight, FiCalendar } from "react-icons/fi";
import { MdDashboard, MdStorefront } from "react-icons/md";
import { IoWallet, IoSettingsSharp } from "react-icons/io5";
import { FaHandsHelping, FaUserClock } from "react-icons/fa";
import { BiChurch } from "react-icons/bi";
import { GiHolyGrail } from "react-icons/gi"; // 🔥 NEW ICON
import styles from "./member-sidebar.module.scss";

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

/* ================= ACTIVE HELPER ================= */
const isActiveRoute = (url: string, fullPath: string) => {
  return url === fullPath || url.startsWith(`${fullPath}/`);
};

/* ================= LINK COMPONENT ================= */
const SidebarLink = ({
  path,
  label,
  description,
  icon,
}: SidebarLinkProps) => {
  const { url } = usePage();

  const basePath = "/member";
  const fullPath = `${basePath}/${path}`;

  const isActive = isActiveRoute(url, 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>
  );
};

/* ================= SIDEBAR ================= */
const MemberSidebar = () => {
  return (
    <aside className={styles.sidebar}>
      {/* ================= HEADER ================= */}
      <div className={styles.sidebarHeader}>
        <h3>Welcome 🙏</h3>
        <small>Your spiritual dashboard</small>
      </div>

      {/* ================= LINKS ================= */}
      <div className={styles.sidebarLinks}>
        {/* OVERVIEW */}
        <div className={styles.section}>
          <span className={styles.sectionTitle}>OVERVIEW</span>

          <SidebarLink
            path="home"
            label="Dashboard"
            description="Your activity & summary"
            icon={<MdDashboard size="1.1rem" />}
          />
        </div>

        {/* ENGAGEMENT */}
        <div className={styles.section}>
          <span className={styles.sectionTitle}>SERVICE & ENGAGEMENT</span>
           <SidebarLink
            path="encounters"
            label="Encounters"
            description="Hold on to God's promises"
            icon={<GiHolyGrail size="1.1rem" />}
          />

          <SidebarLink
            path="givings"
            label="Givings"
            description="Tithes, offerings & history"
            icon={<IoWallet size="1.1rem" />}
          />

          <SidebarLink
            path="programs"
            label="Events & Programs"
            description="Services & gatherings"
            icon={<FiCalendar size="1.1rem" />}
          />

          <SidebarLink
            path="projects"
            label="Projects & Needs"
            description="Support church projects"
            icon={<FaHandsHelping size="1.1rem" />}
          />

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

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

          <SidebarLink
            path="businesses"
            label="Businesses"
            description="Showcase your businesses"
            icon={<MdStorefront size="1.1rem" />}
          />
        </div>

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

          <SidebarLink
            path="home-cell"
            label="Home Cell"
            description="Your cell group"
            icon={<BiChurch size="1.1rem" />}
          />
        </div>

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

          <SidebarLink
            path="settings"
            label="Settings"
            description="Profile & preferences"
            icon={<IoSettingsSharp size="1.1rem" />}
          />
        </div>
      </div>

      {/* ================= FOOTER ================= */}
      <Link href="/member/settings" className={styles.sidebarFooter}>
        <div className={styles.avatar}>AU</div>

        <div className={styles.footerText}>
          <h4>Member</h4>
          <small>Growing in faith ✨</small>
        </div>
      </Link>
    </aside>
  );
};

export default MemberSidebar;