'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/utils';

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

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

export function Navigation({ className, navigationTree }: NavigationProps) {
  const pathname = usePathname();

  return (
    <nav className={cn('flex items-center gap-6', className)}>
      {navigationTree.map((node) => {
        const isActive = pathname === node.url;
        const hasChildren = node.children && node.children.length > 0;

        return (
          <div key={node.id} className="relative group">
            <Link
              href={node.url}
              target={node.openInNewTab ? '_blank' : undefined}
              className={cn(
                'text-sm font-medium transition-colors hover:text-crimson-red inline-flex items-center gap-1',
                isActive ? 'text-crimson-red' : 'text-text-white'
              )}
            >
              {node.label}
              {hasChildren && (
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <polyline points="6 9 12 15 18 9" />
                </svg>
              )}
            </Link>

            {hasChildren && (
              <div className="absolute top-full left-0 mt-2 w-48 bg-deep-black border border-soft-gray-border rounded shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50 flex flex-col py-1">
                {node.children.map(child => {
                  const hasSubChildren = child.children && child.children.length > 0;
                  return (
                    <div key={child.id} className="relative group/sub">
                      <Link
                        href={child.url}
                        target={child.openInNewTab ? '_blank' : undefined}
                        className="px-4 py-2 text-sm text-text-white hover:text-crimson-red hover:bg-soft-gray-border transition-colors whitespace-nowrap flex items-center justify-between"
                      >
                        {child.label}
                        {hasSubChildren && (
                          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                            <polyline points="9 18 15 12 9 6" />
                          </svg>
                        )}
                      </Link>
                      {hasSubChildren && (
                        <div className="absolute top-0 left-full ml-0 w-48 bg-deep-black border border-soft-gray-border rounded shadow-xl opacity-0 invisible group-hover/sub:opacity-100 group-hover/sub:visible transition-all z-50 flex flex-col py-1">
                          {child.children.map(subChild => (
                            <Link
                              key={subChild.id}
                              href={subChild.url}
                              target={subChild.openInNewTab ? '_blank' : undefined}
                              className="px-4 py-2 text-sm text-text-white hover:text-crimson-red hover:bg-soft-gray-border transition-colors whitespace-nowrap"
                            >
                              {subChild.label}
                            </Link>
                          ))}
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        );
      })}

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