import { useState } from "react";
import { NavLink } from "react-router-dom";
import {
  LayoutDashboard,
  Plug,
  Bot,
  ChevronLeft,
  Menu,
  X,
  DollarSign,
  UserCircle,
} from "lucide-react";
import { ThemeToggle } from "@/components/ThemeToggle";
import { cn } from "@/lib/utils";

const navItems = [
  { title: "Home", path: "", icon: LayoutDashboard },
  { title: "Finanças", path: "financas", icon: DollarSign },
  { title: "Integrações", path: "integracoes", icon: Plug },
  { title: "Meu Perfil", path: "meu-perfil", icon: UserCircle },
];

export function AppSidebar() {
  const [collapsed, setCollapsed] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  const SidebarContent = () => (
    <>
      {/* Logo */}
      <div className="flex items-center gap-3 px-4 py-6 border-b border-sidebar-border">
        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10">
          <Bot className="w-5 h-5 text-primary" />
        </div>
        {!collapsed && (
          <div className="animate-fade-in">
            <h1 className="text-sidebar-foreground font-bold text-h2">AI Agent</h1>
            <p className="text-muted-foreground text-xs">Painel Admin</p>
          </div>
        )}
      </div>

      {/* Navigation */}
      <nav className="flex-1 px-3 py-4 space-y-1">
        {navItems.map((item) => (
          <NavLink
            key={item.path}
            to={item.path}
            end={item.path === ""} // Apenas a Home precisa de match exato
            onClick={() => setMobileOpen(false)}
            className={({ isActive }) =>
              cn(
                "nav-item flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 w-full",
                isActive 
                  ? "text-primary bg-sidebar-accent font-medium" 
                  : "text-muted-foreground hover:text-foreground hover:bg-sidebar-accent"
              )
            }
          >
            <item.icon className="w-5 h-5 flex-shrink-0" />
            {!collapsed && <span className="animate-fade-in">{item.title}</span>}
          </NavLink>
        ))}
      </nav>

      <div
        className={cn(
          "mt-auto space-y-2 border-t border-sidebar-border",
          collapsed ? "p-3" : "p-4",
        )}
      >
        <div
          className={cn(
            "flex items-center justify-between px-3",
            collapsed && "lg:hidden",
          )}
        >
          <span className="text-sm font-medium text-sidebar-foreground">Tema</span>
          <ThemeToggle />
        </div>
        {collapsed && (
          <div className="hidden justify-center lg:flex">
            <ThemeToggle />
          </div>
        )}

        <button
          type="button"
          onClick={() => setCollapsed(!collapsed)}
          className="nav-item hidden w-full items-center justify-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-muted-foreground transition-all duration-200 hover:bg-sidebar-accent/60 hover:text-foreground lg:flex lg:justify-start"
        >
          <ChevronLeft
            className={cn(
              "h-5 w-5 flex-shrink-0 transition-transform duration-300",
              collapsed && "rotate-180",
            )}
          />
          {!collapsed && <span>Recolher</span>}
        </button>
      </div>
    </>
  );

  return (
    <>
      {/* Mobile menu button */}
      <button
        onClick={() => setMobileOpen(true)}
        className="lg:hidden fixed top-4 left-4 z-50 p-2 rounded-lg bg-card border border-border shadow-sm"
      >
        <Menu className="w-5 h-5" />
      </button>

      {/* Mobile overlay */}
      {mobileOpen && (
        <div
          className="lg:hidden fixed inset-0 bg-background/80 backdrop-blur-sm z-40"
          onClick={() => setMobileOpen(false)}
        />
      )}

      {/* Mobile sidebar */}
      <aside
        className={cn(
          "lg:hidden fixed left-0 top-0 h-full w-64 bg-sidebar z-50 flex flex-col border-r border-sidebar-border transition-transform duration-300",
          mobileOpen ? "translate-x-0" : "-translate-x-full"
        )}
      >
        <button
          onClick={() => setMobileOpen(false)}
          className="absolute top-4 right-4 p-2 rounded-lg hover:bg-sidebar-accent"
        >
          <X className="w-5 h-5" />
        </button>
        <SidebarContent />
      </aside>

      {/* Desktop sidebar */}
      <aside
        className={cn(
          "hidden lg:flex flex-col h-screen bg-sidebar border-r border-sidebar-border transition-all duration-300 sticky top-0",
          collapsed ? "w-[72px]" : "w-64"
        )}
      >
        <SidebarContent />
      </aside>
    </>
  );
}