"use client"
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,User} from "lucide-react";
import { useState } from "react";
import menuItems from '@/data/menuItems'; // Import the menuItems array
import { MenuItem } from '@/types/types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faWhatsapp } from '@fortawesome/free-brands-svg-icons';

export default function Header() {
  const [openSubmenu, setOpenSubmenu] = useState<string | null>(null);

  // Function to open WhatsApp
    const openWhatsApp = () => {
      const phoneNumber = '+971585561554'; // Replace with the recipient's phone number (including country code)
      const message = encodeURIComponent('Hello!.'); // Pre-filled message
      const url = `https://wa.me/${phoneNumber}?text=${message}`;
  
      // Open the URL in a new tab or window
      window.open(url, '_blank');
    };

  const toggleSubmenu = (title: string) => {
    setOpenSubmenu(prev => prev === title ? null : title);
  };

  return (
    <header className="sticky top-0 z-50 w-full border-b bg-white dark:border-gray-800 dark:bg-gray-950">
    <nav className="bg-white shadow-sm">
      <div className="container mx-auto px-4">
        <div className="flex h-14 items-center justify-between">{/*h-16*/ }
        <Link href="/" className="text-xl font-bold text-blue-600">
            <img 
              src="/newlogo25637.webp " 
              alt="BankFinders.com" 
              className="w-21 h-11.2" // Tailwind classes for width and height
            />
          </Link>

          {/* Desktop Navigation */}
          <div className="hidden md:flex  flex-grow justify-center gap-5">
            {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-auto max-w-max p-2" align="start" sideOffset={8}>
                  <div   className="grid gap-6 overflow-x-auto"   style={{ gridTemplateColumns: `repeat(${item.submenu.length}, minmax(200px, 1fr))`  }}>
                      {item.submenu.map((column, colIndex) => (
                        <div key={colIndex} className="space-y-3">
                          <h4 className="text-sm font-semibold text-gray-900 mb-2">
                            {column.title}
                          </h4>
                          {column.items.map((subItem) => {
                            // Log subItem for debugging
                            //console.log(subItem);

                            // Ensure href exists, otherwise provide a fallback
                            const href = subItem.href || "#";

                            return (
                                <DropdownMenuItem key={subItem.key} asChild>
                                    <Link href={href} className="hover:text-blue-600 text-sm">
                                        {subItem.itemName}
                                    </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="flex items-center justify-center w-8 h-8 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition">
  
   <FontAwesomeIcon icon={faWhatsapp} />
    </button>
   <button className="flex items-center justify-center w-8 h-8 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition">
      <User className="w-4 h-4" />
    </button> */}
    <div className="flex items-center space-x-4">
      {/* First Button */}
      <button
      className="flex items-center justify-center w-8 h-8 rounded-full bg-green-500 text-white hover:bg-green-600 transition"
      onClick={openWhatsApp} // Attach the click handler
    >
      <FontAwesomeIcon icon={faWhatsapp} />
    </button>


      {/* Second Button */}
      <button className="flex items-center justify-center w-8 h-8 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition">
        <User className="w-4 h-4" />
      </button>
    </div>
          {/* Mobile Menu */}
          <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">Banks Finders</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"
                          >
                            {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 className="ml-6 space-y-3">
                            {item.submenu.map((column, colIndex) => (
                              <div key={colIndex} className="space-y-2">
                                <h4 className="text-sm font-semibold text-gray-700 mt-2">
                                  {column.title}
                                </h4>
                                {/* {column.items.map((subItem) => (
                                  <Link
                                    key={subItem}
                                    href="#"
                                    className="block text-gray-600 hover:text-blue-600 text-sm"
                                  >
                                    {subItem}
                                  </Link>
                                ))} */}
                                {column.items.map((subItem) => {
                            // Log subItem for debugging
                                      console.log(subItem);

                                      // Ensure href exists, otherwise provide a fallback
                                      const href = subItem.href || "#";

                                      return (
                                         
                                           <Link
                                           key={subItem.key} 
                                           href="#"
                                           className="block text-gray-600 hover:text-blue-600 text-sm">
                                           {subItem.itemName}
                                         </Link>
                                      );
                        })}
                              </div>
                            ))}
                          </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>

                <div className="flex items-center space-x-4">
      {/* First Button */}
      <button
      className="flex items-center justify-center w-8 h-8 rounded-full bg-green-500 text-white hover:bg-green-600 transition"
      onClick={openWhatsApp} // Attach the click handler
    >
      <FontAwesomeIcon icon={faWhatsapp} />
    </button>

      {/* Second Button */}
      <button className="flex items-center justify-center w-8 h-8 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition">
        <User className="w-4 h-4" />
      </button>
    </div>
              </div>
            </SheetContent>
          </Sheet>
        </div>
      </div>
    </nav>
    </header>
  );
}