// Этап 5: Пилотная стажировка — экраны наставника и стажёра

const StagePilot = ({ role, onNav }) => {
  const stage = window.LAB.STAGES[4];
  if (role === 'intern') return <PilotInternView stage={stage}/>;
  // mentor or hr — наставнический экран
  return <PilotMentorView stage={stage} role={role}/>;
};

const PilotMentorView = ({ stage, role }) => {
  const { INTERN } = window.LAB;
  const isHR = role === 'hr';
  return (
    <div className="page">
      <StageHeader stage={stage} kicker="Этап 5 · Пилотная стажировка · идёт с 1 июня" sub={isHR?'Общая лента по стажёрам команды. Алерты, прогресс, рекомендации наставников.':'Стажёр у вас один — Анастасия. План, pulse, финальная рекомендация.'} />

      {isHR && (
        <div className="card card-pad" style={{marginBottom:20, background:'var(--warn-100)', borderColor:'#f7d99a'}}>
          <div className="row-tight">
            <Icon name="alert" size={18} style={{color:'var(--warn-700)'}}/>
            <div style={{fontWeight:600, fontSize:14, color:'var(--warn-700)'}}>У Анастасии 3 дня нет pulse от Игоря. Игорь, заполните, пожалуйста.</div>
            <button className="btn btn-amber btn-sm" style={{marginLeft:'auto'}}>Напомнить наставнику</button>
          </div>
        </div>
      )}

      <div className="grid-12">
        <div className="span-4">
          <div className="card card-pad-lg" style={{marginBottom:20}}>
            <div className="eyebrow eyebrow-wine">Стажёр</div>
            <div className="row" style={{gap:14, marginTop:14, marginBottom:14}}>
              <div className="avatar avatar-lg avatar-amber">{INTERN.initials}</div>
              <div>
                <div style={{fontFamily:'var(--font-display)', fontWeight:700, fontSize:18}}>{INTERN.name}</div>
                <div style={{fontSize:12.5, color:'var(--ink-600)', marginTop:2}}>{INTERN.major}</div>
                <div style={{fontSize:12.5, color:'var(--ink-600)'}}>{INTERN.college}</div>
              </div>
            </div>
            <hr className="hr"/>
            <div className="stack-2" style={{marginTop:14}}>
              <div className="row-between"><span style={{fontSize:12.5, color:'var(--ink-600)'}}>Старт</span><b style={{fontSize:13}}>1 июня 2026</b></div>
              <div className="row-between"><span style={{fontSize:12.5, color:'var(--ink-600)'}}>Финиш</span><b style={{fontSize:13}}>30 июня 2026</b></div>
              <div className="row-between"><span style={{fontSize:12.5, color:'var(--ink-600)'}}>Идёт неделя</span><b style={{fontSize:13, color:'var(--wine-700)'}}>1 из 4</b></div>
              <div className="row-between"><span style={{fontSize:12.5, color:'var(--ink-600)'}}>Контакт</span><b style={{fontSize:13, color:'var(--wine-700)'}}>+7 ··· 4-23</b></div>
            </div>
            <div className="row" style={{gap:8, marginTop:16}}>
              <button className="btn btn-primary btn-sm" style={{flex:1}}><Icon name="chat" size={14}/>Написать</button>
              <button className="btn btn-ghost btn-sm" style={{flex:1}}><Icon name="phone" size={14}/>Позвонить</button>
            </div>
          </div>

          <div className="card card-pad-lg">
            <div className="h4" style={{marginBottom:6}}>Нужна помощь?</div>
            <div style={{fontSize:13, color:'var(--ink-600)', marginBottom:14}}>Тьютор подключается за час по любому вопросу — методика, конфликт, неожиданность.</div>
            <button className="btn btn-amber" style={{width:'100%'}}><Icon name="phone" size={14}/>Запросить созвон с тьютором</button>
          </div>
        </div>

        <div className="span-8">
          <PilotPlan/>
          <PulseForm/>
          <FinalRecommendation/>
        </div>
      </div>
    </div>
  );
};

