"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import {
  LayoutDashboard,
  Users,
  CalendarCheck,
  CreditCard,
  Settings,
  LogOut,
  Brain,
} from "lucide-react";
import { UserButton, useUser } from "@clerk/nextjs";

interface Recommendation {
  id: string;
  status: string;
}

export function Sidebar() {
  const pathname = usePathname();
  const { user } = useUser();
  const [pendingCount, setPendingCount] = useState(0);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    const fetchPending = async () => {
      try {
        const res = await fetch("/api/recommendations");
        if (res.ok) {
          const data = await res.json();
          const pending = (data.recommendations || []).filter(
            (r: Recommendation) => r.status === "pending",
          );
          setPendingCount(pending.length);
        }
      } catch (e) {
        console.error("Failed to fetch pending recommendations", e);
      }
    };
    fetchPending();
  }, []);

  const menuItems = [
    { icon: LayoutDashboard, label: "Dashboard", href: "/" },
    { icon: Users, label: "Users", href: "/users" },
    {
      icon: Brain,
      label: (
        <span className="flex items-center">
          AI Recommendations
          {pendingCount > 0 && (
            <span className="ml-2 inline-block bg-red-600 text-xs rounded-full px-2 py-0.5">
              {pendingCount}
            </span>
          )}
        </span>
      ),
      href: "/recommendations",
    },
    { icon: CalendarCheck, label: "Attendance", href: "/attendance" },
    { icon: CreditCard, label: "Payments", href: "/payments" },
    { icon: Settings, label: "Settings", href: "/settings" },
  ];

  return (
    <aside className="w-20 hover:w-64 bg-slate-900 text-white h-screen fixed left-0 top-0 flex flex-col border-r border-slate-800 transition-all duration-300 z-50 group overflow-hidden">
      <div className="p-6 border-b border-slate-800 flex items-center overflow-hidden whitespace-nowrap">
        <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          FitAI Admin
        </h1>
      </div>

      <nav className="flex-1 p-4 space-y-2">
        {menuItems.map((item) => {
          const Icon = item.icon;
          const isActive = pathname === item.href;
          const label =
            typeof item.label === "string" ? item.label : item.label;
          return (
            <Link
              key={item.href}
              href={item.href}
              className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 ${
                isActive
                  ? "bg-blue-600 text-white shadow-lg shadow-blue-900/20"
                  : "text-slate-400 hover:bg-slate-800 hover:text-white"
              }`}
            >
              <div className="min-w-[20px]">
                <Icon
                  size={20}
                  className={
                    isActive
                      ? "text-white"
                      : "text-slate-500 group-hover:text-white"
                  }
                />
              </div>
              <span className="font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap overflow-hidden">
                {label}
              </span>
            </Link>
          );
        })}
      </nav>

      <div className="p-4 border-t border-slate-800">
        <div className="flex items-center gap-3 px-2 py-3 rounded-lg bg-slate-800/50 overflow-hidden whitespace-nowrap">
          <div className="min-w-[32px]">
            {mounted && <UserButton afterSignOutUrl="/" />}
          </div>
          <div className="flex-1 min-w-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <p className="text-sm font-medium text-white truncate">
              {user?.fullName || "Admin User"}
            </p>
            <p className="text-xs text-slate-400 truncate">
              {user?.primaryEmailAddress?.emailAddress}
            </p>
          </div>
        </div>
      </div>
    </aside>
  );
}
