"use client";

import Image from "next/image";
import Link from "next/link";
import { FileText, Menu, LayoutDashboard, Search } from "lucide-react";
import { SettingsMenuButton } from "./SettingsMenuButton";
import { UserMenuButton } from "./UserMenuButton";
import { TopBanner } from "./TopBanner";
import { getPrimaryButtonClasses, getPrimaryTextClass, combineClasses } from "@/utils/layout-utils";
import { menuGroups } from "@/lib/menuGroup";
import { menuReport } from "@/lib/menuReport";
import { menuDeepdex } from "@/lib/menuDeepdex";

interface HeaderProps {
  headerRef: React.RefObject<HTMLElement | null>;
  sidebarOpen: boolean;
  sidebarReportOpen: boolean;
  sidebarDeepdexOpen: boolean;
  onToggleSidebar: () => void;
  onToggleSidebarReport: () => void;
  onToggleSidebarDeepdex: () => void;
  settingsOpen: boolean;
  userMenuOpen: boolean;
  onToggleSettings: () => void;
  onCloseSettings: () => void;
  onToggleUserMenu: () => void;
  onOpenCommonSettings: () => void;
  pathname: string;
}

//Collect all transaction hrefs from menuGroups
const transactionHrefs = menuGroups.flatMap((item) =>
  "children" in item && item.children
    ? item.children.map((c: any) => c.href)
    : "href" in item
    ? [item.href]
    : []
);

//Collect all report hrefs from menuReport
const reportHrefs = menuReport.flatMap((item) =>
  item.children.map((c: any) => c.href)
);

//Collect all deepdex hrefs from menuDeepdex
const deepdexHrefs = menuDeepdex.flatMap((item) =>
  item.children.map((c: any) => c.href.split("?")[0])
);

