'use client';

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

type AlphaNavProps = {
  isAuthenticated?: boolean;
};

const nonHomeLinks = [
  { href: '/profile', label: 'Profile' },
  { href: '/leagues', label: 'Leagues' },
  { href: '/teams', label: 'Teams' },
  { href: '/drivers', label: 'Drivers' },
] as const;

export function AlphaNav({ isAuthenticated }: AlphaNavProps) {
  const pathname = usePathname();

  const navLinks = isAuthenticated
    ? ([{ href: '/dashboard', label: 'Dashboard' } as const, ...nonHomeLinks] as const)
    : ([{ href: '/', label: 'Home' } as const, ...nonHomeLinks] as const);

  const loginHref = '/auth/iracing/start?returnTo=/dashboard';

  return (
    <nav className="sticky top-0 z-40 bg-deep-graphite/95 backdrop-blur-md border-b border-white/5">
      <div className="max-w-7xl mx-auto px-6">
        <div className="flex items-center justify-between h-14">
          <div className="flex items-baseline space-x-3">
            <Link
              href="/"
              className="text-xl font-semibold text-white hover:text-primary-blue transition-colors"
            >
              GridPilot
            </Link>
            <span className="text-xs text-gray-500 font-light">ALPHA</span>
          </div>

          <div className="hidden md:flex items-center space-x-1">
            {navLinks.map((link) => {
              const isActive = pathname === link.href;
              return (
                <Link
                  key={link.href}
                  href={link.href}
                  className={`
                    relative px-4 py-2 text-sm font-medium transition-all duration-200
                    ${
                      isActive
                        ? 'text-primary-blue'
                        : 'text-gray-400 hover:text-white'
                    }
                  `}
                >
                  {link.label}
                  {isActive && (
                    <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary-blue rounded-full" />
                  )}
                </Link>
              );
            })}
          </div>

          <div className="hidden md:flex items-center space-x-3">
            {!isAuthenticated && (
              <Link
                href={loginHref}
                className="inline-flex items-center justify-center px-3 py-1.5 rounded-md bg-primary-blue text-xs font-medium text-white hover:bg-primary-blue/90 transition-colors"
              >
                Authenticate with iRacing
              </Link>
            )}
            {isAuthenticated && (
              <form action="/auth/logout" method="POST">
                <button
                  type="submit"
                  className="inline-flex items-center justify-center px-3 py-1.5 rounded-md border border-gray-600 text-xs font-medium text-gray-200 hover:bg-gray-800 transition-colors"
                >
                  Logout
                </button>
              </form>
            )}
          </div>

          <div className="md:hidden w-8" />
        </div>
      </div>
    </nav>
  );
}