"use client";

import { useEffect, useState, useRef } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { LayoutDashboard, Users, Video, Shield, LogOut, User } from "lucide-react";
import { SimpleTooltip } from "@/components/ui/tooltip";
import { cn, getInitials, getAuthToken } from "@/lib/utils";
import { useUserStore } from "@/store";
import { getMe } from "@/lib/api";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { ThemeToggle } from "@/components/ui/theme-toggle";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

const adminNavItems = [
  { href: "/admin",          label: "Overview", icon: LayoutDashboard },
  { href: "/admin/users",    label: "Users",    icon: Users },
  { href: "/admin/meetings", label: "Meetings", icon: Video },
];

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const router   = useRouter();
  const { email, displayName, role, clearUser, setMe } = useUserStore();
  const [authorized, setAuthorized] = useState(false);
  const [isHydrated, setIsHydrated] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const isFetchingRef = useRef(false);

  // Monitor Zustand store hydration
  useEffect(() => {
    const unsub = useUserStore.persist.onFinishHydration(() => {
      setIsHydrated(true);
    });
    if (useUserStore.persist.hasHydrated()) {
      setIsHydrated(true);
    }
    return () => unsub();
  }, []);

  useEffect(() => {
    if (!isHydrated) return;

    if (role === "admin") {
      setAuthorized(true);
      return;
    }
    if (role === "user") {
      router.replace("/dashboard");
      return;
    }

    // If role is empty, check token first
    const token = getAuthToken();
    if (!token) {
      router.replace("/login");
      return;
    }

    // Token exists but role is empty (e.g. not in localStorage) -> fetch it
    if (!isFetchingRef.current) {
      isFetchingRef.current = true;
      setIsLoading(true);
      getMe()
        .then((res) => {
          setIsLoading(false);
          if (res?.success && res?.data) {
            const { email: userEmail, name, role: userRole, approval_status, id } = res.data;
            setMe({
              email: userEmail || email,
              name,
              role: userRole,
              approval_status,
              userId: id,
            });
          } else {
            router.replace("/login");
          }
        })
        .catch(() => {
          setIsLoading(false);
          router.replace("/login");
        });
    }
  }, [isHydrated, role, router, email, setMe]);

  if (!isHydrated || !authorized) {
    return (
      <div className="flex h-screen items-center justify-center bg-gray-50 dark:bg-gray-950">
        <div className="flex items-center gap-3">
          <div className="h-5 w-5 rounded-full border-2 border-gray-300 border-t-red-600 animate-spin" />
          <p className="text-sm text-gray-500 dark:text-gray-400">Loading...</p>
        </div>
      </div>
    );
  }

  const initials = displayName ? getInitials(displayName) : email ? getInitials(email) : "A";

  const handleSignOut = () => {
    clearUser();
    sessionStorage.removeItem("auth_token");
    sessionStorage.removeItem("auth_email");
    document.cookie = "auth_token=; path=/; max-age=0";
    router.push("/login");
  };

  return (
    <div className="flex h-screen bg-gray-50 dark:bg-gray-950">

      {/* Admin Sidebar */}
      <aside className="w-60 border-r border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 flex flex-col">

        {/* Logo */}
        <Link
          href="/admin"
          className="flex h-16 items-center gap-3 border-b border-gray-200 dark:border-gray-800 px-4 shrink-0 hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors"
        >
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-red-100 dark:bg-red-950">
            <Shield className="h-4 w-4 text-red-600 dark:text-red-400" />
          </div>
          <div>
            <p className="font-semibold text-gray-900 dark:text-gray-100 text-sm">Admin Panel</p>
            <p className="text-[10px] text-gray-500 dark:text-gray-400">IIH Notetaker</p>
          </div>
        </Link>

        {/* Nav */}
        <nav className="flex-1 space-y-1 p-2 overflow-y-auto">
          {adminNavItems.map(({ href, label, icon: Icon }) => {
            const isActive = href === "/admin" ? pathname === href : pathname.startsWith(href);
            return (
              <Link
                key={href}
                href={href}
                className={cn(
                  "flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors",
                  isActive
                    ? "bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-400"
                    : "text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
                )}
              >
                <Icon className="h-5 w-5 shrink-0" />
                <span>{label}</span>
              </Link>
            );
          })}
        </nav>
      </aside>

      {/* Main area */}
      <div className="flex-1 flex flex-col min-w-0">

        {/* Header */}
        <header className="flex h-16 items-center justify-end border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 px-6 shrink-0 gap-3">
          <ThemeToggle />

          {/* Profile dropdown */}
          <DropdownMenu>
            <SimpleTooltip content="Account menu">
              <DropdownMenuTrigger asChild>
                <button className="flex items-center gap-2 rounded-full pl-1 pr-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500">
                  <Avatar className="h-8 w-8">
                    <AvatarFallback className="bg-gradient-to-br from-red-500 to-rose-600 text-white text-xs font-semibold">
                      {initials}
                    </AvatarFallback>
                  </Avatar>
                  <div className="hidden sm:block text-left">
                    <p className="text-sm font-medium text-gray-900 dark:text-gray-100 leading-none">
                      {displayName || "Admin"}
                    </p>
                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate max-w-[140px]">
                      {email}
                    </p>
                  </div>
                </button>
              </DropdownMenuTrigger>
            </SimpleTooltip>

            <DropdownMenuContent align="end" className="w-56 dark:bg-gray-900 dark:border-gray-700">
              <DropdownMenuLabel className="pb-2">
                <div className="flex items-center gap-2.5">
                  <Avatar className="h-9 w-9">
                    <AvatarFallback className="bg-gradient-to-br from-red-500 to-rose-600 text-white text-xs font-semibold">
                      {initials}
                    </AvatarFallback>
                  </Avatar>
                  <div className="min-w-0">
                    <p className="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">
                      {displayName || "Admin"}
                    </p>
                    <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{email}</p>
                  </div>
                </div>
              </DropdownMenuLabel>

              <DropdownMenuSeparator className="dark:bg-gray-700" />

              <DropdownMenuItem
                className="gap-2 cursor-pointer dark:hover:bg-gray-800"
                onClick={() => router.push("/admin/profile")}
              >
                <User className="h-4 w-4 text-gray-500 dark:text-gray-400" />
                Profile
              </DropdownMenuItem>

              <DropdownMenuSeparator className="dark:bg-gray-700" />

              <DropdownMenuItem
                className="gap-2 cursor-pointer text-red-600 focus:text-red-600 focus:bg-red-50 dark:focus:bg-red-950"
                onClick={handleSignOut}
              >
                <LogOut className="h-4 w-4" />
                Sign out
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </header>

        <main className="flex-1 overflow-y-auto p-6">{children}</main>
      </div>
    </div>
  );
}