import { useState } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { 
  Sheet, 
  SheetContent, 
  SheetTrigger, 
  SheetTitle 
} from "@/components/ui/sheet";
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
import { Menu, X, ChevronDown, Plus, Minus, LineChart, Car, Calculator, CreditCard } from "lucide-react";


export default function Header() {
  const [openSubmenu, setOpenSubmenu] = useState<string | null>(null);
  const toggleSubmenu = (title: string) => {
    setOpenSubmenu(prev => prev === title ? null : title);
  };
  const menuItems = [
    {
      title: "Credit Score",
      href: "/credit-score",
      icon: <CreditCard className="w-4 h-4 mr-2" />,
    },
    {
      title: "Personal Loan",
      icon: <LineChart className="w-4 h-4 mr-2" />,
      submenu: [
        ["Personal Loans in UAE", "Personal Loans for Expats"],
        ["Personal Loans for UAE Nationals", "Personal Loan with Salary Transfer"],
        ["Personal Loan without Salary Transfer", "Personal Loan for Non-Listed Companies"],
        ["Personal Loan for Self-Employed"],
      ],
    },
    {
      title: "Car Loans",
      icon: <Car className="w-4 h-4 mr-2" />,
      submenu: [
        ["Car Loans", "Best Car Loan in Use"],
        ["Used Car Loan", "Car Loan Interest Rate in UAE"],
        ["Zero Down Payment Car Loan", "Home Loan"],
        ["Home Loans for Expats", "Home Loan Eligibility in UAE"],
        ["Home Loan Pre-Approval in UAE", "Home Loan Balance Transfer in UAE"],
      ],
    },
    {
      title: "Financial Calculators",
      icon: <Calculator className="w-4 h-4 mr-2" />,
      submenu: [
        ["Financial Calculators"],
        ["Personal Loan Calculator"],
        ["Car Loan Calculator"],
      ],
    },
  ];

  return (
    <nav className="bg-white shadow-sm">
      <div className="container mx-auto px-4">
        <div className="flex h-16 items-center justify-between">
          {/* Logo */}
          <Link href="/" className="text-xl font-bold text-blue-600">
            Paisabazaar
          </Link>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center gap-6">
            {menuItems.map((item) => (
              item.submenu ? (
                <DropdownMenu key={item.title}>
                  <DropdownMenuTrigger className="flex items-center gap-1 text-gray-600 hover:text-blue-600 group">
                    {item.icon}
                    {item.title}
                    <ChevronDown className="w-4 h-4 ml-1 transition-transform group-data-[state=open]:rotate-180" />
                  </DropdownMenuTrigger>
                  <DropdownMenuContent className="w-[800px] p-4">
                    <div className="grid grid-cols-2 gap-4">
                      {item.submenu.map((column, colIndex) => (
                        <div key={colIndex} className="space-y-2">
                          {column.map((subItem) => (
                            <DropdownMenuItem key={subItem} asChild>
                              <Link href="#" className="hover:text-blue-600 flex items-center">
                                {item.icon}
                                {subItem}
                              </Link>
                            </DropdownMenuItem>
                          ))}
                        </div>
                      ))}
                    </div>
                  </DropdownMenuContent>
                </DropdownMenu>
              ) : (
                <Link
                  key={item.title}
                  href={item.href!}
                  className="text-gray-600 hover:text-blue-600 flex items-center"
                >
                  {item.icon}
                  {item.title}
                </Link>
              )
            ))}
          </div>

          {/* CTA Button - Desktop */}
          <Button className="hidden md:flex" variant="default">
            Free Credit Score
          </Button>

          {/* Mobile Menu Trigger */}
          <Sheet>
        <SheetTrigger className="md:hidden">
          <Menu className="h-6 w-6" />
        </SheetTrigger>
        <SheetContent side="right" className="w-[85%] max-w-sm">
          <VisuallyHidden>
            <SheetTitle>Main Navigation</SheetTitle>
          </VisuallyHidden>
          
          <div className="flex flex-col h-full">
            <div className="flex items-center justify-between mb-8">
              <span className="text-xl font-bold text-blue-600">Paisabazaar</span>
              <SheetTrigger>
                <X className="h-6 w-6" />
              </SheetTrigger>
            </div>

            <div className="flex-1 overflow-y-auto space-y-4">
              {menuItems.map((item) => (
                item.submenu ? (
                  <div key={item.title} className="space-y-2">
                    <div className="flex items-center justify-between">
                      <button
                        onClick={() => toggleSubmenu(item.title)}
                        className="flex items-center gap-2 w-full text-left"
                        aria-expanded={openSubmenu === item.title}
                        aria-controls={`submenu-${item.title}`}
                      >
                        {item.icon}
                        <span className="font-medium text-gray-900">{item.title}</span>
                        <span className="ml-auto">
                          {openSubmenu === item.title ? (
                            <Minus className="w-4 h-4" />
                          ) : (
                            <Plus className="w-4 h-4" />
                          )}
                        </span>
                      </button>
                    </div>
                    
                    {openSubmenu === item.title && (
                      <div 
                        id={`submenu-${item.title}`}
                        className="ml-6 space-y-2"
                      >
                        {item.submenu.flat().map((subItem) => (
                          <Link
                            key={subItem}
                            href="#"
                            className="block text-gray-600 hover:text-blue-600 flex items-center"
                          >
                            {item.icon}
                            {subItem}
                          </Link>
                        ))}
                      </div>
                    )}
                  </div>
                ) : (
                  <Link
                    key={item.title}
                    href={item.href!}
                    className="block text-gray-900 hover:text-blue-600 flex items-center"
                  >
                    {item.icon}
                    {item.title}
                  </Link>
                )
              ))}
            </div>

            <Button className="mt-4 w-full">Free Credit Score</Button>
          </div>
        </SheetContent>
      </Sheet>
        </div>
      </div>
    </nav>
  );
}