'use client';

import Image from 'next/image';
import { Input } from '@/components/ui/input';
import { Bell, Heart, ShoppingCart, SquarePen, Menu } from 'lucide-react';
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { useState } from 'react';

function MarketplaceNavbar() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <nav className="w-full bg-[#010313]">
      <div className="container-main h-[56px] flex items-center justify-between px-4 md:px-6">
        {/* Logo and Brand */}
        <div className="flex items-center gap-2 min-w-[120px] md:min-w-[180px]">
          <Image src="/marketplacelogo.png" alt="Woedii Logo" width={40} height={40} className="object-contain" />
          <span className="text-white text-xl md:text-2xl ml-1 font-normal">Wodey</span>
        </div>

        {/* Mobile Menu Button */}
        <button 
          className="md:hidden text-white"
          onClick={() => setIsMenuOpen(!isMenuOpen)}
        >
          <Menu size={24} />
        </button>

        {/* Search Bar - Hidden on mobile */}
        <div className="hidden md:flex flex-1 justify-center">
          <div className="flex items-center bg-[#F2F4F8] rounded-[8px] px-4" style={{ width: 400, height: 40, gap: 8 }}>
            <svg className="text-[#6B7280] mr-2" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="8.5" cy="8.5" r="5.75"/><path d="M16 16l-3.5-3.5"/></svg>
            <Input
              type="text"
              placeholder="Search images, videos, fonts, graphics and more"
              className="bg-transparent text-[#6B7280] text-base w-full border-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-full"
              style={{ height: 40 }}
            />
          </div>
        </div>

        {/* Right Side Icons and Profile - Hidden on mobile */}
        <div className="hidden md:flex items-center gap-4 lg:gap-8 min-w-[320px] lg:min-w-[420px] justify-end">
          {/* Notifications */}
          <div className="relative cursor-pointer flex flex-col items-center justify-center">
            <div className="relative flex items-center justify-center">
              <Bell size={22} className="text-white" />
              <span className="absolute -top-1 -right-1 w-[9px] h-[9px] bg-[#FF3B30] rounded-full border-[1.5px] border-[#020316]" />
            </div>
            <span className="text-xs text-white mt-1">Notifications</span>
          </div>
          {/* Favorites */}
          <div className="cursor-pointer flex flex-col items-center justify-center">
            <Heart size={22} className="text-white" />
            <span className="text-xs text-white mt-1">Favorites</span>
          </div>
          {/* Cart */}
          <div className="cursor-pointer flex flex-col items-center justify-center">
            <ShoppingCart size={22} className="text-white" />
            <span className="text-xs text-white mt-1">Cart</span>
          </div>
          {/* Profile */}
          <div className="cursor-pointer flex flex-col items-center justify-center">
            <div className="flex items-center justify-center">
              <Avatar className="w-6 h-6">
                <AvatarImage src="/avatar.png" alt="Profile" />
                <AvatarFallback>U</AvatarFallback>
              </Avatar>
            </div>
            <span className="text-xs text-white mt-1">My Profile</span>
          </div>
          {/* Create Button */}
          <a href="/creator">
            <Button className="flex items-center gap-2 bg-[#0093A5] text-white px-3 md:px-5 py-2 rounded-lg font-medium text-sm md:text-base transition-colors ml-2 md:ml-4 hover:bg-[#007a87] cursor-pointer" type="button">
              <SquarePen size={18} />
              <span className="hidden sm:inline">Create</span>
            </Button>
          </a>
        </div>

        {/* Mobile Menu */}
        <div className={`absolute top-[56px] left-0 right-0 bg-[#010313] z-50 md:hidden transition-all duration-300 ease-in-out transform ${isMenuOpen ? 'translate-y-0 opacity-100' : '-translate-y-4 opacity-0 pointer-events-none'}`}>
          <div className="container-main py-4">
            {/* Mobile Search */}
            <div className="flex items-center bg-[#F2F4F8] rounded-[8px] px-4 mb-4" style={{ height: 40, gap: 8 }}>
              <svg className="text-[#6B7280] mr-2" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="8.5" cy="8.5" r="5.75"/><path d="M16 16l-3.5-3.5"/></svg>
              <Input
                type="text"
                placeholder="Search..."
                className="bg-transparent text-[#6B7280] text-base w-full border-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-full"
                style={{ height: 40 }}
              />
            </div>
            {/* Mobile Menu Items */}
            <div className="flex flex-col gap-4">
              <div className="flex items-center gap-3 text-white">
                <Bell size={20} />
                <span>Notifications</span>
              </div>
              <div className="flex items-center gap-3 text-white">
                <Heart size={20} />
                <span>Favorites</span>
              </div>
              <div className="flex items-center gap-3 text-white">
                <ShoppingCart size={20} />
                <span>Cart</span>
              </div>
              <div className="flex items-center gap-3 text-white">
                <Avatar className="w-6 h-6">
                  <AvatarImage src="/avatar.png" alt="Profile" />
                  <AvatarFallback>U</AvatarFallback>
                </Avatar>
                <span>My Profile</span>
              </div>
              <a href="/creator" className="w-full">
                <Button className="w-full flex items-center justify-center gap-2 bg-[#0093A5] text-white py-2 rounded-lg font-medium text-base transition-colors hover:bg-[#007a87]">
                  <SquarePen size={18} />
                  Create
                </Button>
              </a>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
}

function MarketplaceSecondaryMenu() {
  return (
    <div className="w-full bg-[#010313] border-t border-white/20">
      <div className="container-main flex items-center h-7 p-5 overflow-x-auto">
        <ul className="flex gap-4 md:gap-10 text-white text-sm font-normal whitespace-nowrap">
          <li className="cursor-pointer">Images</li>
          <li className="cursor-pointer">Videos</li>
          <li className="cursor-pointer">Audios</li>
          <li className="cursor-pointer">Gifs</li>
          <li className="cursor-pointer">Fonts</li>
        </ul>
      </div>
    </div>
  );
}

export default function MarketplaceNavbarWithMenu() {
  return (
    <>
      <MarketplaceNavbar />
      <MarketplaceSecondaryMenu />
    </>
  );
}