/* global React */
/* E-1 Part 2b §2 (§9.4): Teacher 뷰 헤더.
 *
 * Admin TopBar 대비 차이:
 *  - 우측 프로필: "류준형님" → "[김채책 T] · 강사"
 *  - 나머지 구조 (탭/검색/알림) 는 동일 프레임 재사용
 *
 * 강사 이름은 RoleSim.getCurrentUser() 로 동적. */
(function () {
  function TeacherTopBar({ tabs, activeTab, onTab, onToggleMobile }) {
    const cu = (window.RoleSim && window.RoleSim.getCurrentUser()) || null;
    /* hotfix10 TASK 2: 호칭 적용 — "김채책T · 강사" → "김채책 선생님" */
    const displayText = (() => {
      if (!cu) return '강사님';
      if (typeof window.getFullHonorificSync === 'function') {
        return window.getFullHonorificSync('u_' + cu.id);
      }
      return (cu.display_name || cu.name || '강사') + '님';
    })();
    const initial = cu?.name?.[0] || '강';

    /* hotfix6 #2: TopBar 와 동일 — learn → teacher/home, ai/service → toast */
    const handleTabClick = (id) => {
      if (typeof onTab === 'function') onTab(id);
      if (id === 'ai') {
        window.showToast && window.showToast('AI 기능은 Phase 3에서 구현 예정');
        return;
      }
      if (id === 'service') {
        window.showToast && window.showToast('설정·구독 관리는 Phase 3에서 구현 예정');
        return;
      }
      if (id === 'learn') {
        const target = 'teacher/home.html';
        if (window.location.pathname.endsWith('home.html') && window.location.pathname.includes('/teacher/')) return;
        window.location.href = '../' + target;
      }
    };

    return (
      <header className="tb">
        <button className="tb-hamburger" onClick={onToggleMobile} aria-label="메뉴 열기">
          <i data-lucide="menu"></i>
        </button>
        <div className="tb-tabs">
          {(tabs || []).map((t) => (
            <button
              key={t.id}
              className={`tb-tab ${activeTab === t.id ? 'is-active' : ''}`}
              onClick={() => handleTabClick(t.id)}
            >
              {t.icon && <i data-lucide={t.icon}></i>}
              {t.label}
            </button>
          ))}
        </div>
        <div className="tb-right">
          <div className="tb-search">
            <i data-lucide="search"></i>
            <input placeholder="메뉴 / 학생 검색" />
            <kbd>⌘K</kbd>
          </div>
          <button className="tb-iconbtn" aria-label="알림">
            <i data-lucide="bell"></i>
            <span className="dot"></span>
          </button>
          <button className="tb-iconbtn" aria-label="도움말">
            <i data-lucide="circle-help"></i>
          </button>
          <button className="tb-user">
            <span className="av">{initial}</span>
            <span className="tb-user-name">{displayText}</span>
            <i data-lucide="chevron-down"></i>
          </button>
        </div>
      </header>
    );
  }
  window.TeacherTopBar = TeacherTopBar;
})();