// === Escena 07 — En Play: Administración › Uso de la API (/App/Admin/APIUsage). Maqueta sencilla de
// la pantalla real (APIUsageSubpage.razor): pestaña Consumo con las peticiones y las rechazadas por
// ritmo de cada clave, y pestaña Límites con la barra «Derechos» de la empresa y de cada clave.
// Vuelven los dos objetivos del reto, ya cumplidos, y cierra con la Única Cosa por tercera vez. Cifras de ejemplo, las mismas del resto de la pieza.
const MENU_ADMIN = ['Usuarios', 'Roles', 'Paneles', 'Claves API', 'Uso de la API', 'Ediciones', 'Copias de seguridad', 'Base de datos'];
const CLAVES_DE07 = [
  { nombre:'Tienda online', peticiones:86, esperaron:0, quedan:30 },
  { nombre:'Sincronización', peticiones:240, esperaron:31, quedan:4 },
  { nombre:'Facturas', peticiones:12, esperaron:0, quedan:30 },
];

function BarraDerechos({ quedan, max, ancho }){
  const bajo = quedan / max < 0.25;
  return (
    <div style={{ display:'flex', alignItems:'center', gap:12 }}>
      <span className="f-plex" style={{ fontSize:17, color:GRIS, width:84 }}>Derechos</span>
      <span style={{ width:ancho, height:12, borderRadius:100, background:'#EEF2F7', overflow:'hidden' }}>
        <span style={{ display:'block', width:`${quedan * 100 / max}%`, height:'100%', borderRadius:100, background: bajo ? NARANJA : AZUL }}/>
      </span>
      <span className="f-mono" style={{ fontSize:18, fontWeight:700, color:TINTA }}>{quedan}/{max}</span>
    </div>
  );
}