export function Header({
  headerRef,
  sidebarOpen,
  sidebarReportOpen,
  sidebarDeepdexOpen,
  onToggleSidebar,
  onToggleSidebarReport,
  onToggleSidebarDeepdex,
  settingsOpen,
  userMenuOpen,
  onToggleSettings,
  onCloseSettings,
  onToggleUserMenu,
  onOpenCommonSettings,
  pathname,
}: HeaderProps) {

    const isTransactions = sidebarOpen || transactionHrefs.some((href) => pathname?.startsWith(href));
    const isReports = sidebarReportOpen || reportHrefs.some((href) => pathname?.startsWith(href));
    const isDeepdex = sidebarDeepdexOpen || deepdexHrefs.some((href) => pathname?.startsWith(href));
    const isDashboard = !isTransactions && !isReports && !isDeepdex;

  return (
    <header
      ref={headerRef}
      className="fixed top-0 left-0 z-50 w-full border-b border-white/60 bg-white/95 shadow-[0_18px_40px_-28px_rgba(66,139,77,0.55)] backdrop-blur"
    >
      <TopBanner />

      <div className="container mx-auto w-full px-4 py-3 sm:px-6">
        {/* Mobile Layout */}
        <div className="flex flex-col gap-3 lg:hidden">
          <div className="flex items-center justify-between gap-3">
            <Image
              src="/assets/logooxy.png"
              alt="Oxyfinz Logo"
              width={120}
              height={24}
              priority
              className="w-24 select-none sm:w-28"
            />
            <div className="flex items-center gap-2">
              <SettingsMenuButton
                isOpen={settingsOpen}
                onToggle={onToggleSettings}
                onClose={onCloseSettings}
                onOpenCommonSettings={onOpenCommonSettings}
              />
              <UserMenuButton
                isOpen={userMenuOpen}
                onToggle={onToggleUserMenu}
              />
            </div>
          </div>

          <div className="grid grid-cols-3 gap-2">
            <button
              onClick={onToggleSidebar}
              className={combineClasses(
                "inline-flex w-full items-center justify-center gap-1.5 rounded-xl border px-3 py-2 text-[11px] font-semibold uppercase tracking-wide shadow-sm transition",
                isTransactions
                  ? "border-[#428B4D]/40 bg-[#428B4D]/10 text-[#428B4D]"
                  : "border-gray-200 bg-white text-slate-600 hover:border-[#428B4D]/40 hover:bg-[#428B4D]/10 hover:text-[#428B4D]"
              )}
              aria-label="Toggle transactions menu"
            >
              <Menu size={18} className={getPrimaryTextClass()} />
              Transactions
            </button>
            <button
              onClick={onToggleSidebarReport}
              className={combineClasses(
                "inline-flex w-full items-center justify-center gap-1.5 rounded-lg border px-3 py-2 text-[11px] font-semibold uppercase tracking-wide shadow-sm transition",
                isReports
                  ? "border-[#428B4D]/40 bg-[#428B4D]/10 text-[#428B4D]"
                  : "border-gray-200 bg-white text-slate-600 hover:border-[#428B4D]/40 hover:bg-[#428B4D]/10 hover:text-[#428B4D]"
              )}
              aria-label="Toggle reports menu"
            >
              <FileText size={18} className={getPrimaryTextClass()} />
              Reports
            </button>
            <button
              onClick={onToggleSidebarDeepdex}
              className={combineClasses(
                "inline-flex w-full items-center justify-center gap-1.5 rounded-lg border px-3 py-2 text-[11px] font-semibold uppercase tracking-wide shadow-sm transition",
                isDeepdex
                  ? "border-[#428B4D]/40 bg-[#428B4D]/10 text-[#428B4D]"
                  : "border-gray-200 bg-white text-slate-600 hover:border-[#428B4D]/40 hover:bg-[#428B4D]/10 hover:text-[#428B4D]"
              )}
              aria-label="Toggle deepdex menu"
            >
              <Search size={18} className={getPrimaryTextClass()} />
              Deepdex
            </button>
          </div>
        </div>

        {/* Desktop Layout */}
        <div className="hidden flex-col gap-3 lg:flex lg:flex-row lg:items-center lg:justify-between">
          <div className="flex items-center justify-between gap-3">
            <Image
              src="/assets/logooxy.png"
              alt="Oxyfinz Logo"
              width={150}
              height={28}
              priority
              className="w-24 select-none sm:w-28 md:w-[150px]"
            />
          </div>

          <div className="flex flex-col gap-4 lg:flex-1 lg:flex-row lg:items-center lg:gap-6">
            <nav className="flex items-center gap-4 text-sm font-semibold text-slate-600">
              <Link
                href="/dashboard"
                className={combineClasses(
                  "flex items-center gap-1.5 group",
                  getPrimaryButtonClasses(isDashboard)
                )}
              >
                <LayoutDashboard size={18} className={isDashboard ? "text-[#428B4D]" : "text-slate-500 group-hover:text-[#428B4D]"} />
                <span className={isDashboard ? "text-[#428B4D]" : "text-slate-600 group-hover:text-[#428B4D]"}>Dashboard</span>
              </Link>
              <button
                onClick={onToggleSidebar}
                className={combineClasses(
                  "flex items-center gap-1.5 group",
                  getPrimaryButtonClasses(isTransactions)
                )}
              >
                <Menu size={18} className={isTransactions ? "text-[#428B4D]" : "text-slate-500 group-hover:text-[#428B4D]"} />
                <span className={isTransactions ? "text-[#428B4D]" : "text-slate-600 group-hover:text-[#428B4D]"}>Transactions</span>
              </button>
              <button
                onClick={onToggleSidebarReport}
                className={combineClasses(
                  "flex items-center gap-1.5 group",
                  getPrimaryButtonClasses(isReports)
                )}
              >
                <FileText size={18} className={isReports ? "text-[#428B4D]" : "text-slate-500 group-hover:text-[#428B4D]"} />
                <span className={isReports ? "text-[#428B4D]" : "text-slate-600 group-hover:text-[#428B4D]"}>Reports</span>
              </button>
              <button
                onClick={onToggleSidebarDeepdex}
                className={combineClasses(
                  "flex items-center gap-1.5 group",
                  getPrimaryButtonClasses(isDeepdex)
                )}
              >
                <Search size={18} className={isDeepdex ? "text-[#428B4D]" : "text-slate-500 group-hover:text-[#428B4D]"} />
                <span className={isDeepdex ? "text-[#428B4D]" : "text-slate-600 group-hover:text-[#428B4D]"}>Deepdex</span>
              </button>
            </nav>

            <div className="flex items-center gap-3 self-end lg:ml-auto lg:self-auto">
              <SettingsMenuButton
                isOpen={settingsOpen}
                onToggle={onToggleSettings}
                onClose={onCloseSettings}
                onOpenCommonSettings={onOpenCommonSettings}
              />
              <UserMenuButton
                isOpen={userMenuOpen}
                onToggle={onToggleUserMenu}
              />
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}