import {
  LayoutDashboard, FileText, Receipt, DollarSign, CreditCard, UserCircle, LogOut, ShieldAlert
} from "lucide-react";
import { NavLink } from "@/components/NavLink";
import { useNavigate } from "react-router-dom";
import { supabase } from "@/integrations/supabase/client";
import {
  Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent,
  SidebarMenu, SidebarMenuButton, SidebarMenuItem,
  SidebarFooter, useSidebar,
} from "@/components/ui/sidebar";
import { Button } from "@/components/ui/button";

const homeownerItems = [
  { title: "Home", url: "/homeowner", icon: LayoutDashboard },
  { title: "My Profile", url: "/homeowner/profile", icon: UserCircle },
  { title: "Ledger", url: "/homeowner/ledger", icon: Receipt },
  { title: "Documents", url: "/homeowner/documents", icon: FileText },
  { title: "Statements", url: "/homeowner/statements", icon: FileText },
  { title: "Payments", url: "/homeowner/payments", icon: CreditCard },
  { title: "Violations", url: "/homeowner/violations", icon: ShieldAlert },
];

export function HomeownerSidebar() {
  const { state } = useSidebar();
  const collapsed = state === "collapsed";
  const navigate = useNavigate();

  const handleSignOut = async () => {
    await supabase.auth.signOut();
    navigate("/");
  };

  return (
    <Sidebar collapsible="icon">
      <SidebarContent className="pt-4">
        <div className="flex items-center gap-2 px-4 pb-4">
          <div className="flex h-10 w-10 items-center justify-center rounded-sm bg-primary">
            <span className="text-lg font-black text-primary-foreground">A</span>
          </div>
          {!collapsed && (
            <div className="flex flex-col leading-none">
              <span className="text-lg font-extrabold tracking-tight">ACM</span>
              <span className="text-xs text-muted-foreground">Homeowner Portal</span>
            </div>
          )}
        </div>

        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              {homeownerItems.map((item) => (
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton asChild>
                    <NavLink
                      to={item.url}
                      end={item.url === "/homeowner"}
                      className="hover:bg-accent"
                      activeClassName="bg-accent text-primary font-medium"
                    >
                      <item.icon className="mr-2 h-4 w-4" />
                      {!collapsed && <span className="flex-1 truncate">{item.title}</span>}
                    </NavLink>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter className="p-4">
        <Button variant="ghost" className="w-full justify-start gap-2 text-destructive" onClick={handleSignOut}>
          <LogOut className="h-4 w-4" />
          {!collapsed && <span>Sign Out</span>}
        </Button>
      </SidebarFooter>
    </Sidebar>
  );
}
