import { useTheme } from '../../context/ThemeContext';
import { useAuth } from '../../context/AuthContext';
import { Sun, Moon, Eye, Sparkles, LogOut, User, Menu, Settings } from 'lucide-react';

export default function Navbar({ onPreview, onGenerate, onToggleSidebar }) {
  const { theme, toggleTheme } = useTheme();
  const { user, logout } = useAuth();

  return (
    <header className="navbar" role="banner">
      <div className="navbar__brand">
        <button
          className="navbar__hamburger"
          onClick={onToggleSidebar}
          title="Toggle sidebar"
          aria-label="Toggle sidebar"
        >
          <Menu size={20} />
        </button>
        <div className="navbar__icon navbar__icon--desktop">
          <Sparkles size={18} />
        </div>
        <h1 className="navbar__title">
          OT <span className="navbar__title-accent">NoteBuilder</span>
        </h1>
      </div>

      <div className="navbar__actions">
        {/* User pill — hidden on small screens via CSS */}
        <div className="navbar__user">
          <User size={12} />
          <span className="navbar__user-name">{user}</span>
        </div>

        <button
          className="navbar__btn"
          onClick={onPreview}
          title="Preview filled template"
        >
          <Eye size={16} />
          <span className="navbar__btn-label">Preview</span>
        </button>

        <button
          className="navbar__btn navbar__btn--primary"
          onClick={onGenerate}
          title="Generate AI clinical note"
        >
          <Sparkles size={16} />
          <span className="navbar__btn-label">Generate Note</span>
        </button>

        <button
          className="theme-toggle"
          onClick={toggleTheme}
          title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
          aria-label="Toggle theme"
        >
          {theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
        </button>

        <button
          className="navbar__btn navbar__btn--logout"
          onClick={logout}
          title="Sign out"
        >
          <LogOut size={16} />
        </button>
      </div>
    </header>
  );
}