const PilotPlan = () => {
  const TASKS = [
    { week:1, t:'Welcome + ОТ + СИЗ',                done:true },
    { week:1, t:'Экскурсия по цеху',                  done:true },
    { week:1, t:'Чтение техкарт под Ольгой',          done:false, today:true },
    { week:2, t:'Шефство на участке резки',           done:false },
    { week:2, t:'Микро-задача: 5 деталей',            done:false },
    { week:3, t:'Самостоятельная смена',              done:false },
    { week:4, t:'Контрольная задача + аттестация',    done:false },
  ];
  return (
    <div className="card card-pad-lg" style={{marginBottom:20}}>
      <div className="row-between" style={{marginBottom:14}}>
        <div>
          <div className="eyebrow">Индивидуальный план</div>
          <div className="h4" style={{marginTop:4}}>Из конструктора этапа 4</div>
        </div>
        <span className="badge badge-success"><Icon name="check" size={12}/>2 выполнено</span>
      </div>
      <div className="stack-2">
        {TASKS.map((t,i)=>(
          <label key={i} className="row" style={{gap:12, padding:'12px 14px', borderRadius:'var(--r-md)', background: t.today?'var(--amber-50)':t.done?'rgba(216,239,226,0.4)':'var(--ink-50)', border:`1px solid ${t.today?'var(--amber-300)':t.done?'#cee9d8':'var(--ink-150)'}`, cursor:'pointer'}}>
            <input type="checkbox" defaultChecked={t.done} style={{accentColor:'var(--wine-600)'}}/>
            <span className="badge" style={{padding:'2px 7px', fontSize:11, background:'#fff'}}>Нед. {t.week}</span>
            <span style={{fontSize:14, flex:1, textDecoration: t.done?'line-through':'none', color: t.done?'var(--ink-600)':'var(--ink-900)'}}>{t.t}</span>
            {t.today && <span className="badge badge-amber">сегодня</span>}
          </label>
        ))}
      </div>
    </div>
  );
};

