import { Link, useLocation } from "wouter";
import { useAuth } from "@/contexts/AuthContext";
import { cn } from "@/lib/utils";
import { 
  LayoutDashboard, 
  CheckSquare, 
  Users, 
  Shield, 
  FileText, 
  CreditCard, 
  Building2, 
  Settings, 
  LogOut,
  Gem
} from "lucide-react";
import { motion } from "framer-motion";

export function Sidebar() {
  const [location] = useLocation();
  const { user, logout } = useAuth();

  const navItems = [
    { href: "/", label: "Dashboard", icon: LayoutDashboard },
    { href: "/tasks", label: "Tasks", icon: CheckSquare },
    { href: "/users", label: "Users", icon: Users },
    { href: "/roles", label: "Roles", icon: Shield },
    { href: "/documents", label: "Documents", icon: FileText },
    { href: "/billing", label: "Billing", icon: CreditCard },
    { href: "/tenants", label: "Tenants", icon: Building2 },
    { href: "/settings", label: "Settings", icon: Settings },
  ];

  return (
    <aside className="w-64 bg-sidebar text-sidebar-foreground border-r border-sidebar-border flex flex-col min-h-[100dvh] flex-shrink-0 relative overflow-hidden hidden md:flex">
      <div className="p-6 flex items-center gap-3 border-b border-sidebar-border/30">
        <div className="bg-primary/20 p-2 rounded-lg text-primary-foreground">
          <Gem className="w-6 h-6" />
        </div>
        <span className="font-bold text-xl tracking-tight">GemTrack</span>
      </div>

      <div className="flex-1 py-6 px-4 space-y-1 overflow-y-auto">
        {navItems.map((item) => {
          const isActive = location === item.href || (item.href !== "/" && location.startsWith(item.href));
          return (
            <Link key={item.href} href={item.href} className="block relative">
              {isActive && (
                <motion.div
                  layoutId="sidebar-active"
                  className="absolute inset-0 bg-sidebar-accent rounded-md z-0"
                  transition={{ type: "spring", stiffness: 300, damping: 30 }}
                />
              )}
              <div
                className={cn(
                  "relative z-10 flex items-center gap-3 px-3 py-2.5 rounded-md text-sm font-medium transition-colors",
                  isActive 
                    ? "text-sidebar-accent-foreground" 
                    : "text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent/50"
                )}
              >
                <item.icon className="w-5 h-5" />
                {item.label}
              </div>
            </Link>
          );
        })}
      </div>

      <div className="p-4 border-t border-sidebar-border/30 bg-sidebar/50">
        <div className="flex items-center justify-between px-2 pb-4">
          <div className="flex flex-col truncate">
            <span className="text-sm font-semibold truncate">{user?.name}</span>
            <span className="text-xs text-sidebar-foreground/60 truncate capitalize">{user?.role?.replace('_', ' ')}</span>
          </div>
        </div>
        <button
          onClick={logout}
          className="w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-sm font-medium text-sidebar-foreground/70 hover:text-rose-400 hover:bg-rose-500/10 transition-colors"
        >
          <LogOut className="w-5 h-5" />
          Logout
        </button>
      </div>
    </aside>
  );
}
