// AcademiaDental — Module list & detail
const { useState: useStateM, useMemo: useMemoM } = React;

function ModulesScreen({ session, route, setRoute, openTopic }) {
  const D = window.AD_DATA;
  const S = window.AD_STATE;
  const progress = S.getProgress(session.email);

  // Parse moduleId if any
  const moduleId = route.startsWith('modules:') ? route.split(':')[1] : null;
  const moduleDetail = moduleId && D.modules.find((m) => m.id === moduleId);

  if (moduleDetail) {
    const p = progress[moduleDetail.id] || { percent: 0, topics: {} };
    const doneCount = moduleDetail.topics.filter((t) => p.topics[t.id] === 'done').length;
    // Find first not-done (current) -- next ones are locked
    const currentIdx = moduleDetail.topics.findIndex((t) => p.topics[t.id] !== 'done');
    return (
      <>
        <TopBar back={{ onClick: () => setRoute('modules'), label: 'Módulos' }} title={moduleDetail.name}/>
        <div className="content-scroll">
          <div className="progress-card">
            <div className="pc-label">Progreso</div>
            <div className="pc-module">{moduleDetail.name}</div>
            <ProgressBar value={p.percent}/>
            <div className="pc-meta">
              <span>{doneCount} de {moduleDetail.topics.length} temas</span>
              <span>{p.percent}%</span>
            </div>
          </div>

          <div className="sec-label">Temas del módulo</div>
          {moduleDetail.topics.map((t, idx) => {
            const status = p.topics[t.id]; // 'done' | undefined
            const isCurrent = idx === currentIdx;
            const isLocked = !status && !isCurrent;
            return (
              <button key={t.id}
                className={'mod-row ' + (status === 'done' ? '' : (isCurrent ? 'active' : 'locked'))}
                onClick={() => { if (!isLocked) openTopic(moduleDetail, t); }}
                disabled={isLocked}>
                <div className="mod-icon" style={{
                  background: status === 'done' ? 'var(--green-pale)' : (isCurrent ? 'var(--blue)' : 'var(--gray-200)'),
                  color: status === 'done' ? 'var(--green)' : (isCurrent ? '#fff' : 'var(--gray-400)')
                }}>
                  {status === 'done' ? <Icon.Check style={{width:16,height:16}}/> :
                    isCurrent ? <Icon.Play style={{width:14,height:14}}/> :
                    <Icon.Lock style={{width:14,height:14}}/>}
                </div>
                <div className="mod-info">
                  <div className="mod-name">{t.name}</div>
                  <div className="mod-sub">
                    {status === 'done' ? `Completado · ${t.minutes} min` :
                     isCurrent ? `Disponible · ${t.minutes} min` :
                     'Bloqueado · completa tema anterior'}
                  </div>
                </div>
                {isCurrent ? <span className="mod-badge b-blue">Continuar</span> : null}
              </button>
            );
          })}

          <div style={{height:14}}/>
          <div className="alert alert-teal">
            <div className="alert-title">¿Cómo se desbloquean los temas?</div>
            Aprueba con ≥80% el quiz de cada tema. Las preguntas se mezclan en orden distinto cada vez.
          </div>
        </div>
      </>
    );
  }

  // Module list / store
  return (
    <>
      <TopBar logo title="Módulos" right={<button className="avatar" onClick={() => setRoute('account')}>{(session.name||'U').split(' ').map(p=>p[0]).slice(0,2).join('')}</button>}/>
      <div className="content-scroll">
        <div className="alert alert-teal">
          <div className="alert-title">Cupón activo: 15% OFF</div>
          Por completar un módulo desbloqueas descuentos en el siguiente.
        </div>

        <div className="sec-label">Tus módulos</div>
        {D.modules.map((m) => {
          const p = progress[m.id] || { percent: 0, topics: {} };
          return (
            <button key={m.id} className="mod-row" onClick={() => setRoute('modules:' + m.id)}>
              <div className="mod-icon" style={{background: _moduleBg(m.color), color: _moduleFg(m.color)}}>
                {p.percent === 100 ? <Icon.Check style={{width:18,height:18}}/> : <Icon.Book style={{width:18,height:18}}/>}
              </div>
              <div className="mod-info">
                <div className="mod-name">{m.name}</div>
                <div className="mod-sub">{m.subtitle}</div>
                {p.percent > 0 && p.percent < 100 ? (
                  <div style={{marginTop:6}}>
                    <div className="pbar-bg" style={{height:5}}><div className="pbar" style={{width: p.percent + '%', height:5}}/></div>
                  </div>
                ) : null}
              </div>
              {p.percent === 100
                ? <span className="mod-badge b-green">100%</span>
                : (p.percent > 0 ? <span className="mod-badge b-blue">{p.percent}%</span>
                  : <span className="mod-badge b-teal">${m.price.toLocaleString('es-CL')}</span>)}
            </button>
          );
        })}

        <div className="sec-label">Escalera de descuentos</div>
        <div className="card">
          <div className="ladder-row" style={{borderColor:'transparent',padding:'8px 0'}}>
            <div className="ladder-num" style={{background:'var(--green-pale)',color:'var(--green)'}}>1</div>
            <div style={{flex:1,fontSize:13}}>1er módulo · precio normal</div>
            <span className="small muted">−0%</span>
          </div>
          <div className="ladder-row" style={{borderColor:'transparent',padding:'8px 0'}}>
            <div className="ladder-num" style={{background:'var(--blue-pale)',color:'var(--blue)'}}>2</div>
            <div style={{flex:1,fontSize:13}}>2do módulo · cupón automático</div>
            <span className="small text-teal" style={{fontWeight:500}}>−15%</span>
          </div>
          <div className="ladder-row" style={{borderColor:'transparent',padding:'8px 0'}}>
            <div className="ladder-num" style={{background:'var(--amber-pale)',color:'var(--amber)'}}>3</div>
            <div style={{flex:1,fontSize:13}}>3er módulo</div>
            <span className="small text-teal" style={{fontWeight:500}}>−20%</span>
          </div>
          <div className="ladder-row" style={{borderColor:'transparent',padding:'8px 0'}}>
            <div className="ladder-num" style={{background:'var(--purple-pale)',color:'var(--purple)'}}>4+</div>
            <div style={{flex:1,fontSize:13}}>Desde el 4º módulo</div>
            <span className="small text-teal" style={{fontWeight:500}}>−25%</span>
          </div>
          <div className="hr"/>
          <div className="row-between">
            <div className="small muted">Curso completo</div>
            <div style={{fontSize:14,fontWeight:600,color:'var(--teal)'}}>$800.000</div>
          </div>
        </div>

        <div style={{height:14}}/>
      </div>
    </>
  );
}

Object.assign(window, { ModulesScreen });