import { useState } from "react";
import { Link, useRouterState } from "@tanstack/react-router";
import {
  Home,
  Building2,
  DoorOpen,
  Users,
  FileText,
  Banknote,
  Receipt,
  Tags,
  Wallet,
  Wrench,
  BarChart3,
  Hammer,
  Truck,
  Plug,
  Landmark,
  PiggyBank,
  IdCard,
  Network,
  CalendarDays,
  BadgeDollarSign,
  Layers,
  UserSquare2,
  ClipboardList,
  Boxes,
  Gauge,
  Car,
  CarFront,
  UserCheck,
  Files,
  Megaphone,
  BookOpen,
  BookText,
  Bell,
  Settings,
  Wallet2,
  ChevronRight,
  ShieldCheck,
  UsersRound,
  KeyRound,
  ScrollText,
  Coins,
  DatabaseBackup,
  RefreshCw,
  FileCheck2,
  ScrollText as StatementIcon,
} from "lucide-react";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
} from "@/components/ui/sidebar";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

const groups = [
  {
    label: "Property",
    icon: Building2,
    iconColor: "text-icon-property",
    items: [
      { title: "Properties", url: "/properties", icon: Building2, iconColor: "text-icon-property" },
      { title: "Owners", url: "/owners", icon: UserSquare2, iconColor: "text-icon-owners" },
      { title: "Buildings", url: "/buildings", icon: Building2, iconColor: "text-icon-buildings" },
      { title: "Floors", url: "/floors", icon: Layers, iconColor: "text-icon-floors" },
      { title: "Units", url: "/apartments", icon: DoorOpen, iconColor: "text-icon-units" },
      { title: "Owner Statements", url: "/owner-statements", icon: StatementIcon, iconColor: "text-icon-owners" },
      { title: "Building Statements", url: "/property-statements", icon: StatementIcon, iconColor: "text-icon-buildings" },
    ],
  },
  {
    label: "Tenant",
    icon: Users,
    iconColor: "text-icon-tenant",
    items: [
      { title: "Tenants", url: "/tenants", icon: Users, iconColor: "text-icon-tenants" },
      { title: "Leases", url: "/leases", icon: FileText, iconColor: "text-icon-leases" },
      { title: "Archived Leases", url: "/archived-leases", icon: FileText, iconColor: "text-icon-archived" },
      { title: "Bookings", url: "/bookings", icon: CalendarDays, iconColor: "text-icon-bookings" },
      { title: "Booking Reasons", url: "/booking-reasons", icon: ClipboardList, iconColor: "text-icon-booking-reasons" },
      { title: "Announcements", url: "/announcements", icon: Megaphone, iconColor: "text-icon-announcements" },
    ],
  },
  {
    label: "Sales & Development",
    icon: Landmark,
    iconColor: "text-icon-property",
    items: [
      { title: "Land Deals", url: "/land-deals", icon: Landmark, iconColor: "text-icon-property" },
      { title: "Land Deal Costs", url: "/land-deal-costs", icon: Wallet, iconColor: "text-icon-expenses" },
      { title: "Development Projects", url: "/dev-projects", icon: Building2, iconColor: "text-icon-buildings" },
      { title: "Project Costs", url: "/project-costs", icon: Hammer, iconColor: "text-icon-work-orders" },
      { title: "Units for Sale", url: "/sale-units", icon: DoorOpen, iconColor: "text-icon-units" },
      { title: "Buyers & Investors", url: "/buyers", icon: UserSquare2, iconColor: "text-icon-owners" },
      { title: "Deposits & Installments", url: "/sale-payments", icon: Banknote, iconColor: "text-icon-payments" },
      { title: "Buyer Statements", url: "/buyer-statements", icon: StatementIcon, iconColor: "text-icon-bank-accounts" },
      { title: "Project Profit", url: "/reports/projects", icon: BarChart3, iconColor: "text-icon-profit-loss" },
    ],
  },
  {
    label: "Finance",
    icon: Wallet2,
    iconColor: "text-icon-finance",
    items: [
      { title: "Rent Collection", url: "/rent-collection", icon: Wallet2, iconColor: "text-icon-rent-collection" },
      { title: "Invoices", url: "/invoices", icon: Receipt, iconColor: "text-icon-invoices" },
      { title: "Quotations", url: "/quotations", icon: FileCheck2, iconColor: "text-icon-rent-collection" },
      { title: "Payments", url: "/payments", icon: Banknote, iconColor: "text-icon-payments" },
      { title: "Receipts", url: "/receipts", icon: Receipt, iconColor: "text-icon-receipts" },
      { title: "Tenant Statements", url: "/statements", icon: StatementIcon, iconColor: "text-icon-bank-accounts" },
      { title: "Bank Statements", url: "/bank-statements", icon: StatementIcon, iconColor: "text-icon-bank-deposits" },
      { title: "Expenses", url: "/expenses", icon: Wallet, iconColor: "text-icon-expenses" },
      { title: "Expense Categories", url: "/expense-categories", icon: Tags, iconColor: "text-icon-expense-categories" },
      { title: "Bank Accounts", url: "/bank-accounts", icon: Landmark, iconColor: "text-icon-bank-accounts" },
      { title: "Bank Deposits", url: "/bank-deposits", icon: PiggyBank, iconColor: "text-icon-bank-deposits" },
    ],
  },
  {
    label: "Accounting",
    icon: BookOpen,
    iconColor: "text-icon-accounting",
    items: [
      { title: "Chart of Accounts", url: "/accounts", icon: BookOpen, iconColor: "text-icon-accounts" },
      { title: "Journal Entries", url: "/journal", icon: BookText, iconColor: "text-icon-journal" },
    ],
  },
  {
    label: "Operations",
    icon: Wrench,
    iconColor: "text-icon-operations",
    items: [
      { title: "Maintenance", url: "/maintenance", icon: Wrench, iconColor: "text-icon-maintenance" },
      { title: "Work Orders", url: "/work-orders", icon: Hammer, iconColor: "text-icon-work-orders" },
      { title: "Suppliers", url: "/suppliers", icon: Truck, iconColor: "text-icon-suppliers" },
      { title: "Supplier Statements", url: "/supplier-statements", icon: StatementIcon, iconColor: "text-icon-suppliers" },
      { title: "Assets", url: "/assets", icon: Boxes, iconColor: "text-icon-assets" },
      { title: "Meters", url: "/meters", icon: Gauge, iconColor: "text-icon-meters" },
      { title: "Meter Readings", url: "/meter-readings", icon: Gauge, iconColor: "text-icon-meter-readings" },
      { title: "Utility Bills", url: "/utility-bills", icon: Plug, iconColor: "text-icon-utility-bills" },
      { title: "Parking", url: "/parking", icon: Car, iconColor: "text-icon-parking" },
      { title: "Vehicles", url: "/vehicles", icon: CarFront, iconColor: "text-icon-vehicles" },
      { title: "Visitors", url: "/visitors", icon: UserCheck, iconColor: "text-icon-visitors" },
    ],
  },
  {
    label: "Human Resources",
    icon: IdCard,
    iconColor: "text-icon-hr",
    items: [
      { title: "Employees", url: "/employees", icon: IdCard, iconColor: "text-icon-employees" },
      { title: "Departments", url: "/departments", icon: Network, iconColor: "text-icon-departments" },
      { title: "Payroll", url: "/payroll", icon: BadgeDollarSign, iconColor: "text-icon-payroll" },
      { title: "Leave Requests", url: "/leave", icon: CalendarDays, iconColor: "text-icon-leave" },
      { title: "Tasks", url: "/tasks", icon: ClipboardList, iconColor: "text-icon-tasks" },
      { title: "Employee Statements", url: "/employee-statements", icon: StatementIcon, iconColor: "text-icon-employees" },
    ],
  },
  {
    label: "Reports",
    icon: BarChart3,
    iconColor: "text-icon-reports",
    items: [
      { title: "Overview", url: "/reports", icon: BarChart3, iconColor: "text-icon-reports-overview" },
      { title: "Rent Roll", url: "/reports/rent-roll", icon: DoorOpen, iconColor: "text-icon-rent-roll" },
      { title: "Outstanding Balances", url: "/reports/arrears", icon: Wallet2, iconColor: "text-icon-arrears" },
      { title: "Payments Report", url: "/reports/payments", icon: Banknote, iconColor: "text-icon-reports-payments" },
      { title: "Invoice Report", url: "/reports/invoices", icon: Receipt, iconColor: "text-icon-reports-invoices" },
      { title: "Expense Report", url: "/reports/expenses", icon: Wallet, iconColor: "text-icon-reports-expenses" },
      { title: "Occupancy Report", url: "/reports/occupancy", icon: Building2, iconColor: "text-icon-occupancy" },
      { title: "Maintenance Report", url: "/reports/maintenance", icon: Wrench, iconColor: "text-icon-reports-maintenance" },
      { title: "Payroll Report", url: "/reports/payroll", icon: BadgeDollarSign, iconColor: "text-icon-reports-payroll" },
      { title: "Trial Balance", url: "/reports/trial-balance", icon: BookText, iconColor: "text-icon-trial-balance" },
      { title: "Profit & Loss", url: "/reports/profit-loss", icon: BarChart3, iconColor: "text-icon-profit-loss" },
    ],
  },
  {
    label: "System",
    icon: Settings,
    iconColor: "text-icon-system",
    items: [
      { title: "Documents", url: "/documents", icon: Files, iconColor: "text-icon-documents" },
      { title: "Notifications", url: "/notifications", icon: Bell, iconColor: "text-icon-notifications" },
      { title: "Settings", url: "/settings", icon: Settings, iconColor: "text-icon-settings" },
    ],
  },

  {
    label: "Admin",
    icon: ShieldCheck,
    iconColor: "text-icon-admin",
    items: [
      { title: "Staff Management", url: "/admin/staff", icon: UsersRound, iconColor: "text-icon-staff" },
      { title: "Roles & Permissions", url: "/admin/roles", icon: KeyRound, iconColor: "text-icon-roles" },
      { title: "Audit Log", url: "/admin/audit", icon: ScrollText, iconColor: "text-icon-audit" },
      { title: "Currencies", url: "/admin/currencies", icon: Coins, iconColor: "text-icon-currencies" },
      { title: "Backup Management", url: "/admin/backup", icon: DatabaseBackup, iconColor: "text-icon-backup" },
      { title: "System Update", url: "/admin/system-update", icon: RefreshCw, iconColor: "text-icon-system-update" },
    ],
  },
] as const;

