// Stage screens: Анкета, Стратсессия, Школа наставничества

const StageHeader = ({ stage, sub, kicker }) => (
  <div style={{marginBottom:24}}>
    <div className="eyebrow eyebrow-wine">{kicker || `Этап ${stage.n} · ${stage.dates}`}</div>
    <h1 className="h1" style={{marginTop:8, marginBottom:8}}>{stage.title}</h1>
    {sub && <div className="lede" style={{maxWidth:680}}>{sub}</div>}
  </div>
);

/* ===== Этап 1: Анкета компании ===== */
const StageProfile = ({ onNav }) => {
  const stage = window.LAB.STAGES[0];
  return (
    <div className="page page-narrow">
      <StageHeader stage={stage} sub="Куратор уже добавил вашу команду — допишем профиль, чтобы наставникам и тьюторам были понятны контекст и задачи." />

      <div className="card card-pad-lg" style={{marginBottom:20}}>
        <div className="row-between" style={{marginBottom:18}}>
          <div className="h4">Готовность анкеты</div>
          <span className="badge badge-success"><Icon name="check" size={12}/>Завершено · 100%</span>
        </div>
        <div className="grid-4">
          {['Профиль организации','Наставники (2)','Рабочие места (2)','Ожидания от программы'].map((t,i) => (
            <div key={i} className="card card-pad-sm" style={{borderColor:'var(--success-100)', background:'rgba(216,239,226,0.4)'}}>
              <div className="row-tight" style={{marginBottom:8}}>
                <Icon name="checkCircle" size={18} style={{color:'var(--success-500)'}}/>
                <span className="eyebrow" style={{color:'var(--success-700)'}}>Заполнено</span>
              </div>
              <div style={{fontWeight:600, fontSize:13.5}}>{t}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="card card-pad-lg" style={{marginBottom:20}}>
        <div className="h4" style={{marginBottom:14}}>Ожидания от программы</div>
        <div className="stack-3">
          {['Найти подходящего стажёра под рабочее место','Прокачать наставников методически','Отработать модель заочной формы стажировки'].map((t,i)=>(
            <label key={i} className="row" style={{gap:10, padding:'10px 12px', background:'var(--ink-50)', borderRadius:'var(--r-md)', cursor:'pointer'}}>
              <input type="checkbox" defaultChecked style={{accentColor:'var(--wine-600)'}}/>
              <span style={{fontSize:14}}>{t}</span>
            </label>
          ))}
        </div>
        <div style={{marginTop:14}}>
          <div className="field-label">Свободное поле</div>
          <textarea className="field" defaultValue="Хотим к финалу пилота решить, можем ли регулярно брать 2-3 студентов в год без перегруза мастеров." />
        </div>
      </div>

      <div className="card card-pad-lg" style={{background:'var(--wine-50)', borderColor:'var(--wine-200)'}}>
        <div className="row-tight" style={{marginBottom:6}}>
          <Icon name="sparkles" size={16} style={{color:'var(--wine-700)'}} />
          <span className="eyebrow eyebrow-wine">Что дальше</span>
        </div>
        <div className="h4" style={{marginBottom:8}}>Эти данные станут зерном для биржи задач «Профи 25»</div>
        <div style={{fontSize:13.5, color:'var(--ink-700)', marginBottom:14}}>Карточки рабочих мест — первый улов будущей биржи. Куратор сможет анонимизировать и опубликовать после пилота.</div>
        <button className="btn btn-ghost btn-sm">Подробнее</button>
      </div>
    </div>
  );
};

/* ===== Этап 2: Стратсессия 29 апреля ===== */
const StageSession = ({ onNav }) => {
  const stage = window.LAB.STAGES[1];
  const TIMELINE = [
    { time:'09:30', title:'Регистрация, кофе', who:'Холл ВДЦ «Океан»' },
    { time:'10:00', title:'Открытие · приветствие министерства', who:'Г. С. Калина, ДАПР' },
    { time:'10:30', title:'Зачем нам Лаборатория и куда она ведёт', who:'Дарья Маратканова, ЦОПП' },
    { time:'11:30', title:'Кейс-сессия по 5 отраслям', who:'фасилитаторы Plus Ultra', active:true },
    { time:'13:00', title:'Обед', who:'' },
    { time:'14:00', title:'Сборка проектов · работа в командах', who:'по столам' },
    { time:'16:00', title:'Питч идей · обратная связь экспертов', who:'жюри: ДАПР, КРДВ, ЦОПП' },
    { time:'17:30', title:'Закрытие, фото', who:'' },
  ];
  return (
    <div className="page">
      <StageHeader stage={stage} sub="Очный день. Все команды — в одном зале. Здесь договариваемся о смыслах, после неё начинается Школа." />

      <div className="grid-12" style={{marginBottom:24}}>
        <div className="span-8">
          <div className="card card-pad-lg">
            <div className="row-between" style={{marginBottom:18}}>
              <div className="h4">Программа дня</div>
              <span className="badge badge-success"><Icon name="check" size={12}/>Состоялось · материалы доступны</span>
            </div>
            <div className="stack-2">
              {TIMELINE.map((t, i) => (
                <div key={i} className="row" style={{gap:14, alignItems:'flex-start', padding:'12px 14px', borderRadius:'var(--r-md)', background: t.active?'var(--amber-50)':'transparent', border: t.active?'1px solid var(--amber-200)':'1px solid transparent'}}>
                  <div className="tabular" style={{fontFamily:'var(--font-mono)', fontWeight:600, fontSize:13, color:'var(--wine-700)', minWidth:48}}>{t.time}</div>
                  <div style={{flex:1}}>
                    <div style={{fontWeight:600, fontSize:14, color:'var(--ink-900)'}}>{t.title}</div>
                    {t.who && <div style={{fontSize:12.5, color:'var(--ink-600)', marginTop:2}}>{t.who}</div>}
                  </div>
                  {t.active && <span className="badge badge-amber">ваш стол</span>}
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="span-4">
          <div className="card card-pad-lg" style={{marginBottom:20}}>
            <div className="eyebrow eyebrow-wine">Локация</div>
            <div className="h4" style={{marginTop:8, marginBottom:8}}>ВДЦ «Океан»</div>
            <div style={{fontSize:13.5, color:'var(--ink-700)', marginBottom:16}}>Бухта Емар, Владивосток · корпус «Лидер», ауд. 304</div>
            <div className="map-region" style={{height:160, padding:0, position:'relative'}}>
              <svg viewBox="0 0 300 160" style={{width:'100%', height:'100%'}}>
                <defs>
                  <pattern id="g" width="20" height="20" patternUnits="userSpaceOnUse">
                    <path d="M0 20h20M20 0v20" stroke="rgba(138,24,56,0.07)" strokeWidth="1"/>
                  </pattern>
                </defs>
                <rect width="300" height="160" fill="url(#g)"/>
                <path d="M40 110 Q120 70 200 80 T280 60" stroke="var(--wine-300)" strokeWidth="2" fill="none"/>
                <circle cx="200" cy="78" r="9" fill="var(--wine-600)"/>
                <circle cx="200" cy="78" r="14" fill="none" stroke="var(--wine-600)" strokeWidth="1.5" opacity="0.4"/>
              </svg>
            </div>
            <button className="btn btn-ghost btn-sm" style={{width:'100%', marginTop:14}}><Icon name="pin" size={14}/>Маршрут в Яндекс.Картах</button>
          </div>

          <div className="card card-pad-lg">
            <div className="h4" style={{marginBottom:12}}>Что взять</div>
            <div className="stack-2">
              {['Паспорт (для прохода)','Ноутбук или планшет','Заполненную анкету команды','Один бизнес-вопрос для жюри'].map((t,i) => (
                <div key={i} className="row-tight">
                  <Icon name="check" size={14} style={{color:'var(--success-500)'}}/>
                  <span style={{fontSize:13.5}}>{t}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="card card-pad-lg" style={{marginBottom:24}}>
        <div className="row-between" style={{marginBottom:16}}>
          <div>
            <div className="eyebrow">После сессии</div>
            <div className="h4" style={{marginTop:6}}>Материалы и домашка</div>
          </div>
          <button className="btn btn-ghost btn-sm"><Icon name="download" size={14}/>Скачать всё (zip)</button>
        </div>
        <div className="grid-3">
          {[
            {n:'01', t:'Презентация ЦОПП', s:'Зачем Лаборатория · 18 слайдов', icon:'fileText'},
            {n:'02', t:'Чек-лист «Адаптация»', s:'PDF · 4 страницы', icon:'fileText'},
            {n:'03', t:'Шаблон проекта стажировки', s:'docx · к этапу 4', icon:'file'},
          ].map((m,i) => (
            <div key={i} className="card card-pad-sm" style={{borderColor:'var(--ink-150)', cursor:'pointer'}}>
              <div className="row-tight" style={{marginBottom:10}}>
                <div style={{width:36, height:36, background:'var(--wine-100)', borderRadius:8, display:'inline-flex', alignItems:'center', justifyContent:'center', color:'var(--wine-700)'}}>
                  <Icon name={m.icon} size={18}/>
                </div>
                <div style={{flex:1}}>
                  <div className="tabular" style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--ink-500)'}}>{m.n}</div>
                  <div style={{fontWeight:600, fontSize:13.5}}>{m.t}</div>
                </div>
                <Icon name="download" size={16} style={{color:'var(--ink-500)'}}/>
              </div>
              <div style={{fontSize:12, color:'var(--ink-600)'}}>{m.s}</div>
            </div>
          ))}
        </div>
      </div>

      <ReflectionForm />
    </div>
  );
};

const ReflectionForm = () => {
  const [a1, setA1] = React.useState(4);
  const [a2, setA2] = React.useState('');
  const [a3, setA3] = React.useState('');
  const [done, setDone] = React.useState(false);
  if (done) return (
    <div className="card card-pad-lg" style={{background:'var(--success-100)', borderColor:'#b6e0c6'}}>
      <div className="row-tight"><Icon name="checkCircle" size={20} style={{color:'var(--success-700)'}}/><span className="h4" style={{color:'var(--success-700)'}}>Спасибо! Рефлексия записана.</span></div>
      <div style={{fontSize:13.5, color:'var(--success-700)', marginTop:8}}>Анонимизированно попадёт в дашборд ЦОПП и в общий отчёт ДАПР.</div>
    </div>
  );
  return (
    <div className="card card-pad-lg" style={{background:'var(--amber-50)', borderColor:'var(--amber-200)'}}>
      <div className="row-between" style={{marginBottom:16}}>
        <div>
          <div className="eyebrow eyebrow-amber">3 вопроса · 60 секунд</div>
          <div className="h4" style={{marginTop:6}}>Рефлексия после стратсессии</div>
        </div>
        <span className="badge badge-amber"><Icon name="clock" size={12}/>не сдана</span>
      </div>
      <div className="stack-5">
        <div>
          <div className="field-label">Насколько полезной оказалась сессия?</div>
          <div className="row" style={{gap:6}}>
            {[1,2,3,4,5].map(n => (
              <button key={n} onClick={() => setA1(n)} style={{
                width:48, height:48, borderRadius:'var(--r-md)',
                border:`1px solid ${n<=a1?'var(--wine-600)':'var(--ink-200)'}`,
                background: n<=a1?'var(--wine-600)':'#fff',
                color: n<=a1?'#fff':'var(--ink-700)',
                fontWeight:700, fontFamily:'var(--font-display)', fontSize:16, cursor:'pointer',
              }}>{n}</button>
            ))}
          </div>
        </div>
        <div>
          <div className="field-label">Какой инсайт заберёте в работу?</div>
          <textarea className="field" placeholder="Свободно, 1–2 предложения" value={a2} onChange={e=>setA2(e.target.value)} />
        </div>
        <div>
          <div className="field-label">Что мешало, что улучшить?</div>
          <textarea className="field" placeholder="Можно коротко" value={a3} onChange={e=>setA3(e.target.value)} />
        </div>
        <button className="btn btn-primary" onClick={() => setDone(true)}>Отправить рефлексию</button>
      </div>
    </div>
  );
};

/* ===== Этап 3: Школа наставничества ===== */
const StageSchool = ({ onNav }) => {
  const stage = window.LAB.STAGES[2];
  const { SCHOOL_MODULES, TEAM } = window.LAB;
  const [activeMod, setActiveMod] = React.useState(3);
  const me = TEAM.mentors[0];
  const myDone = SCHOOL_MODULES.filter(m => m.done.includes(me.id)).length;
  return (
    <div className="page">
      <StageHeader stage={stage} sub="6 модулей: видео и тексты с чек-листами + один очный день 12 мая. HR видит прогресс своих наставников; куратор видит всех." />

      <div className="grid-12">
        <div className="span-4">
          <div className="card card-pad" style={{marginBottom:20}}>
            <div className="eyebrow eyebrow-wine">Ваш прогресс</div>
            <div className="row-between" style={{marginTop:10, marginBottom:8}}>
              <div className="row-tight">
                <div className={`avatar avatar-md avatar-${me.avatar}`}>{me.initials}</div>
                <div>
                  <div style={{fontWeight:600, fontSize:14}}>{me.name}</div>
                  <div style={{fontSize:12, color:'var(--ink-600)'}}>{me.role}</div>
                </div>
              </div>
              <div style={{textAlign:'right'}}>
                <div className="tabular" style={{fontFamily:'var(--font-display)', fontWeight:700, fontSize:24, lineHeight:1}}>{myDone}<span style={{color:'var(--ink-500)', fontSize:16}}>/6</span></div>
                <div style={{fontSize:11, color:'var(--ink-500)'}}>модулей</div>
              </div>
            </div>
            <div className="progress"><i style={{width:`${myDone/6*100}%`}}/></div>
            <div style={{marginTop:14, fontSize:12.5, color:'var(--ink-600)'}}>До дедлайна 19 мая · <b style={{color:'var(--wine-700)'}}>15 дней</b></div>
          </div>

          <div className="card card-pad">
            <div className="eyebrow">Модули</div>
            <div className="stack-1" style={{marginTop:10}}>
              {SCHOOL_MODULES.map((m, i) => {
                const isMine = m.done.includes(me.id);
                const isActive = activeMod === m.id;
                return (
                  <button key={m.id} onClick={() => setActiveMod(m.id)} className="step" style={{
                    display:'grid', gridTemplateColumns:'32px 1fr auto', gap:12, padding:'10px 10px',
                    borderRadius:'var(--r-md)', cursor:'pointer', border:'1px solid transparent',
                    background: isActive?'var(--wine-50)':'transparent',
                    borderColor: isActive?'var(--wine-200)':'transparent',
                    width:'100%', textAlign:'left',
                  }}>
                    <span className="num" style={{
                      background: isMine?'var(--wine-600)':isActive?'#fff':'var(--ink-150)',
                      color: isMine?'#fff':'var(--ink-700)',
                      border: isActive?'1px solid var(--wine-300)':'none',
                    }}>{isMine?'✓':m.id}</span>
                    <div>
                      <div style={{fontWeight:600, fontSize:13.5, color:'var(--ink-900)'}}>{m.title}</div>
                      <div style={{fontSize:11.5, color:'var(--ink-600)'}}>
                        {m.kind==='video'?'Видео':m.kind==='text'?'Текст':'Очно'} · {m.dur}
                      </div>
                    </div>
                    <Icon name={m.kind==='video'?'play':m.kind==='inperson'?'pin':'fileText'} size={14} style={{color:'var(--ink-500)', alignSelf:'center'}}/>
                  </button>
                );
              })}
            </div>
          </div>
        </div>

        <div className="span-8">
          <SchoolModule mod={SCHOOL_MODULES.find(m => m.id===activeMod)} />
        </div>
      </div>
    </div>
  );
};

const SchoolModule = ({ mod }) => {
  if (!mod) return null;
  return (
    <div className="card card-pad-lg fade-in" key={mod.id}>
      <div className="row-between" style={{marginBottom:16}}>
        <div>
          <div className="eyebrow eyebrow-wine">Модуль {mod.id} · {mod.dur}</div>
          <div className="h2" style={{marginTop:8}}>{mod.title}</div>
        </div>
        {mod.kind==='inperson' ? (
          <span className="badge badge-amber"><Icon name="pin" size={12}/>Очно</span>
        ) : (
          <span className="badge badge-info"><Icon name={mod.kind==='video'?'video':'fileText'} size={12}/>{mod.kind==='video'?'Видео':'Текст'}</span>
        )}
      </div>

      {mod.kind==='video' && (
        <div style={{
          aspectRatio:'16/9', borderRadius:'var(--r-lg)',
          background:'linear-gradient(135deg, #1a1416, #2a2125)',
          position:'relative', overflow:'hidden',
          marginBottom:20,
        }}>
          <div style={{position:'absolute', inset:0, opacity:0.18,
            backgroundImage:'radial-gradient(at 30% 30%, var(--wine-500), transparent 50%), radial-gradient(at 70% 70%, var(--amber-500), transparent 50%)'
          }}/>
          <div style={{position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center'}}>
            <button className="btn btn-amber btn-lg" style={{borderRadius:999, width:64, height:64, padding:0}}>
              <Icon name="play" size={24}/>
            </button>
          </div>
          <div style={{position:'absolute', bottom:16, left:20, color:'#fff'}}>
            <div className="eyebrow" style={{color:'var(--amber-300)'}}>Спикер</div>
            <div style={{fontFamily:'var(--font-display)', fontWeight:600, fontSize:16, marginTop:4}}>Анна Никонова · педагогический дизайнер</div>
          </div>
        </div>
      )}

      {mod.kind==='inperson' && (
        <div className="callout-wine" style={{marginBottom:20}}>
          <div className="eyebrow" style={{color:'var(--amber-300)'}}>Очный день</div>
          <div className="h2" style={{color:'#fff', marginTop:8, marginBottom:6}}>12 мая, ВДЦ «Океан»</div>
          <div style={{fontSize:14, color:'rgba(255,255,255,0.78)'}}>09:00–17:00 · мастерские по постановке задач, разбор кейсов, тренинг обратной связи. Очно — все наставники Лаборатории.</div>
        </div>
      )}

      <div className="h4" style={{marginBottom:12}}>Чек-лист самопроверки</div>
      <div className="stack-2">
        {[
          'Понимаю отличия Z от моего поколения',
          'Знаю 3 рабочих способа дать обратную связь',
          'Могу сформулировать задачу так, чтобы её сделали верно',
          'Готов(а) обсуждать ошибки без давления',
        ].map((q,i) => (
          <label key={i} className="row" style={{gap:10, padding:'10px 12px', background:'var(--ink-50)', borderRadius:'var(--r-md)', cursor:'pointer'}}>
            <input type="checkbox" defaultChecked={i<2} style={{accentColor:'var(--wine-600)'}}/>
            <span style={{fontSize:14}}>{q}</span>
          </label>
        ))}
      </div>

      <hr className="hr" style={{margin:'24px 0'}}/>

      <div className="row-between">
        <button className="btn btn-ghost btn-sm"><Icon name="chevronLeft" size={14}/>Предыдущий</button>
        <div className="row" style={{gap:10}}>
          <button className="btn btn-ghost"><Icon name="paperclip" size={14}/>Заметки</button>
          <button className="btn btn-primary">Засчитать модуль<Icon name="check" size={14}/></button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { StageProfile, StageSession, StageSchool, StageHeader });