'use client';

import * as React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { usePathname } from 'next/navigation';
import { motion, AnimatePresence } from 'motion/react';
import { MenuIcon, XIcon } from 'lucide-react';

import { Button } from '@workspace/ui/components/ui/button';
import { Sheet, SheetContent, SheetTrigger } from '@workspace/ui/components/ui/sheet';
import { cn } from '@workspace/ui/lib/utils';

// --- Theme & Mode Imports (if using next-themes) ---
// import { useTheme } from 'next-themes';
// import { Switch } from '@workspace/ui/components/ui/switch'; // Assuming you have a Switch component

const NAV_ITEMS = [
  { name: 'HOME', href: '/' },
  { name: 'SOLUTIONS', href: '/solutions' },
  { name: 'CASE STUDIES', href: '/case-studies' },
  { name: 'STACK', href: '/stack' },
  { name: 'PROCESS', href: '/process' },
  { name: 'PRICING', href: '/pricing' },
  { name: 'FAQ', href: '/faq' },
  { name: 'ABOUT', href: '/about' },
];

export function Navbar() {
  const pathname = usePathname();
  const [isOpen, setIsOpen] = React.useState(false);

  // --- Theme & Mode Logic (if using next-themes) ---
  // const { theme, setTheme } = useTheme();
  // const isDarkMode = theme === 'dark';

  const handleLinkClick = () => {
    setIsOpen(false); // Close mobile menu on link click
  };

  return (
    <header className="sticky top-4 z-50 w-full bg-transparent">
      <div className="px-4 md:px-6">
        {/* Floating pill nav */}
        <div className="mx-auto max-w-6xl border rounded-full bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60 shadow-md">
          <div className="flex h-16 items-center gap-4 px-4 md:px-6">
            {/* Logo / Brand */}
            <Link href="/" className="flex items-center gap-3" aria-label="Fortura Data Solutions">
              <Image src="/logo-dark.png" alt="Fortura logo" width={36} height={36} className="hidden dark:block" />
              <Image src="/logo-light.png" alt="Fortura logo" width={36} height={36} className="block dark:hidden" />
              <span className="font-bold text-sm tracking-wider uppercase">Fortura</span>
            </Link>

            {/* Desktop Navigation (center) */}
            <nav className="hidden md:flex items-center gap-8 mx-auto">
              {NAV_ITEMS.map((item) => (
                <Link
                  key={item.name}
                  href={item.href}
                  className={cn(
                    'text-[12px] tracking-wider transition-colors pb-0.5 border-b border-transparent hover:text-primary/90 hover:border-primary/30',
                    pathname === item.href ? 'text-primary border-primary/80' : 'text-muted-foreground'
                  )}
                  aria-current={pathname === item.href ? 'page' : undefined}
                >
                  {item.name}
                </Link>
              ))}
            </nav>

            {/* Desktop CTA (far right) */}
            <div className="hidden md:block ml-auto">
              <Link href="/contact" className="text-[12px] tracking-wider text-primary hover:underline">
                BOOK CALL
              </Link>
            </div>

            {/* Mobile Menu Trigger */}
            <Sheet open={isOpen} onOpenChange={setIsOpen}>
              <SheetTrigger asChild>
                <Button variant="ghost" size="icon" className="md:hidden" aria-label="Toggle navigation menu">
                  {isOpen ? <XIcon className="size-6" /> : <MenuIcon className="size-6" />}
                </Button>
              </SheetTrigger>
              <SheetContent side="right" className="w-[300px] sm:w-[400px]">
                <div className="flex flex-col h-full">
                  {/* Mobile Logo / Close Button Area */}
                  <div className="flex items-center justify-between pt-4 px-2">
                    <Link href="/" className="flex items-center space-x-2" onClick={handleLinkClick} aria-label="Fortura Data Solutions">
                      <span className="font-bold text-xl">Fortura</span>
                    </Link>
                    <SheetTrigger asChild>
                      <Button variant="ghost" size="icon" aria-label="Close menu">
                        <XIcon className="size-6" />
                      </Button>
                    </SheetTrigger>
                  </div>

                  {/* Mobile Navigation Links */}
                  <nav className="flex flex-col mt-8 px-2">
                    {NAV_ITEMS.map((item) => (
                      <Link
                        key={item.name}
                        href={item.href}
                        onClick={handleLinkClick}
                        className={cn(
                          'py-3 text-sm tracking-wider transition-colors hover:text-primary border-b border-border/60',
                          pathname === item.href ? 'text-primary' : 'text-muted-foreground'
                        )}
                        aria-current={pathname === item.href ? 'page' : undefined}
                      >
                        {item.name}
                      </Link>
                    ))}
                  </nav>

                  {/* Mobile CTA */}
                  <div className="mt-auto p-4">
                    <Link
                      href="/contact"
                      onClick={handleLinkClick}
                      className="block w-full text-center text-sm tracking-wider text-primary hover:underline"
                    >
                      BOOK CALL
                    </Link>
                  </div>
                </div>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </div>
    </header>
  );
}