export function AppSidebar() {
  const pathname = useRouterState({ select: (s) => s.location.pathname });
  const [openGroup, setOpenGroup] = useState<string | null>(
    () => groups.find((g) => g.items.some((i) => i.url === pathname))?.label ?? null,
  );

  return (
    <Sidebar collapsible="icon">
      <SidebarHeader className="px-4 py-6">
        <Link to="/dashboard" className="flex items-center gap-3">
          <span className="flex size-10 items-center justify-center rounded-xl bg-sidebar-primary text-sidebar-primary-foreground shadow-lg shadow-sidebar-primary/30">
            <Building2 className="size-5.5" />
          </span>
          <span className="font-display text-xl font-bold tracking-tight text-sidebar-foreground group-data-[collapsible=icon]:hidden">
            Howlwaadag Property
          </span>
        </Link>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton asChild isActive={pathname === "/dashboard"}>
                  <Link to="/dashboard">
                    <Home className="text-icon-dashboard" />
                    <span>Dashboard</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>

              {groups.map((group) => {
                const hasActive = group.items.some((i) => i.url === pathname);
                return (
                  <Collapsible
                    key={group.label}
                    asChild
                    open={openGroup === group.label}
                    onOpenChange={(o) => setOpenGroup(o ? group.label : null)}
                    className="group/collapsible"
                  >
                    <SidebarMenuItem>
                      <CollapsibleTrigger asChild>
                        <SidebarMenuButton tooltip={group.label} isActive={hasActive}>
                          <group.icon className={group.iconColor} />
                          <span>{group.label}</span>
                          <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                        </SidebarMenuButton>
                      </CollapsibleTrigger>
                      <CollapsibleContent>
                        <SidebarMenuSub>
                          {group.items.map((item) => (
                            <SidebarMenuSubItem key={item.url}>
                              <SidebarMenuSubButton asChild isActive={pathname === item.url}>
                                <Link to={item.url}>
                                  <item.icon className={item.iconColor} />
                                  <span>{item.title}</span>
                                </Link>
                              </SidebarMenuSubButton>
                            </SidebarMenuSubItem>
                          ))}
                        </SidebarMenuSub>
                      </CollapsibleContent>
                    </SidebarMenuItem>
                  </Collapsible>
                );
              })}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  );
}