"use client";

import { useState } from "react";
import { useRouter } from "nextjs-toploader/app";
import { Menu, Layout, Button, Dropdown, Drawer } from "antd";
import Image from "next/image";
import {
  HomeOutlined,
  UserOutlined,
  SettingOutlined,
  MenuOutlined,
} from "@ant-design/icons";
import Link from "next/link";
import { useSiteContext } from "../Context/SiteContext";
import { frontEndUrl } from "../utils/variables";

const { Header } = Layout;

export const MainHeader = () => {
  const { brandData } = useSiteContext();

  const [mobileSidebarVisible, setMobileSidebarVisible] = useState(false);
  const router = useRouter();

  const toggleMobileSidebar = () => {
    setMobileSidebarVisible(!mobileSidebarVisible);
  };

  const findMenuItemByKey = (items, key) => {
    for (let item of items) {
      if (item.key === key) return item;
      if (item.children) {
        const child = findMenuItemByKey(item.children, key);
        if (child) return child;
      }
    }
    return null;
  };

  const handleMenuClick = (info) => {
    const item = findMenuItemByKey(mainNavigation, info.key);
    if (item?.url) {
      router.push(item.url);
    }
    setMobileSidebarVisible(false);
  };

  const handleSettingsClick = ({ key }) => {
    const item = settingsMenuItems.find((i) => i.key === key);
    if (item?.url) {
      router.push(item.url);
    }
  };

  const handleUserClick = ({ key }) => {
    const item = userMenuItems.find((i) => i.key === key);
    if (item?.url) {
      router.push(item.url);
    } else if (key === "logout") {
      // handle logout logic here
    }
  };

  return (
    <>
      {/* Mobile Sidebar */}
      {/* <Drawer
        placement="left"
        closable={false}
        onClose={() => setMobileSidebarVisible(false)}
        open={mobileSidebarVisible}
        styles={{ body: { padding: 0 } }}
        className="md:hidden"
      >
        <Menu
          mode="inline"
          defaultSelectedKeys={["dashboard"]}
          defaultOpenKeys={["customers"]}
          items={mainNavigation}
          onClick={handleMenuClick}
        />
      </Drawer> */}

      {/* Header */}
      <Header
        style={{
          background: "#fff",
          padding: 0,
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
        }}
      >
        <div className="container flex justify-between items-center">
          {/* Left section: Logo + Mobile Menu */}
          <div className="flex items-center gap-3">
            {/* <Button
              type="text"
              onClick={toggleMobileSidebar}
              icon={<MenuOutlined />}
              className="md:hidden"
            /> */}
            <Link href={frontEndUrl}>
              <Image
                src="/images/logo.webp"
                width={100}
                height={40}
                alt="Logo"
                className="w-[100px]"
              />
            </Link>
          </div>

          {/* Right section: Icons */}
          {/* <div className="flex items-center gap-2">
            <Button
              type="text"
              icon={<HomeOutlined />}
              style={{ fontSize: 14 }}
              onClick={() => router.push("/dashboard")}
            />

            <Dropdown
              menu={{
                items: settingsMenuItems,
                onClick: handleSettingsClick,
              }}
              trigger={["click"]}
              placement="bottomRight"
            >
              <Button type="text" icon={<SettingOutlined />} />
            </Dropdown>

            <Dropdown
              menu={{
                items: userMenuItems,
                onClick: handleUserClick,
              }}
              trigger={["click"]}
              placement="bottomRight"
            >
              <Button type="text" icon={<UserOutlined />} />
            </Dropdown>
          </div> */}
        </div>
      </Header>
    </>
  );
};