import { useState } from 'react'
import { Button } from '@/components/ui/button.jsx'
import { Sheet, SheetContent, SheetTrigger, SheetClose } from '@/components/ui/sheet.jsx'
import { Globe, Menu } from 'lucide-react'
import { Link, useLocation } from 'react-router-dom'
import navigationData from '../config/navigation.json'
import ThemeToggle from './ThemeToggle.jsx'

function Navigation() {
  const location = useLocation()
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
  
  const isActive = (path) => {
    return location.pathname === path
  }

  return (
    <nav className="fixed top-0 w-full bg-background border-b border-border z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <Link to="/" className="flex items-center space-x-2">
            <Globe className="h-8 w-8 text-primary" />
            <span className="text-xl font-bold text-foreground">ThreeFold Galaxy</span>
          </Link>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center space-x-8">
            {navigationData
              .filter(item => item.show !== false)
              .map((item) => (
                <Link
                  key={item.path}
                  to={item.path}
                  className={`transition-colors ${isActive(item.path) ? 'text-primary font-medium' : 'text-muted-foreground hover:text-primary'}`}
                >
                  {item.label}
                </Link>
              ))}
            <Button asChild className="bg-primary hover:bg-primary/90">
              <Link to="/register">Join Now</Link>
            </Button>
            <ThemeToggle />
          </div>

          {/* Mobile Navigation */}
          <div className="md:hidden">
            <Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
              <SheetTrigger asChild>
                <Button variant="ghost" size="icon">
                  <Menu className="h-6 w-6" />
                </Button>
              </SheetTrigger>
              <SheetContent side="right" className="bg-background text-foreground sm:max-w-sm py-6">
                <div className="flex flex-col items-center space-y-4 pt-6">
                  {navigationData
                    .filter(item => item.show !== false)
                    .map((item) => (
                      <SheetClose asChild key={item.path}>
                        <Link
                          to={item.path}
                          className={`text-xl font-medium text-center ${isActive(item.path) ? 'text-primary' : 'text-foreground hover:text-primary'}`}
                          onClick={() => setIsMobileMenuOpen(false)}
                        >
                          {item.label}
                        </Link>
                      </SheetClose>
                    ))}
                  <SheetClose asChild>
                    <Button asChild className="bg-primary hover:bg-primary/90">
                      <Link to="/register" onClick={() => setIsMobileMenuOpen(false)}>Join Now</Link>
                    </Button>
                  </SheetClose>
                  <SheetClose asChild>
                    <ThemeToggle />
                  </SheetClose>
                </div>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </div>
    </nav>
  )
}

export default Navigation