import { NavLink, useLocation } from "react-router-dom";
import {
  FolderKanban, Calendar, FileText, BarChart3, CheckSquare,
  Gavel, Scale, UserCheck, Users, Home, Car, Megaphone, FileSearch,
  LayoutDashboard, MessageCircle, AlertTriangle, FileEdit, BookOpen, Wallet, Sparkles,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useBoardAssociations } from "@/contexts/BoardAssociationContext";

const boardNavItems = [
  { title: "Dashboard", href: "/homeowner", icon: LayoutDashboard, end: true },
  { title: "Messages", href: "/homeowner/board/messages", icon: MessageCircle },
  { title: "Projects", href: "/homeowner/board/projects", icon: FolderKanban },
  { title: "Calendar", href: "/homeowner/board/calendar", icon: Calendar },
  { title: "Documents", href: "/homeowner/board/documents", icon: FileText },
  { title: "Collab Docs", href: "/homeowner/board/collaborative-docs", icon: FileEdit },
  { title: "Status Updates", href: "/homeowner/board/status-updates", icon: BarChart3 },
  { title: "Tasks", href: "/homeowner/board/tasks", icon: CheckSquare },
  { title: "ARC Applications", href: "/homeowner/board/arc-applications", icon: Gavel },
  { title: "Violations", href: "/homeowner/board/violations", icon: AlertTriangle },
  { title: "Bids & Quotes", href: "/homeowner/board/bids-quotes", icon: Scale },
  { title: "Bill Approvals", href: "/homeowner/board/bill-approvals", icon: UserCheck },
  { title: "Submit Invoice", href: "/homeowner/board/submit-invoice", icon: Sparkles },
  { title: "Board Votes", href: "/homeowner/board/board-votes", icon: Users },
  { title: "Elections", href: "/homeowner/board/elections", icon: Users },
  { title: "Client Requests", href: "/homeowner/board/client-requests", icon: FileSearch },
  { title: "Homeowner Requests", href: "/homeowner/board/homeowner-requests", icon: Home },
  { title: "Parking", href: "/homeowner/board/parking", icon: Car },
  { title: "Announcements", href: "/homeowner/board/announcements", icon: Megaphone },
  { title: "Financial Overview", href: "/homeowner/board/financial-overview", icon: Wallet },
  { title: "Financial Reports", href: "/homeowner/board/financial-reports", icon: BarChart3 },
  { title: "Board Resources", href: "/homeowner/board/resources", icon: BookOpen },
];

function AssociationSelector() {
  const { associations, selectedAssociationId, setSelectedAssociationId } = useBoardAssociations();

  if (associations.length <= 1) return null;

  return (
    <div className="px-3 py-3 border-b border-border">
      <label className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70 mb-1.5 block">
        Association
      </label>
      <Select value={selectedAssociationId ?? undefined} onValueChange={setSelectedAssociationId}>
        <SelectTrigger className="w-full h-8 text-sm">
          <SelectValue placeholder="Select association" />
        </SelectTrigger>
        <SelectContent>
          {associations.map((a) => (
            <SelectItem key={a.id} value={a.id}>
              {a.name}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );
}

interface BoardSidebarProps {
  mobile?: boolean;
}

export default function BoardSidebar({ mobile }: BoardSidebarProps) {
  const location = useLocation();

  const navContent = (
    <>
      <AssociationSelector />
      <div className="px-4 py-4 border-b border-border">
        <h3 className="text-sm font-bold uppercase tracking-wider text-muted-foreground/70">Board Menu</h3>
      </div>
      <ScrollArea className="flex-1">
        <nav className="flex flex-col gap-0.5 p-2">
          {boardNavItems.map((item) => {
            const Icon = item.icon;
            const isActive = item.end ? location.pathname === item.href : location.pathname.startsWith(item.href);
            return (
              <NavLink key={item.href} to={item.href} end={item.end}
                className={cn("relative flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium transition-colors", isActive ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-accent hover:text-foreground")}>
                {isActive && <span className="absolute left-0 top-1/2 -translate-y-1/2 h-5 w-[3px] rounded-r-full bg-primary" />}
                <Icon className={cn("h-4 w-4 shrink-0", isActive ? "text-primary" : "text-muted-foreground/60")} />
                <span className="truncate">{item.title}</span>
              </NavLink>
            );
          })}
        </nav>
      </ScrollArea>
    </>
  );

  if (mobile) {
    return <div className="w-full flex flex-col h-full">{navContent}</div>;
  }

  return (
    <aside className="hidden lg:flex w-60 shrink-0 border-r border-border bg-background flex-col">
      {navContent}
    </aside>
  );
}
