"use client";

import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { AnimatePresence, motion } from "framer-motion";
import { Menu, Search, BellRing, ChevronDown, User, Settings, LogOut } from "lucide-react";
import { ThemeToggle } from "@/components/ui/ThemeToggle";
import { timeAgo } from "@/lib/mock-data";
import { useAuth } from "@/lib/auth/auth-provider";
import { useAdminNotifications } from "@/lib/data/admin-notifications-provider";
import { cn } from "@/lib/cn";

const typeDot: Record<string, string> = {
  order: "bg-teal",
  payment: "bg-gold",
  user: "bg-zong",
  system: "bg-muted",
};

export function Topbar({ onOpenMobileSidebar }: { onOpenMobileSidebar: () => void }) {
  const router = useRouter();
  const { user, profile, signOut } = useAuth();
  const { notifications, unreadCount: unread } = useAdminNotifications();
  const [notifOpen, setNotifOpen] = useState(false);
  const [profileOpen, setProfileOpen] = useState(false);
  const [loggingOut, setLoggingOut] = useState(false);
  const displayName = profile?.full_name || user?.email?.split("@")[0] || "Admin";
  const initials = displayName.slice(0, 2).toUpperCase();

  async function handleLogout() {
    setLoggingOut(true);
    await signOut();
    router.push("/login");
  }

  return (
    <header className="sticky top-0 z-30 flex items-center gap-3 border-b border-black/[0.06] bg-paper/80 px-4 py-3 backdrop-blur-xl dark:border-white/[0.06] dark:bg-ink/80 sm:px-6">
      <button
        onClick={onOpenMobileSidebar}
        className="flex h-9 w-9 items-center justify-center rounded-xl hover:bg-black/5 dark:hover:bg-white/5 lg:hidden"
        aria-label="Open menu"
      >
        <Menu size={19} />
      </button>

      <div className="hidden max-w-sm flex-1 items-center gap-2 rounded-xl border border-black/[0.06] bg-black/[0.02] px-3.5 py-2.5 dark:border-white/[0.06] dark:bg-white/[0.03] sm:flex">
        <Search size={16} className="text-muted" />
        <input
          placeholder="Search orders, customers, packages…"
          className="w-full bg-transparent text-sm outline-none placeholder:text-muted"
        />
      </div>

      <div className="flex-1 sm:hidden" />

      <div className="flex items-center gap-2">
        <ThemeToggle />

        <div className="relative">
          <button
            onClick={() => {
              setNotifOpen((v) => !v);
              setProfileOpen(false);
            }}
            className="relative flex h-9 w-9 items-center justify-center rounded-xl hover:bg-black/5 dark:hover:bg-white/5"
            aria-label="Notifications"
          >
            <BellRing size={18} />
            {unread > 0 && (
              <span className="absolute right-1.5 top-1.5 flex h-2 w-2 rounded-full bg-danger" />
            )}
          </button>
          <AnimatePresence>
            {notifOpen && (
              <>
                <div className="fixed inset-0 z-40" onClick={() => setNotifOpen(false)} />
                <motion.div
                  initial={{ opacity: 0, y: -8, scale: 0.98 }}
                  animate={{ opacity: 1, y: 0, scale: 1 }}
                  exit={{ opacity: 0, y: -8, scale: 0.98 }}
                  transition={{ duration: 0.15 }}
                  className="panel absolute right-0 z-50 mt-2 w-80 overflow-hidden !rounded-2xl"
                >
                  <div className="flex items-center justify-between border-b border-black/[0.06] px-4 py-3 dark:border-white/[0.06]">
                    <p className="text-sm font-semibold">Notifications</p>
                    <span className="text-xs text-muted">{unread} unread</span>
                  </div>
                  <div className="thin-scrollbar max-h-80 overflow-y-auto">
                    {notifications.length === 0 ? (
                      <p className="px-4 py-6 text-center text-xs text-muted">
                        Nothing yet — new orders, payments, and signups will show up here.
                      </p>
                    ) : (
                      notifications.slice(0, 5).map((n) => (
                        <div
                          key={n.id}
                          className="flex gap-3 border-b border-black/[0.04] px-4 py-3 last:border-0 dark:border-white/[0.04]"
                        >
                          <span className={cn("mt-1.5 h-2 w-2 shrink-0 rounded-full", typeDot[n.type])} />
                          <div className="min-w-0">
                            <p className="truncate text-[13px] font-medium">{n.title}</p>
                            <p className="mt-0.5 line-clamp-2 text-xs text-muted">{n.description}</p>
                            <p className="mt-1 text-[10.5px] text-muted/70" suppressHydrationWarning>
                              {timeAgo(n.createdAt)}
                            </p>
                          </div>
                        </div>
                      ))
                    )}
                  </div>
                  <Link
                    href="/notifications"
                    onClick={() => setNotifOpen(false)}
                    className="block px-4 py-3 text-center text-xs font-semibold text-gold-dim hover:bg-black/[0.02] dark:text-gold-bright dark:hover:bg-white/[0.03]"
                  >
                    View all notifications
                  </Link>
                </motion.div>
              </>
            )}
          </AnimatePresence>
        </div>

        <div className="relative">
          <button
            onClick={() => {
              setProfileOpen((v) => !v);
              setNotifOpen(false);
            }}
            className="flex items-center gap-2 rounded-xl py-1 pl-1 pr-2 hover:bg-black/5 dark:hover:bg-white/5"
          >
            <div className="flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-gold-bright to-gold-dim font-display text-[11px] font-bold text-ink">
              {initials}
            </div>
            <span className="hidden text-sm font-medium sm:inline">{displayName}</span>
            <ChevronDown size={14} className="hidden text-muted sm:inline" />
          </button>
          <AnimatePresence>
            {profileOpen && (
              <>
                <div className="fixed inset-0 z-40" onClick={() => setProfileOpen(false)} />
                <motion.div
                  initial={{ opacity: 0, y: -8, scale: 0.98 }}
                  animate={{ opacity: 1, y: 0, scale: 1 }}
                  exit={{ opacity: 0, y: -8, scale: 0.98 }}
                  transition={{ duration: 0.15 }}
                  className="panel absolute right-0 z-50 mt-2 w-56 overflow-hidden !rounded-2xl !p-1.5"
                >
                  <div className="px-3 py-2.5">
                    <p className="truncate text-sm font-semibold">{displayName}</p>
                    <p className="truncate text-xs text-muted">{user?.email}</p>
                  </div>
                  <div className="my-1 h-px bg-black/[0.06] dark:bg-white/[0.06]" />
                  <Link
                    href="/settings"
                    onClick={() => setProfileOpen(false)}
                    className="flex items-center gap-2.5 rounded-xl px-3 py-2 text-sm hover:bg-black/[0.03] dark:hover:bg-white/[0.04]"
                  >
                    <User size={15} className="text-muted" /> My Profile
                  </Link>
                  <Link
                    href="/settings"
                    onClick={() => setProfileOpen(false)}
                    className="flex items-center gap-2.5 rounded-xl px-3 py-2 text-sm hover:bg-black/[0.03] dark:hover:bg-white/[0.04]"
                  >
                    <Settings size={15} className="text-muted" /> Settings
                  </Link>
                  <div className="my-1 h-px bg-black/[0.06] dark:bg-white/[0.06]" />
                  <button
                    onClick={handleLogout}
                    disabled={loggingOut}
                    className="flex w-full items-center gap-2.5 rounded-xl px-3 py-2 text-sm text-danger hover:bg-danger/5 disabled:opacity-50"
                  >
                    <LogOut size={15} /> {loggingOut ? "Logging out…" : "Log Out"}
                  </button>
                </motion.div>
              </>
            )}
          </AnimatePresence>
        </div>
      </div>
    </header>
  );
}