// Screens 10 · Grafo fullscreen  +  11 · Portafolio  +  12 · Silencio
const { useState, useEffect, useRef } = React;

// ═══════════════════════════════════════════════════════════
// 10 · Grafo full-screen
// ═══════════════════════════════════════════════════════════
function S10Grafo() {
  const [appState, set] = useAtlasState();
  const [selected, setSelected] = useState(null);
  const [zoom, setZoom] = useState(1);
  const [pan, setPan] = useState({ x: 0, y: 0 });
  const [dragging, setDragging] = useState(false);
  const [dragStart, setDragStart] = useState(null);
  const svgRef = useRef(null);
  const selectedNode = AtlasData.nodes.find(n => n.id === selected);

  function handleWheel(e) {
    e.preventDefault();
    const delta = e.deltaY > 0 ? -0.1 : 0.1;
    setZoom(z => Math.max(0.4, Math.min(3, z + delta)));
  }

  function handleMouseDown(e) {
    if (e.target.tagName === 'circle' || e.target.tagName === 'text') return;
    setDragging(true);
    setDragStart({ x: e.clientX - pan.x, y: e.clientY - pan.y });
  }
  function handleMouseMove(e) {
    if (!dragging || !dragStart) return;
    setPan({ x: e.clientX - dragStart.x, y: e.clientY - dragStart.y });
  }
  function handleMouseUp() { setDragging(false); setDragStart(null); }

  function fitAll() { setZoom(1); setPan({ x: 0, y: 0 }); }

  function NodeTooltip({ node }) {
    const gapColor = node.gap > 0.15 ? T.crit5 : node.gap < -0.1 ? T.acc5 : T.ink5;
    return (
      <div style={{ position:'absolute', background:T.paper0, border:`1px solid ${T.paper3}`,
        borderRadius:8, boxShadow:'var(--atlas-shadow-lg)', padding:'16px 18px', width:240, zIndex:50,
        pointerEvents:'none', top: node.y * zoom + pan.y - 10, left: node.x * zoom + pan.x + 28 }}>
        <div style={{ fontFamily:T.serif, fontSize:'1rem', fontWeight:500, color:T.ink9, marginBottom:8,
          fontVariationSettings:'"opsz" 18' }}>{node.label}</div>
        {node.dominio > 0 && (
          <>
            <div style={{ fontFamily:T.sans, fontSize:'0.8125rem', color:T.ink5, marginBottom:4 }}>
              Dominio: {Math.round(node.dominio*100)}% · percepción: {Math.round(node.percepcion*100)}%
            </div>
            <div style={{ fontFamily:T.sans, fontSize:'0.8125rem', color:gapColor, marginBottom:8 }}>
              Brecha: {node.gap > 0 ? '+' : ''}{Math.round(node.gap*100)}%
              {node.gap > 0.15 ? ' (sobreestimación)' : node.gap < -0.1 ? ' (subestimación)' : ' (alineada)'}
            </div>
          </>
        )}
        {node.appContext && (
          <>
            <div style={{ fontFamily:T.sans, fontSize:'0.75rem', color:T.ink4, marginBottom:4 }}>En el oficio:</div>
            <p style={{ fontFamily:T.serif, fontStyle:'italic', fontSize:'0.875rem', color:T.ink7,
              lineHeight:1.55, margin:'0 0 4px', fontVariationSettings:'"opsz" 14' }}>"{node.appContext}"</p>
            <div style={{ fontFamily:T.sans, fontSize:'0.75rem', color:T.ink4 }}>— {node.appRole}</div>
          </>
        )}
      </div>
    );
  }

  function EdgeGates({ edge }) {
    const src = AtlasData.nodes.find(n => n.id === edge.src);
    const tgt = AtlasData.nodes.find(n => n.id === edge.tgt);
    return (
      <div style={{ fontFamily:T.sans, fontSize:'0.875rem', color:T.ink7, marginBottom:8,
        display:'flex', alignItems:'center', gap:8 }}>
        <span style={{ color: edge.satisfied ? T.acc5 : T.cool4 }}>
          {edge.satisfied ? '●' : edge.gated ? '◌' : '○'}
        </span>
        {src?.shortLabel} → {tgt?.shortLabel}
        {edge.gated && <Chip style={{ fontSize:'0.6875rem' }}>gate pendiente</Chip>}
      </div>
    );
  }

  return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column' }}>
      <TopBar
        left={
          <>
            <button onClick={() => set({ screen:'dashboard' })}
              style={{ background:'none', border:'none', cursor:'pointer', color:T.ink5, fontSize:18, padding:'0 4px' }}>←</button>
            <AtlasLogo/>
            <span style={{ fontFamily:T.sans, fontSize:'0.875rem', color:T.ink5 }}>Tu grafo · MAT-PMD</span>
          </>
        }
      />

      <div style={{ flex:1, position:'relative', overflow:'hidden',
        cursor: dragging ? 'grabbing' : 'grab' }}
        onWheel={handleWheel} onMouseDown={handleMouseDown}
        onMouseMove={handleMouseMove} onMouseUp={handleMouseUp}
        onMouseLeave={handleMouseUp}>

        {/* Graph canvas */}
        <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center' }}>
          <div style={{ transform:`scale(${zoom}) translate(${pan.x/zoom}px, ${pan.y/zoom}px)`,
            transition:'transform 120ms ease-out', transformOrigin:'center center' }}>
            <SVGGraph
              nodes={AtlasData.nodes} edges={AtlasData.edges}
              width={580} height={400}
              openedEdgeId={appState.saldoComplete ? AtlasData.animEdgeId : null}
              onNodeClick={id => setSelected(id === selected ? null : id)}
              selectedNodeId={selected}
            />
          </div>
        </div>

        {/* Tooltip */}
        {selected && selectedNode && selectedNode.dominio > 0 && (
          <NodeTooltip node={selectedNode}/>
        )}

        {/* Drawer */}
        {selected && selectedNode && (
          <div style={{ position:'absolute', right:0, top:0, bottom:0, width:360,
            background:T.paper0, borderLeft:`1px solid ${T.paper3}`,
            boxShadow:'-4px 0 20px rgba(0,0,0,.08)', overflow:'auto', padding:'24px',
            animation:'slideInRight 240ms ease-out' }}>
            <div style={{ display:'flex', justifyContent:'space-between', marginBottom:20 }}>
              <h2 style={{ fontFamily:T.serif, fontSize:'1.375rem', fontWeight:500, color:T.ink9,
                fontVariationSettings:'"opsz" 24', margin:0 }}>{selectedNode.label}</h2>
              <button onClick={() => setSelected(null)}
                style={{ background:'none', border:'none', cursor:'pointer', color:T.ink4, fontSize:18 }}>×</button>
            </div>

            <div style={{ marginBottom:16 }}>
              <Chip style={{ marginRight:6 }}>{selectedNode.state}</Chip>
              {selectedNode.dominio > 0 && (
                <span style={{ fontFamily:T.sans, fontSize:'0.875rem', color:T.ink5 }}>
                  dominio {Math.round(selectedNode.dominio*100)}%
                </span>
              )}
            </div>

            {selectedNode.appContext && (
              <div style={{ marginBottom:20 }}>
                <div style={{ fontFamily:T.sans, fontSize:'0.75rem', fontWeight:600, color:T.ink4,
                  textTransform:'uppercase', letterSpacing:'0.06em', marginBottom:8 }}>Cómo se aplica</div>
                <div style={{ fontFamily:T.sans, fontSize:'0.875rem', fontWeight:600, color:T.ink8, marginBottom:4 }}>
                  {selectedNode.appRole}
                </div>
                <p style={{ fontFamily:T.serif, fontSize:'0.9375rem', color:T.ink7, lineHeight:1.6,
                  margin:0, fontVariationSettings:'"opsz" 14' }}>
                  {selectedNode.appContext}
                </p>
              </div>
            )}

            <div>
              <div style={{ fontFamily:T.sans, fontSize:'0.75rem', fontWeight:600, color:T.ink4,
                textTransform:'uppercase', letterSpacing:'0.06em', marginBottom:10 }}>Aristas</div>
              {AtlasData.edges.filter(e => e.src === selected || e.tgt === selected)
                .map(e => <EdgeGates key={e.id} edge={e}/>)}
            </div>

            {selectedNode.state === 'in_progress' && (
              <Btn onClick={() => set({ screen:'notebook' })} variant="primary" size="sm"
                style={{ marginTop:20, width:'100%', display:'flex', justifyContent:'space-between' }}>
                <span>Abrir sesión en este nodo</span><span>→</span>
              </Btn>
            )}
          </div>
        )}

        {/* Controls */}
        <div style={{ position:'absolute', bottom:24, right: selected ? 384 : 24,
          background:T.paper0, border:`1px solid ${T.paper3}`, borderRadius:8,
          padding:'12px', boxShadow:'var(--atlas-shadow-md)', display:'flex', flexDirection:'column', gap:6 }}>
          <div style={{ fontFamily:T.mono, fontSize:'0.75rem', color:T.ink5, textAlign:'center', marginBottom:4 }}>
            {Math.round(zoom*100)}%
          </div>
          {[['−', () => setZoom(z => Math.max(0.4, z-0.2))],
            ['+', () => setZoom(z => Math.min(3, z+0.2))],
            ['fit', fitAll]].map(([label, fn]) => (
            <button key={label} onClick={fn}
              style={{ background:T.paper1, border:`1px solid ${T.paper3}`, borderRadius:4,
                fontFamily:T.sans, fontSize:'0.8125rem', fontWeight:600, color:T.ink7,
                padding:'4px 10px', cursor:'pointer', minWidth:40 }}>
              {label}
            </button>
          ))}
        </div>

        {/* Legend */}
        <div style={{ position:'absolute', bottom:24, left:16, background:T.paper0,
          border:`1px solid ${T.paper3}`, borderRadius:8, padding:'10px 14px',
          boxShadow:'var(--atlas-shadow-sm)' }}>
          {[['hsl(var(--atlas-warm-600))', 'completado'], ['hsl(var(--atlas-accent-500))', 'en progreso'],
            [T.paper4, 'disponible'], [T.cool4, 'gated'], [T.cool7, 'bloqueado']].map(([c, l]) => (
            <div key={l} style={{ display:'flex', gap:8, alignItems:'center', marginBottom:4 }}>
              <span style={{ width:10, height:10, borderRadius:'50%', background:c, display:'inline-block', flexShrink:0 }}/>
              <span style={{ fontFamily:T.sans, fontSize:'0.6875rem', color:T.ink5 }}>{l}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════
// 11 · Portafolio exportable (cliffhanger)
// ═══════════════════════════════════════════════════════════
function S11Portafolio() {
  const [, set] = useAtlasState();
  const [openKeys, setOpenKeys] = useState([]);
  function toggle(key) { setOpenKeys(k => k.includes(key) ? k.filter(x=>x!==key) : [...k, key]); }

  return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column', overflow:'hidden' }}>
      <TopBar
        left={
          <>
            <button onClick={() => set({ screen:'dashboard' })}
              style={{ background:'none', border:'none', cursor:'pointer', color:T.ink5, fontSize:18, padding:'0 4px' }}>←</button>
            <AtlasLogo/>
            <span style={{ fontFamily:T.sans, fontSize:'0.875rem', color:T.ink5 }}>Tu portafolio de competencias</span>
          </>
        }
      />
      <div style={{ flex:1, overflow:'auto', padding:'32px', background:T.paper0 }}>
        <div style={{ maxWidth:800, margin:'0 auto' }}>
          {/* Header */}
          <div style={{ background:T.paper0, border:`1px solid ${T.paper3}`, borderRadius:12,
            padding:'40px 48px', boxShadow:'var(--atlas-shadow-md)', marginBottom:24 }}>
            <h1 style={{ fontFamily:T.serif, fontSize:'1.625rem', fontWeight:500, color:T.ink9,
              marginBottom:6, fontVariationSettings:'"opsz" 32' }}>Mariana</h1>
            <p style={{ fontFamily:T.sans, fontSize:'0.9375rem', color:T.ink5, marginBottom:28 }}>
              Ingeniería en Sistemas · 5º semestre · Universidad Piloto A · cohorte 2026-primavera
            </p>
            <div style={{ borderTop:`1px solid ${T.paper3}`, paddingTop:24 }}>
              <h2 style={{ fontFamily:T.serif, fontSize:'1.25rem', fontWeight:500, color:T.ink9, marginBottom:20,
                fontVariationSettings:'"opsz" 24' }}>
                Competencias desarrolladas este semestre
              </h2>

              {AtlasData.portfolio.map(cmp => (
                <div key={cmp.key} style={{ marginBottom:12 }}>
                  <button onClick={() => toggle(cmp.key)}
                    style={{ width:'100%', textAlign:'left', background:'none', border:'none', cursor:'pointer',
                      display:'flex', alignItems:'center', gap:10, padding:'8px 0',
                      borderBottom:`1px solid ${T.paper3}` }}>
                    <span style={{ fontFamily:T.mono, fontSize:'0.75rem', color:T.warm6 }}>
                      {openKeys.includes(cmp.key) ? '▾' : '▸'}
                    </span>
                    <span style={{ fontFamily:T.serif, fontSize:'1rem', fontWeight:500, color:T.ink9,
                      fontVariationSettings:'"opsz" 18' }}>{cmp.key}</span>
                    <span style={{ fontFamily:T.sans, fontSize:'0.9375rem', color:T.ink7 }}>· {cmp.label}</span>
                  </button>

                  {openKeys.includes(cmp.key) && (
                    <div style={{ paddingLeft:28, paddingTop:10, animation:'fadeSlideUp 200ms ease-out' }}>
                      {cmp.indicators.map(ind => (
                        <div key={ind.key} style={{ display:'flex', alignItems:'center', gap:12,
                          padding:'7px 0', borderBottom:`1px solid ${T.paper3}` }}>
                          <span style={{ fontFamily:T.mono, fontSize:'0.75rem', color:T.ink4, flexShrink:0 }}>
                            {ind.key}
                          </span>
                          <span style={{ fontFamily:T.sans, fontSize:'0.875rem', color:T.ink7, flex:1 }}>
                            {ind.label}
                          </span>
                          {ind.count > 0 ? (
                            <Chip style={{ color:T.warm6, borderColor:T.warm4 }}>{ind.count} evidencias</Chip>
                          ) : (
                            <Chip style={{ color:T.ink4 }}>pendiente</Chip>
                          )}
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              ))}
            </div>

            {/* Cliffhanger */}
            <div style={{ background:`hsl(var(--atlas-warm-400) / 0.06)`, border:`1px solid ${T.warm4}`,
              borderRadius:8, padding:'18px 20px', marginTop:28 }}>
              <div style={{ display:'flex', gap:10, alignItems:'flex-start' }}>
                <span style={{ fontSize:16 }}>🔒</span>
                <div>
                  <div style={{ fontFamily:T.sans, fontWeight:600, color:T.warm6, marginBottom:4 }}>
                    Se desbloqueará al cerrar el semestre
                  </div>
                  <p style={{ fontFamily:T.sans, fontSize:'0.9375rem', color:T.ink7, margin:'0 0 8px', lineHeight:1.55 }}>
                    Entonces podrás exportar a Git, LinkedIn o PDF. Por ahora Atlas está recolectando tu evidencia.
                  </p>
                </div>
              </div>
            </div>

            {/* Disabled export buttons */}
            <div style={{ display:'flex', gap:12, marginTop:20 }}>
              {['Git', 'LinkedIn', 'PDF'].map(label => (
                <button key={label} title="Disponible al cerrar el semestre"
                  style={{ fontFamily:T.sans, fontWeight:600, fontSize:'0.875rem',
                    background:T.paper2, border:`1px solid ${T.paper4}`, borderRadius:6,
                    padding:'8px 18px', color:T.ink4, cursor:'not-allowed', opacity:0.6 }}>
                  {label}
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════
// 12 · "Atlas no entra al salón" — Modo silencio
// ═══════════════════════════════════════════════════════════
function S12Silencio() {
  const [, set] = useAtlasState();
  const [view, setView] = useState('main'); // main | notas | grafo | agenda
  const [confirmExit, setConfirmExit] = useState(false);

  function exit() { set({ screen:'dashboard' }); }

  if (view === 'grafo') return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column' }}>
      <TopBar
        left={
          <>
            <button onClick={() => setView('main')}
              style={{ background:'none', border:'none', cursor:'pointer', color:T.ink5, fontSize:18, padding:'0 4px' }}>←</button>
            <span style={{ fontFamily:T.sans, fontSize:'0.875rem', color:T.ink5 }}>Tu grafo · snapshot</span>
          </>
        }
      />
      <div style={{ background:`hsl(var(--atlas-warm-50))`, padding:'8px 20px',
        fontFamily:T.sans, fontSize:'0.875rem', color:T.warm6, borderBottom:`1px solid ${T.warm4}` }}>
        Snapshot offline — última actualización 22 abr 21:58
      </div>
      <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center' }}>
        <SVGGraph nodes={AtlasData.nodes} edges={AtlasData.edges} width={520} height={360}
          openedEdgeId={null}/>
      </div>
    </div>
  );

  if (view === 'notas') return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column' }}>
      <TopBar
        left={<><button onClick={() => setView('main')} style={{ background:'none', border:'none', cursor:'pointer', color:T.ink5, fontSize:18, padding:'0 4px' }}>←</button>
          <span style={{ fontFamily:T.sans, fontSize:'0.875rem', color:T.ink5 }}>Notas · solo lectura</span></>}
      />
      <div style={{ flex:1, overflow:'auto', padding:'28px 32px' }}>
        {[{ date:'22 abr', node:'Reg. lineal', summary:'Dataset de rentas, fit inicial R²=0.731' },
          { date:'20 abr', node:'EDA',         summary:'Distribución de precios, outliers detectados' }].map((s,i) => (
          <Card key={i} style={{ marginBottom:14 }}>
            <div style={{ fontFamily:T.mono, fontSize:'0.75rem', color:T.ink4, marginBottom:6 }}>{s.date} · {s.node}</div>
            <div style={{ fontFamily:T.serif, fontSize:'0.9375rem', color:T.ink7, fontVariationSettings:'"opsz" 18' }}>{s.summary}</div>
          </Card>
        ))}
      </div>
    </div>
  );

  if (view === 'agenda') return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column' }}>
      <TopBar
        left={<><button onClick={() => setView('main')} style={{ background:'none', border:'none', cursor:'pointer', color:T.ink5, fontSize:18, padding:'0 4px' }}>←</button>
          <span style={{ fontFamily:T.sans, fontSize:'0.875rem', color:T.ink5 }}>Agenda</span></>}
      />
      <div style={{ flex:1, overflow:'auto', padding:'28px 32px' }}>
        {[{ date:'23 abr 9:00',  label:'Entrega Tarea 3', status:'hoy' },
          { date:'30 abr 10:00', label:'Parcial 1',        status:'10 días' },
          { date:'5 may 9:00',   label:'Entrega Tarea 4',  status:'12 días' }].map((e,i) => (
          <div key={i} style={{ padding:'12px 0', borderBottom:`1px solid ${T.paper3}`, display:'flex', gap:12, alignItems:'center' }}>
            <Chip style={{ flexShrink:0, color: e.status==='hoy' ? T.crit5 : T.ink4,
              borderColor: e.status==='hoy' ? T.crit5 : T.paper4 }}>{e.status}</Chip>
            <span style={{ fontFamily:T.sans, fontWeight:500, color:T.ink8 }}>{e.label}</span>
            <span style={{ fontFamily:T.mono, fontSize:'0.75rem', color:T.ink4, marginLeft:'auto' }}>{e.date}</span>
          </div>
        ))}
      </div>
    </div>
  );

  // Main silence screen
  return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column', background:T.paper0 }}>
      {/* Permanent banner */}
      <div style={{ padding:'12px 24px', borderBottom:`1px solid ${T.paper3}`,
        display:'flex', alignItems:'center', justifyContent:'space-between',
        background:T.paper0, fontFamily:T.sans }}>
        <span style={{ display:'flex', alignItems:'center', gap:8, fontSize:'0.9375rem', color:T.ink7 }}>
          <span>🔕</span>
          <span style={{ fontWeight:600 }}>Atlas en silencio</span>
          <span style={{ color:T.ink4 }}>· lunes–jueves 8–10am</span>
        </span>
        {confirmExit ? (
          <div style={{ display:'flex', gap:10, alignItems:'center', fontSize:'0.875rem' }}>
            <span style={{ color:T.ink5 }}>¿Salir del modo silencio?</span>
            <Btn onClick={exit} variant="secondary" size="sm">Sí, salir</Btn>
            <Btn onClick={() => setConfirmExit(false)} variant="ghost" size="sm">Quedarme</Btn>
          </div>
        ) : (
          <button onClick={() => setConfirmExit(true)}
            style={{ fontFamily:T.sans, fontSize:'0.875rem', color:T.ink5, background:'none',
              border:`1px solid ${T.paper4}`, borderRadius:6, padding:'5px 12px', cursor:'pointer' }}>
            Salir ahora
          </button>
        )}
      </div>

      {/* Body */}
      <div style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding:40 }}>
        <h1 style={{ fontFamily:T.serif, fontSize:'2rem', fontWeight:500, color:T.ink9, textAlign:'center',
          marginBottom:12, fontVariationSettings:'"opsz" 48',
          animation:'fadeSlideUp 320ms ease-out' }}>
          Atlas no entra al salón.
        </h1>
        <p style={{ fontFamily:T.serif, fontSize:'1.125rem', color:T.ink5, textAlign:'center',
          marginBottom:48, lineHeight:1.6, fontVariationSettings:'"opsz" 18',
          animation:'fadeSlideUp 320ms ease-out 60ms both' }}>
          Aquí tienes tus notas, tu grafo y tu agenda.<br/>
          Volvemos a trabajar juntos cuando termines.
        </p>

        <div style={{ display:'flex', gap:20, flexWrap:'wrap', justifyContent:'center' }}>
          {[
            { icon:'📓', label:'Notas', sub:'3 sesiones esta semana', view:'notas' },
            { icon:'🕸', label:'Tu grafo', sub:'snapshot offline', view:'grafo' },
            { icon:'📅', label:'Agenda', sub:'Parcial en 10 días', view:'agenda' },
          ].map(card => (
            <div key={card.view}
              onClick={() => setView(card.view)}
              style={{ background:T.paper1, border:`1px solid ${T.paper3}`, borderRadius:12,
                padding:'28px 32px', width:220, cursor:'pointer', textAlign:'center',
                boxShadow:'var(--atlas-shadow-sm)', transition:'box-shadow 180ms, transform 180ms',
                animation:`fadeSlideUp 320ms ease-out ${['notas','grafo','agenda'].indexOf(card.view)*80+120}ms both` }}
              onMouseEnter={e => { e.currentTarget.style.boxShadow='var(--atlas-shadow-md)'; e.currentTarget.style.transform='translateY(-2px)'; }}
              onMouseLeave={e => { e.currentTarget.style.boxShadow='var(--atlas-shadow-sm)'; e.currentTarget.style.transform=''; }}>
              <div style={{ fontSize:32, marginBottom:12 }}>{card.icon}</div>
              <div style={{ fontFamily:T.sans, fontSize:'1rem', fontWeight:600, color:T.ink9, marginBottom:6 }}>{card.label}</div>
              <div style={{ fontFamily:T.sans, fontSize:'0.875rem', color:T.ink5, marginBottom:18 }}>{card.sub}</div>
              <div style={{ fontFamily:T.sans, fontSize:'0.875rem', color:T.acc6, fontWeight:500 }}>Abrir →</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { S10Grafo, S11Portafolio, S12Silencio });