"use client";

import { usePathname } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import { useSession, signOut } from "next-auth/react";
import {
  LayoutDashboard,
  FolderOpen,
  Upload,
  Users,
  LogOut,
  Layers,
  CheckSquare,
  MessageSquare,
  BarChart3,
  Brain,
  MessagesSquare,
  Zap,
  CreditCard,
  Settings,
  Building2,
  FileText,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";

const navigation = [
  {
    name: "Dashboard",
    href: "/dashboard",
    icon: LayoutDashboard,
    roles: ["ADMIN", "MANAGER", "AGENT"],
  },
  {
    name: "Collection Files",
    href: "/files",
    icon: FolderOpen,
    roles: ["ADMIN", "MANAGER", "AGENT"],
  },
  {
    name: "Batches",
    href: "/batches",
    icon: Layers,
    roles: ["ADMIN", "MANAGER", "AGENT"],
  },
  {
    name: "Tasks",
    href: "/tasks",
    icon: CheckSquare,
    roles: ["ADMIN", "MANAGER", "AGENT"],
  },
  {
    name: "SMS Center",
    href: "/sms",
    icon: MessageSquare,
    roles: ["ADMIN", "MANAGER", "AGENT"],
  },
  {
    name: "Communications",
    href: "/communications",
    icon: MessagesSquare,
    roles: ["ADMIN", "MANAGER", "AGENT"],
  },
  {
    name: "Workflows",
    href: "/workflows",
    icon: Zap,
    roles: ["ADMIN", "MANAGER"],
  },
  {
    name: "Payments",
    href: "/payments",
    icon: CreditCard,
    roles: ["ADMIN", "MANAGER", "AGENT"],
  },
  {
    name: "Clients",
    href: "/clients",
    icon: Building2,
    roles: ["ADMIN", "MANAGER"],
  },
  {
    name: "Reports",
    href: "/reports",
    icon: BarChart3,
    roles: ["ADMIN", "MANAGER"],
  },
  {
    name: "Monthly Reports",
    href: "/reports/monthly",
    icon: FileText,
    roles: ["ADMIN", "MANAGER"],
  },
  {
    name: "AI Analytics",
    href: "/ai-analytics",
    icon: Brain,
    roles: ["ADMIN", "MANAGER"],
  },
  {
    name: "Import Excel",
    href: "/import",
    icon: Upload,
    roles: ["ADMIN", "MANAGER"],
  },
  {
    name: "Users",
    href: "/users",
    icon: Users,
    roles: ["ADMIN"],
  },
  {
    name: "Settings",
    href: "/settings",
    icon: Settings,
    roles: ["ADMIN"],
  },
];

export function Sidebar() {
  const pathname = usePathname();
  const { data: session } = useSession() || {};

  const filteredNav = navigation.filter((item) =>
    item?.roles?.includes(session?.user?.role ?? "")
  );

  return (
    <div className="flex h-screen w-64 flex-col bg-gradient-to-b from-blue-900 to-blue-950 text-white">
      <div className="flex h-16 items-center justify-center border-b border-blue-800 px-4">
        <div className="flex items-center gap-2">
          <div className="relative w-10 h-10">
            <Image
              src="/logo.png"
              alt="Greco"
              fill
              className="object-contain"
            />
          </div>
          <span className="text-2xl font-bold tracking-wide text-white">GRECO</span>
        </div>
      </div>

      <nav className="flex-1 space-y-1 px-3 py-4">
        {filteredNav?.map?.((item) => {
          const isActive = pathname === item?.href;
          const Icon = item?.icon;
          return (
            <Link
              key={item?.href}
              href={item?.href ?? "#"}
              className={cn(
                "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
                isActive
                  ? "bg-blue-800 text-white shadow-lg"
                  : "text-blue-100 hover:bg-blue-800/50 hover:text-white"
              )}
            >
              {Icon && <Icon className="h-5 w-5" />}
              {item?.name}
            </Link>
          );
        })}
      </nav>

      <div className="border-t border-blue-800 p-4">
        <div className="mb-3 rounded-lg bg-blue-800/30 p-3">
          <p className="text-sm font-medium">{session?.user?.name}</p>
          <p className="text-xs text-white/80">{session?.user?.email}</p>
          <p className="mt-1 text-xs text-white/70">
            Role: {session?.user?.role}
          </p>
        </div>
        <Button
          onClick={() => signOut({ callbackUrl: "/login" })}
          variant="outline"
          className="w-full border-blue-700 bg-transparent text-white hover:bg-blue-800 hover:text-white"
        >
          <LogOut className="mr-2 h-4 w-4" />
          Sign Out
        </Button>
      </div>
    </div>
  );
}