// Этап 4: Конструктор проекта стажировки + Peer-review + Фестиваль защит

const StageProject = ({ onNav }) => {
  const stage = window.LAB.STAGES[3];
  const { PROJECT_STEPS, WEEKS } = window.LAB;
  const [activeStep, setActiveStep] = React.useState('plan');
  const [view, setView] = React.useState('build'); // build | review | festival

  return (
    <div className="page">
      <StageHeader stage={stage} sub="Здесь команда собирает проект пилотной стажировки. Шесть шагов, drag-блоки задач, чек-лист адаптации, шаблоны юридической модели. Сохраняется на каждом шаге." />

      <div className="row-between" style={{marginBottom:20}}>
        <div className="pill-tabs">
          <button className={`pill-tab ${view==='build'?'active':''}`} onClick={()=>setView('build')}>Конструктор</button>
          <button className={`pill-tab ${view==='review'?'active':''}`} onClick={()=>setView('review')}>Peer-review</button>
          <button className={`pill-tab ${view==='festival'?'active':''}`} onClick={()=>setView('festival')}>Фестиваль защит</button>
        </div>
        <div className="row-tight">
          <span style={{fontSize:12.5, color:'var(--ink-600)'}}>Черновик сохранён · 3 минуты назад</span>
          <Icon name="check" size={14} style={{color:'var(--success-500)'}}/>
        </div>
      </div>

      {view==='build' && <ProjectBuilder activeStep={activeStep} onStep={setActiveStep} steps={PROJECT_STEPS} weeks={WEEKS} />}
      {view==='review' && <PeerReview/>}
      {view==='festival' && <Festival/>}
    </div>
  );
};

const ProjectBuilder = ({ activeStep, onStep, steps, weeks }) => {
  return (
    <div className="grid-12">
      <div className="span-4">
        <div className="card card-pad">
          <div className="eyebrow">Шаги конструктора</div>
          <div style={{marginTop:14}} className="step-list">
            {steps.map(s => (
              <div key={s.id} className={`step ${s.done?'done':''} ${activeStep===s.id?'active':''}`} onClick={()=>onStep(s.id)}>
                <span className="num">{s.done?'✓':steps.indexOf(s)+1}</span>
                <div>
                  <div className="step-title">{s.title}</div>
                  <div className="step-sub">{s.sub}</div>
                </div>
              </div>
            ))}
          </div>
          <hr className="hr" style={{margin:'16px 0'}}/>
          <div className="row-between" style={{fontSize:12.5, color:'var(--ink-600)'}}>
            <span>Готовность</span>
            <span style={{fontWeight:700, color:'var(--wine-700)'}}>3 / 6</span>
          </div>
          <div className="progress" style={{marginTop:8}}><i style={{width:'50%'}}/></div>
        </div>
      </div>

      <div className="span-8">
        {activeStep==='plan' && <StepPlan weeks={weeks}/>}
        {activeStep==='task' && <StepText title="Задача стажёра" sub="Что делает в течение месяца, какой результат к концу" preset='Помогать мастеру в подготовке заготовок, освоить базу гильотинных ножниц и ленточной пилы, к 30 июня — самостоятельная подготовка партии 5 деталей с допуском ±0,2 мм.' />}
        {activeStep==='mentor' && <StepMentor/>}
        {activeStep==='adapt' && <StepAdapt/>}
        {activeStep==='eval' && <StepEval/>}
        {activeStep==='legal' && <StepLegal/>}
      </div>
    </div>
  );
};

const StepText = ({ title, sub, preset }) => (
  <div className="card card-pad-lg fade-in">
    <div className="eyebrow eyebrow-wine">Шаг · текущий</div>
    <div className="h2" style={{marginTop:8, marginBottom:6}}>{title}</div>
    <div className="lede" style={{marginBottom:24}}>{sub}</div>
    <textarea className="field" rows={6} defaultValue={preset}/>
    <div className="row-between" style={{marginTop:18}}>
      <button className="btn btn-ghost"><Icon name="chevronLeft" size={14}/>Назад</button>
      <button className="btn btn-primary">Сохранить и далее<Icon name="arrowRight" size={14}/></button>
    </div>
  </div>
);

