"use client";

import { useSession, signOut } from "next-auth/react";
import { useAuthModalStore } from "@/store/useAuthModalStore";
import { User as UserIcon, LogOut, Shield } from "lucide-react";
import Link from "next/link";

export default function UserNav() {
  const { data: session, status } = useSession();
  const { openModal } = useAuthModalStore();

  if (status === "loading") {
    return <div className="h-8 w-8 rounded-full bg-zinc-800 animate-pulse" />;
  }

  if (!session?.user) {
    return (
      <button
        onClick={() => openModal("login")}
        className="text-xs font-semibold px-4 py-2 rounded-xl bg-zinc-900 border border-zinc-800 hover:border-zinc-700 text-zinc-200 hover:text-white transition"
      >
        Sign In
      </button>
    );
  }

  const userRole = (session.user as any).role;

  return (
    <div className="flex items-center gap-3">
      {userRole === "ADMIN" && (
        <Link
          href="/admin/upload"
          className="flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 hover:bg-indigo-500/20 transition"
        >
          <Shield className="h-3.5 w-3.5" /> Admin
        </Link>
      )}

      <div className="flex items-center gap-2 text-xs font-medium text-zinc-300">
        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-800 text-indigo-400">
          <UserIcon className="h-4 w-4" />
        </div>
        <span className="hidden sm:inline">{session.user.name || "My Account"}</span>
      </div>

      <button
        onClick={() => signOut({ redirect: false })}
        title="Sign Out"
        className="p-1.5 text-zinc-500 hover:text-rose-400 transition"
      >
        <LogOut className="h-4 w-4" />
      </button>
    </div>
  );
}