// AcademiaDental — Theory screen (rich content from theory.js)
const { useState: useStateTh, useMemo: useMemoTh } = React;

function TheoryScreen({ session, module: mod, topic, onStartQuiz, onClose, onMarkDone }) {
  const S = window.AD_STATE;
  const progress = S.getProgress(session.email)[mod.id] || { topics: {} };
  const alreadyDone = progress.topics[topic.id] === 'done';
  const theoryRaw = (window.AD_THEORY && window.AD_THEORY[topic.id]) || '';
  const hasTheory = !!(theoryRaw && theoryRaw.trim());
  const html = useMemoTh(() => hasTheory ? window.AD_MARKDOWN.render(theoryRaw) : '', [theoryRaw]);

  return (
    <>
      <TopBar back={{ onClick: onClose, label: mod.name }} title={topic.name}/>
      <div className="content-scroll theory-page">
        <div className="row-between" style={{marginBottom:14}}>
          <div>
            <div className="small muted">Tema</div>
            <div className="h2" style={{fontSize:18}}>{topic.name}</div>
          </div>
          <div className="badge b-teal"><Icon.Clock style={{width:11,height:11,display:'inline-block',marginRight:4,verticalAlign:-2}}/>{topic.minutes} min</div>
        </div>

        {alreadyDone ? (
          <div className="alert alert-teal" style={{marginBottom:14}}>
            <div className="alert-title">Tema ya completado ✓</div>
            Puedes repasar la teoría o volver a intentar el quiz con preguntas nuevas.
          </div>
        ) : null}

        {hasTheory ? (
          <article className="theory-content" dangerouslySetInnerHTML={{__html: html}}/>
        ) : (
          <div className="alert alert-amber">
            <div className="alert-title">Contenido teórico pendiente</div>
            Aún no se ha cargado la teoría para este tema. Edita <code>theory.js</code> y agrega el contenido del tema con el id <strong>{topic.id}</strong>.
            <div className="small" style={{marginTop:6,opacity:0.85}}>Puedes hacer el quiz igualmente.</div>
          </div>
        )}

        <div className="theory-actions">
          <button className="btn" onClick={onStartQuiz}>
            <Icon.Play style={{width:13,height:13}}/> {alreadyDone ? 'Repetir quiz' : 'Hacer quiz del tema'}
          </button>
          <button className="btn secondary" onClick={onClose}>Volver al módulo</button>
        </div>

        <div className="small muted" style={{marginTop:14,textAlign:'center'}}>
          Material confidencial — uso personal · {session.email}
        </div>
      </div>
    </>
  );
}

Object.assign(window, { TheoryScreen });