"use client";

import { useState, useEffect } from "react";
import { useUser } from "@/lib/context";
import { Menu, X, Coins, Flame, Award, Smartphone, User, BarChart2 } from "lucide-react";
import Link from "next/link";

export default function Navbar() {
  const { profile } = useUser();
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 20) {
        setIsScrolled(true);
      } else {
        setIsScrolled(false);
      }
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const navLinks = [
    { name: "Earn", href: "#earn" },
    { name: "Spend", href: "#spend" },
    { name: "Play & Win", href: "#play" },
    { name: "Leaderboard", href: "#leaderboard" },
    { name: "Dashboard", href: "#dashboard" },
  ];

  return (
    <nav
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        isScrolled
          ? "glassmorphism py-3 shadow-[0_8px_32px_0_rgba(0,0,0,0.4)] border-b border-white/5"
          : "bg-transparent py-5"
      }`}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between">
          {/* Logo */}
          <Link href="/" className="flex items-center space-x-2.5 group">
            <img src="/images/lytsup_app.png" alt="LytsUp Logo" className="h-8 w-auto object-contain rounded-lg" />
            <span className="text-xl font-extrabold tracking-wider font-sora text-white flex items-center">
              Lyts<span className="text-primary text-glow-yellow">Up</span>
              <span className="h-1.5 w-1.5 rounded-full bg-accent-pink ml-0.5 animate-ping" />
            </span>
          </Link>

          {/* Desktop Navigation Links */}
          <div className="hidden md:flex items-center space-x-8">
            {navLinks.map((link) => (
              <a
                key={link.name}
                href={link.href}
                className="text-sm font-semibold tracking-wide text-white/80 hover:text-primary transition-colors duration-200"
              >
                {link.name}
              </a>
            ))}
          </div>

          {/* User Currency and Profile Stats */}
          <div className="hidden md:flex items-center space-x-4">
            {/* Streak Counter */}
            <div className="flex items-center space-x-1.5 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-accent-orange font-bold text-sm">
              <Flame className="w-4.5 h-4.5 fill-current animate-bounce" />
              <span>{profile.streak} Days</span>
            </div>

            {/* LYT Balance Widget */}
            <div className="flex items-center space-x-2 px-4 py-1.5 rounded-full bg-primary/10 border border-primary/20 text-primary font-extrabold text-sm shadow-[0_0_15px_rgba(255,199,44,0.1)]">
              <Coins className="w-4.5 h-4.5 text-primary animate-pulse" />
              <span className="font-sora">{profile.lytBalance} LYTs</span>
            </div>

            {/* User Profile Avatar */}
            <div className="flex items-center space-x-2 pl-2">
              <div className="relative">
                <div className="w-9 h-9 rounded-full bg-gradient-to-tr from-accent-pink to-accent-purple p-0.5 flex items-center justify-center cursor-pointer hover:scale-105 transition-transform">
                  <div className="w-full h-full rounded-full bg-dark flex items-center justify-center">
                    <User className="w-4.5 h-4.5 text-white" />
                  </div>
                </div>
                <span className="absolute -bottom-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-accent-lime text-[10px] font-extrabold text-dark ring-2 ring-dark">
                  L{profile.level}
                </span>
              </div>
            </div>
          </div>

          {/* Mobile Menu Button */}
          <div className="flex items-center space-x-3 md:hidden">
            {/* Mobile LYT widget */}
            <div className="flex items-center space-x-1 px-2.5 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary font-bold text-xs">
              <Coins className="w-3.5 h-3.5" />
              <span>{profile.lytBalance}</span>
            </div>

            <button
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className="text-white hover:text-primary transition-colors focus:outline-none"
              aria-label="Toggle Menu"
            >
              {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Menu Overlay */}
      {isMobileMenuOpen && (
        <div className="md:hidden glassmorphism border-b border-white/10 animate-in fade-in slide-in-from-top-4 duration-300">
          <div className="px-4 pt-2 pb-6 space-y-3">
            {navLinks.map((link) => (
              <a
                key={link.name}
                href={link.href}
                onClick={() => setIsMobileMenuOpen(false)}
                className="block px-3 py-2.5 rounded-xl text-base font-medium text-white/80 hover:bg-white/5 hover:text-primary transition-all"
              >
                {link.name}
              </a>
            ))}

            <hr className="border-white/10 my-4" />

            <div className="flex items-center justify-between px-3">
              <div className="flex items-center space-x-1.5 text-accent-orange font-bold text-sm">
                <Flame className="w-4.5 h-4.5 fill-current" />
                <span>{profile.streak} Day Streak</span>
              </div>

              <div className="flex items-center space-x-2 text-primary font-bold text-sm">
                <Award className="w-4.5 h-4.5 text-accent-lime" />
                <span>Level {profile.level}</span>
              </div>
            </div>
          </div>
        </div>
      )}
    </nav>
  );
}
