'use client';

import * as React from 'react';
import Link from 'next/link';
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' },
  { name: 'Contact', href: '/contact' },
];

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-0 z-50 w-full border-b bg-background/80 backdrop-blur-sm">
      <div className="container flex h-16 items-center justify-between px-4 md:px-6">
        {/* Logo / Brand */}
        <Link href="/" className="flex items-center space-x-2" aria-label="Fortura Data Solutions">
          {/* Replace with your actual logo component or image */}
          <span className="font-bold text-xl">Fortura</span>
        </Link>

        {/* Desktop Navigation */}
        <nav className="hidden md:flex items-center gap-6">
          {NAV_ITEMS.map((item) => (
            <Link
              key={item.name}
              href={item.href}
              className={cn(
                'text-sm font-medium transition-colors hover:text-primary',
                pathname === item.href ? 'text-primary' : 'text-muted-foreground'
              )}
              aria-current={pathname === item.href ? 'page' : undefined}
            >
              {item.name}
            </Link>
          ))}
        </nav>

        {/* Desktop CTA (Optional, e.g., Book Call Button) */}
        <div className="hidden md:block">
          <Button size="sm" variant="default" asChild>
            <Link href="/contact">Book Architecture Call</Link>
          </Button>
        </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-base font-medium transition-colors hover:text-primary border-b',
                      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">
                <Button className="w-full" variant="default" asChild>
                  <Link href="/contact" onClick={handleLinkClick}>Book Architecture Call</Link>
                </Button>
              </div>

              {/* Theme Toggle (if implemented)
              <div className="flex items-center justify-between p-4 border-t">
                <span className="text-sm font-medium">Dark Mode</span>
                <Switch
                  checked={isDarkMode}
                  onCheckedChange={() => setTheme(isDarkMode ? 'light' : 'dark')}
                  aria-label="Toggle dark mode"
                />
              </div>
              */}
            </div>
          </SheetContent>
        </Sheet>
      </div>
    </header>
  );
}