'use client';

import * as React from 'react';
import { useState } from 'react';
import { Menu, X } from 'lucide-react';
import { Button } from '../../ui/button';
import { LanguageSelector } from '../../brand/language-selector';
import { cn } from '../../shared/utils';

/**
 * A single navigation link rendered in the navbar.
 */
export interface MarketingNavLink {
  label: string;
  href: string;
}

/**
 * A call-to-action button rendered on the right side of the navbar.
 */
export interface MarketingNavbarCta {
  label: string;
  href?: string;
  onClick?: () => void;
}

export interface MarketingNavbarProps {
  /** Logo slot — pass a rendered logo element (e.g. `<XerticaLogo />`). */
  logo: React.ReactNode;
  /** Primary navigation links, shown inline on desktop and stacked on mobile. */
  links: MarketingNavLink[];
  /** Primary call-to-action, rendered as a solid `Button`. */
  cta?: MarketingNavbarCta;
  /** Secondary call-to-action, rendered as an outline `Button`. */
  secondaryCta?: MarketingNavbarCta;
  /** Shows the design system's language selector. Defaults to `true` — `LanguageSelector` auto-hides itself when only one language is configured. */
  showLanguageSelector?: boolean;
  /** Accessible label for the mobile menu trigger when closed. */
  openMenuLabel?: string;
  /** Accessible label for the mobile menu trigger when open. */
  closeMenuLabel?: string;
  className?: string;
}

/**
 * Sticky header for public marketing pages.
 *
 * @description
 * Distinct from the app-shell `Header` (used inside the authenticated product layout):
 * this navbar is for public-facing marketing sites, with a logo slot, inline nav links,
 * and up to two CTA buttons. Collapses into a full-width dropdown panel on mobile.
 *
 * @ai-rules
 * 1. Pass the logo as a rendered node via the `logo` prop — do not couple this file to any specific logo component.
 * 2. Use `cta` for the primary action (solid button) and `secondaryCta` for a lower-emphasis action (outline button).
 * 3. Each link/CTA needs either `href` (renders an `<a>`) or `onClick` — CTAs support both.
 */
export function MarketingNavbar({
  logo,
  links,
  cta,
  secondaryCta,
  showLanguageSelector = true,
  openMenuLabel = 'Open menu',
  closeMenuLabel = 'Close menu',
  className,
}: MarketingNavbarProps) {
  const [isOpen, setIsOpen] = useState(false);

  const closeMenu = () => setIsOpen(false);

  return (
    <header
      className={cn(
        'sticky top-0 z-50 w-full border-b border-border bg-card/80 backdrop-blur',
        className
      )}
    >
      <nav className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
        {/* Logo */}
        <div className="flex shrink-0 items-center">{logo}</div>

        {/* Desktop nav links */}
        <div className="hidden flex-1 items-center justify-center gap-8 md:flex">
          {links.map(link => (
            <a
              key={link.href}
              href={link.href}
              className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
            >
              {link.label}
            </a>
          ))}
        </div>

        {/* Desktop CTAs */}
        <div className="hidden shrink-0 items-center gap-3 md:flex">
          {showLanguageSelector && <LanguageSelector variant="minimal" showIcon={false} />}
          {secondaryCta && (
            <Button
              variant="outline"
              asChild={!!secondaryCta.href}
              onClick={secondaryCta.onClick}
            >
              {secondaryCta.href ? (
                <a href={secondaryCta.href}>{secondaryCta.label}</a>
              ) : (
                secondaryCta.label
              )}
            </Button>
          )}
          {cta && (
            <Button variant="secondary" asChild={!!cta.href} onClick={cta.onClick}>
              {cta.href ? <a href={cta.href}>{cta.label}</a> : cta.label}
            </Button>
          )}
        </div>

        {/* Mobile menu trigger */}
        <Button
          variant="ghost"
          size="icon"
          className="md:hidden"
          onClick={() => setIsOpen(prev => !prev)}
          aria-label={isOpen ? closeMenuLabel : openMenuLabel}
          aria-expanded={isOpen}
        >
          {isOpen ? <X className="size-5" /> : <Menu className="size-5" />}
        </Button>
      </nav>

      {/* Mobile dropdown panel */}
      {isOpen && (
        <div className="border-t border-border bg-card/95 backdrop-blur md:hidden">
          <div className="flex flex-col gap-1 px-4 py-4 sm:px-6">
            {links.map(link => (
              <a
                key={link.href}
                href={link.href}
                onClick={closeMenu}
                className="rounded-[var(--radius)] px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
              >
                {link.label}
              </a>
            ))}

            {showLanguageSelector && (
              <div className="mt-2 flex border-t border-border pt-4">
                <LanguageSelector variant="minimal" showIcon={false} />
              </div>
            )}

            {(secondaryCta || cta) && (
              <div className="mt-2 flex flex-col gap-2 border-t border-border pt-4">
                {secondaryCta && (
                  <Button
                    variant="outline"
                    className="w-full"
                    asChild={!!secondaryCta.href}
                    onClick={() => {
                      closeMenu();
                      secondaryCta.onClick?.();
                    }}
                  >
                    {secondaryCta.href ? (
                      <a href={secondaryCta.href}>{secondaryCta.label}</a>
                    ) : (
                      secondaryCta.label
                    )}
                  </Button>
                )}
                {cta && (
                  <Button
                    variant="secondary"
                    className="w-full"
                    asChild={!!cta.href}
                    onClick={() => {
                      closeMenu();
                      cta.onClick?.();
                    }}
                  >
                    {cta.href ? <a href={cta.href}>{cta.label}</a> : cta.label}
                  </Button>
                )}
              </div>
            )}
          </div>
        </div>
      )}
    </header>
  );
}