"use client";
import Link from "next/link";
import Image from "next/image";
import { Menu, ChevronDown, ChevronUp, ArrowRight } from "lucide-react";
import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "./ui/sheet";
import { useState } from "react";
import { StickyNote } from 'lucide-react';


const megaMenuData = {
  features: [
    {
      category: "AI Design",
      items: [
        {
          icon: StickyNote,
          title: "AI Social Media Content Generator",
          description: "Create stunning slides in minutes with our AI tool",
          route: "/ai-content-generator"
        },
        {
          icon: StickyNote,
          title: "AI Thumbnail Maker",
          description: "Craft eye-catching thumbnails fast",
          route: "/ai-image-generator"
        },
        {
          icon: StickyNote,
          title: "AI-Powered Meta Ads Optimization",
          description: "Create high-converting ads in seconds",
          route: "/ai-meta-ads-optimization"
        }
      ]
    },
    {
      category: "seo-geo-article-writer",
      items: [
        {
          icon: StickyNote,
          title: "seo-geo-article-writer",
          description: "Turn words into captivating videos",
          route: "/seo-geo-article-writer"
        },
        {
          icon:StickyNote,
          title: "ai-video-generator",
          description: "Repurpose content from YouTube, TikTok",
          route: "/ai-video-generator"
        },
        {
          icon:StickyNote,
          title: "AI Text to Speech",
          description: "Convert text to life-like speech",
          route: "/aivideo-generation"
        }
      ]
    },
    {
      category: "AI Writer",
      items: [
        {
          icon: StickyNote,
          title: "AI Blog Writer",
          description: "Turn ideas into SEO-optimized posts",
          route: "/ai-writer"
        },
        {
          icon: StickyNote,
          title: "AI Essay Writer",
          description: "Get top grades with smart AI help",
          route: "/ai-writer"
        },
        {
          icon: StickyNote,
          title: "AI Article Writer",
          description: "Transform ideas into engaging stories",
          route: "/ai-writer"
        }
      ]
    },
    {
      category: "Social Media AI",
      items: [
        {
          icon: StickyNote,
          title: "Social Media Scheduler",
          description: "Plan your success ahead of time",
          route: "/social-media"
        },
        {
          icon: StickyNote,
          title: "Social Media Post Generator",
          description: "Craft captivating posts in seconds",
          route: "/social-media"
        },
        {
          icon: StickyNote,
          title: "Social Media Analytics",
          description: "Unlock actionable insights",
          route: "/social-media"
        }
      ]
    }
  ]
};

