import { Link, useLocation } from 'react-router-dom';
import { useThemeContext } from '../contexts/ThemeContext';

const navItems = [
  { path: '/', label: '대시보드', icon: '📊' },
  { path: '/jobs', label: '작업', icon: '⚙️' },
  { path: '/executions', label: '실행 이력', icon: '📋' },
  { path: '/schedules', label: '스케줄', icon: '🕐' },
  { path: '/schedule-timeline', label: '타임라인', icon: '📅' },
];

export default function Navbar() {
  const location = useLocation();
  const { theme, toggle } = useThemeContext();

  const isActive = (path: string) => {
    if (path === '/') return location.pathname === '/';
    return location.pathname.startsWith(path);
  };

  return (
    <nav className="bg-wing-glass-dense backdrop-blur-sm shadow-md rounded-xl mb-6 px-4 py-3 border border-wing-border">
      <div className="flex items-center justify-between flex-wrap gap-2">
        <Link to="/" className="text-lg font-bold text-wing-accent no-underline">
          S&P 배치 관리
        </Link>
        <div className="flex gap-1 flex-wrap items-center">
          {navItems.map((item) => (
            <Link
              key={item.path}
              to={item.path}
              className={`px-3 py-1.5 rounded-lg text-sm font-medium no-underline transition-colors
                ${isActive(item.path)
                  ? 'bg-wing-accent text-white'
                  : 'text-wing-muted hover:bg-wing-hover hover:text-wing-accent'
                }`}
            >
              <span className="mr-1">{item.icon}</span>
              {item.label}
            </Link>
          ))}
          <button
            onClick={toggle}
            className="ml-2 px-2.5 py-1.5 rounded-lg text-sm bg-wing-card text-wing-muted
              hover:text-wing-text border border-wing-border transition-colors"
            title={theme === 'dark' ? '라이트 모드' : '다크 모드'}
          >
            {theme === 'dark' ? '☀️' : '🌙'}
          </button>
        </div>
      </div>
    </nav>
  );
}