import { useAuth } from "@/hooks/use-auth";
import { useQuery } from "@tanstack/react-query";
import { Link, useLocation } from "wouter";
import { LogIn, LogOut, Telescope, CreditCard, HelpCircle } from "lucide-react";

export function Header() {
  const { user, isLoading, isAuthenticated } = useAuth();
  const [location] = useLocation();

  const { data: creditsData } = useQuery<{
    credits: number;
    freeUsesRemaining: number;
    totalAnalyses: number;
  }>({
    queryKey: ["/api/credits"],
    enabled: isAuthenticated,
  });

  const navItems = [
    { path: "/pricing", label: "Pricing", icon: CreditCard },
    { path: "/help", label: "Help", icon: HelpCircle },
  ];

  return (
    <div className="flex items-center justify-between gap-4 px-4 sm:px-6 lg:px-8 py-3 sm:py-4 border-b border-white/[0.06]">
      <div className="flex items-center gap-4">
        <Link href="/">
          <span className="flex items-center gap-3 cursor-pointer" data-testid="link-home">
            <div className="w-[7px] h-[7px] rounded-full bg-emerald-400 shadow-[0_0_8px_rgba(52,211,153,0.4)]" />
            <span className="font-mono text-[11px] text-white/35 tracking-[0.08em] uppercase">v1.1</span>
          </span>
        </Link>

        <div className="flex items-center gap-1">
          {navItems.map((item) => (
            <Link key={item.path} href={item.path}>
              <span
                data-testid={`link-${item.label.toLowerCase()}`}
                className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-md font-sans text-[12px] transition-all cursor-pointer ${
                  location === item.path
                    ? "text-white/70 bg-white/[0.06]"
                    : "text-white/30 hover:text-white/50 hover:bg-white/[0.03]"
                }`}
              >
                <item.icon className="w-3 h-3" />
                <span className="hidden sm:inline">{item.label}</span>
              </span>
            </Link>
          ))}
        </div>
      </div>

      <div className="flex items-center gap-3 flex-wrap">
        {isAuthenticated && creditsData && (
          <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-white/[0.04] border border-white/[0.06]" data-testid="display-credits">
            <Telescope className="w-3 h-3 text-emerald-400" />
            <span className="font-mono text-[11px] text-white/50">
              {creditsData.totalAnalyses} scans
            </span>
          </div>
        )}

        {isLoading ? null : isAuthenticated ? (
          <div className="flex items-center gap-2">
            {user?.profileImageUrl && (
              <img
                src={user.profileImageUrl}
                alt=""
                className="w-6 h-6 rounded-full border border-white/10"
                data-testid="img-user-avatar"
              />
            )}
            <span className="font-sans text-[12px] text-white/50 hidden sm:inline" data-testid="text-username">
              {user?.firstName || user?.email || "User"}
            </span>
            <a
              href="/api/logout"
              className="flex items-center gap-1 px-2 py-1 rounded-md text-[11px] font-mono text-white/30 hover:text-white/50 hover:bg-white/[0.04] transition-all"
              data-testid="button-logout"
            >
              <LogOut className="w-3 h-3" />
            </a>
          </div>
        ) : (
          <a
            href="/api/login"
            className="flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-emerald-500/20 border border-emerald-500/30 text-[12px] font-sans text-emerald-400 hover:bg-emerald-500/30 transition-all"
            data-testid="button-login"
          >
            <LogIn className="w-3 h-3" />
            Sign in
          </a>
        )}
      </div>
    </div>
  );
}