"use client";
import Link from "next/link";
import Image from "next/image";
import { Menu, ChevronDown, ChevronUp, ArrowRight, Sparkles, Zap, Palette, TrendingUp, FileText, Video, Megaphone, Calendar, BarChart } from "lucide-react";
import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "./ui/sheet";
import { useState } from "react";

const megaMenuData = [
  {
    icon: Sparkles,
    title: "AI Social Media Content Generator",
    description: "Create stunning social media posts in minutes",
    route: "/ai-content-generator",
    badge: "Popular"
  },
  {
    icon: Palette,
    title: "AI Image Generator",
    description: "Craft eye-catching thumbnails instantly",
    route: "/ai-image-generator",
    badge: "New"
  },
  {
    icon: TrendingUp,
    title: "AI-Powered Meta Ads Optimization",
    description: "Create high-converting ads in seconds",
    route: "/ai-meta-ads-optimization"
  },
  {
    icon: FileText,
    title: "SEO Geo Article Writer",
    description: "Location-optimized content that ranks",
    route: "/seo-geo-article-writer"
  },
  {
    icon: Video,
    title: "AI Video Generator",
    description: "Turn text into engaging videos automatically",
    route: "/ai-video-generator"
  },
  {
    icon: Zap,
    title: "AI Bulk Content",
    description: "SEO-optimized articles that drive traffic",
    route: "/bulk-content"
  },
  {
    icon: Calendar,
    title: "Social Media Scheduler",
    description: "Plan and automate your content calendar",
    route: "/social-media"
  },
  {
    icon: Megaphone,
    title: "Social Media Post Generator",
    description: "Captivate your audience with AI-powered posts",
    route: "/social-media"
  },
  {
    icon: BarChart,
    title: "Social Media Analytics",
    description: "Data-driven insights to grow your presence",
    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 transition-colors duration-200">
          Home
        </Link>
        
        <div 
          className="relative group"
          onMouseEnter={() => setActiveMenu('features')}
          onMouseLeave={() => setActiveMenu(null)}
        >
          <button className="flex items-center gap-1 hover:text-purple-600 transition-colors duration-200 font-semibold">
            Features
            {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-3 gap-6">
                  {megaMenuData.map((item, idx) => (
                    <Link
                      key={idx}
                      href={item.route}
                      className="group/item flex items-start gap-4 p-4 rounded-xl hover:bg-gradient-to-r hover:from-purple-50 hover:to-blue-50 transition-all duration-200 border border-transparent hover:border-purple-100"
                    >
                      <div className="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-purple-500 to-blue-500 rounded-lg flex items-center justify-center">
                        <item.icon className="w-6 h-6 text-white" />
                      </div>
                      
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 mb-1">
                          <h4 className="font-semibold text-gray-900 group-hover/item:text-purple-600 transition-colors text-sm leading-tight">
                            {item.title}
                          </h4>
                          {item.badge && (
                            <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
                              item.badge === "Popular" 
                                ? "bg-orange-100 text-orange-700" 
                                : "bg-green-100 text-green-700"
                            }`}>
                              {item.badge}
                            </span>
                          )}
                        </div>
                        <p className="text-xs text-gray-600 leading-relaxed mb-2">
                          {item.description}
                        </p>
                        <div className="flex items-center gap-1 text-purple-600 opacity-0 group-hover/item:opacity-100 transition-opacity">
                          <span className="text-xs font-medium">Learn more</span>
                          <ArrowRight className="w-3 h-3" />
                        </div>
                      </div>
                    </Link>
                  ))}
                </div>
                
                
              </div>
            </div>
          )}
        </div>

        <Link href="/#pricingSection" className="hover:text-purple-600 transition-colors duration-200">
          Pricing
        </Link>
        
        <Link href="/contact" className="hover:text-purple-600 transition-colors duration-200">
          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 transition-colors duration-200">
            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 transition-colors duration-200">
            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 transition-colors"
                      onClick={handleClose}
                    >
                      Home
                    </Link>
                  </li>
                  <li>
                    <div className="space-y-4">
                      <p className="text-lg font-semibold text-purple-600">Features</p>
                      <div className="grid gap-3 ml-2">
                        {megaMenuData.map((item, idx) => (
                          <Link
                            key={idx}
                            href={item.route}
                            className="flex items-center gap-3 p-3 rounded-lg hover:bg-purple-50 transition-colors"
                            onClick={handleClose}
                          >
                            <item.icon className="w-5 h-5 text-purple-600 flex-shrink-0" />
                            <div>
                              <p className="font-medium text-sm text-gray-900">{item.title}</p>
                              <p className="text-xs text-gray-600">{item.description}</p>
                            </div>
                          </Link>
                        ))}
                      </div>
                    </div>
                  </li>
                  <li>
                    <Link
                      href="/#pricingSection"
                      className="hover:text-purple-600 text-lg transition-colors"
                      onClick={handleClose}
                    >
                      Pricing
                    </Link>
                  </li>
                  <li>
                    <Link
                      href="/contact"
                      className="hover:text-purple-600 text-lg transition-colors"
                      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 transition-colors">
                      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 transition-colors">
                      Sign Up
                    </button>
                  </Link>
                </div>
              </div>
            </div>
          </SheetContent>
        </Sheet>
      </div>
    </nav>
  );
}