// Дашборд куратора ЦОПП — сетка 15 команд, лента, алерты

const CuratorDashboard = ({ onNav }) => {
  const { ALL_TEAMS, CURATOR_FEED, STAGES } = window.LAB;
  const [view, setView] = React.useState('grid');

  const greens = ALL_TEAMS.filter(t => t.status==='green').length;
  const yellows = ALL_TEAMS.filter(t => t.status==='yellow').length;
  const reds = ALL_TEAMS.filter(t => t.status==='red').length;

  return (
    <div className="page page-wide">
      <div className="row-between" style={{marginBottom:24, alignItems:'flex-end'}}>
        <div>
          <div className="eyebrow eyebrow-wine">Дашборд куратора · ЦОПП Приморья</div>
          <h1 className="h1" style={{marginTop:8, marginBottom:6}}>Здравствуйте, Дарья.</h1>
          <div className="lede">15 команд · сейчас активны Школа наставничества и черновики проектов. 3 команды требуют внимания.</div>
        </div>
        <div className="row" style={{gap:8}}>
          <button className="btn btn-ghost btn-sm"><Icon name="download" size={14}/>Экспорт в xlsx</button>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={14}/>Добавить команду</button>
        </div>
      </div>

      <div className="grid-4" style={{marginBottom:24}}>
        <div className="kpi kpi-glow-wine">
          <div className="kpi-label">Команд активны</div>
          <div className="kpi-value tabular">15<span className="kpi-suffix">/15</span></div>
          <div className="kpi-trend">все на связи в этой неделе</div>
        </div>
        <div className="kpi kpi-glow-emerald">
          <div className="kpi-label">Прогресс по Школе</div>
          <div className="kpi-value tabular">58<span className="kpi-suffix">%</span></div>
          <div className="kpi-trend">+14% за неделю</div>
        </div>
        <div className="kpi kpi-glow-amber">
          <div className="kpi-label">Черновиков проекта</div>
          <div className="kpi-value tabular">4<span className="kpi-suffix">/15</span></div>
          <div className="kpi-trend">пик ожидается к 15 мая</div>
        </div>
        <div className="kpi kpi-glow-ink">
          <div className="kpi-label">Требуют внимания</div>
          <div className="kpi-value tabular" style={{color:'var(--danger-500)'}}>3</div>
          <div className="kpi-trend neg">алерты ниже</div>
        </div>
      </div>

      <div className="grid-12">
        <div className="span-8">
          <div className="card card-pad" style={{marginBottom:20}}>
            <div className="row-between" style={{marginBottom:14}}>
              <div className="row-tight">
                <div className="h4">Команды</div>
                <span className="badge badge-success" style={{marginLeft:8}}><span className="dot dot-success"/>{greens}</span>
                <span className="badge badge-warn"><span className="dot dot-warn"/>{yellows}</span>
                <span className="badge badge-danger"><span className="dot dot-danger"/>{reds}</span>
              </div>
              <div className="pill-tabs">
                <button className={`pill-tab ${view==='grid'?'active':''}`} onClick={()=>setView('grid')}><Icon name="grid" size={12}/> Сетка</button>
                <button className={`pill-tab ${view==='list'?'active':''}`} onClick={()=>setView('list')}><Icon name="list" size={12}/> Список</button>
              </div>
            </div>

            {view==='grid' ? (
              <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:12}}>
                {ALL_TEAMS.map(t => <TeamCard key={t.id} t={t}/>)}
              </div>
            ) : (
              <TeamTable teams={ALL_TEAMS}/>
            )}
          </div>
        </div>

        <div className="span-4">
          <div className="card card-pad" style={{marginBottom:20}}>
            <div className="row-between" style={{marginBottom:12}}>
              <div className="h4">Алерты и события</div>
              <span className="badge badge-danger pulse">3 новых</span>
            </div>
            <div className="stack-3">
              {CURATOR_FEED.map((f, i) => (
                <div key={i} className="row" style={{gap:10, alignItems:'flex-start', paddingTop:i?12:0, borderTop:i?'1px solid var(--ink-150)':'none'}}>
                  <div style={{
                    width:26, height:26, borderRadius:7, flexShrink:0,
                    background: f.kind==='alert'?'var(--danger-100)':f.kind==='progress'?'var(--success-100)':'var(--info-100)',
                    color: f.kind==='alert'?'var(--danger-700)':f.kind==='progress'?'var(--success-700)':'var(--info-500)',
                    display:'inline-flex', alignItems:'center', justifyContent:'center',
                  }}>
                    <Icon name={f.kind==='alert'?'alert':f.kind==='progress'?'check':'calendar'} size={13}/>
                  </div>
                  <div style={{flex:1, minWidth:0}}>
                    <div className="row-between" style={{marginBottom:2}}>
                      <span style={{fontWeight:600, fontSize:12.5}}>{f.team}</span>
                      <span style={{fontSize:11, color:'var(--ink-500)'}}>{f.time}</span>
                    </div>
                    <div style={{fontSize:12.5, color:'var(--ink-700)', lineHeight:1.4}}>{f.text}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="card card-pad">
            <div className="h4" style={{marginBottom:12}}>На этой неделе</div>
            <div className="stack-3">
              {[
                {d:'Ср 6.05', t:'4 тьюторских созвона', sub:'10:00, 12:00, 15:00, 17:00'},
                {d:'Чт 7.05', t:'Проверка домашек', sub:'модуль 3 от 9 команд'},
                {d:'Вт 12.05', t:'Очный день Школы', sub:'ВДЦ «Океан», 09:00'},
              ].map((w,i) => (
                <div key={i} className="row" style={{gap:12, paddingTop:i?12:0, borderTop:i?'1px solid var(--ink-150)':'none'}}>
                  <span className="tabular" style={{fontFamily:'var(--font-mono)', fontSize:11.5, color:'var(--wine-700)', fontWeight:600, minWidth:54}}>{w.d}</span>
                  <div style={{flex:1}}>
                    <div style={{fontWeight:600, fontSize:13}}>{w.t}</div>
                    <div style={{fontSize:11.5, color:'var(--ink-600)'}}>{w.sub}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const TeamCard = ({ t }) => {
  const statusColor = t.status==='green'?'var(--success-500)':t.status==='yellow'?'var(--warn-500)':'var(--danger-500)';
  return (
    <div className="card card-pad-sm" style={{borderColor:'var(--ink-150)', cursor:'pointer', position:'relative'}}>
      <div style={{position:'absolute', top:0, left:0, right:0, height:3, background:statusColor, borderRadius:'var(--r-lg) var(--r-lg) 0 0'}}/>
      <div className="row-between" style={{marginBottom:8, marginTop:4}}>
        <div style={{minWidth:0, flex:1}}>
          <div style={{fontFamily:'var(--font-display)', fontWeight:700, fontSize:14, color:'var(--ink-950)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{t.name}</div>
          <div style={{fontSize:11.5, color:'var(--ink-600)'}}>{t.industry} · {t.city}</div>
        </div>
        <span className="dot" style={{background:statusColor, boxShadow:`0 0 0 3px ${statusColor}24`}}/>
      </div>
      <div className="stage-bar" style={{marginTop:10}}>
        {t.stages.map((s, i) => (
          <span key={i} style={{
            background: s===1?'var(--wine-600)':s>0?`linear-gradient(90deg, var(--wine-600) 0%, var(--wine-600) ${s*100}%, var(--ink-200) ${s*100}%)`:'var(--ink-200)',
            height:6,
          }}/>
        ))}
      </div>
      <div className="row-between" style={{marginTop:10, fontSize:11.5}}>
        <span style={{color:'var(--ink-600)'}}>{t.tagline}</span>
        <span className="row-tight" style={{color:'var(--ink-500)'}}><Icon name="users" size={12}/>{t.mentors}</span>
      </div>
    </div>
  );
};

const TeamTable = ({ teams }) => (
  <div style={{overflowX:'auto'}}>
    <table style={{width:'100%', borderCollapse:'collapse', fontSize:13}}>
      <thead>
        <tr style={{borderBottom:'1px solid var(--ink-200)', textAlign:'left'}}>
          {['Команда','Отрасль','Этап 1','Этап 2','Этап 3','Этап 4','Этап 5','Статус','Наст.'].map((h,i) => (
            <th key={i} style={{padding:'10px 8px', fontSize:11, fontWeight:600, color:'var(--ink-600)', textTransform:'uppercase', letterSpacing:'0.06em'}}>{h}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {teams.map(t => (
          <tr key={t.id} style={{borderBottom:'1px solid var(--ink-150)'}}>
            <td style={{padding:'10px 8px', fontWeight:600}}>{t.name}</td>
            <td style={{padding:'10px 8px', color:'var(--ink-600)'}}>{t.industry}</td>
            {t.stages.map((s, i) => (
              <td key={i} style={{padding:'10px 8px'}}>
                <div style={{width:48, height:6, borderRadius:99, background: s===1?'var(--wine-600)':s>0?`linear-gradient(90deg, var(--wine-600) ${s*100}%, var(--ink-200) ${s*100}%)`:'var(--ink-200)'}}/>
              </td>
            ))}
            <td style={{padding:'10px 8px'}}>
              <span className="dot" style={{background: t.status==='green'?'var(--success-500)':t.status==='yellow'?'var(--warn-500)':'var(--danger-500)'}}/>
            </td>
            <td style={{padding:'10px 8px', color:'var(--ink-600)'}}>{t.mentors}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

Object.assign(window, { CuratorDashboard });