/**
 * AppNavbar
 * Renders the main application navigation, language switch, and the active
 * annotator shortcut used across the dashboard, editor, and atlas views.
 */
import React from 'react';
import { LayoutGrid, PlusCircle, Book, User } from 'lucide-react';
import { useLanguage } from '../../context/LanguageContext';

export default function AppNavbar({ view, setView, annotatorName, onEditAnnotator }) {
  const { lang, setLang, t } = useLanguage();

  const getBtnStyles = (active) => `
    flex items-center gap-2 px-6 py-1.5 rounded-lg text-xs font-bold uppercase transition-all
    ${active
      ? 'bg-white text-blue-900 shadow-sm'
      : 'text-slate-500 hover:text-slate-700'}
  `;

  return (
    <nav className="h-16 border-b bg-white flex items-center justify-between px-4 lg:px-6 shrink-0 z-20 shadow-sm">
      <div
        className="flex items-center gap-3 cursor-pointer group"
        onClick={() => setView('dashboard')}
      >
        <div className="p-2.5 bg-blue-900 rounded-lg shrink-0 group-hover:bg-blue-800 transition-colors">
          <svg
            viewBox="7 3.5 10 15.5"
            fill="none"
            className="h-7 w-7 text-white"
            aria-hidden="true"
          >
            <path
              d="M12 4
                C8.8 4 7 6.8 7 10.4
                C7 15 9.6 17.6 12 18.2
                C14.4 17.6 17 15 17 10.4
                C17 6.8 15.2 4 12 4Z"
              stroke="currentColor"
              strokeWidth="1.7"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              d="M9.2 10.2C9.8 9.8 10.6 9.8 11.2 10.2"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
            />
            <path
              d="M12.8 10.2C13.4 9.8 14.2 9.8 14.8 10.2"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
            />
            <path
              d="M12 11.2
                C11.6 12.3 11.6 13 12 13.4
                C12.4 13 12.4 12.3 12 11.2"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              d="M10 15C10.7 15.6 13.3 15.6 14 15"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
            />
          </svg>
        </div>
        <div className="hidden sm:block">
          <h2 className="text-lg font-black text-blue-900 uppercase leading-none tracking-tighter">
            {t('navbarSub')}
          </h2>
          <p className="text-[10px] text-slate-500 font-bold uppercase tracking-tight">
            {t('navbarBrand')}
          </p>
        </div>
      </div>

      <div className="flex bg-slate-100 p-1 rounded-xl border border-slate-200">
        <button
          onClick={() => setView('dashboard')}
          className={getBtnStyles(view === 'dashboard')}
        >
          <LayoutGrid size={14} />
          <span>{t('catalog')}</span>
        </button>

        <button
          onClick={() => setView('atlases')}
          className={getBtnStyles(view === 'atlases')}
        >
          <Book size={14} />
          <span>{t('atlases')}</span>
        </button>

        <button
          onClick={() => setView('editor')}
          className={getBtnStyles(view === 'editor')}
        >
          <PlusCircle size={14} />
          <span>{t('editor')}</span>
        </button>
      </div>

      <div className="w-[320px] hidden md:flex justify-end items-center gap-2">
        <button
          onClick={onEditAnnotator}
          className="flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-bold text-slate-600 transition-all hover:border-blue-200 hover:text-blue-700"
        >
          <User size={14} />
          <span className="max-w-[140px] truncate">{annotatorName || t('editGlobalSignature')}</span>
        </button>
        <div className="flex bg-slate-100 p-1 rounded-lg border border-slate-200">
          <button
            onClick={() => setLang('cs')}
            className={`px-3 py-1 rounded-md text-[10px] font-black transition-all ${lang === 'cs' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-400 hover:text-slate-600'
              }`}
          >
            CZ
          </button>
          <button
            onClick={() => setLang('en')}
            className={`px-3 py-1 rounded-md text-[10px] font-black transition-all ${lang === 'en' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-400 hover:text-slate-600'
              }`}
          >
            EN
          </button>
        </div>
      </div>
    </nav>
  );
}