// Root app — routes role + screen, mounts shell.

const SCREEN_TITLES = {
  home: 'Главный экран',
  team: 'Моя команда',
  profile: 'Профиль команды',
  materials: 'Материалы',
  feedback: 'Обратная связь',
  curator: 'Дашборд куратора',
  dapr: 'Дашборд ДАПР',
};

const ROLE_HOME = {
  hr:      'home',
  mentor:  'home',
  intern:  'pilot',
  curator: 'curator',
  dapr:    'dapr',
};

const ROLE_BREADCRUMBS = {
  hr:      ['Лаборатория стажировок', 'Восток-Сталь'],
  mentor:  ['Лаборатория стажировок', 'Восток-Сталь', 'Игорь Савельев'],
  intern:  ['Лаборатория стажировок', 'Анастасия Ким'],
  curator: ['ЦОПП Приморья', 'Дашборд куратора'],
  dapr:    ['Министерство ДАПР', 'Лаборатория стажировок'],
};

const App = () => {
  const [role, setRole] = React.useState('hr');
  const [screen, setScreen] = React.useState('home');
  const [maxOpen, setMaxOpen] = React.useState(false);
  const [tutorOpen, setTutorOpen] = React.useState(false);

  // When role changes, jump to that role's natural home.
  React.useEffect(() => {
    setScreen(ROLE_HOME[role]);
  }, [role]);

  const isStaffSidebar = role === 'hr' || role === 'mentor';
  const isInternSidebar = role === 'intern';
  const showSidebar = isStaffSidebar || isInternSidebar;

  const onNav = (k) => {
    if (k === 'school') setScreen('school');
    else setScreen(k);
    setMaxOpen(false);
  };

  // Compute breadcrumb
  const crumbs = [...ROLE_BREADCRUMBS[role]];
  const stageInfo = window.LAB.STAGES.find(s => s.id === screen);
  if (stageInfo) crumbs.push(`Этап ${stageInfo.n} · ${stageInfo.short}`);
  else if (SCREEN_TITLES[screen]) crumbs.push(SCREEN_TITLES[screen]);

  // Screen render
  let content = null;
  if (role === 'curator') content = <CuratorDashboard onNav={onNav}/>;
  else if (role === 'dapr') content = <DaprDashboard/>;
  else if (role === 'intern') content = <StagePilot role={role} onNav={onNav}/>;
  else {
    // hr / mentor — full team kabinet
    if (screen === 'home')         content = <TeamHome role={role} onNav={onNav}/>;
    else if (screen === 'team' || screen === 'profile') content = <TeamProfile/>;
    else if (screen === 'profile-stage' || screen === 'profile') content = <StageProfile/>;
    else if (screen === window.LAB.STAGES[0].id) content = <StageProfile/>;
    else if (screen === window.LAB.STAGES[1].id) content = <StageSession/>;
    else if (screen === window.LAB.STAGES[2].id) content = <StageSchool/>;
    else if (screen === window.LAB.STAGES[3].id) content = <StageProject/>;
    else if (screen === window.LAB.STAGES[4].id) content = <StagePilot role={role} onNav={onNav}/>;
    else if (screen === 'materials') content = <MaterialsPage/>;
    else if (screen === 'feedback')  content = <FeedbackHub/>;
    else content = <TeamHome role={role} onNav={onNav}/>;
  }

  return (
    <div className={`app-shell ${showSidebar?'':'no-sidebar'}`}>
      {showSidebar && (
        <Sidebar
          stages={window.LAB.STAGES}
          activeKey={screen}
          onNav={onNav}
          role={role}
        />
      )}
      <div style={{minWidth:0, display:'flex', flexDirection:'column'}}>
        <Topbar
          role={role}
          onRoleChange={setRole}
          breadcrumb={crumbs}
          onMaxOpen={() => setMaxOpen(o => !o)}
          maxCount={window.LAB.MAX_NOTIFS.length}
        />
        <main style={{flex:1}}>
          {content}
        </main>
        <Footer/>
      </div>
      <MaxPanel open={maxOpen} onClose={() => setMaxOpen(false)} items={window.LAB.MAX_NOTIFS}/>
      <TutorFAB onClick={() => setTutorOpen(true)}/>
      {tutorOpen && <TutorModal onClose={() => setTutorOpen(false)}/>}
    </div>
  );
};

