// Главный экран команды + Профиль команды

const TeamHome = ({ role, onNav }) => {
  const { STAGES, COMPANY, TEAM, CURRENT_TASK, NEXT_EVENT, FEED } = window.LAB;
  const isMentor = role === 'mentor';
  const greet = isMentor ? 'Здравствуйте, Игорь.' : 'Здравствуйте, Елена.';
  const greetSub = isMentor
    ? 'Команда «Восток-Сталь» · ваш прогресс наставника'
    : 'Команда «Восток-Сталь» · вы ведёте 2 наставников и 1 стажёра';
  const tutorMsg = isMentor
    ? 'Игорь, до пятницы 8 мая нужно завершить модуль 3 «Поколение Z».'
    : 'Елена, проверьте: Игорь идёт по графику, Ольге осталось 2 модуля до дедлайна.';

  return (
    <div className="page">
      <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:20}}>
        <SupportBadge />
      </div>

      <div className="row-between" style={{marginBottom:24, alignItems:'flex-end'}}>
        <div>
          <div className="eyebrow eyebrow-wine">{COMPANY.name} · {COMPANY.industry.split('·')[0].trim()}</div>
          <h1 className="h1" style={{marginTop:8, marginBottom:6}}>{greet}</h1>
          <div className="lede" style={{maxWidth:560}}>{greetSub}</div>
        </div>
        <div style={{display:'flex', gap:8}}>
          <button className="btn btn-ghost btn-sm"><Icon name="download" size={16} />Скачать материалы</button>
          <button className="btn btn-ghost btn-sm"><Icon name="chat" size={16} />Чат команды</button>
        </div>
      </div>

      {/* Stage progress */}
      <div className="card card-pad" style={{marginBottom:24}}>
        <div className="row-between" style={{marginBottom:18}}>
          <div>
            <div className="eyebrow">Программа · 5 этапов</div>
            <div className="h4" style={{marginTop:6}}>Где мы в программе</div>
          </div>
          <div className="row" style={{gap:18, fontSize:12.5, color:'var(--ink-600)'}}>
            <span className="row-tight"><span className="dot dot-success" />2 этапа завершены</span>
            <span className="row-tight"><span className="dot dot-warn pulse" />Этап 3 — идёт</span>
            <span className="row-tight"><span className="dot dot-muted" />2 впереди</span>
          </div>
        </div>
        <StageProgress stages={STAGES} />
      </div>

      <div className="grid-12" style={{marginBottom:24}}>
        {/* Current task — the hero */}
        <div className="span-7">
          <div className="callout-wine" style={{height:'100%'}}>
            <div style={{position:'relative', zIndex:1}}>
              <div className="row-between" style={{alignItems:'flex-start', marginBottom:18}}>
                <span className="eyebrow" style={{color:'var(--amber-300)'}}>Текущая задача · {CURRENT_TASK.context}</span>
                <span className="badge" style={{background:'rgba(255,255,255,0.12)', color:'#fff', borderColor:'rgba(255,255,255,0.18)', fontWeight:700}}>
                  <Icon name="clock" size={13} />Осталось {CURRENT_TASK.daysLeft} дня
                </span>
              </div>
              <div style={{fontFamily:'var(--font-display)', fontWeight:700, fontSize:32, lineHeight:1.12, letterSpacing:'-0.018em', color:'#fff', textWrap:'pretty', marginBottom:14}}>
                {CURRENT_TASK.title}
              </div>
              <div style={{fontSize:14.5, color:'rgba(255,255,255,0.78)', marginBottom:24, lineHeight:1.5}}>
                {isMentor ? 'Один из 6 модулей. Видео 12 мин + чек-лист самопроверки. Ваш прогресс по Школе виден HR.' : `Назначено: ${CURRENT_TASK.for}. Один модуль из 6, дедлайн ${CURRENT_TASK.due}.`}
              </div>
              <div className="row" style={{gap:10}}>
                <button className="btn btn-amber btn-lg" onClick={() => onNav('school')}>
                  <Icon name="play" size={16} />Открыть модуль
                </button>
                <button className="btn btn-lg" style={{background:'rgba(255,255,255,0.10)', color:'#fff', borderColor:'rgba(255,255,255,0.18)'}} onClick={() => onNav('school')}>
                  Все модули школы<Icon name="arrowRight" size={16} />
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* Next event */}
        <div className="span-5">
          <div className="card card-pad" style={{height:'100%'}}>
            <div className="row-between" style={{marginBottom:14}}>
              <div className="eyebrow eyebrow-wine">Ближайшее событие</div>
              <span className="badge badge-info"><Icon name="video" size={12} />Онлайн</span>
            </div>
            <div className="h3" style={{marginBottom:6}}>{NEXT_EVENT.title}</div>
            <div className="row" style={{gap:12, color:'var(--ink-700)', fontSize:14, marginBottom:14}}>
              <span className="row-tight"><Icon name="calendar" size={15} style={{color:'var(--ink-500)'}} />{NEXT_EVENT.date}</span>
            </div>
            <div className="card card-pad-sm" style={{background:'var(--ink-50)', borderColor:'var(--ink-150)', marginBottom:14}}>
              <div style={{fontSize:12, color:'var(--ink-600)', marginBottom:4}}>Zoom-ссылка</div>
              <div className="row-tight" style={{fontFamily:'var(--font-mono)', fontSize:13, color:'var(--wine-700)'}}>
                <Icon name="video" size={14} />{NEXT_EVENT.link}
              </div>
            </div>
            <div className="row-between">
              <div className="row-tight">
                <div className="avatar avatar-sm avatar-wine">ДМ</div>
                <span style={{fontSize:13, color:'var(--ink-700)'}}>{NEXT_EVENT.who}</span>
              </div>
              <button className="btn btn-sm btn-primary">Добавить в календарь</button>
            </div>
            <hr className="hr" style={{margin:'18px 0 14px'}} />
            <div style={{fontSize:12.5, color:'var(--ink-600)', display:'flex', justifyContent:'space-between'}}>
              <span>Очный день — 12 мая, ВДЦ «Океан»</span>
              <a className="link-amber" href="#" onClick={e=>e.preventDefault()}>программа дня</a>
            </div>
          </div>
        </div>
      </div>

      {/* Lower band: school progress + team + feed */}
      <div className="grid-12">
        <div className="span-7">
          <div className="card card-pad">
            <div className="row-between" style={{marginBottom:14}}>
              <div>
                <div className="eyebrow">Этап 3 · Школа наставничества</div>
                <div className="h4" style={{marginTop:4}}>Прогресс ваших наставников</div>
              </div>
              <button className="btn btn-quiet btn-sm" onClick={() => onNav('school')}>Открыть школу<Icon name="arrowRight" size={14} /></button>
            </div>
            <div className="stack-3">
              {TEAM.mentors.map((m) => {
                const done = m.id === 'm1' ? 2 : 1;
                const pct = (done / 6) * 100;
                return (
                  <div key={m.id} className="card card-pad-sm" style={{borderColor:'var(--ink-150)'}}>
                    <div className="row-between" style={{marginBottom:10}}>
                      <div className="row-tight">
                        <div className={`avatar avatar-sm avatar-${m.avatar}`}>{m.initials}</div>
                        <div>
                          <div style={{fontWeight:600, fontSize:14}}>{m.name}</div>
                          <div style={{fontSize:12, color:'var(--ink-600)'}}>{m.role} · стаж {m.exp}</div>
                        </div>
                      </div>
                      <div style={{textAlign:'right'}}>
                        <div className="tabular" style={{fontFamily:'var(--font-display)', fontWeight:700, fontSize:15}}>{done}<span style={{color:'var(--ink-500)'}}>/6</span></div>
                        <div style={{fontSize:11, color:'var(--ink-500)'}}>модулей</div>
                      </div>
                    </div>
                    <div className="progress"><i style={{width:`${pct}%`}}/></div>
                    <div className="row-between" style={{marginTop:8, fontSize:12, color:'var(--ink-600)'}}>
                      <span>Сейчас: модуль {done+1} «{['Адаптация первой недели','Поколение Z'][done===2?0:1]}»</span>
                      <span className="row-tight"><span className="dot dot-warn"/>дедлайн 8 мая</span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        <div className="span-5">
          <div className="card card-pad" style={{marginBottom:20}}>
            <div className="eyebrow">Тьютор от ЦОПП</div>
            <div className="row" style={{gap:14, marginTop:12, alignItems:'center'}}>
              <div className="avatar avatar-lg avatar-wine">ДМ</div>
              <div style={{flex:1}}>
                <div style={{fontWeight:700, fontSize:15.5, fontFamily:'var(--font-display)'}}>Дарья Маратканова</div>
                <div style={{fontSize:12.5, color:'var(--ink-600)'}}>{TUTOR_LABEL}</div>
              </div>
              <div className="row-tight"><span className="dot dot-success"/><span style={{fontSize:12, color:'var(--success-700)', fontWeight:600}}>онлайн</span></div>
            </div>
            <div className="card card-pad-sm" style={{marginTop:14, background:'var(--amber-50)', borderColor:'var(--amber-200)'}}>
              <div style={{fontSize:13.5, color:'var(--ink-800)', lineHeight:1.5}}>
                «{tutorMsg}»
              </div>
            </div>
            <div className="row" style={{marginTop:14, gap:8}}>
              <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">
            <div className="eyebrow">Лента событий</div>
            <div className="stack-3" style={{marginTop:12}}>
              {FEED.map((f, i) => (
                <div key={i} className="row" style={{gap:12, alignItems:'flex-start', paddingTop:i?12:0, borderTop: i?'1px solid var(--ink-150)':'none'}}>
                  <div style={{
                    width:28, height:28, borderRadius:8,
                    background: f.kind==='tutor'?'var(--wine-100)':f.kind==='progress'?'var(--success-100)':'var(--ink-150)',
                    color: f.kind==='tutor'?'var(--wine-700)':f.kind==='progress'?'var(--success-700)':'var(--ink-700)',
                    display:'inline-flex', alignItems:'center', justifyContent:'center', flexShrink:0,
                  }}>
                    <Icon name={f.kind==='tutor'?'chat':f.kind==='progress'?'check':'info'} size={14} />
                  </div>
                  <div style={{flex:1, minWidth:0}}>
                    <div className="row-between" style={{marginBottom:2}}>
                      <span style={{fontWeight:600, fontSize:13}}>{f.who}</span>
                      <span style={{fontSize:11.5, color:'var(--ink-500)'}}>{f.when}</span>
                    </div>
                    <div style={{fontSize:13, color:'var(--ink-700)', lineHeight:1.4}}>{f.text}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Team & company */}
      <div className="grid-12" style={{marginTop:24}}>
        <div className="span-12">
          <div className="card card-pad">
            <div className="row-between" style={{marginBottom:14}}>
              <div>
                <div className="eyebrow">Состав команды</div>
                <div className="h4" style={{marginTop:4}}>{COMPANY.name}</div>
              </div>
              <button className="btn btn-ghost btn-sm" onClick={() => onNav('profile')}><Icon name="edit" size={14}/>Редактировать профиль</button>
            </div>
            <div className="grid-4">
              <PersonCard p={{name: TEAM.hr.name, role: TEAM.hr.role, initials: TEAM.hr.initials, av:'wine', meta:'руководит командой'}} />
              {TEAM.mentors.map(m => (
                <PersonCard key={m.id} p={{name:m.name, role:m.role, initials:m.initials, av:m.avatar, meta:`загрузка ${m.load}`}} />
              ))}
              <PersonCard p={{name:'Стажёр появится 1 июня', role: 'Анастасия Ким · ППКПТ', initials:'АК', av:'amber', meta:'до старта 28 дней', placeholder: true}} />
            </div>
          </div>
        </div>
      </div>

    </div>
  );
};
const TUTOR_LABEL = 'Куратор ЦОПП Приморья · ваша связь со всей программой';

const PersonCard = ({ p }) => (
  <div className="card card-pad-sm" style={{borderColor:'var(--ink-150)', opacity: p.placeholder?0.7:1, borderStyle: p.placeholder?'dashed':'solid'}}>
    <div className="row" style={{gap:10, marginBottom:10}}>
      <div className={`avatar avatar-md avatar-${p.av}`}>{p.initials}</div>
      <div style={{minWidth:0}}>
        <div style={{fontWeight:600, fontSize:13.5, fontFamily:'var(--font-display)', lineHeight:1.2}}>{p.name}</div>
        <div style={{fontSize:11.5, color:'var(--ink-600)', marginTop:2, lineHeight:1.3}}>{p.role}</div>
      </div>
    </div>
    <div style={{fontSize:11.5, color:'var(--ink-500)', borderTop:'1px solid var(--ink-150)', paddingTop:8}}>{p.meta}</div>
  </div>
);

const TeamProfile = () => {
  const { COMPANY, TEAM } = window.LAB;
  return (
    <div className="page page-narrow">
      <div className="eyebrow eyebrow-wine">Профиль команды</div>
      <h1 className="h1" style={{marginTop:8, marginBottom:8}}>{COMPANY.name}</h1>
      <div className="lede" style={{marginBottom:28}}>{COMPANY.legal} · {COMPANY.city}</div>

      <div className="card card-pad-lg" style={{marginBottom:20}}>
        <div className="grid-3">
          <Field label="Отрасль" value={COMPANY.industry} />
          <Field label="Сайт" value={COMPANY.site} link />
          <Field label="ИНН" value={COMPANY.inn} />
        </div>
      </div>

      <div className="card card-pad-lg" style={{marginBottom:20}}>
        <div className="row-between" style={{marginBottom:16}}>
          <div className="h4">Наставники</div>
          <button className="btn btn-ghost btn-sm"><Icon name="plus" size={14}/>Добавить</button>
        </div>
        <div className="stack-3">
          {TEAM.mentors.map(m => (
            <div key={m.id} className="row-between" style={{padding:'12px 14px', borderRadius:'var(--r-md)', background:'var(--ink-50)'}}>
              <div className="row-tight">
                <div className={`avatar avatar-md avatar-${m.avatar}`}>{m.initials}</div>
                <div>
                  <div style={{fontWeight:600, fontSize:14}}>{m.name}</div>
                  <div style={{fontSize:12, color:'var(--ink-600)'}}>{m.role} · стаж {m.exp} · {m.load}</div>
                </div>
              </div>
              <button className="btn btn-quiet btn-sm"><Icon name="edit" size={14}/></button>
            </div>
          ))}
        </div>
      </div>

      <div className="card card-pad-lg">
        <div className="h4" style={{marginBottom:14}}>Рабочие места для стажёров</div>
        <div className="stack-3">
          {[
            {title:'Помощник мастера на участке резки', who:'Игорь Савельев', tools:'Гильотинные ножницы, ленточная пила', oht:'Каска, очки, спецобувь'},
            {title:'Технолог-стажёр', who:'Ольга Захарова', tools:'CAD-станция, замерочный инструмент', oht:'Стандарт ОТ-2'},
          ].map((w, i) => (
            <div key={i} className="card card-pad-sm" style={{background:'var(--ink-50)', borderColor:'var(--ink-150)'}}>
              <div className="row-between">
                <div style={{fontWeight:600, fontSize:14, fontFamily:'var(--font-display)'}}>{w.title}</div>
                <span className="badge badge-wine">{w.who}</span>
              </div>
              <div style={{fontSize:12.5, color:'var(--ink-600)', marginTop:8}}>Оборудование: <b style={{color:'var(--ink-800)'}}>{w.tools}</b></div>
              <div style={{fontSize:12.5, color:'var(--ink-600)', marginTop:2}}>Охрана труда: <b style={{color:'var(--ink-800)'}}>{w.oht}</b></div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const Field = ({ label, value, link }) => (
  <div>
    <div style={{fontSize:11.5, color:'var(--ink-500)', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:600}}>{label}</div>
    <div style={{fontSize:15, fontWeight:500, marginTop:6, color: link?'var(--wine-700)':'var(--ink-900)'}}>{value}</div>
  </div>
);

Object.assign(window, { TeamHome, TeamProfile, PersonCard, Field });