'use client';

import { usePathname, useRouter } from 'next/navigation';
import { useAuth } from '@/lib/auth-context';

interface NavItem {
  label: string;
  icon: string;
  path: string;
}

const NAV_ITEMS: NavItem[] = [
  { label: '대시보드', icon: 'dashboard', path: '' },
  { label: '검사 템플릿', icon: 'assignment', path: '/templates' },
  { label: '검사 실행', icon: 'fact_check', path: '/inspections' },
  { label: '알람', icon: 'notifications', path: '/alarms' },
];

export function TopNav({ tenantId, tenantName }: { tenantId: string; tenantName?: string }) {
  const { user, logout } = useAuth();
  const router = useRouter();
  const pathname = usePathname();

  const isActive = (path: string) => {
    const fullPath = `/${tenantId}${path}`;
    if (path === '') return pathname === fullPath;
    return pathname.startsWith(fullPath);
  };

  return (
    <nav className="topnav">
      <div className="topnav-left">
        <button className="topnav-brand" onClick={() => router.push('/')}>
          <span className="material-symbols-outlined">precision_manufacturing</span>
          <span className="topnav-app-name">FactoryOps</span>
        </button>
        <span className="topnav-divider" />
        <span className="topnav-tenant">{tenantName || tenantId}</span>
      </div>

      <div className="topnav-center">
        {NAV_ITEMS.map((item) => (
          <button
            key={item.path}
            className={`topnav-item ${isActive(item.path) ? 'active' : ''}`}
            onClick={() => router.push(`/${tenantId}${item.path}`)}
          >
            <span className="material-symbols-outlined">{item.icon}</span>
            <span>{item.label}</span>
          </button>
        ))}
      </div>

      <div className="topnav-right">
        <span className="topnav-user">{user?.name}</span>
        <button className="btn-outline btn-sm" onClick={logout}>
          <span className="material-symbols-outlined">logout</span>
        </button>
      </div>
    </nav>
  );
}