acmcc/src/components/SettingsSidebar.tsx

import { NavLink, useLocation } from "react-router-dom";
import {
  Settings, Users, Mail, ShieldCheck, Bell, UserCircle,
  Landmark, ScrollText, LayoutDashboard, Network, BookOpen, Paintbrush, CreditCard, BellRing, Building2, CalendarClock, Eye, PenLine, Wallet,
} from "lucide-react";
import { cn } from "@/lib/utils";

export const SETTINGS_PAGES = [
  {
    category: "My Account",
    items: [
      { path: "/dashboard/settings/profile", title: "My Profile", icon: UserCircle },
    ],
  },
  {
    category: "General Settings",
    items: [
      { path: "/dashboard/settings/general", title: "General Config", icon: Settings },
      { path: "/dashboard/settings/branding", title: "Branding & Logos", icon: Paintbrush },
      { path: "/dashboard/settings/role-permissions", title: "Role Permissions", icon: ShieldCheck },
      { path: "/dashboard/settings/portal-visibility", title: "Portal Visibility", icon: Eye },
    ],
  },
  {
    category: "User Management",
    items: [
      { path: "/dashboard/user-management", title: "User Management", icon: Users },
    ],
  },
  {
    category: "Accounting Setup",
    items: [
      { path: "/dashboard/chart-of-accounts", title: "Chart of Accounts", icon: Network },
      { path: "/dashboard/settings/recurring-rules", title: "Recurring Rules", icon: CalendarClock },
      { path: "/dashboard/company-bank-accounts", title: "Company Banking", icon: Landmark },
      { path: "/dashboard/company-bank-register", title: "Company Bank Register", icon: Wallet },
      { path: "/dashboard/company-checks", title: "Company Checks", icon: PenLine },
    ],
  },
  {
    category: "Email & Notifications",
    items: [
      { path: "/dashboard/email-senders", title: "Email Senders & SMTP", icon: Mail },
      { path: "/dashboard/email-templates", title: "Template Library", icon: ScrollText },
      { path: "/dashboard/notify-owners", title: "Blast Notifications", icon: BellRing },
    ],
  },
  {
    category: "Integrations",
    items: [
      { path: "/dashboard/settings/buildium", title: "Buildium", icon: Building2 },
      { path: "/dashboard/settings/stripe-accounts", title: "Payment Gateways", icon: CreditCard },
      { path: "/dashboard/hostinger-reach", title: "Hostinger Reach", icon: Mail },
    ],
  },
];

interface SettingsSidebarProps {
  onItemClick?: () => void;
}

export default function SettingsSidebar({ onItemClick }: SettingsSidebarProps) {
  const location = useLocation();

  return (
    <div className="w-full py-4 flex flex-col gap-6">
      <div className="px-6 mb-2">
        <h2 className="text-xl font-bold text-foreground tracking-tight flex items-center gap-2">
          <LayoutDashboard className="w-5 h-5 text-primary" />
          Settings
        </h2>
        <p className="text-sm text-muted-foreground font-medium mt-1">System Configuration</p>
      </div>

      <div className="space-y-6">
        {SETTINGS_PAGES.map((group, index) => (
          <div key={index} className="space-y-2">
            <h4 className="px-6 text-xs font-bold uppercase tracking-wider text-muted-foreground/60">
              {group.category}
            </h4>
            <div className="space-y-1 px-3">
              {group.items.map((item) => {
                const Icon = item.icon;
                const isActive = location.pathname.startsWith(item.path);

                return (
                  <NavLink
                    key={item.path}
                    to={item.path}
                    onClick={onItemClick}
                    className={cn(
                      "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 group relative",
                      isActive
                        ? "bg-primary/10 text-primary"
                        : "text-muted-foreground hover:bg-muted hover:text-foreground"
                    )}
                  >
                    {isActive && (
                      <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-6 bg-primary rounded-r-full" />
                    )}
                    <Icon
                      className={cn(
                        "w-4 h-4 transition-colors",
                        isActive ? "text-primary" : "text-muted-foreground/60 group-hover:text-muted-foreground"
                      )}
                    />
                    <span className="truncate">{item.title}</span>
                  </NavLink>
                );
              })}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}