const TutorModal = ({ onClose }) => (
  <div style={{
    position:'fixed', inset:0, background:'rgba(20,12,16,0.45)', zIndex:80,
    display:'flex', alignItems:'center', justifyContent:'center', padding:24,
    animation:'fadeIn .2s ease',
  }} onClick={onClose}>
    <div className="card card-pad-lg fade-in" style={{maxWidth:480, width:'100%', boxShadow:'var(--shadow-lg)'}} onClick={e=>e.stopPropagation()}>
      <div className="row-between" style={{marginBottom:18}}>
        <div className="row-tight">
          <div className="avatar avatar-lg avatar-wine">ДМ</div>
          <div>
            <div style={{fontFamily:'var(--font-display)', fontWeight:700, fontSize:16}}>Дарья Маратканова</div>
            <div className="row-tight" style={{fontSize:12}}><span className="dot dot-success"/><span style={{color:'var(--success-700)', fontWeight:600}}>онлайн</span></div>
          </div>
        </div>
        <button className="btn btn-quiet" onClick={onClose} style={{padding:6}}>✕</button>
      </div>
      <div className="lede" style={{marginBottom:16, fontSize:14}}>Расскажите, в чём нужна помощь — отвечу в течение часа в рабочее время.</div>
      <textarea className="field" rows={4} placeholder="Например: «Подскажите по понедельному плану, неделя 3 кажется перегруженной»"/>
      <div className="row" style={{gap:8, marginTop:14}}>
        <button className="btn btn-primary" style={{flex:1}}>Отправить в чат<Icon name="chat" size={14}/></button>
        <button className="btn btn-ghost"><Icon name="phone" size={14}/>Запросить созвон</button>
      </div>
    </div>
  </div>
);

const MaterialsPage = () => (
  <div className="page page-narrow">
    <div className="eyebrow eyebrow-wine">Все материалы программы</div>
    <h1 className="h1" style={{marginTop:8, marginBottom:24}}>Материалы</h1>
    <div className="stack-4">
      {window.LAB.STAGES.map(s => (
        <div key={s.id} className="card card-pad-lg">
          <div className="row-between" style={{marginBottom:12}}>
            <div>
              <div className="eyebrow">Этап {s.n}</div>
              <div className="h4" style={{marginTop:4}}>{s.title}</div>
            </div>
            <span className="badge">{s.status==='done'?'архив':s.status==='active'?'актуально':'появятся позже'}</span>
          </div>
          <div className="grid-3">
            {[1,2,3].map(i => (
              <div key={i} className="card card-pad-sm" style={{borderColor:'var(--ink-150)', cursor:'pointer'}}>
                <Icon name="fileText" size={18} style={{color:'var(--wine-700)'}}/>
                <div style={{fontWeight:600, fontSize:13.5, marginTop:8}}>Документ {i}</div>
                <div style={{fontSize:11.5, color:'var(--ink-600)'}}>PDF · {Math.round(2+Math.random()*5)} страниц</div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  </div>
);

const FeedbackHub = () => (
  <div className="page page-narrow">
    <div className="eyebrow eyebrow-wine">Обратная связь · сквозная по программе</div>
    <h1 className="h1" style={{marginTop:8, marginBottom:24}}>Что от вас ждут</h1>
    <div className="stack-3">
      {[
        {when:'после стратсессии 29 апреля', what:'3 вопроса, 60 секунд',  who:'Все участники команды', done:true},
        {when:'после каждого модуля Школы',  what:'Чек-лист + 1 вопрос',    who:'Наставники',           done:false, active:true},
        {when:'после защиты 26 мая',          what:'Peer-review + анкета', who:'Все команды',           done:false},
        {when:'каждую неделю в июне',         what:'Pulse, 3 вопроса',      who:'Наставники',           done:false},
        {when:'конец стажировки',             what:'Полная анкета',         who:'Стажёр + наставник + HR', done:false},
      ].map((f, i) => (
        <div key={i} className="card card-pad" style={{borderColor: f.active?'var(--amber-300)':'var(--ink-200)', background: f.active?'var(--amber-50)':'#fff'}}>
          <div className="row-between">
            <div>
              <div style={{fontFamily:'var(--font-display)', fontWeight:700, fontSize:15}}>{f.when}</div>
              <div style={{fontSize:13, color:'var(--ink-700)', marginTop:4}}>{f.what} · {f.who}</div>
            </div>
            {f.done && <span className="badge badge-success"><Icon name="check" size={12}/>сдано</span>}
            {f.active && <button className="btn btn-amber btn-sm">Заполнить</button>}
            {!f.done && !f.active && <span className="badge">впереди</span>}
          </div>
        </div>
      ))}
    </div>
  </div>
);

Object.assign(window, { App, TutorModal, MaterialsPage, FeedbackHub });

ReactDOM.createRoot(document.getElementById('root')).render(<App />);