const StepPlan = ({ weeks }) => {
  return (
    <div className="card card-pad-lg fade-in">
      <div className="row-between" style={{marginBottom:18}}>
        <div>
          <div className="eyebrow eyebrow-wine">Шаг 3 · текущий</div>
          <div className="h2" style={{marginTop:8}}>Понедельный план</div>
        </div>
        <button className="btn btn-ghost btn-sm"><Icon name="plus" size={14}/>Добавить блок</button>
      </div>
      <div className="lede" style={{marginBottom:24}}>4 недели пилотной стажировки. Перетаскивайте блоки между неделями, чтобы выстроить логичный путь.</div>

      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:12}}>
        {weeks.map((w) => (
          <div key={w.id} style={{
            background:'var(--ink-50)',
            border:'1px solid var(--ink-150)',
            borderRadius:'var(--r-lg)',
            padding:12, minHeight:340,
          }}>
            <div className="row-between" style={{marginBottom:12}}>
              <div>
                <div style={{fontSize:11.5, color:'var(--ink-500)', fontWeight:600, fontFamily:'var(--font-display)', textTransform:'uppercase', letterSpacing:'0.06em'}}>Неделя {w.id}</div>
                <div style={{fontSize:12, color:'var(--ink-700)', marginTop:2}}>{w.label.split('·')[1]?.trim()}</div>
              </div>
              <span className="badge" style={{padding:'2px 7px', fontSize:11}}>{w.blocks.length}</span>
            </div>
            <div className="stack-2">
              {w.blocks.map((b, i) => (
                <div key={i} className="card card-pad-sm" style={{
                  borderColor:'var(--ink-200)', padding:10, cursor:'grab',
                  background: w.id===1 ? 'linear-gradient(180deg, #fff, var(--wine-50))' : '#fff',
                  borderLeft: `3px solid ${b.tag==='ОТ'?'var(--danger-500)':b.tag==='практика'?'var(--wine-600)':b.tag==='теория'?'var(--info-500)':b.tag==='кейс'?'var(--amber-500)':b.tag==='аттестация'?'var(--wine-700)':'var(--ink-400)'}`,
                }}>
                  <div className="row-tight" style={{marginBottom:6, justifyContent:'space-between'}}>
                    <span style={{fontSize:10.5, fontWeight:700, color:'var(--ink-500)', textTransform:'uppercase', letterSpacing:'0.06em'}}>{b.tag}</span>
                    <Icon name="grip" size={12} style={{color:'var(--ink-400)'}}/>
                  </div>
                  <div style={{fontSize:13, fontWeight:500, color:'var(--ink-900)', lineHeight:1.35}}>{b.t}</div>
                  <div className="row-tight" style={{marginTop:8}}>
                    <span className={`avatar avatar-sm avatar-${b.who==='ОЗ'?'amber':b.who==='ЕГ'?'wine':'ink'}`} style={{width:20, height:20, fontSize:9}}>{b.who}</span>
                  </div>
                </div>
              ))}
              <button style={{
                border:'1px dashed var(--ink-300)', borderRadius:'var(--r-md)',
                padding:10, fontSize:12, color:'var(--ink-600)', background:'transparent',
                cursor:'pointer', textAlign:'center', width:'100%',
              }}><Icon name="plus" size={12}/> добавить</button>
            </div>
          </div>
        ))}
      </div>

      <div className="row-between" style={{marginTop:24}}>
        <button className="btn btn-ghost"><Icon name="chevronLeft" size={14}/>Назад · Наставник</button>
        <button className="btn btn-primary">Сохранить и далее<Icon name="arrowRight" size={14}/></button>
      </div>
    </div>
  );
};

