'use client';

import { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Menu } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Sheet, SheetContent } from '@/components/ui/sheet';
import { cn } from '@/lib/utils';

import { NavNode } from '@/lib/navigation';

interface MobileMenuProps {
  className?: string;
  navigationTree: NavNode[];
}

export function MobileMenu({ className, navigationTree }: MobileMenuProps) {
  const [isOpen, setIsOpen] = useState(false);
  const pathname = usePathname();
  
  return (
    <div className={className}>
      <Button
        variant="ghost"
        size="icon"
        onClick={() => setIsOpen(true)}
        aria-label="メニューを開く"
        className="hover:bg-soft-dark text-text-white"
      >
        <Menu className="h-6 w-6" />
      </Button>
      
      <Sheet open={isOpen} onOpenChange={setIsOpen}>
        <SheetContent side="right" className="bg-deep-black border-l border-soft-gray-border">
          <nav className="flex flex-col gap-4 mt-8">
            {navigationTree.map((node) => {
              const isActive = pathname === node.url;
              const hasChildren = node.children && node.children.length > 0;
              
              return (
                <div key={node.id} className="flex flex-col gap-2">
                  <Link
                    href={node.url}
                    target={node.openInNewTab ? '_blank' : undefined}
                    onClick={() => setIsOpen(false)}
                    className={cn(
                      'text-lg font-medium transition-colors hover:text-crimson-red',
                      isActive ? 'text-crimson-red' : 'text-text-white'
                    )}
                  >
                    {node.label}
                  </Link>
                  {hasChildren && (
                    <div className="flex flex-col gap-2 pl-4 border-l border-soft-gray-border">
                      {node.children.map(child => {
                        const hasSubChildren = child.children && child.children.length > 0;
                        return (
                          <div key={child.id} className="flex flex-col gap-2">
                            <Link
                              href={child.url}
                              target={child.openInNewTab ? '_blank' : undefined}
                              onClick={() => setIsOpen(false)}
                              className={cn(
                                'text-base font-medium transition-colors hover:text-crimson-red',
                                pathname === child.url ? 'text-crimson-red' : 'text-text-light-gray'
                              )}
                            >
                              {child.label}
                            </Link>
                            {hasSubChildren && (
                              <div className="flex flex-col gap-2 pl-4 border-l border-soft-gray-border">
                                {child.children.map(subChild => (
                                  <Link
                                    key={subChild.id}
                                    href={subChild.url}
                                    target={subChild.openInNewTab ? '_blank' : undefined}
                                    onClick={() => setIsOpen(false)}
                                    className={cn(
                                      'text-sm font-medium transition-colors hover:text-crimson-red',
                                      pathname === subChild.url ? 'text-crimson-red' : 'text-text-light-gray/70'
                                    )}
                                  >
                                    {subChild.label}
                                  </Link>
                                ))}
                              </div>
                            )}
                          </div>
                        );
                      })}
                    </div>
                  )}
                </div>
              );
            })}

            {/* Blog button - styled as red button with white text */}
            <Link
              href="/blogs"
              onClick={() => setIsOpen(false)}
              className={cn(
                'px-4 py-2 rounded-lg text-lg font-medium transition-all text-center',
                pathname === '/blogs' 
                  ? 'bg-[#FF2A3D] text-white' 
                  : 'bg-[#E60023] text-white hover:bg-[#FF2A3D]'
              )}
            >
              ブログ
            </Link>
          </nav>
        </SheetContent>
      </Sheet>
    </div>
  );
}
