// AcademiaDental — Quiz (rotating questions, 80% pass threshold, summary)
const { useState: useStateQ, useMemo: useMemoQ, useEffect: useEffectQ } = React;

function QuizScreen({ session, module: mod, topic, onClose, onCompleted, setRoute, openTutorWithContext }) {
  const D = window.AD_DATA;
  const S = window.AD_STATE;

  // 'quiz' | 'result' | 'schema'
  const [stage, setStage] = useStateQ('quiz');
  const [questions, setQuestions] = useStateQ(() => D.pickQuestions(topic.id, 8));
  const [answers, setAnswers] = useStateQ(() => questions.map(() => null));
  const [current, setCurrent] = useStateQ(0);
  const [shake, setShake] = useStateQ(0);
  const [showExit, setShowExit] = useStateQ(false);

  const optionOrders = useMemoQ(() => questions.map((q) => {
    const idx = q.opts.map((_, i) => i);
    for (let i = idx.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [idx[i], idx[j]] = [idx[j], idx[i]];
    }
    return idx;
  }), [questions]);

  function answer(displayIdx) {
    if (answers[current] != null) return;
    const realIdx = optionOrders[current][displayIdx];
    const isCorrect = realIdx === questions[current].a;
    const next = answers.slice();
    next[current] = { picked: realIdx, isCorrect };
    setAnswers(next);
    if (!isCorrect) setShake((x) => x + 1);
  }

  function nextQ() {
    if (current < questions.length - 1) setCurrent(current + 1);
    else setStage('result');
  }
  function prevQ() { if (current > 0) setCurrent(current - 1); }

  function requestExit() {
    const answered = answers.filter(Boolean).length;
    if (stage === 'quiz' && answered > 0 && answered < questions.length) {
      setShowExit(true);
    } else {
      onClose();
    }
  }

  const correctCount = answers.filter((a) => a && a.isCorrect).length;
  const wrongCount = answers.filter((a) => a && !a.isCorrect).length;
  const percent = Math.round((correctCount / questions.length) * 100);
  const passed = percent >= 80;
  const isAnswered = answers[current] != null;

  // ----- RESULT STAGE -----
  if (stage === 'result') {
    return (
      <>
        <TopBar back={{ onClick: onClose, label: 'Salir' }} title="Resultado"/>
        <div className="content-scroll">
          <div style={{textAlign:'center',padding:'18px 0 10px'}}>
            <div style={{width:80,height:80,borderRadius:'50%',background: passed ? 'var(--teal-pale)' : 'var(--red-pale)',margin:'0 auto 12px',display:'flex',alignItems:'center',justifyContent:'center'}}>
              {passed
                ? <Icon.Check style={{width:36,height:36,color:'var(--teal)'}}/>
                : <Icon.X     style={{width:36,height:36,color:'var(--red)'}}/>}
            </div>
            <div className="h1" style={{fontSize:22,fontWeight:700}}>{passed ? 'Aprobado' : 'Necesitas repasar'}</div>
            <div className="small muted" style={{marginTop:4}}>{correctCount} de {questions.length} correctas — {percent}%</div>
            {!passed ? <div className="small text-red" style={{marginTop:6}}>Se requiere mínimo 80% para avanzar</div> : null}
          </div>

          <div className="metric-grid">
            <div className="metric-card"><div className="metric-val text-teal">{correctCount}</div><div className="metric-lbl">Correctas</div></div>
            <div className="metric-card"><div className="metric-val text-red">{wrongCount}</div><div className="metric-lbl">Incorrectas</div></div>
          </div>

          <div style={{marginTop:14}}>
            <ProgressBar value={percent} color={passed ? '' : 'red'}/>
            <div className="row-between small muted" style={{marginTop:4}}>
              <span>{percent}% obtenido</span>
              <span>80% requerido</span>
            </div>
          </div>

          {!passed ? (
            <div className="alert alert-red" style={{marginTop:14}}>
              <div className="alert-title">Siguiente tema bloqueado</div>
              No puedes avanzar hasta aprobar con 80% o más. El tutor IA puede repasar contigo los puntos donde fallaste.
            </div>
          ) : null}

          <div className="sec-label">¿Qué sigue?</div>
          {passed ? (
            <>
              <button className="btn" onClick={() => setStage('schema')}><Icon.Map style={{width:14,height:14}}/> Ver esquema resumen</button>
              <button className="btn secondary" onClick={() => {
                S.setTopicDone(session.email, mod.id, topic.id);
                onCompleted && onCompleted();
                window.AD_TOAST.show('Tema marcado como completado ✓');
                onClose();
              }}>Marcar como completado y continuar</button>
              <button className="btn secondary" onClick={() => {
                const fresh = D.pickQuestions(topic.id, 8);
                setQuestions(fresh);
                setAnswers(fresh.map(() => null));
                setCurrent(0);
                setStage('quiz');
              }}>Repetir con preguntas distintas</button>
              <button className="btn secondary" onClick={onClose}><Icon.Back style={{width:13,height:13}}/> Volver al módulo</button>
            </>
          ) : (
            <>
              <button className="btn" onClick={() => {
                const fresh = D.pickQuestions(topic.id, 8);
                setQuestions(fresh);
                setAnswers(fresh.map(() => null));
                setCurrent(0);
                setStage('quiz');
              }}>Volver a intentar (orden distinto)</button>
              <button className="btn secondary" onClick={() => {
                openTutorWithContext && openTutorWithContext({ topic: topic.name, failed: answers.map((a, i) => a && !a.isCorrect ? questions[i].q : null).filter(Boolean) });
              }}><Icon.Chat style={{width:14,height:14}}/> Repasar con tutor IA</button>
              <button className="btn secondary" onClick={onClose}><Icon.Back style={{width:13,height:13}}/> Volver al módulo</button>
            </>
          )}
        </div>
      </>
    );
  }

  // ----- SCHEMA STAGE -----
  if (stage === 'schema') {
    const schema = D.schema[topic.id];
    const refs = D.refs[topic.id] || [];
    return (
      <>
        <TopBar back={{ onClick: () => setStage('result'), label: 'Resultado' }} title="Resumen"/>
        <div className="content-scroll">
          <div className="tab-row">
            <button className="tab-btn active">Esquema</button>
            <button className="tab-btn">Bibliografía</button>
          </div>
          <div style={{textAlign:'center',fontSize:13,fontWeight:500,marginBottom:10}}>{schema ? schema.title : topic.name}</div>
          {schema ? (
            <>
              <div className="node-box" style={{background:'var(--teal-pale)',borderColor:'var(--teal-mid)',marginBottom:6}}>
                <div style={{fontSize:12,fontWeight:600,color:'var(--teal)'}}>{schema.title}</div>
              </div>
              <div className="arrow-d">↓</div>
              <div className="card" style={{padding:'10px 12px'}}>
                <div className="sec-label" style={{margin:'0 0 8px'}}>Claves para el examen</div>
                <ul style={{margin:0,paddingLeft:18,fontSize:12.5,color:'var(--gray-600)',lineHeight:1.7}}>
                  {schema.keys.map((k, i) => <li key={i}>{k}</li>)}
                </ul>
              </div>
            </>
          ) : (
            <div className="card" style={{textAlign:'center',padding:18}}>
              <div className="small muted">Esquema en preparación para este tema.</div>
            </div>
          )}

          {refs.length ? (
            <>
              <div className="sec-label">Bibliografía — actualización automática</div>
              <div className="card">
                {refs.map((r, i) => (
                  <div key={i} className="ref-row">
                    <div className="ref-dot-sm" style={{background: r.dot === 'teal' ? 'var(--teal-light)' : 'var(--amber)'}}/>
                    <div>
                      <div style={{fontSize:12,fontWeight:500,lineHeight:1.4}}>{r.text}</div>
                      <div className="small muted">{r.src}</div>
                    </div>
                  </div>
                ))}
              </div>
            </>
          ) : null}

          <div style={{height:10}}/>
          <button className="btn" onClick={() => {
            S.setTopicDone(session.email, mod.id, topic.id);
            onCompleted && onCompleted();
            window.AD_TOAST.show('Tema completado · siguiente desbloqueado ✓');
            onClose();
          }}>Marcar tema completado y continuar</button>
        </div>
      </>
    );
  }

  // ----- QUIZ STAGE -----
  const q = questions[current];
  const ansForThis = answers[current];
  return (
    <>
      <TopBar
        back={{ onClick: requestExit, label: 'Salir' }}
        title={topic.name}
        right={<div className="small" style={{color:'var(--blue)',fontWeight:500}}>{current + 1}/{questions.length}</div>}
      />
      <div className="content-scroll">
        <div className="dots">
          {answers.map((a, i) => (
            <button
              key={i}
              onClick={() => { if (a || i === current) setCurrent(i); }}
              className={'dot ' + (a ? (a.isCorrect ? 'ok' : 'bad') : (i === current ? 'cur' : ''))}
              style={{border:'none',padding:0,cursor:(a || i===current) ? 'pointer' : 'default'}}
              aria-label={'Pregunta ' + (i+1)}
            />
          ))}
        </div>

        <div className="card" key={shake} style={ansForThis && !ansForThis.isCorrect ? { animation: 'shake 0.4s' } : null}>
          <div className="small muted" style={{marginBottom:6}}>Pregunta {current + 1} de {questions.length} · orden aleatorio</div>
          <div style={{fontSize:14,fontWeight:500,marginBottom:12,lineHeight:1.5}}>{q.q}</div>
          {optionOrders[current].map((realIdx, displayIdx) => {
            const letter = String.fromCharCode(65 + displayIdx);
            const isCorrect = realIdx === q.a;
            const picked = ansForThis && ansForThis.picked === realIdx;
            let cls = 'qopt';
            if (ansForThis) {
              if (isCorrect) cls += ' correct';
              else if (picked) cls += ' wrong';
              else cls += ' dim';
            }
            return (
              <button key={realIdx} className={cls} disabled={!!ansForThis} onClick={() => answer(displayIdx)}>
                <div className="qopt-letter">{letter}</div>
                <span>{q.opts[realIdx]}</span>
              </button>
            );
          })}

          {ansForThis ? (
            <div className="qexpl">{q.explain}</div>
          ) : null}
        </div>

        {/* Navigation: Anterior · Siguiente / Ver resultado */}
        <div style={{display:'flex',gap:8,marginTop:14}}>
          <button
            className="btn secondary"
            style={{flex:1}}
            onClick={prevQ}
            disabled={current === 0}>
            <Icon.Back style={{width:13,height:13}}/> Anterior
          </button>
          <button
            className="btn"
            style={{flex:2}}
            onClick={nextQ}
            disabled={!ansForThis}>
            {current < questions.length - 1 ? 'Siguiente →' : 'Ver resultado'}
          </button>
        </div>

        <div className="small muted" style={{textAlign:'center',marginTop:10}}>
          Toca un punto arriba para volver a una pregunta · mínimo 80% para aprobar
        </div>

        {/* Exit button at bottom */}
        <div style={{marginTop:16,paddingTop:14,borderTop:'1px solid var(--gray-200)'}}>
          <button className="btn danger" onClick={requestExit}>
            <Icon.X style={{width:13,height:13}}/> Salir del quiz
          </button>
        </div>
      </div>

      {/* Confirmation modal */}
      {showExit ? (
        <Modal
          title="¿Salir del quiz?"
          body={
            <p>Llevas <strong>{answers.filter(Boolean).length} de {questions.length}</strong> preguntas contestadas. Si sales ahora se pierde el avance de este intento.</p>
          }
          onClose={() => setShowExit(false)}
          actions={
            <>
              <button className="btn secondary" style={{flex:1}} onClick={() => setShowExit(false)}>Seguir intentando</button>
              <button className="btn danger" style={{flex:1}} onClick={() => { setShowExit(false); onClose(); }}>Salir</button>
            </>
          }
        />
      ) : null}

      <style>{`@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }`}</style>
    </>
  );
}

Object.assign(window, { QuizScreen });