const StepMentor = () => {
  const { TEAM } = window.LAB;
  return (
    <div className="card card-pad-lg fade-in">
      <div className="eyebrow eyebrow-wine">Шаг 2</div>
      <div className="h2" style={{marginTop:8, marginBottom:14}}>Наставник и его загрузка</div>
      <div className="stack-3">
        {TEAM.mentors.map((m, i) => (
          <label key={m.id} className="card card-pad-sm" style={{cursor:'pointer', borderColor: i===0?'var(--wine-500)':'var(--ink-200)', borderWidth: i===0?2:1, background: i===0?'var(--wine-50)':'#fff'}}>
            <div className="row" style={{gap:14}}>
              <input type="radio" name="m" defaultChecked={i===0} style={{accentColor:'var(--wine-600)'}}/>
              <div className={`avatar avatar-md avatar-${m.avatar}`}>{m.initials}</div>
              <div style={{flex:1}}>
                <div style={{fontWeight:600, fontSize:14}}>{m.name}</div>
                <div style={{fontSize:12.5, color:'var(--ink-600)'}}>{m.role} · стаж {m.exp}</div>
              </div>
              <div style={{textAlign:'right'}}>
                <div className="field-label" style={{marginBottom:2, fontSize:11}}>Загрузка</div>
                <div style={{fontWeight:700, fontSize:14, fontFamily:'var(--font-display)'}}>{m.load}</div>
              </div>
            </div>
          </label>
        ))}
      </div>
    </div>
  );
};

const StepAdapt = () => (
  <div className="card card-pad-lg fade-in">
    <div className="eyebrow eyebrow-wine">Шаг 4</div>
    <div className="h2" style={{marginTop:8, marginBottom:14}}>Адаптация первой недели</div>
    <div className="stack-2">
      {[
        'Welcome-встреча с командой 1 июня в 09:00',
        'Инструктаж по охране труда (журнал, подпись)',
        'Экскурсия по цеху, представление коллег',
        'Выдача СИЗ: каска, очки, спецобувь',
        'Доступ в бытовку и столовую',
        'Оформление пропуска',
      ].map((q,i) => (
        <label key={i} className="row" style={{gap:10, padding:'12px 14px', background:'var(--ink-50)', borderRadius:'var(--r-md)', cursor:'pointer'}}>
          <input type="checkbox" defaultChecked={i<3} style={{accentColor:'var(--wine-600)'}}/>
          <span style={{fontSize:14}}>{q}</span>
        </label>
      ))}
    </div>
  </div>
);

