"use client";

import { X } from "lucide-react";
import { menuGroups } from "@/lib/menuGroup";
import { menuReport } from "@/lib/menuReport";
import { getPrimaryTextClass, getPrimaryHoverClasses, combineClasses } from "@/utils/layout-utils";

interface SidebarProps {
  isOpen: boolean;
  isReportOpen: boolean;
  onClose: () => void;
}

export function Sidebar({ isOpen, isReportOpen, onClose }: SidebarProps) {
  if (!isOpen && !isReportOpen) return null;

  return (
    <>
      <div
        className="fixed inset-0 z-40 bg-slate-900/25 backdrop-blur-sm"
        onClick={onClose}
      />
      <aside className="fixed left-4 right-4 top-[20px] bottom-[20px] z-50 w-auto overflow-y-auto hide-scrollbar rounded-lg border border-gray-200/80 bg-white/95 px-6 py-6 shadow-2xl ring-1 ring-black/5 backdrop-blur-lg sm:left-6 sm:right-auto sm:w-[min(20rem,calc(100%-3rem))]">
        <div className="mb-6 flex items-center justify-between">
          <div>
            <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
              Menu
            </p>
            <h2 className="text-lg font-semibold text-slate-700">
              {isOpen ? "Transactions" : "Reports"}
            </h2>
          </div>
          <button
            aria-label="Close Sidebar"
            onClick={onClose}
            className={combineClasses(
              "inline-flex h-8 w-8 items-center justify-center rounded-lg border border-gray-200 text-gray-500 transition",
              "hover:border-[#428B4D]",
              getPrimaryTextClass()
            )}
          >
            <X size={16} />
          </button>
        </div>

        <nav className="space-y-6 text-sm text-slate-600">
          {isOpen && (
            <>
              {/* Standalone menu items */}
              <div className="space-y-1">
                {menuGroups
                  .filter((item) => "href" in item && !("children" in item))
                  .map((item) => {
                    const { label, href, icon: Icon } = item as {
                      label: string;
                      href: string;
                      icon: any;
                    };
                    return (
                      <a
                        key={label}
                        href={href}
                        className={combineClasses(
                          "flex items-center gap-2 rounded-lg border border-transparent pl-0 pr-3 py-2 font-medium text-slate-700 transition",
                          getPrimaryHoverClasses()
                        )}
                      >
                        <Icon size={16} className={getPrimaryTextClass()} />
                        <span>{label}</span>
                      </a>
                    );
                  })}
              </div>
              {/* Menu groups with children */}
              {menuGroups
                .filter((item) => "children" in item && item.children)
                .map((item) => {
                  const { label, icon: Icon, children } = item as {
                    label: string;
                    icon: any;
                    children: any[];
                  };
                  return (
                    <div key={label} className="space-y-2">
                      <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-gray-400">
                        <Icon size={16} className={getPrimaryTextClass()} />
                        {label}
                      </div>
                      <ul className="space-y-1">
                        {children.map(
                          ({ label: childLabel, href, icon: ChildIcon }) => (
                            <li key={childLabel}>
                              <a
                                href={href}
                                className={combineClasses(
                                  "flex items-center gap-2 rounded-lg border border-transparent px-3 py-2 font-medium text-slate-700 transition",
                                  getPrimaryHoverClasses()
                                )}
                              >
                                <ChildIcon size={16} className={getPrimaryTextClass()} />
                                <span>{childLabel}</span>
                              </a>
                            </li>
                          )
                        )}
                      </ul>
                    </div>
                  );
                })}
            </>
          )}

          {isReportOpen &&
            menuReport.map(({ label, icon: Icon, children }) => (
              <div key={label} className="space-y-2">
                <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-gray-400">
                  <Icon size={16} className={getPrimaryTextClass()} />
                  {label}
                </div>
                <ul className="space-y-1">
                  {children.map(({ label: childLabel, href, icon: ChildIcon }) => (
                    <li key={childLabel}>
                      <a
                        href={href}
                        className={combineClasses(
                          "flex items-center gap-2 rounded-lg border border-transparent px-3 py-2 font-medium text-slate-700 transition",
                          getPrimaryHoverClasses()
                        )}
                      >
                        <ChildIcon size={16} className={getPrimaryTextClass()} />
                        <span>{childLabel}</span>
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
        </nav>
      </aside>
    </>
  );
}