"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { motion } from "framer-motion"
import { useTheme } from "@/app/components/ThemeProvider"

const navItems = [
  { href: "/", label: "Home", icon: "◈" },
  { href: "/map", label: "Map", icon: "◉" },
]

function SunIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="5"/>
      <line x1="12" y1="1" x2="12" y2="3"/>
      <line x1="12" y1="21" x2="12" y2="23"/>
      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
      <line x1="1" y1="12" x2="3" y2="12"/>
      <line x1="21" y1="12" x2="23" y2="12"/>
      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
    </svg>
  )
}

function MoonIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
    </svg>
  )
}

export default function Nav() {
  const pathname = usePathname()
  const { theme, toggle } = useTheme()

  return (
    <>
      {/* Desktop top nav */}
      <nav className="hidden md:flex items-center justify-between px-8 py-5 border-b border-black/[0.06] dark:border-white/[0.05] sticky top-0 z-50 bg-[#fafafa]/80 dark:bg-[#0d0d0d]/80 backdrop-blur-xl">
        <Link href="/" className="text-2xl font-black tracking-tighter text-[#111] dark:text-[#f5f5f5] hover:text-[#f59e0b] dark:hover:text-[#f59e0b] transition-colors">
          food.
        </Link>
        <div className="flex items-center gap-8">
          {navItems.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={`text-sm font-medium transition-colors hover:text-[#f59e0b] ${
                pathname === item.href
                  ? "text-[#f59e0b]"
                  : "text-black/50 dark:text-white/60"
              }`}
            >
              {item.label}
            </Link>
          ))}
          <button
            onClick={toggle}
            aria-label="Toggle theme"
            className="text-black/40 dark:text-white/40 hover:text-[#f59e0b] dark:hover:text-[#f59e0b] transition-colors p-1"
          >
            {theme === "dark" ? <SunIcon /> : <MoonIcon />}
          </button>
        </div>
      </nav>

      {/* Mobile bottom nav */}
      <nav className="md:hidden fixed bottom-0 left-0 right-0 z-50 border-t border-black/[0.06] dark:border-white/[0.05] bg-[#fafafa]/90 dark:bg-[#0d0d0d]/90 backdrop-blur-xl">
        <div className="flex items-center justify-around py-3">
          {navItems.map((item) => {
            const isActive = pathname === item.href
            return (
              <Link
                key={item.href}
                href={item.href}
                className="flex flex-col items-center gap-1 px-6 py-1"
              >
                <motion.div
                  whileTap={{ scale: 0.85 }}
                  className={`text-xl transition-colors ${
                    isActive ? "text-[#f59e0b]" : "text-black/30 dark:text-white/40"
                  }`}
                >
                  {item.icon}
                </motion.div>
                <span
                  className={`text-[10px] font-medium tracking-wider uppercase transition-colors ${
                    isActive ? "text-[#f59e0b]" : "text-black/25 dark:text-white/30"
                  }`}
                >
                  {item.label}
                </span>
              </Link>
            )
          })}
          {/* Theme toggle in mobile nav */}
          <button
            onClick={toggle}
            aria-label="Toggle theme"
            className="flex flex-col items-center gap-1 px-6 py-1"
          >
            <motion.div
              whileTap={{ scale: 0.85 }}
              className="text-xl text-black/30 dark:text-white/40 hover:text-[#f59e0b] transition-colors"
            >
              {theme === "dark" ? <SunIcon /> : <MoonIcon />}
            </motion.div>
            <span className="text-[10px] font-medium tracking-wider uppercase text-black/25 dark:text-white/30">
              {theme === "dark" ? "Light" : "Dark"}
            </span>
          </button>
        </div>
      </nav>
    </>
  )
}