// components/MobileMenu.tsx

"use client";

import * as React from "react";
import Link from "next/link";
import { useRouter, usePathname } from "next/navigation";
import { MenuSection, MenuItem } from "@/config/menuConfig";
import { cn } from "@/lib/utils";
import { Drawer, DrawerContent, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer";
import { Button } from "@/components/ui/button";
import { filterActiveMenus, filterActiveAdditionalMenus } from "@/hooks/use-active-menus";

interface MobileMenuProps {
  lng: string;
  onClose: () => void;
  activeMenus?: Record<string, boolean>;
  domainMain?: MenuSection[]; // 헤더에서 계산된 도메인별 메인 메뉴
  domainAdditional?: MenuItem[]; // 헤더에서 계산된 도메인별 추가 메뉴
}

export function MobileMenu({ 
  lng, 
  onClose, 
  activeMenus = {},
  domainMain = [],
  domainAdditional = []
}: MobileMenuProps) {
  const router = useRouter();
  
  const handleLinkClick = (href: string) => {
    router.push(href);
    onClose();
  };

  // 활성 메뉴만 필터링 (activeMenus가 빈 객체면 모든 메뉴 표시)
  const main = Object.keys(activeMenus).length > 0 
    ? filterActiveMenus(domainMain, activeMenus)
    : domainMain;
    
  const additional = Object.keys(activeMenus).length > 0
    ? filterActiveAdditionalMenus(domainAdditional, activeMenus)
    : domainAdditional;

  return (
    <Drawer open={true} onOpenChange={onClose}>
      <DrawerTrigger asChild>
      </DrawerTrigger>
      <DrawerTitle />
      <DrawerContent className="max-h-[60vh] p-0">
        <div className="overflow-auto p-6">
          <nav>
            <ul className="space-y-4">
              {/* 메인 네비게이션 섹션 - 도메인별 활성화된 메뉴만 표시 */}
              {main.map((section: MenuSection) => (
                // 섹션에 아이템이 있는 경우에만 표시
                section.items.length > 0 && (
                  <li key={section.title}>
                    <h3 className="text-md font-medium">{section.title}</h3>
                    <ul className="mt-2 space-y-2">
                      {section.items.map((item: MenuItem) => (
                        <li key={item.title}>
                          <Link
                            href={`/${lng}${item.href}`}
                            className="text-indigo-600"
                            onClick={() => handleLinkClick(item.href)}
                          >
                            {item.title}
                            {item.label && (
                              <span className="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs text-[#000000]">
                                {item.label}
                              </span>
                            )}
                          </Link>
                          {item.description && (
                            <p className="text-xs text-gray-500">{item.description}</p>
                          )}
                        </li>
                      ))}
                    </ul>
                  </li>
                )
              ))}
              
              {/* 추가 네비게이션 항목 - 도메인별 활성화된 메뉴만 표시 */}
              {additional.map((item: MenuItem) => (
                <li key={item.title}>
                  <Link
                    href={`/${lng}${item.href}`}
                    className="block text-sm text-indigo-600"
                    onClick={() => handleLinkClick(`/${lng}${item.href}`)}
                  >
                    {item.title}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>
        </div>
      </DrawerContent>
    </Drawer>
  );
}