"use client";

import Link from "next/link";
import { useSession, signOut } from "next-auth/react";
import { useState } from "react";
import LanguageSwitcher from "@/components/shared/language-switcher";
import { NavBadgeMessages, NavBadgeNotifications } from "@/components/layout/nav-badges";
import { WalletBadge } from "@/components/shared/wallet-badge";
import { LoyaltyBadge } from "@/components/shared/loyalty-badge";
import ThemeToggle from "@/components/shared/theme-toggle";

export function Navigation() {
  const { data: session } = useSession();
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const isAdmin = (session?.user as Record<string, unknown> | undefined)?.userType === "admin";

  return (
    <nav className="min-w-0 bg-surface/80 backdrop-blur-xl border-b border-white/5 sticky top-0 z-50">
      <div className="w-full px-4 lg:px-6 xl:px-0">
        <div className="flex h-16 items-center justify-between">
          {/* Logo */}
          <Link href="/" className="shrink-0 transition-opacity hover:opacity-80 xl:flex xl:h-16 xl:w-64 xl:items-center xl:px-6">
            <img src="/logo.png" alt="AdultWorld" className="h-8 w-auto object-contain" />
          </Link>

          <div className="mx-auto hidden w-full max-w-7xl min-w-0 items-center justify-between gap-6 px-6 xl:flex">
            {/* Desktop Navigation */}
            <div className="flex items-center gap-6">
              <Link href="/escorts" className="text-text-muted hover:text-gold transition-colors text-sm font-medium">
                Escorts
              </Link>
              <Link href="/livecam" className="text-text-muted hover:text-gold transition-colors text-sm font-medium">
                LiveCam
              </Link>
              <Link href="/galleries" className="text-text-muted hover:text-gold transition-colors text-sm font-medium">
                Galleries
              </Link>
              <Link href="/videos" className="text-text-muted hover:text-gold transition-colors text-sm font-medium">
                Videos
              </Link>
              <Link href="/search" className="text-text-muted hover:text-gold transition-colors text-sm font-medium">
                Search
              </Link>
              <Link href="/matchmaker" className="text-gold hover:text-gold-light transition-colors text-sm font-medium flex items-center gap-1">
                <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                </svg>
                AI Matchmaker
              </Link>
              <Link href="/plan" className="text-gold hover:text-gold-light transition-colors text-sm font-medium flex items-center gap-1">
                <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                Plan an Occasion
              </Link>
            </div>

            {/* Auth Actions */}
            <div className="flex shrink-0 items-center gap-4">
            <ThemeToggle />
            <LanguageSwitcher />
            {session ? (
              <>
                <WalletBadge />
                <LoyaltyBadge />
                <details className="group relative">
                  <summary
                    className={`flex cursor-pointer list-none items-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors [&::-webkit-details-marker]:hidden ${
                      isAdmin
                        ? "bg-red-500/10 text-red-400 hover:bg-red-500/20 hover:text-red-300"
                        : "text-text-muted hover:bg-surface-light hover:text-white"
                    }`}
                  >
                    {isAdmin ? "Admin" : "Account"}
                    <svg
                      className="h-4 w-4 transition-transform group-open:rotate-180"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                      aria-hidden="true"
                    >
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                    </svg>
                  </summary>
                  <div className="absolute right-0 top-full z-50 mt-2 w-56 overflow-hidden rounded-xl border border-white/10 bg-surface shadow-2xl">
                    <div className="p-2">
                      <Link
                        href="/dashboard"
                        className="block rounded-lg px-3 py-2.5 text-sm text-text-muted transition-colors hover:bg-surface-light hover:text-white"
                      >
                        Dashboard
                      </Link>
                      <div className="rounded-lg px-3 transition-colors hover:bg-surface-light">
                        <NavBadgeMessages variant="mobile" />
                      </div>
                      <div className="rounded-lg px-3 transition-colors hover:bg-surface-light">
                        <NavBadgeNotifications variant="mobile" />
                      </div>
                      {isAdmin && (
                        <Link
                          href="/admin"
                          className="block rounded-lg px-3 py-2.5 text-sm font-medium text-red-400 transition-colors hover:bg-red-500/10 hover:text-red-300"
                        >
                          Admin Panel
                        </Link>
                      )}
                    </div>
                    <div className="border-t border-white/10 p-2">
                      <button
                        type="button"
                        onClick={() => signOut()}
                        className="block w-full rounded-lg px-3 py-2.5 text-left text-sm text-text-muted transition-colors hover:bg-surface-light hover:text-white"
                      >
                        Logout
                      </button>
                    </div>
                  </div>
                </details>
              </>
            ) : (
              <>
                <Link
                  href="/login"
                  className="text-text-muted hover:text-white transition-colors"
                >
                  Login
                </Link>
                <Link
                  href="/register"
                  className="bg-gold hover:bg-gold-light text-black font-semibold px-5 py-2 rounded-lg transition-all duration-300 shadow-glow hover:shadow-lg text-sm"
                >
                  Register
                </Link>
              </>
            )}
            </div>
          </div>

          {/* Mobile Menu Toggle. R17 C.1: explicit aria-label for screen
              readers + p-2 padding so the touch target is ≥44 px. */}
          <button
            type="button"
            aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
            aria-expanded={mobileMenuOpen}
            className="xl:hidden p-2 -mr-2 text-text-muted hover:text-white"
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          >
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              {mobileMenuOpen ? (
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              ) : (
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
              )}
            </svg>
          </button>
        </div>

        {/* Mobile Menu */}
        {mobileMenuOpen && (
          <div className="xl:hidden pb-4 space-y-2">
            <Link href="/escorts" className="block py-3 min-h-[44px] text-text-muted hover:text-white active:bg-surface-light active:text-white rounded transition-colors">Escorts</Link>
            <Link href="/livecam" className="block py-3 min-h-[44px] text-text-muted hover:text-white active:bg-surface-light active:text-white rounded transition-colors">LiveCam</Link>
            <Link href="/galleries" className="block py-3 min-h-[44px] text-text-muted hover:text-white active:bg-surface-light active:text-white rounded transition-colors">Galleries</Link>
            <Link href="/videos" className="block py-3 min-h-[44px] text-text-muted hover:text-white active:bg-surface-light active:text-white rounded transition-colors">Videos</Link>
            <Link href="/search" className="block py-3 min-h-[44px] text-text-muted hover:text-white active:bg-surface-light active:text-white rounded transition-colors">Search</Link>
            <Link href="/matchmaker" className="block py-3 min-h-[44px] text-gold hover:text-gold-light active:bg-surface-light rounded transition-colors font-medium">AI Matchmaker</Link>
            <Link href="/plan" className="block py-3 min-h-[44px] text-gold hover:text-gold-light active:bg-surface-light rounded transition-colors font-medium">Plan an Occasion</Link>
            {session ? (
              <>
                <Link href="/dashboard" className="block py-3 min-h-[44px] text-text-muted hover:text-white active:bg-surface-light active:text-white rounded transition-colors">Dashboard</Link>
                <div className="py-2 flex items-center gap-2">
                  <WalletBadge />
                  <LoyaltyBadge />
                </div>
                <NavBadgeMessages variant="mobile" />
                <NavBadgeNotifications variant="mobile" />
                {isAdmin && (
                  <Link href="/admin" className="block py-2 text-red-400 hover:text-red-300 font-medium">Admin Panel</Link>
                )}
                <button onClick={() => signOut()} className="block py-3 min-h-[44px] text-text-muted hover:text-white active:bg-surface-light active:text-white rounded transition-colors">Logout</button>
              </>
            ) : (
              <>
                <Link href="/login" className="block py-3 min-h-[44px] text-text-muted hover:text-white active:bg-surface-light active:text-white rounded transition-colors">Login</Link>
                <Link href="/register" className="block py-2 text-primary hover:text-primary-dark">Register</Link>
              </>
            )}
          </div>
        )}
      </div>
    </nav>
  );
}