// Screens 01 · Onboarding  +  02 · Dashboard
const { useState, useEffect } = React;

// ═══════════════════════════════════════════════════════════
// 01 · Onboarding
// ═══════════════════════════════════════════════════════════
function S01Onboarding() {
  const [step, setStep] = useState(1);
  const [, set] = useAtlasState();

  const bulletDelay = i => ({
    animation: `fadeSlideUp 300ms ease-out ${120 + i*60}ms both`,
  });

  // Step 1 — bienvenida
  if (step === 1) return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding: 40 }}>
      <div style={{ width:'100%', maxWidth: 680 }}>
        <AtlasLogo size={22} />
        <h1 style={{ fontFamily: T.serif, fontSize: '2rem', fontWeight: 500, color: T.ink9,
          lineHeight: 1.2, margin: '28px 0 20px',
          fontVariationSettings: '"opsz" 48, "GRAD" 30' }}>
          Mucho gusto, vamos a trabajar.
        </h1>
        <p style={{ fontFamily: T.sans, fontSize: '1.0625rem', color: T.ink7, lineHeight: 1.65,
          maxWidth: 520, marginBottom: 40 }}>
          Soy Atlas. Estoy aquí para que la IA no piense por ti — para que piense contigo, con memoria.
        </p>
        <Btn onClick={() => setStep(2)} size="lg" style={{ width: '100%', maxWidth: 520, justifyContent:'space-between', display:'flex' }}>
          <span>Cómo soy diferente</span><span>→</span>
        </Btn>
        <p style={{ fontFamily: T.sans, fontSize: '0.75rem', color: T.ink4, marginTop: 20,
          display:'flex', gap: 6, alignItems:'center' }}>
          <span style={{ width:8, height:8, borderRadius:'50%', background: T.acc6, display:'inline-block' }}/>
          Paso 1 de 3
          <span style={{ width:8, height:8, borderRadius:'50%', background: T.paper3, display:'inline-block' }}/>
          <span style={{ width:8, height:8, borderRadius:'50%', background: T.paper3, display:'inline-block' }}/>
        </p>
      </div>
    </div>
  );

  // Step 2 — tabla de tercera vía
  if (step === 2) {
    const cols = [
      { title: 'Tutora IA', desc: 'Te ayuda a resolver sin preguntarte qué entiendes.', tag: null },
      { title: 'Detector',  desc: 'Te vigila y puede bloquearte si detecta uso de IA.', tag: null },
      { title: 'Atlas',     desc: 'Nombra cómo usas la IA y convierte esa delegación en deuda saldable por evidencia.', tag: 'tercera vía', highlight: true },
    ];
    return (
      <div style={{ height:'100%', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding: '40px 40px' }}>
        <div style={{ width:'100%', maxWidth: 680 }}>
          <p style={{ fontFamily: T.sans, fontSize: '0.75rem', color: T.ink4, marginBottom: 12, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Paso 2 de 3</p>
          <h2 style={{ fontFamily: T.serif, fontSize: '1.625rem', fontWeight: 500, color: T.ink9, marginBottom: 28, fontVariationSettings: '"opsz" 32' }}>
            Tres formas de usar IA en clase
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12, marginBottom: 32 }}>
            {cols.map(c => (
              <div key={c.title} style={{
                background: c.highlight ? `hsl(var(--atlas-warm-400) / 0.07)` : T.paper1,
                border: `1px solid ${c.highlight ? T.warm4 : T.paper3}`,
                borderRadius: 8, padding: '18px 16px',
              }}>
                {c.tag && <span style={{ fontFamily: T.sans, fontSize: '0.6875rem', fontWeight: 600, color: T.warm6,
                  textTransform: 'uppercase', letterSpacing: '0.06em', display: 'block', marginBottom: 8 }}>{c.tag}</span>}
                <div style={{ fontFamily: T.sans, fontWeight: 600, color: T.ink9, marginBottom: 8 }}>{c.title}</div>
                <div style={{ fontFamily: T.serif, fontSize: '0.9375rem', color: T.ink7, lineHeight: 1.6,
                  fontVariationSettings: '"opsz" 18' }}>{c.desc}</div>
              </div>
            ))}
          </div>
          <div style={{ marginBottom: 32 }}>
            {['Atlas no entra al salón.', 'Atlas no espía ChatGPT.', 'Atlas no frena tu entrega.'].map((s, i) => (
              <p key={i} style={{ fontFamily: T.serif, fontSize: '1.0625rem', color: T.ink8, lineHeight: 1.6,
                fontVariationSettings: '"opsz" 18', marginBottom: 8, ...bulletDelay(i) }}>
                {s}
              </p>
            ))}
          </div>
          <Btn onClick={() => setStep(3)} size="lg" style={{ width:'100%', maxWidth: '100%', display:'flex', justifyContent:'space-between' }}>
            <span>Entiendo, sigamos</span><span>→</span>
          </Btn>
        </div>
      </div>
    );
  }

  // Step 3 — propuesta de path
  const bullets = ['Revisar bibliografía (15 min)', 'Trabajar en regresión (1h 30min)', 'Validar con residuales (30 min)', 'Entregar (5 min)'];
  return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding: '40px 40px' }}>
      <div style={{ width:'100%', maxWidth: 680 }}>
        <p style={{ fontFamily: T.sans, fontSize: '0.75rem', color: T.ink4, marginBottom: 12, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Paso 3 de 3</p>
        <h2 style={{ fontFamily: T.serif, fontSize: '1.625rem', fontWeight: 500, color: T.ink9, marginBottom: 28, fontVariationSettings: '"opsz" 32' }}>
          Empecemos por tu tarea más cercana
        </h2>
        <Card style={{ marginBottom: 28 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
            <div>
              <div style={{ fontFamily: T.sans, fontWeight: 600, color: T.ink9, marginBottom: 4 }}>Tarea 3 · Regresión sobre dataset de rentas</div>
              <div style={{ fontFamily: T.sans, fontSize: '0.875rem', color: T.ink5 }}>Entrega mañana 9:00</div>
            </div>
            <Chip>Estadística Aplicada</Chip>
          </div>
        </Card>
        <p style={{ fontFamily: T.sans, fontWeight: 600, color: T.ink8, marginBottom: 14 }}>Camino cumplible (≈ 2h 30min):</p>
        <ul style={{ listStyle: 'none', padding: 0, marginBottom: 32 }}>
          {bullets.map((b, i) => (
            <li key={i} style={{ fontFamily: T.sans, color: T.ink7, padding: '7px 0',
              borderBottom: i < bullets.length-1 ? `1px solid ${T.paper3}` : 'none',
              display: 'flex', gap: 10, alignItems: 'center', ...bulletDelay(i) }}>
              <span style={{ width: 6, height: 6, borderRadius:'50%', background: T.acc5, flexShrink: 0, display:'inline-block' }}/>
              {b}
            </li>
          ))}
        </ul>
        <Btn onClick={() => { set({ currentUserId: 'mariana', screen: 'home' }); }} size="lg"
          style={{ width:'100%', display:'flex', justifyContent:'space-between' }}>
          <span>Empezar ahora</span><span>→</span>
        </Btn>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════
// 02 · Dashboard
// ═══════════════════════════════════════════════════════════
function S02Dashboard() {
  const [appState, set] = useAtlasState();
  const courseId = appState.currentCourseId || 'pmd';
  const course = AtlasData.courses.find(c => c.id === courseId) || AtlasData.courses[0];
  const userId  = appState.currentUserId  || 'mariana';
  const user    = AtlasData.users.find(u => u.id === userId) || AtlasData.users[0];
  const sessions = AtlasData.sessionsByCourse[courseId] || [];
  const activeSession = sessions.find(s => s.isActive);
  const d = AtlasData.dashboard;
  const { crunchMode, postSession } = appState;

  // Mini sparkline (SVG)
  function Sparkline() {
    const pts = [[0,30],[22,26],[45,28],[68,20],[91,22],[114,14],[138,16],[160,8]];
    const d = pts.map((p,i) => `${i===0?'M':'L'}${p[0]},${p[1]}`).join(' ');
    return (
      <svg width="100%" height="36" viewBox="0 0 160 36" style={{ display:'block' }}>
        <defs>
          <linearGradient id="spGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="hsl(var(--atlas-warm-500))" stopOpacity="0.15"/>
            <stop offset="100%" stopColor="hsl(var(--atlas-warm-500))" stopOpacity="0"/>
          </linearGradient>
        </defs>
        <path d={d} fill="none" stroke="hsl(var(--atlas-warm-500))" strokeWidth="1.5" strokeLinecap="round"/>
        <path d={`${d} L160,36 L0,36 Z`} fill="url(#spGrad)"/>
        <circle cx={160} cy={8} r={3} fill="hsl(var(--atlas-warm-600))"/>
      </svg>
    );
  }

  // Node state indicator for mini graph
  const miniNodes = AtlasData.nodes.slice(0, 6);

  const stateIcon = (st) => st === 'in_progress' ? '▸' : st === 'submitted' ? '✓' : '○';

  return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column', overflow:'hidden' }}>
      {/* Crunch banner */}
      {crunchMode && (
        <div style={{ background: 'hsl(var(--atlas-critical-50))', borderBottom: `3px solid ${T.crit5}`,
          padding: '10px 24px', display:'flex', alignItems:'center', gap: 10,
          fontFamily: T.sans, fontSize: '0.9375rem', color: T.ink8 }}>
          <span>⏱</span>
          <strong>Modo crunch.</strong> Tienes 3h 14min al deadline. Los contratos de deuda quedan diferidos.
          <button onClick={() => set({ crunchMode: false })}
            style={{ marginLeft:'auto', background:'none', border:'none', cursor:'pointer', color: T.ink5, fontSize: 18 }}>×</button>
        </div>
      )}

      {/* Post-session banner */}
      {postSession && (
        <div style={{ background: `hsl(var(--atlas-warm-50))`, borderBottom: `3px solid ${T.warm4}`,
          padding: '10px 24px', display:'flex', alignItems:'center', gap: 10,
          fontFamily: T.sans, fontSize: '0.9375rem', color: T.ink8, animation:'fadeSlideUp 240ms ease-out' }}>
          Abriste 1 conexión en tu última sesión: <strong>regresión lineal → residuales</strong>
          <button onClick={() => set({ postSession: false })}
            style={{ marginLeft:'auto', background:'none', border:'none', cursor:'pointer', color: T.ink5, fontSize: 18 }}>×</button>
        </div>
      )}

      {/* Top bar */}
      <TopBar
        left={
          <>
            <AtlasLogo/>
            <button onClick={() => set({ screen:'home' })}
              style={{ fontFamily:T.sans, fontSize:'0.875rem', color:T.ink7,
                background:'none', border:'none', padding:0, cursor:'pointer' }}>
              atlas
            </button>
            <span style={{ fontFamily:T.sans, fontSize:'0.875rem', color:T.ink4 }}>/</span>
            <span style={{ fontFamily:T.sans, fontSize:'0.875rem', color:T.ink7 }}>{course.code}</span>
          </>
        }
        right={
          <>
            <button onClick={() => set({ crunchMode: !crunchMode })}
              style={{ fontFamily:T.sans, fontSize:'0.875rem', color: crunchMode ? T.crit5 : T.ink5,
                background:'none', border: `1px solid ${crunchMode ? T.crit5 : T.paper4}`,
                borderRadius: 6, padding:'4px 12px', cursor:'pointer' }}>
              {crunchMode ? '⏱ Crunch activo' : 'Modo crunch'}
            </button>
            <button onClick={() => set({ screen:'silencio' })}
              style={{ fontFamily:T.sans, fontSize:'0.875rem', color:T.ink5,
                background:'none', border:`1px solid ${T.paper4}`, borderRadius:6, padding:'4px 12px', cursor:'pointer' }}>
              🔕 Silencio
            </button>
          </>
        }
      />

      {/* Body */}
      <div style={{ flex:1, overflow:'auto', padding:'28px 32px' }}>
        {/* Greeting */}
        <p style={{ fontFamily: T.serif, fontSize:'1.25rem', color:T.ink8, marginBottom:28, fontVariationSettings:'"opsz" 24' }}>
          Hola {user.name.split(' ')[0]}. Tu próxima entrega en {course.name} es {course.nextDeadline}.
        </p>

        {/* Tus notebooks */}
        <div style={{ marginBottom: 28 }}>
          <div style={{ fontFamily:T.sans, fontWeight:600, color:T.ink8, marginBottom:12 }}>Tus notebooks</div>
          {sessions.length === 0 ? (
            <div style={{ fontFamily:T.sans, fontSize:'0.875rem', color:T.ink5 }}>Sin notebooks aún</div>
          ) : (
            <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
              {sessions.map(s => {
                if (s.state === 'in_progress') {
                  return (
                    <div key={s.id} style={{ background: T.paper1, borderLeft:`3px solid ${T.warm4}`,
                      border:`1px solid ${T.paper3}`, borderLeftWidth:3, borderRadius:8, padding:'14px 16px' }}>
                      <div style={{ display:'flex', alignItems:'flex-start', gap:10, marginBottom:6 }}>
                        <span style={{ color:T.warm6, fontSize:'1rem', lineHeight:1.2 }}>{stateIcon(s.state)}</span>
                        <div style={{ flex:1 }}>
                          <div style={{ fontFamily:T.serif, fontSize:'1.0625rem', color:T.ink9, fontVariationSettings:'"opsz" 18', marginBottom:4 }}>
                            {s.title}
                          </div>
                          <div style={{ fontFamily:T.sans, fontSize:'0.8125rem', color:T.ink5 }}>
                            {[s.topic, s.debt, s.lastActive].filter(Boolean).join(' · ')}
                          </div>
                        </div>
                      </div>
                      <div style={{ marginLeft: 26, marginTop: 10 }}>
                        <Btn onClick={() => set({ currentSessionId: s.id, screen:'notebook' })} variant="primary" size="sm">
                          Retomar →
                        </Btn>
                      </div>
                    </div>
                  );
                }
                if (s.state === 'submitted') {
                  return (
                    <div key={s.id}
                      style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 12px',
                        borderRadius:6, cursor:'default', transition:'background 120ms' }}
                      onMouseEnter={e => e.currentTarget.style.background = T.paper2}
                      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                      <span style={{ color:T.ink4 }}>{stateIcon(s.state)}</span>
                      <div style={{ flex:1, fontFamily:T.sans, fontSize:'0.9375rem', color:T.ink6 }}>
                        <span style={{ color:T.ink7 }}>{s.title}</span>
                        {(s.topic || s.submittedAt) && (
                          <span style={{ color:T.ink4 }}> · {[s.topic, s.submittedAt && `entregado ${s.submittedAt}`].filter(Boolean).join(' · ')}</span>
                        )}
                      </div>
                      <span style={{ fontFamily:T.sans, fontSize:'0.8125rem', color:T.ink4, opacity:0.7 }}>ver</span>
                    </div>
                  );
                }
                // not_started
                return (
                  <div key={s.id}
                    style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 12px',
                      borderRadius:6, transition:'background 120ms' }}
                    onMouseEnter={e => e.currentTarget.style.background = T.paper2}
                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                    <span style={{ color:T.ink4 }}>{stateIcon(s.state)}</span>
                    <div style={{ flex:1, fontFamily:T.sans, fontSize:'0.9375rem', color:T.ink6 }}>
                      <span style={{ color:T.ink7 }}>{s.title}</span>
                      {s.topic && <span style={{ color:T.ink4 }}> · {s.topic}</span>}
                    </div>
                    <span style={{ fontFamily:T.sans, fontSize:'0.8125rem', color:T.ink5 }}>empezar</span>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:20, marginBottom:24 }}>
          {/* Deuda card */}
          <Card>
            <div style={{ fontFamily:T.sans, fontSize:'0.8125rem', color:T.ink5, marginBottom:10 }}>deuda abierta</div>
            <div style={{ fontFamily:T.serif, fontSize:'2.5rem', fontWeight:500, color:'hsl(var(--atlas-warm-700))', lineHeight:1, marginBottom:6, fontVariationSettings:'"opsz" 48' }}>
              {d.debtTotal}
            </div>
            <div style={{ fontFamily:T.sans, fontSize:'0.875rem', color:T.ink5, marginBottom:12 }}>
              en <Ref>regresión lineal</Ref>
            </div>
            <Sparkline/>
            <div style={{ fontFamily:T.sans, fontSize:'0.75rem', color:T.ink4, marginBottom:14 }}>{d.trend}</div>
            <div style={{ display:'flex', flexWrap:'wrap', gap:6, marginBottom:20 }}>
              {d.modes.map((m,i) => <Chip key={i}>{m}</Chip>)}
            </div>
            <Btn onClick={() => set({ screen: appState.debtSigned ? 'saldo' : 'contrato' })} variant="secondary" size="sm">
              Saldar ahora →
            </Btn>
          </Card>

          {/* Grafo card */}
          <Card>
            <div style={{ fontFamily:T.sans, fontSize:'0.8125rem', color:T.ink5, marginBottom:14 }}>tu grafo</div>
            <div style={{ display:'flex', justifyContent:'center', marginBottom:12 }}>
              <SVGGraph nodes={AtlasData.nodes} edges={AtlasData.edges}
                width={260} height={190} miniMode={true}
                openedEdgeId={appState.saldoComplete ? AtlasData.animEdgeId : null}
              />
            </div>
            <Btn onClick={() => set({ screen:'grafo' })} variant="secondary" size="sm">Ver completo →</Btn>
          </Card>
        </div>

        {/* Gap band */}
        {!crunchMode && (
          <Card style={{ background:'hsl(var(--atlas-paper-100))', borderLeft:`3px solid ${T.warm4}` }}>
            <p style={{ fontFamily:T.serif, fontSize:'1.125rem', color:T.ink8, lineHeight:1.55, marginBottom:6, fontVariationSettings:'"opsz" 18' }}>
              Crees saber un {d.gapPercent}% más de lo que demuestras en <Ref>{d.riskNode}</Ref>.
            </p>
            <p style={{ fontFamily:T.sans, fontSize:'0.875rem', color:T.ink5 }}>
              No es un regaño. Es lo que tus evidencias dicen.
            </p>
          </Card>
        )}

        {/* Quick nav */}
        <div style={{ display:'flex', gap:12, marginTop:20, flexWrap:'wrap' }}>
          {activeSession && (
            <Btn onClick={() => set({ currentSessionId: activeSession.id, screen:'notebook' })} variant="primary">
              Retomar sesión →
            </Btn>
          )}
          <Btn onClick={() => set({ screen:'portafolio' })} variant="secondary">Ver portafolio</Btn>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { S01Onboarding, S02Dashboard });