import { UserButton } from "@clerk/nextjs";
import Image from "next/image";
import Link from "next/link";
import { Menu as MenuIcon } from "lucide-react";
import { setActiveSchool } from "@/lib/actions";

const Navbar = ({
  role,
  userMetadata,
  toggleSidebar,
  isCollapsed
}: {
  role: string;
  userMetadata: any;
  toggleSidebar: () => void;
  isCollapsed: boolean;
}) => {
  return (
    <div className="flex items-center justify-between p-4 bg-white shadow-sm z-10 sticky top-0">
      {/* LEFT AREA: Toggle and Animated Logo */}
      <div className="flex items-center gap-4">
        {/* Hamburger Toggle */}
        <button
          onClick={toggleSidebar}
          className="p-2 rounded-md hover:bg-gray-100 transition-colors text-gray-600 focus:outline-none focus:ring-2 focus:ring-lamaSky"
          aria-label="Toggle Sidebar"
        >
          <MenuIcon size={20} />
        </button>

        {/* Logo (Appears here when sidebar is collapsed) */}
        <div
          className={`flex items-center gap-2 overflow-hidden transition-all duration-300 ease-in-out origin-left
            ${isCollapsed ? "opacity-100 max-w-[200px]" : "opacity-0 max-w-0"}`}
        >
          <Link href="/" className="flex items-center gap-2">
            <Image src="/logo.png" alt="logo" width={24} height={24} />
            <span className="font-bold text-lg hidden sm:block">SchooLama</span>
          </Link>
        </div>
      </div>

      {/* RIGHT: ICONS AND USER */}
      <div className="flex items-center gap-6 justify-end">
        {/* Active school selector (for admins / teachers) */}
        {Array.isArray(userMetadata?.schools) &&
          userMetadata.schools.length > 0 && (
            <form action={setActiveSchool}>
              <select
                name="schoolId"
                defaultValue={userMetadata.activeSchoolId || ""}
                className="text-xs ring-[1.5px] ring-gray-300 rounded-md px-2 py-1 bg-white"
                onChange={(e) => {
                  // Auto-submit the form when the selection changes
                  e.currentTarget.form?.requestSubmit();
                }}
              >
                {!userMetadata.activeSchoolId && (
                  <option value="">Select school</option>
                )}
                {userMetadata.schools.map(
                  (s: { id: string; name: string }) => (
                    <option key={s.id} value={s.id}>
                      {s.name}
                    </option>
                  )
                )}
              </select>
            </form>
          )}

        {/* SEARCH BAR */}
        <div className="hidden md:flex items-center gap-2 text-xs rounded-full ring-[1.5px] ring-gray-300 px-2">
          <Image src="/search.png" alt="" width={14} height={14} />
          <input
            type="text"
            placeholder="Search..."
            className="w-[200px] p-2 bg-transparent outline-none"
          />
        </div>

        <div className="bg-lamaSkyLight rounded-full w-7 h-7 flex items-center justify-center cursor-pointer">
          <Image src="/message.png" alt="" width={20} height={20} />
        </div>
        <div className="bg-lamaSkyLight rounded-full w-7 h-7 flex items-center justify-center cursor-pointer relative">
          <Image src="/announcement.png" alt="" width={20} height={20} />
          <div className="absolute -top-3 -right-3 w-5 h-5 flex items-center justify-center bg-purple-500 text-white rounded-full text-xs">
            1
          </div>
        </div>
        <div className="flex flex-col">
          <span className="text-xs leading-3 font-medium">
            {userMetadata?.firstName} {userMetadata?.lastName}
          </span>
          <span className="text-[10px] text-gray-500 text-right">
            {role}
          </span>
        </div>
        <UserButton />
      </div>
    </div>
  );
};

export default Navbar;
