// AcademyView — top-level component that ties shell + modules together.
// Tablet-sized: 1180 × 820.

const { useState: avUseState } = React;

function AcademyView({ lang: langProp, onLangChange }) {
  const [tab, setTab] = avUseState('dash');
  const [branchId, setBranchId] = avUseState('tst');
  const [studentId, setStudentId] = avUseState(null);
  const lang = langProp || (typeof tlLang === 'function' ? tlLang() : 'en') || 'en';

  const openStudent = (id) => setStudentId(id);
  const closeStudent = () => setStudentId(null);

  let body = null;
  if (studentId) {
    body = <AStudentDetail branchId={branchId} lang={lang} onBack={closeStudent} />;
  } else if (tab === 'dash')   body = <ADashboard branchId={branchId} lang={lang} />;
  else if (tab === 'today')    body = <AToday     branchId={branchId} lang={lang} />;
  else if (tab === 'sched')    body = <ASchedule  branchId={branchId} lang={lang} />;
  else if (tab === 'stud')     body = <AStudents  branchId={branchId} lang={lang} onOpenStudent={openStudent} />;
  else if (tab === 'inbox')    body = <AInbox     branchId={branchId} lang={lang} onOpenStudent={openStudent} />;
  else if (tab === 'progress') body = <AProgress  branchId={branchId} lang={lang} />;
  else if (tab === 'crm')      body = <ACRM       branchId={branchId} lang={lang} />;

  return (
    <div style={{
      width: 1180, height: 820,
      background: '#FFFFFF', color: '#141414',
      display: 'flex', flexDirection: 'column',
      fontFamily: TL_FONTS.sans,
      position: 'relative',
    }}>
      <AHeader branchId={branchId} setBranchId={setBranchId} lang={lang} />
      <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
        <ASidebar tab={tab} setTab={(t) => { setTab(t); setStudentId(null); }} lang={lang} />
        <div style={{ flex: 1, background: '#FFFFFF', minWidth: 0, position: 'relative' }}>
          {body}
        </div>
      </div>
    </div>
  );
}

window.AcademyView = AcademyView;