"use client";

import Link from "next/link";
import { useState } from "react";
import { Plus, Moon, Sun, LogOut, User, Wallet, Store, ShieldCheck, Trophy, Heart } from "lucide-react";
import { Avatar } from "./Avatar";
import { useAuth } from "@/lib/auth-context";
import { useCreatePost } from "@/lib/create-post-context";
import { useTheme } from "@/lib/theme-context";
import { useClickOutside } from "@/lib/use-click-outside";
import { isPluginEnabled } from "@/lib/plugins";

export function MobileTopBar() {
  const { user, logout } = useAuth();
  const { open: openComposer } = useCreatePost();
  const { theme, toggle: toggleTheme } = useTheme();
  const [menuOpen, setMenuOpen] = useState(false);
  const menuRef = useClickOutside<HTMLDivElement>(menuOpen, () => setMenuOpen(false));

  if (!user) return null;

  return (
    <div className="md:hidden sticky top-0 z-40 bg-white/95 dark:bg-black/95 backdrop-blur border-b border-neutral-200 dark:border-neutral-800 flex items-center justify-between px-4 py-3">
      <Link href="/" className="text-xl font-black tracking-tight">
        XRcoin
      </Link>

      <div className="flex items-center gap-2">
        <button
          onClick={() => openComposer()}
          className="w-9 h-9 rounded-full bg-black text-white dark:bg-white dark:text-black flex items-center justify-center"
        >
          <Plus size={18} />
        </button>

        <div className="relative" ref={menuRef}>
          <button onClick={() => setMenuOpen((v) => !v)}>
            <Avatar user={user} size={32} />
          </button>

          {menuOpen && (
            <div className="absolute right-0 top-11 w-52 bg-white dark:bg-neutral-900 shadow-xl rounded-xl border border-neutral-100 dark:border-neutral-800 py-1.5 z-20 text-sm">
              <Link
                href={`/${user.username}`}
                onClick={() => setMenuOpen(false)}
                className="w-full flex items-center gap-2 text-left px-4 py-2 hover:bg-neutral-50 dark:hover:bg-neutral-800"
              >
                <User size={15} /> Profile
              </Link>
              {isPluginEnabled("wallet") && (
                <Link
                  href="/wallet"
                  onClick={() => setMenuOpen(false)}
                  className="w-full flex items-center gap-2 text-left px-4 py-2 hover:bg-neutral-50 dark:hover:bg-neutral-800"
                >
                  <Wallet size={15} /> Wallet
                </Link>
              )}
              {isPluginEnabled("marketplace") && (
                <Link
                  href="/marketplace"
                  onClick={() => setMenuOpen(false)}
                  className="w-full flex items-center gap-2 text-left px-4 py-2 hover:bg-neutral-50 dark:hover:bg-neutral-800"
                >
                  <Store size={15} /> Marketplace
                </Link>
              )}
              {isPluginEnabled("leaderboard") && (
                <Link
                  href="/leaderboard"
                  onClick={() => setMenuOpen(false)}
                  className="w-full flex items-center gap-2 text-left px-4 py-2 hover:bg-neutral-50 dark:hover:bg-neutral-800"
                >
                  <Trophy size={15} /> Leaderboard
                </Link>
              )}
              {isPluginEnabled("crowdfunding") && (
                <Link
                  href="/crowdfunding"
                  onClick={() => setMenuOpen(false)}
                  className="w-full flex items-center gap-2 text-left px-4 py-2 hover:bg-neutral-50 dark:hover:bg-neutral-800"
                >
                  <Heart size={15} /> Crowdfunding
                </Link>
              )}
              {isPluginEnabled("admin") && user.isAdmin && (
                <Link
                  href="/admin"
                  onClick={() => setMenuOpen(false)}
                  className="w-full flex items-center gap-2 text-left px-4 py-2 hover:bg-neutral-50 dark:hover:bg-neutral-800"
                >
                  <ShieldCheck size={15} /> Admin Panel
                </Link>
              )}
              <button
                onClick={() => {
                  toggleTheme();
                  setMenuOpen(false);
                }}
                className="w-full flex items-center gap-2 text-left px-4 py-2 hover:bg-neutral-50 dark:hover:bg-neutral-800"
              >
                {theme === "dark" ? <Sun size={15} /> : <Moon size={15} />} Modes
              </button>
              <button
                onClick={logout}
                className="w-full flex items-center gap-2 text-left px-4 py-2 text-red-500 hover:bg-neutral-50 dark:hover:bg-neutral-800"
              >
                <LogOut size={15} /> Log Out
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}