"use client";

import { useState } from "react";
import Link from "next/link";
import { ScanLine, Sun, Moon, ChevronDown } from "lucide-react";
import { useTheme } from "next-themes";

function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  const cycleTheme = () => {
    if (theme === "light") setTheme("dark");
    else if (theme === "dark") setTheme("system");
    else setTheme("light");
  };

  const themeLabel =
    theme === "dark" ? "Dark" : theme === "light" ? "Light" : "System";

  return (
    <button
      onClick={cycleTheme}
      className="rounded-full p-2 text-muted-foreground hover:text-foreground transition-colors"
      aria-label={`Theme: ${themeLabel}`}
      title={`Theme: ${themeLabel}`}
    >
      <Sun className="h-4 w-4 hidden dark:block" />
      <Moon className="h-4 w-4 block dark:hidden" />
    </button>
  );
}

const featureLinks = [
  { href: "/features/ai-ocr", label: "AI-Powered OCR" },
  { href: "/features/scanner-integration", label: "Scanner Integration" },
  { href: "/features/integrations", label: "Integrations" },
  { href: "/features/team-collaboration", label: "Team Collaboration" },
  { href: "/features/collection-days", label: "Collection Days" },
  { href: "/features/multi-site", label: "Multi-Site Management" },
  { href: "/features/analytics", label: "Dashboard & Analytics" },
  { href: "/features/security", label: "Security & Privacy" },
];

export function MarketingNav() {
  const [mobileOpen, setMobileOpen] = useState(false);
  const [featuresOpen, setFeaturesOpen] = useState(false);

  return (
    <nav className="fixed top-0 inset-x-0 z-50 glass-panel">
      <div className="mx-auto max-w-6xl flex items-center justify-between px-6 h-16">
        <Link href="/welcome" className="flex items-center gap-2.5">
          <div className="h-8 w-8 rounded-lg bg-primary flex items-center justify-center">
            <ScanLine className="h-4 w-4 text-primary-foreground" />
          </div>
          <span className="text-lg font-semibold tracking-tight">Echo</span>
        </Link>

        <div className="hidden md:flex items-center gap-8 text-sm font-medium text-muted-foreground">
          <div
            className="relative group"
            onMouseEnter={() => setFeaturesOpen(true)}
            onMouseLeave={() => setFeaturesOpen(false)}
          >
            <button className="flex items-center gap-1 hover:text-foreground transition-colors">
              Features
              <ChevronDown className="h-3.5 w-3.5" />
            </button>
            {featuresOpen && (
              <div className="absolute top-full left-1/2 -translate-x-1/2 pt-2">
                <div className="glass-card rounded-xl p-2 w-56 shadow-xl">
                  {featureLinks.map((link) => (
                    <Link
                      key={link.href}
                      href={link.href}
                      className="block px-3 py-2 rounded-lg text-sm text-muted-foreground hover:text-foreground hover:bg-accent/40 transition-colors"
                      onClick={() => setFeaturesOpen(false)}
                    >
                      {link.label}
                    </Link>
                  ))}
                </div>
              </div>
            )}
          </div>
          <Link href="/pricing" className="hover:text-foreground transition-colors">Pricing</Link>
          <Link href="/welcome#faq" className="hover:text-foreground transition-colors">FAQ</Link>
        </div>

        <div className="flex items-center gap-3">
          <ThemeToggle />
          <Link
            href="/login"
            className="hidden sm:inline-flex text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
          >
            Sign in
          </Link>
          <Link
            href="/signup"
            className="inline-flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground shadow-sm hover:opacity-90 transition-opacity"
          >
            Get Started Free
          </Link>
          <button
            className="md:hidden p-2 text-muted-foreground"
            onClick={() => setMobileOpen(!mobileOpen)}
            aria-label="Toggle menu"
          >
            <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              {mobileOpen ? (
                <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>
      </div>
      {mobileOpen && (
        <div className="md:hidden border-t border-border/50 px-6 py-4 space-y-3 text-sm font-medium glass">
          <div className="text-xs font-bold text-muted-foreground/60 uppercase tracking-wider mb-2">Features</div>
          {featureLinks.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className="block pl-2 text-muted-foreground hover:text-foreground"
              onClick={() => setMobileOpen(false)}
            >
              {link.label}
            </Link>
          ))}
          <div className="pt-2 border-t border-border/30">
            <Link href="/pricing" className="block text-muted-foreground hover:text-foreground" onClick={() => setMobileOpen(false)}>Pricing</Link>
          </div>
          <Link href="/welcome#faq" className="block text-muted-foreground hover:text-foreground" onClick={() => setMobileOpen(false)}>FAQ</Link>
          <Link href="/login" className="block text-muted-foreground hover:text-foreground" onClick={() => setMobileOpen(false)}>Sign in</Link>
        </div>
      )}
    </nav>
  );
}
