/* ============================================================
   Student — Guided onboarding
   Soft checklist (all modules stay accessible). Walks a new
   student through account → registration → core documents →
   medical, deep-linking into the existing modules.
   ============================================================ */

function StudentOnboarding({ ctx, rec }) {
  const { setRoute } = ctx;
  const prog = window.calcProgress(rec);

  const uploadDocs = window.DOCUMENTS.filter(d => d.source === 'upload');
  const docDone = uploadDocs.filter(d =>
    ['uploaded', 'verified'].includes(rec.documents[d.id]?.status)).length;
  const medSubmitted = ['endorsed', 'verified'].includes(rec.medical?.status);

  const steps = [
    {
      id: 'account', n: 1, title: 'Create your account',
      desc: 'Signed in and your student record is live.',
      done: true, route: null, cta: null,
      meta: rec.profile.email || ctx.session.email,
    },
    {
      id: 'registration', n: 2, title: 'Complete the registration form',
      desc: 'Personal details, course, declaration and signature.',
      done: !!rec.registration?.submitted, route: 'registration',
      cta: rec.registration?.submitted ? 'Review' : 'Fill registration',
      meta: `${prog.registrationPct}% ${tr('complete')}`,
    },
    {
      id: 'documents', n: 3, title: 'Upload your documents',
      desc: '10th marksheet, Aadhaar, a photo ID (Passport / DL / Voter / Ration) and a passport-size photograph.',
      done: docDone === uploadDocs.length, route: 'documents',
      cta: docDone === uploadDocs.length ? 'Review documents' : 'Upload documents',
      meta: `${docDone}/${uploadDocs.length} ${tr('uploaded')}`,
    },
    {
      id: 'medical', n: 4, title: 'Submit your medical certificate',
      desc: 'Download the template, get it endorsed by an RMP, then upload the signed scan.',
      done: medSubmitted, route: 'medical',
      cta: medSubmitted ? 'Review medical' : 'Start medical',
      meta: rec.medical?.status ? tr(rec.medical.status.replace('-', ' ')) : tr('not started'),
    },
  ];

  const doneCount = steps.filter(s => s.done).length;
  const allDone = doneCount === steps.length;
  const pct = Math.round((doneCount / steps.length) * 100);

  return (
    <div className="module">
      <ModuleHeader
        crumbs="GETTING STARTED"
        title={allDone ? tr('Onboarding complete') : tr('Welcome — let’s get you set up')}
        sub={tr("Finish these prerequisites so an instructor can verify your file. You can use the rest of the dashboard any time — this is just your guided path.")}
        right={<div className="pill pill-info"><i className="dotty"/>{doneCount}/{steps.length} {tr('done')}</div>}
      />

      <div className="grid g-side">
        <div className="card" style={{padding:0}}>
          <div className="list">
            {steps.map(s => (
              <div key={s.id} className="list-row" style={{cursor: s.route ? 'pointer' : 'default'}}
                   onClick={()=> s.route && setRoute(s.route)}>
                <div className="ix" style={{
                  background: s.done ? 'var(--good-soft)' : 'var(--bg-2)',
                  color: s.done ? 'var(--good)' : 'var(--ink-2)'}}>
                  {s.done ? '✓' : String(s.n).padStart(2,'0')}
                </div>
                <div className="nm">
                  <div className="ttl">{tr(s.title)}</div>
                  <div className="desc">{tr(s.desc)}</div>
                </div>
                <div className="meta">
                  <div className="tiny muted" style={{marginBottom:4,textTransform:'capitalize'}}>{tr(s.meta)}</div>
                  {s.done
                    ? <StatusPill status="verified"/>
                    : <StatusPill status="pending"/>}
                </div>
                {s.route && (
                  <button className={cls('btn btn-sm onboarding-cta', !s.done && 'btn-primary')}
                          onClick={(e)=>{e.stopPropagation();setRoute(s.route);}}
                          style={{marginLeft:10,whiteSpace:'nowrap'}}>
                    {tr(s.cta)} →
                  </button>
                )}
              </div>
            ))}
          </div>
        </div>

        <div className="stack">
          <div className="card">
            <div className="card-hd"><h3>{tr('Your progress')}</h3></div>
            <div className="card-body">
              <div style={{textAlign:'center',padding:'4px 0 14px'}}>
                <Donut value={allDone ? 100 : pct} size={120} stroke={10} sub="onboarding"/>
              </div>
              {allDone ? (
                <div className="banner good">
                  <div className="body">{tr('All prerequisites submitted. An instructor will verify your file — track status from Home.')}</div>
                </div>
              ) : (
                <p className="small muted" style={{margin:0,lineHeight:1.6}}>
                  {tr('Work top to bottom. Each item opens the full module — your answers save automatically and you can come back any time.')}
                </p>
              )}
              <button className="btn btn-sm" style={{marginTop:12}} onClick={()=>setRoute('home')}>
                {tr('Go to dashboard home')} →
              </button>
            </div>
          </div>
          <div className="card">
            <div className="card-hd"><h3>{tr('Need the templates?')}</h3></div>
            <div className="card-body stack-sm">
              <a className="btn btn-sm" href="assets/Registration-Form.docx" download>
                {window.NavIcons.download} Registration form (.docx)
              </a>
              <a className="btn btn-sm" href="assets/Medical-Fitness-Certificate-RPA.pdf" target="_blank" rel="noopener">
                {window.NavIcons.download} Medical certificate (PDF)
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.StudentOnboarding = StudentOnboarding;