const PulseForm = () => {
  const [a1, setA1] = React.useState('green');
  const [a2, setA2] = React.useState('');
  const [a3, setA3] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  if (sent) return (
    <div className="card card-pad-lg" style={{marginBottom:20, 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)'}}>Pulse записан · спасибо!</span></div>
      <div style={{fontSize:13, color:'var(--success-700)', marginTop:8}}>Видно в дашборде ЦОПП. Анастасия видит, что вы в курсе её недели.</div>
    </div>
  );
  return (
    <div className="card card-pad-lg" style={{marginBottom:20}}>
      <div className="row-between" style={{marginBottom:6}}>
        <div className="eyebrow eyebrow-amber">Еженедельный pulse · 1 минута</div>
        <span className="badge badge-warn"><Icon name="clock" size={12}/>3 дня без отчёта</span>
      </div>
      <div className="h3" style={{marginTop:6, marginBottom:18}}>Как идёт неделя?</div>

      <div className="stack-5">
        <div>
          <div className="field-label">Как Анастасия в этой неделе</div>
          <div className="row" style={{gap:8}}>
            {[
              {v:'green',  l:'Хорошо', c:'var(--success-500)'},
              {v:'yellow', l:'Среднее', c:'var(--warn-500)'},
              {v:'red',    l:'Плохо',  c:'var(--danger-500)'},
            ].map(o => (
              <button key={o.v} onClick={() => setA1(o.v)} style={{
                flex:1, padding:'14px 12px', borderRadius:'var(--r-md)', cursor:'pointer',
                border:`1px solid ${a1===o.v?o.c:'var(--ink-200)'}`,
                background: a1===o.v? `linear-gradient(180deg, #fff, ${o.c}14)` : '#fff',
                fontWeight:600, fontSize:14,
              }}>
                <span className="dot" style={{background:o.c, marginRight:8}}/>{o.l}
              </button>
            ))}
          </div>
        </div>
        <div>
          <div className="field-label">Что мешало или удивило?</div>
          <textarea className="field" placeholder="Кратко · 1–2 предложения" value={a2} onChange={e=>setA2(e.target.value)} />
        </div>
        <label className="row" style={{gap:10, padding:'12px 14px', background:'var(--ink-50)', borderRadius:'var(--r-md)', cursor:'pointer'}}>
          <input type="checkbox" checked={a3} onChange={e=>setA3(e.target.checked)} style={{accentColor:'var(--wine-600)'}}/>
          <span style={{fontSize:14}}>Нужна помощь тьютора в этой неделе</span>
        </label>
        <button className="btn btn-primary" onClick={() => setSent(true)}>Отправить pulse<Icon name="arrowRight" size={14}/></button>
      </div>
    </div>
  );
};

const FinalRecommendation = () => (
  <div className="card card-pad-lg" style={{background:'var(--wine-50)', borderColor:'var(--wine-200)'}}>
    <div className="row-between" style={{marginBottom:8}}>
      <div className="eyebrow eyebrow-wine">К концу июня</div>
      <span className="badge">пока не активно</span>
    </div>
    <div className="h3" style={{marginBottom:8}}>Финальная рекомендация наставника</div>
    <div className="lede" style={{marginBottom:14}}>В свободной форме, для будущего паспорта стажёра в Профи 25. Это та запись, которая останется со студентом.</div>
    <textarea className="field" rows={4} placeholder="«Анастасия за месяц освоила...»" disabled style={{background:'#fff', opacity:0.7}}/>
    <div style={{fontSize:12, color:'var(--ink-600)', marginTop:8}}>Откроется после 24 июня — за неделю до финала.</div>
  </div>
);

/* ===== Стажёр ===== */
const PilotInternView = ({ stage }) => {
  const [tab, setTab] = React.useState('plan');
  return (
    <div className="page page-narrow">
      <div className="eyebrow eyebrow-amber">Пилотная стажировка · идёт</div>
      <h1 className="h1" style={{marginTop:8, marginBottom:6}}>Привет, Анастасия 👋</h1>
      <div className="lede" style={{marginBottom:24}}>Неделя 1 из 4 · Восток-Сталь · ваш наставник Игорь Савельев</div>

      <div className="grid-2" style={{marginBottom:20}}>
        <div className="card card-pad-lg" style={{background:'linear-gradient(135deg, var(--amber-100), #fff)'}}>
          <div className="eyebrow eyebrow-amber">Сегодня</div>
          <div className="h3" style={{marginTop:8, marginBottom:14}}>Чтение техкарт под Ольгой</div>
          <div className="row-tight" style={{fontSize:13, color:'var(--ink-700)', marginBottom:6}}><Icon name="clock" size={14}/>14:00–16:30 · участок резки</div>
          <div className="row-tight" style={{fontSize:13, color:'var(--ink-700)'}}><Icon name="user" size={14}/>с Ольгой Захаровой</div>
        </div>
        <div className="card card-pad-lg">
          <div className="eyebrow">Контакты на день</div>
          <div className="stack-2" style={{marginTop:12}}>
            <div className="row-between"><span className="row-tight"><div className="avatar avatar-sm avatar-ink">ИС</div><span style={{fontSize:13}}>Игорь · наставник</span></span><Icon name="phone" size={16} style={{color:'var(--wine-700)'}}/></div>
            <div className="row-between"><span className="row-tight"><div className="avatar avatar-sm avatar-amber">ОЗ</div><span style={{fontSize:13}}>Ольга · технолог</span></span><Icon name="phone" size={16} style={{color:'var(--wine-700)'}}/></div>
            <div className="row-between"><span className="row-tight"><div className="avatar avatar-sm avatar-wine">ДМ</div><span style={{fontSize:13}}>Дарья · тьютор</span></span><Icon name="chat" size={16} style={{color:'var(--wine-700)'}}/></div>
            <div className="row-between"><span className="row-tight"><div className="avatar avatar-sm" style={{background:'var(--danger-100)', color:'var(--danger-700)', borderColor:'var(--danger-100)'}}>SOS</div><span style={{fontSize:13}}>Экстренный</span></span><Icon name="phone" size={16} style={{color:'var(--danger-500)'}}/></div>
          </div>
        </div>
      </div>

      <div className="row" style={{gap:0, marginBottom:16}}>
        <div className="pill-tabs">
          <button className={`pill-tab ${tab==='plan'?'active':''}`} onClick={()=>setTab('plan')}>План недели</button>
          <button className={`pill-tab ${tab==='diary'?'active':''}`} onClick={()=>setTab('diary')}>Дневник</button>
          <button className={`pill-tab ${tab==='final'?'active':''}`} onClick={()=>setTab('final')}>Финальная анкета</button>
        </div>
      </div>

      {tab==='plan' && (
        <div className="card card-pad-lg fade-in">
          <div className="h4" style={{marginBottom:14}}>Неделя 1 · 1–7 июня</div>
          <div className="stack-2">
            {[
              {d:'Пн 1 июня', t:'Welcome, ОТ-инструктаж, СИЗ', done:true},
              {d:'Вт 2 июня', t:'Экскурсия по цеху, представление коллег', done:true},
              {d:'Ср 3 июня', t:'Чтение техкарт под Ольгой', today:true},
              {d:'Чт 4 июня', t:'Наблюдение за работой ленточной пилы', },
              {d:'Пт 5 июня', t:'Разбор недели с Игорем · 16:00', },
            ].map((e, i) => (
              <div key={i} className="row" style={{gap:14, padding:'12px 14px', borderRadius:'var(--r-md)', background: e.today?'var(--amber-50)':e.done?'rgba(216,239,226,0.4)':'var(--ink-50)', border: `1px solid ${e.today?'var(--amber-300)':e.done?'#cee9d8':'var(--ink-150)'}`}}>
                <span className="tabular" style={{fontFamily:'var(--font-mono)', fontSize:12, color:'var(--ink-600)', minWidth:80}}>{e.d}</span>
                <span style={{flex:1, fontSize:14, fontWeight: e.today?600:500, textDecoration:e.done?'line-through':'none', color:e.done?'var(--ink-600)':'var(--ink-900)'}}>{e.t}</span>
                {e.done && <Icon name="check" size={16} style={{color:'var(--success-500)'}}/>}
                {e.today && <span className="badge badge-amber">сегодня</span>}
              </div>
            ))}
          </div>
        </div>
      )}

      {tab==='diary' && <InternDiary/>}

      {tab==='final' && (
        <div className="card card-pad-lg fade-in" style={{background:'var(--wine-50)', borderColor:'var(--wine-200)'}}>
          <div className="eyebrow eyebrow-wine">К 30 июня</div>
          <div className="h3" style={{marginTop:8, marginBottom:6}}>Финальная анкета</div>
          <div className="lede">Оцените компанию, наставника и программу. Ответы сделают пилоты в следующий набор лучше.</div>
          <div style={{fontSize:13, color:'var(--ink-600)', marginTop:14}}>Откроется в последнюю неделю стажировки.</div>
        </div>
      )}
    </div>
  );
};

const InternDiary = () => {
  const [entries, setEntries] = React.useState([
    { d:'Вт 2 июня · 17:40', t:'Прошли экскурсию по цеху. Самое интересное — гильотинные ножницы, как лист реза идеально по линейке. Спросила Игоря про допуски, объяснил на пальцах. К пятнице обещал показать в работе.' },
    { d:'Пн 1 июня · 18:10', t:'Первый день. Документы, СИЗ, обед в столовой. Каска велика, попросила другую — поменяли сразу. Колектив принял спокойно, без любопытства, но дружелюбно.' },
  ]);
  const [val, setVal] = React.useState('');
  const add = () => {
    if (!val.trim()) return;
    setEntries([{d:'Только что', t:val}, ...entries]);
    setVal('');
  };
  return (
    <div className="card card-pad-lg fade-in">
      <div className="row-between" style={{marginBottom:6}}>
        <div className="eyebrow eyebrow-amber">Дневник стажёра</div>
        <span className="badge">{entries.length} записи</span>
      </div>
      <div className="h4" style={{marginBottom:8}}>Что сегодня делала и заметила</div>
      <div style={{fontSize:13, color:'var(--ink-600)', marginBottom:16}}>2-3 предложения. Никто кроме вас и тьютора не читает. Эти записи помогут на финальной аттестации.</div>

      <div className="card card-pad-sm" style={{borderColor:'var(--ink-150)', marginBottom:18}}>
        <textarea className="field" rows={3} placeholder="Сегодня..." value={val} onChange={e=>setVal(e.target.value)} style={{border:'none', padding:0, background:'transparent'}}/>
        <div className="row-between" style={{marginTop:8}}>
          <span style={{fontSize:11.5, color:'var(--ink-500)'}}>Видно: только мне и тьютору</span>
          <button className="btn btn-primary btn-sm" onClick={add}>Сохранить запись<Icon name="save" size={14}/></button>
        </div>
      </div>

      <div className="stack-3">
        {entries.map((e, i) => (
          <div key={i} className="card card-pad-sm" style={{borderColor:'var(--ink-150)'}}>
            <div className="row-between" style={{marginBottom:8}}>
              <span style={{fontSize:11.5, color:'var(--ink-500)', fontFamily:'var(--font-mono)'}}>{e.d}</span>
              <Icon name="lock" size={12} style={{color:'var(--ink-500)'}}/>
            </div>
            <div style={{fontSize:13.5, color:'var(--ink-800)', lineHeight:1.55}}>{e.t}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { StagePilot });