function EscenaDE07({ t }){
  useVoz(6);
  const G = GUION[6];
  const T = {
    play:B(G,'Todo esto lo ves'),             // → aparece la ventana de Play
    admin:B(G,'en Administración'),           // → se marca el menú de Administración
    uso:B(G,'Uso de la API:'),                // → «Uso de la API» seleccionado y la ruta en la barra
    peticiones:B(G,'cuántas peticiones'),     // → columna Peticiones
    esperar:B(G,'cuántas han esperado'),      // → columna Rechazadas por ritmo
    quedan:B(G,'cuántos derechos le quedan'), // → pestaña Límites: la barra Derechos
    ninguna:B(G,'Así, ninguna clave'),        // → la ventana se va; vuelve el primer objetivo, cumplido
    pagar:B(G,'y sabes siempre'),             // → el segundo, cumplido
    eco:B(G,'Cada segundo ganas'),            // → los objetivos suben y vuelve la frase
    gasta:B(G,'Cada petición gasta'),
  };
  const ventana = aparece(t, T.play, 0.7) * (1 - aparece(t, T.ninguna - 0.3, 0.5));
  const enUso = t >= T.uso, limites = t >= T.quedan;
  const colPet = aparece(t, T.peticiones, 0.4), colEsp = aparece(t, T.esperar, 0.4), cambio = aparece(t, T.quedan, 0.5);
  const eco = aparece(t, T.eco, 0.7), eco2 = aparece(t, T.gasta, 0.7), sube = aparece(t, T.eco - 0.3, 0.8);
  const celda = { padding:'14px 18px', borderBottom:`1px solid ${BORDE}` };

  return (
    <SlideCanvas variant="light">
      <div style={{ position:'absolute', inset:0, opacity:1 - aparece(t, T.ninguna - 0.3, 0.5) }}>
        <Cabecera t={t} eyebrow="5 · EN PLAY" title="Míralo en Uso de la API"/>
      </div>
      <div style={{ position:'absolute', inset:0, opacity:aparece(t, T.ninguna, 0.5) * (1 - aparece(t, T.eco - 0.3, 0.5)) }}>
        <Cabecera t={t} eyebrow="EL RETO" title="Lo que queríamos"/>
      </div>

      {ventana > 0 && (
        <div style={{ position:'absolute', left:300, top:200, width:1320, height:600, borderRadius:20, background:'#fff', border:`1px solid ${BORDE}`, boxShadow:'0 30px 80px rgba(15,23,42,0.10)', overflow:'hidden',
          opacity:ventana, transform:`translateY(${(1 - Math.min(1, aparece(t, T.play, 0.7))) * 30}px)` }}>
          <div style={{ height:60, background:'#F8FAFC', borderBottom:`1px solid ${BORDE}`, display:'flex', alignItems:'center', gap:10, padding:'0 22px' }}>
            {[0,1,2].map(i => <span key={i} style={{ width:13, height:13, borderRadius:100, background:'#CBD5E1' }}/>)}
            <div className="f-mono" style={{ marginLeft:22, padding:'8px 20px', borderRadius:100, background:'#fff', border:`1px solid ${BORDE}`, fontSize:19, color:GRIS }}>
              play.dinaup.com<span style={{ color:AZUL, fontWeight:700, opacity:aparece(t, T.uso, 0.4) }}>/App/Admin/APIUsage</span>
            </div>
          </div>
          <div style={{ display:'flex', height:540 }}>
            <div style={{ width:270, borderRight:`1px solid ${BORDE}`, padding:'22px 14px', background: t >= T.admin ? '#FBFDFF' : '#fff' }}>
              <div className="f-plex" style={{ fontSize:19, fontWeight:700, color: t >= T.admin ? AZUL : TINTA, padding:'0 12px 12px' }}>Administración</div>
              {MENU_ADMIN.map(m => {
                const sel = m === 'Uso de la API' && enUso;
                return <div key={m} className="f-plex" style={{ fontSize:18, padding:'9px 12px', borderRadius:10, color: sel ? AZUL : '#334155', fontWeight: sel ? 700 : 500, background: sel ? '#EFF6FF' : 'transparent' }}>{m}</div>;
              })}
            </div>
            <div style={{ flex:1, padding:'26px 34px', opacity:aparece(t, T.uso, 0.5) }}>
              <div className="f-plex" style={{ fontSize:30, fontWeight:700, color:TINTA }}>Uso de la API</div>
              <div style={{ display:'flex', gap:30, marginTop:18, borderBottom:`1px solid ${BORDE}` }}>
                {['Consumo', 'Límites'].map((p, i) => {
                  const sel = (i === 1) === limites;
                  return <div key={p} className="f-plex" style={{ fontSize:20, fontWeight:600, padding:'10px 2px', color: sel ? AZUL : GRIS, borderBottom: sel ? `3px solid ${AZUL}` : '3px solid transparent', marginBottom:-1 }}>{p}</div>;
                })}
              </div>

              {!limites && (
                <table className="f-plex" style={{ marginTop:26, width:'100%', borderCollapse:'collapse', fontSize:20, color:TINTA }}>
                  <thead><tr style={{ color:GRIS, fontSize:17, textAlign:'left' }}>
                    <th style={{ ...celda, fontWeight:600 }}>Clave</th>
                    <th style={{ ...celda, fontWeight:600, textAlign:'right', color: colPet > 0 ? AZUL : GRIS }}>Peticiones</th>
                    <th style={{ ...celda, fontWeight:600, textAlign:'right', color: colEsp > 0 ? ROJO : GRIS }}>Rechazadas por ritmo</th>
                  </tr></thead>
                  <tbody>{CLAVES_DE07.map(c => (
                    <tr key={c.nombre}>
                      <td style={{ ...celda, fontWeight:600 }}>{c.nombre}</td>
                      <td className="f-mono" style={{ ...celda, textAlign:'right', fontWeight:700, background:`rgba(0,133,255,${0.06 * colPet})` }}>{c.peticiones}</td>
                      <td className="f-mono" style={{ ...celda, textAlign:'right', fontWeight:700, color: c.esperaron > 0 ? ROJO : GRIS, background:`rgba(239,68,68,${0.06 * colEsp})` }}>{c.esperaron}</td>
                    </tr>
                  ))}</tbody>
                </table>
              )}

              {limites && (
                <div style={{ marginTop:24, opacity:cambio }}>
                  <div style={{ padding:'18px 22px', borderRadius:14, border:`1px solid ${BORDE}` }}>
                    <div className="f-plex" style={{ fontSize:20, fontWeight:700, color:TINTA, marginBottom:12 }}>Toda la empresa</div>
                    <BarraDerechos quedan={42} max={60} ancho={560}/>
                  </div>
                  <div style={{ marginTop:18, padding:'18px 22px', borderRadius:14, border:`1px solid ${BORDE}` }}>
                    <div className="f-plex" style={{ fontSize:20, fontWeight:700, color:TINTA, marginBottom:12 }}>Cada clave</div>
                    {CLAVES_DE07.map(c => (
                      <div key={c.nombre} style={{ display:'flex', alignItems:'center', gap:18, marginTop:10 }}>
                        <span className="f-plex" style={{ fontSize:18, fontWeight:600, color:TINTA, width:180 }}>{c.nombre}</span>
                        <BarraDerechos quedan={c.quedan} max={30} ancho={380}/>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {t > T.ninguna - 0.3 && <Objetivos t={t} desde={[T.ninguna, T.pagar]} cumplidos={[T.ninguna + 0.6, T.pagar + 0.6]} top={lerp(360, 150, sube)} escala={lerp(1, 0.72, sube)} opacidad={1 - 0.35 * sube}/>}

      {eco > 0 && (
        <div style={{ position:'absolute', left:0, right:0, top:520, textAlign:'center' }}>
          <div className="f-plex" style={{ fontSize:72, fontWeight:800, letterSpacing:'-0.03em', color:TINTA, opacity:eco, transform:`translateY(${(1 - eco) * 18}px)` }}>Cada segundo <span style={{ color:AZUL }}>ganas</span> derechos.</div>
          <div className="f-plex" style={{ fontSize:72, fontWeight:800, letterSpacing:'-0.03em', color:TINTA, marginTop:14, opacity:eco2, transform:`translateY(${(1 - eco2) * 18}px)` }}>Cada petición <span style={{ color:AZUL }}>gasta</span> uno.</div>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaDE07 });