"use client";

import { Settings, Landmark, DollarSign, Settings2, DoorClosedLocked, LayoutGrid } from "lucide-react";
import { combineClasses, getMenuItemClasses, getPrimaryTextClass, getPrimaryBorderClass, getPrimaryBgClass } from "@/utils/layout-utils";

interface SettingsMenuButtonProps {
  className?: string;
  isOpen: boolean;
  onToggle: () => void;
  onClose: () => void;
  onOpenCommonSettings: () => void;
}

type SettingsMenuItem = {
  href: string;
  label: string;
  icon: React.ComponentType<{ size?: number; className?: string }>;
  isModal?: boolean;
};

const SETTINGS_MENU_ITEMS: SettingsMenuItem[] = [
  {
    href: "/settings/banks",
    label: "Bank Setting",
    icon: Landmark,
  },
  {
    href: "/settings/dashboard",
    label: "Dashboard Settings",
    icon: DollarSign,
  },
  {
    href: "/settings/common",
    label: "Common Settings",
    icon: Settings2,
    isModal: true,
  },
  {
    href: "/settings/assets",
    label: "Asset Definition",
    icon: DoorClosedLocked,
  },
];

export function SettingsMenuButton({
  className,
  isOpen,
  onToggle,
  onClose,
  onOpenCommonSettings,
}: SettingsMenuButtonProps) {
  return (
    <div
      data-header-settings
      className={combineClasses("relative", className)}
    >
      <button
        onClick={(e) => {
          e.stopPropagation();
          onToggle();
        }}
        className={combineClasses(
          "inline-flex h-10 w-10 items-center justify-center rounded-xl border bg-white shadow-sm transition hover:-translate-y-0.5",
          getPrimaryBorderClass(30),
          getPrimaryTextClass(),
          getPrimaryBgClass(10)
        )}
        aria-label="Settings"
      >
        <Settings size={20} />
      </button>

      {isOpen && (
        <div className="absolute right-0 mt-2 w-56 rounded-lg border border-slate-200 bg-white/95 p-2 shadow-lg backdrop-blur">
          {SETTINGS_MENU_ITEMS.map((item) => {
            const { href, label, icon: Icon, isModal } = item;
            if (isModal) {
              return (
                <button
                  key={label}
                  onClick={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    onClose();
                    onOpenCommonSettings();
                  }}
                  className={combineClasses(getMenuItemClasses(), "w-full text-left text-xs")}
                >
                  <Icon size={16} className={getPrimaryTextClass()} />
                  {label}
                </button>
              );
            }
            return (
              <a
                key={label}
                href={href}
                className={combineClasses(getMenuItemClasses(), "text-xs")}
              >
                <Icon size={16} className={getPrimaryTextClass()} />
                {label}
              </a>
            );
          })}
        </div>
      )}
    </div>
  );
}