const StepEval = () => {
  const COMP = [
    {name:'Профессиональная база', target:'Знает оборудование участка'},
    {name:'Самостоятельность', target:'Может выполнить типовую задачу без подсказок'},
    {name:'Качество работы', target:'Деталь в допуске ±0,2 мм'},
    {name:'Коммуникация', target:'Уточняет, что непонятно, не молчит'},
    {name:'Безопасность', target:'Соблюдает регламент ОТ'},
    {name:'Дисциплина', target:'Время, опоздания, отчёты'},
  ];
  return (
    <div className="card card-pad-lg fade-in">
      <div className="eyebrow eyebrow-wine">Шаг 5</div>
      <div className="h2" style={{marginTop:8, marginBottom:6}}>Критерии оценки компетенций</div>
      <div className="lede" style={{marginBottom:20}}>Шаблон ЦОПП · 6 базовых компетенций. Можно дописать свои.</div>
      <div className="stack-3">
        {COMP.map((c,i) => (
          <div key={i} className="card card-pad-sm" style={{borderColor:'var(--ink-150)'}}>
            <div className="row-between">
              <div style={{fontWeight:600, fontSize:14}}>{c.name}</div>
              <span className="badge badge-wine">из шаблона</span>
            </div>
            <div style={{fontSize:13, color:'var(--ink-600)', marginTop:4}}>Критерий: {c.target}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

const StepLegal = () => (
  <div className="card card-pad-lg fade-in">
    <div className="eyebrow eyebrow-wine">Шаг 6</div>
    <div className="h2" style={{marginTop:8, marginBottom:14}}>Юридическая модель</div>
    <div className="stack-3">
      {[
        {t:'Договор', opts:['Целевой договор о практике', 'Срочный трудовой договор', 'Стипендиальный договор']},
        {t:'Оплата стажёру', opts:['Стипендия 25 000 ₽/мес от ЦОПП', 'З/п от компании по тарифу', 'Совместная схема']},
        {t:'Охрана труда', opts:['Стандарт ОТ-1 (офис/IT)', 'Стандарт ОТ-2 (производство)', 'Индивидуальный регламент']},
      ].map((g,i) => (
        <div key={i}>
          <div className="field-label">{g.t}</div>
          <div className="row" style={{gap:8, flexWrap:'wrap'}}>
            {g.opts.map((o, j) => (
              <button key={j} className={`btn ${j===(i===2?1:0)?'btn-primary':'btn-ghost'} btn-sm`}>{o}</button>
            ))}
          </div>
        </div>
      ))}
    </div>
  </div>
);

const PeerReview = () => {
  const TEAMS = [
    { name:'ДНС Технологии', proj:'Стажёр-DevOps в инфраструктурной команде', author:'Михаил Тарасов', mine: false, comments: 0 },
    { name:'СПК «Антей»',     proj:'Помощник мастера-наладчика на промысле', author:'Виктор Лозовой', mine: false, comments: 1 },
  ];
  return (
    <div className="grid-12 fade-in">
      <div className="span-7">
        <div className="card card-pad-lg" style={{marginBottom:20}}>
          <div className="row-between" style={{marginBottom:6}}>
            <div className="eyebrow eyebrow-wine">Peer-review · к 23 мая</div>
            <span className="badge badge-amber">3 дня осталось</span>
          </div>
          <div className="h3" style={{marginBottom:12}}>2 проекта на просмотр · 3 комментария к каждому</div>
          <div className="lede">Каждая команда смотрит проекты двух других. Это не оценивание, а взгляд со стороны: что работает, что улучшить, что переиспользовать.</div>
        </div>

        {TEAMS.map((t, i) => (
          <div key={i} className="card card-pad-lg" style={{marginBottom:16}}>
            <div className="row-between" style={{marginBottom:10}}>
              <div>
                <div className="eyebrow">{t.name}</div>
                <div className="h4" style={{marginTop:4}}>{t.proj}</div>
                <div style={{fontSize:12.5, color:'var(--ink-600)', marginTop:4}}>Автор: {t.author}</div>
              </div>
              <span className="badge" style={{background: t.comments>=3?'var(--success-100)':'var(--ink-150)'}}>{t.comments}/3 комментария</span>
            </div>
            <div className="row" style={{gap:8, marginTop:14}}>
              <button className="btn btn-primary btn-sm"><Icon name="eye" size={14}/>Открыть проект</button>
              <button className="btn btn-ghost btn-sm"><Icon name="chat" size={14}/>Оставить комментарий</button>
            </div>
          </div>
        ))}
      </div>

      <div className="span-5">
        <div className="card card-pad-lg">
          <div className="eyebrow">К нашему проекту</div>
          <div className="h4" style={{marginTop:6, marginBottom:12}}>3 комментария от других команд</div>
          <div className="stack-3">
            {[
              {who:'Ростелеком ДВ', text:'Сильная адаптация первой недели — взяли в свой проект. Может, добавить в план неделю-«тень» с другим мастером?'},
              {who:'ДНС',           text:'Понравились критерии оценки, всё конкретно. У нас вышло размыто, перепишем по вашему примеру.'},
              {who:'Звезда',        text:'Нет блока про обратную связь от стажёра наставнику. Это критично — добавьте, пожалуйста.'},
            ].map((c, i) => (
              <div key={i} className="card card-pad-sm" style={{borderColor:'var(--ink-150)'}}>
                <div className="row-tight" style={{marginBottom:8}}>
                  <span className="badge badge-wine">{c.who}</span>
                </div>
                <div style={{fontSize:13.5, color:'var(--ink-800)', lineHeight:1.5}}>«{c.text}»</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

const Festival = () => {
  const SLOTS = [
    { time:'13:00', team:'Инновационный центр ДВФУ', topic:'Стажёр-аналитик в R&D команде' },
    { time:'13:30', team:'ДНС Технологии', topic:'DevOps-стажёр на 4 недели' },
    { time:'14:00', team:'Ростелеком ДВ', topic:'Технический менеджер «в полях»' },
    { time:'14:30', team:'Восток-Сталь', topic:'Помощник мастера на участке резки', mine: true },
    { time:'15:00', team:'СПК «Антей»', topic:'Помощник наладчика на промысле' },
    { time:'15:30', team:'Sollers ДВ', topic:'Стажёр конвейерной линии' },
  ];
  return (
    <div className="grid-12 fade-in">
      <div className="span-12" style={{marginBottom:20}}>
        <div className="callout-wine">
          <div className="row-between" style={{position:'relative', zIndex:1, alignItems:'flex-end'}}>
            <div>
              <div className="eyebrow" style={{color:'var(--amber-300)'}}>26 мая · Дальневосточный кампус</div>
              <div style={{fontFamily:'var(--font-display)', fontWeight:700, fontSize:38, color:'#fff', marginTop:8, letterSpacing:'-0.02em'}}>Фестиваль стажировок</div>
              <div style={{fontSize:14.5, color:'rgba(255,255,255,0.8)', marginTop:8, maxWidth:520}}>15 защит проектов · экспертное жюри · голосование зала. Лучшие проекты получают расширенные ресурсы пилота.</div>
            </div>
            <button className="btn btn-amber btn-lg">Подготовить выступление<Icon name="arrowRight" size={14}/></button>
          </div>
        </div>
      </div>

      <div className="span-7">
        <div className="card card-pad-lg">
          <div className="h4" style={{marginBottom:14}}>Расписание защит</div>
          <div className="stack-2">
            {SLOTS.map((s, i) => (
              <div key={i} className="row" style={{gap:14, padding:'12px 14px', borderRadius:'var(--r-md)', background: s.mine?'var(--amber-50)':'transparent', border: s.mine?'1px solid var(--amber-300)':'1px solid var(--ink-150)'}}>
                <div className="tabular" style={{fontFamily:'var(--font-mono)', fontWeight:600, fontSize:13, color:'var(--wine-700)', minWidth:48}}>{s.time}</div>
                <div style={{flex:1}}>
                  <div style={{fontWeight:600, fontSize:14}}>{s.team}{s.mine && <span style={{color:'var(--amber-700)', marginLeft:8, fontSize:12, fontWeight:600}}>· ваш слот</span>}</div>
                  <div style={{fontSize:12.5, color:'var(--ink-600)'}}>{s.topic}</div>
                </div>
                <span className="badge">7 мин + 3 на вопросы</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="span-5">
        <div className="card card-pad-lg" style={{marginBottom:16}}>
          <div className="h4" style={{marginBottom:12}}>Жюри</div>
          <div className="stack-2">
            {['Министерство ДАПР','КРДВ','ЦОПП Приморья','Plus Ultra','Эксперт-практик: HR директор «Соллерс»'].map((j,i)=>(
              <div key={i} className="row-tight"><span className="dot dot-success"/><span style={{fontSize:13.5}}>{j}</span></div>
            ))}
          </div>
        </div>
        <div className="card card-pad-lg">
          <div className="h4" style={{marginBottom:8}}>Что нужно от вас</div>
          <ol style={{margin:0, paddingLeft:18, color:'var(--ink-700)', fontSize:13.5, lineHeight:1.7}}>
            <li>Презентация · до 7 минут, до 10 слайдов</li>
            <li>1 представитель от компании + 1 наставник</li>
            <li>Готовность к 3 вопросам жюри</li>
          </ol>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { StageProject });