export default function Header() {
  const [isOpen, setIsOpen] = useState(false);
  const [activeMenu, setActiveMenu] = useState<string | null>(null);

  const handleClose = () => {
    setIsOpen(false);
  };

  return (
    <nav className="flex items-center justify-between pr-4 absolute z-50 w-full">
      <Link href="/">
        <div className="flex items-center bg-white py-3 pr-6 pl-5 shadow-sm rounded-r-2xl">
          <Image src="/planpost.png" alt="Logo" width={24} height={24} />
          <span className="ml-1 text-2xl font-bold text-transparent bg-clip-text bg-text-gradient">
            PlanPost AI
          </span>
        </div>
      </Link>

      {/* Desktop Menu */}
      <div className="hidden md:flex items-center space-x-16 px-8 pt-5 pb-4 rounded-b-3xl text-gray-800 font-medium bg-white shadow-sm">
        <Link href="/" className="hover:text-purple-600">
          Home
        </Link>
        
        <div 
          className="relative group"
          onMouseEnter={() => setActiveMenu('features')}
          onMouseLeave={() => setActiveMenu(null)}
        >
          <button className="flex items-center gap-1 hover:text-purple-600">
            Feature
            {activeMenu === 'features' ? (
              <ChevronUp className="w-4 h-4" />
            ) : (
              <ChevronDown className="w-4 h-4" />
            )}
          </button>
          
          {activeMenu === 'features' && (
              <div className="absolute left-1/2 -translate-x-1/2 top-full pt-4 w-[900px] ">
              <div className="bg-white rounded-2xl shadow-2xl border border-gray-100 p-8">
                <div className="grid grid-cols-4 gap-10">
                  {megaMenuData.features.map((category, idx) => (
                    <div key={idx}>
                      <h3 className="text-sm font-bold text-purple-600 mb-4 pb-2 border-b-2 border-purple-200">
                        {category.category}
                      </h3>
                      <div className="space-y-3">
                        {category.items.map((item, itemIdx) => (
                          <Link
                            key={itemIdx}
                            href={item.route}
                            className="group/item block p-3 rounded-xl hover:bg-gradient-to-r hover:from-purple-50 hover:to-pink-50 transition-all duration-200"
                          >
                            <div className="flex items-start gap-3">
                              <item.icon className="w-5 h-5 text-blue-500" />
                              <div className="flex-1 min-w-0">
                                <div className="flex items-center gap-1">
                                  <h4 className="font-semibold text-sm text-gray-900 group-hover/item:text-purple-600 transition-colors">
                                    {item.title}
                                  </h4>
                                  <ArrowRight className="w-3 h-3 text-purple-600 opacity-0 group-hover/item:opacity-100 transition-opacity" />
                                </div>
                                <p className="text-xs text-gray-500 mt-1 leading-tight">
                                  {item.description}
                                </p>
                              </div>
                            </div>
                          </Link>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}
        </div>

        <Link href="/#pricingSection" className="hover:text-purple-600">
          Pricing
        </Link>
        
        <Link href="/contact" className="hover:text-purple-600">
          Contact
        </Link>
      </div>

      {/* Login & Sign Up Buttons */}
      <div className="hidden md:flex space-x-4">
        <Link href="https://dashboard.planpostai.com/">
          <button className="font-bold px-5 py-2 border-[1px] border-[#6A47ED] text-[#6A47ED] rounded-xl hover:bg-purple-100">
            Log in
          </button>
        </Link>
        <Link href="https://dashboard.planpostai.com/">
          <button className="font-bold px-5 py-2 bg-[#6A47ED] text-white rounded-xl hover:bg-purple-700">
            Sign Up
          </button>
        </Link>
      </div>

      {/* Mobile Menu with Sheet Component */}
      <div className="md:hidden">
        <Sheet open={isOpen} onOpenChange={setIsOpen}>
          <SheetTrigger asChild>
            <button className="text-gray-800 focus:outline-none mt-2">
              <Menu className="w-8 h-8" />
              <span className="sr-only">Open menu</span>
            </button>
          </SheetTrigger>
          <SheetContent side="right" className="w-[300px] sm:w-[350px] p-0">
            <div className="flex flex-col h-full overflow-y-auto">
              <div className="p-6">
                <SheetTitle className="sr-only">Navigation Menu</SheetTitle>
                <div className="flex items-center mb-8">
                  <Image
                    src="/planpost.png"
                    alt="Logo"
                    width={24}
                    height={24}
                  />
                  <span className="ml-1 text-2xl font-bold text-transparent bg-clip-text bg-text-gradient">
                    PlanPost AI
                  </span>
                </div>
                <ul className="flex flex-col space-y-6 text-gray-800 font-medium">
                  <li>
                    <Link
                      href="/"
                      className="hover:text-purple-600 text-lg"
                      onClick={handleClose}
                    >
                      Home
                    </Link>
                  </li>
                  <li>
                    <div className="space-y-3 ">
                      <p className="text-lg font-semibold text-purple-600">Features</p>
                      {megaMenuData.features.map((category, idx) => (
                        <div key={idx} className="ml-4 space-y-2">
                          <p className="text-sm font-bold text-gray-700">{category.category}</p>
                          {category.items.map((item, itemIdx) => (
                            <Link
                              key={itemIdx}
                              href={item.route}
                              className="block text-sm text-gray-600 hover:text-purple-600 ml-2"
                              onClick={handleClose}
                            >
                              <item.icon className="w-5 h-5 text-blue-500" />
                            </Link>
                          ))}
                        </div>
                      ))}
                    </div>
                  </li>
                  <li>
                    <Link
                      href="/#pricingSection"
                      className="hover:text-purple-600 text-lg"
                      onClick={handleClose}
                    >
                      Pricing
                    </Link>
                  </li>
                  <li>
                    <Link
                      href="/contact"
                      className="hover:text-purple-600 text-lg"
                      onClick={handleClose}
                    >
                      Contact
                    </Link>
                  </li>
                </ul>
              </div>

              <div className="mt-auto p-6 border-t border-gray-200">
                <div className="flex flex-col space-y-4">
                  <Link
                    href="https://dashboard.planpostai.com/"
                    className="w-full"
                    onClick={handleClose}
                  >
                    <button className="w-full font-bold px-5 py-3 border-[1px] border-[#6A47ED] text-[#6A47ED] rounded-xl hover:bg-purple-100">
                      Log in
                    </button>
                  </Link>
                  <Link
                    href="https://dashboard.planpostai.com/"
                    className="w-full"
                    onClick={handleClose}
                  >
                    <button className="w-full font-bold px-5 py-3 bg-[#6A47ED] text-white rounded-xl hover:bg-purple-700">
                      Sign Up
                    </button>
                  </Link>
                </div>
              </div>
            </div>
          </SheetContent>
        </Sheet>
      </div>
    </nav>
  );
}