"use client";

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

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

export function Header({
  headerRef,
  sidebarOpen,
  sidebarReportOpen,
  onToggleSidebar,
  onToggleSidebarReport,
  settingsOpen,
  userMenuOpen,
  onToggleSettings,
  onCloseSettings,
  onToggleUserMenu,
  onOpenCommonSettings,
}: HeaderProps) {
  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-2 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",
                sidebarOpen
                  ? "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",
                sidebarReportOpen
                  ? "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>
          </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 rounded-lg border border-transparent px-3 py-1.5 transition",
                  getPrimaryHoverClasses()
                )}
              >
                <LayoutDashboard size={18} /> Dashboard
              </Link>
              <button
                onClick={onToggleSidebar}
                className={combineClasses(
                  "flex items-center gap-1.5",
                  getPrimaryButtonClasses(sidebarOpen)
                )}
              >
                <Menu size={18} /> Transactions
              </button>
              <button
                onClick={onToggleSidebarReport}
                className={combineClasses(
                  "flex items-center gap-1.5",
                  getPrimaryButtonClasses(sidebarReportOpen)
                )}
              >
                <FileText size={18} /> Reports
              </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>
  );
}