// === 09:04 · Facturas — arrastras la carpeta del mes, la IA lee 129 PDF ===
// Explorador de Windows a la izquierda, Dinaup a la derecha. Cursor orgánico
// (curva bezier + aterrizaje + pausa pre-click) coge la carpeta "Noviembre 2025",
// la suelta en el drop zone y entra el stream.

function SlideFacturas({ t }){
  const files = [
    { n:'factura_movistar_oct.pdf', sz:'124 KB' },
    { n:'factura_endesa_nov.pdf',   sz:'86 KB'  },
    { n:'factura_vodafone_nov.pdf', sz:'92 KB'  },
    { n:'recibo_alquiler.pdf',      sz:'145 KB' },
    { n:'factura_amazon_0923.pdf',  sz:'73 KB'  },
    { n:'gastos_viaje.xlsx',        sz:'412 KB' },
    { n:'factura_iberdrola_nov.pdf', sz:'98 KB' },
    { n:'nominas_noviembre.pdf',    sz:'204 KB' },
  ];

  const T = {
    goToFolder:{ from:0.5, to:2.0 },
    click: 2.2,
    drag:{ from:2.4, to:4.4 },
    processing:{ from:4.4, to:9.8 },
    settle: 9.8,
  };

  // Geometría: explorador (180,170,620) · Dinaup (820,170,920).
  // Fila carpeta: 170 + 104 chrome + 28 headers = 302, alto 46 → centro real (292,324).
  // Drop zone: 170 + 76 + 63 header + 20 padding = 329, h=150 → centro real (1280,404).
  // Cursor orgánico (regla global): cada trayecto es una curva bezier con un
  // control lateral, easeInOut con aterrizaje (llega decelerando) y pausa
  // ~0.25s ANTES del click / de soltar. La punta del cursor dibuja en (+2,+2).
  const cursorLegs = [
    { t0:T.goToFolder.from, t1:1.95, from:{x:1500,y:950}, to:{x:290,y:322},  bend:-120 }, // aterriza 1.95 · click 2.2
    { t0:T.drag.from,       t1:4.15, from:{x:290,y:322},  to:{x:1278,y:402}, bend:-150 }, // arco de arrastre · suelta 4.4
  ];
  const easeCursor = (p) => Easing.easeInOutCubic(Math.pow(p, 0.82)); // la llegada dura más que la salida
  const cursorAt = (tt) => {
    let rest = cursorLegs[0].from;
    for (let i = 0; i < cursorLegs.length; i++){
      const leg = cursorLegs[i];
      if (tt <= leg.t0) return rest;
      if (tt < leg.t1){
        const e = easeCursor((tt - leg.t0) / (leg.t1 - leg.t0));
        const a = leg.from, b = leg.to;
        const len = Math.hypot(b.x - a.x, b.y - a.y) || 1;
        const c = { x:(a.x + b.x)/2 - (b.y - a.y)/len * leg.bend, y:(a.y + b.y)/2 + (b.x - a.x)/len * leg.bend };
        const v = 1 - e;
        return { x: v*v*a.x + 2*v*e*c.x + e*e*b.x, y: v*v*a.y + 2*v*e*c.y + e*e*b.y };
      }
      rest = leg.to;
    }
    return rest;
  };
  const cursorPos = cursorAt(t);

  const folderDragging = t >= T.drag.from && t < T.drag.to;
  const processing = t >= T.processing.from && t < T.processing.to;
  const settled = t >= T.settle;
  const massP = clamp((t - T.processing.from)/(T.processing.to - T.processing.from), 0, 1);
  const count = settled ? 129 : Math.floor(massP*129);

  return (
    <SlideCanvas variant="light-soft">
      <TimeBadge t={t} hora="09:04" label="La carpeta del mes"/>
      <div style={{position:'absolute',top:40,left:0,right:0,textAlign:'center',opacity:clamp(t/0.5,0,1),zIndex:5}}>
        <div className="f-plex" style={{fontSize:14,fontWeight:600,letterSpacing:'2px',color:'var(--dn-primary)'}}>PYMES · ENTRADA DE FACTURAS</div>
        <h2 className="f-plex" style={{fontSize:42,fontWeight:700,letterSpacing:'-0.03em',margin:'14px 0 0',color:'#0F172A'}}>
          {t >= T.drag.to
            ? <>129 facturas. <span className="grad-text">Leídas en paralelo.</span></>
            : <>Arrastras la carpeta. <span className="grad-text">Entera.</span></>}
        </h2>
      </div>

      {/* ===== Explorador ===== */}
      <div style={{position:'absolute',top:170,left:180,width:620,height:620,background:'#fff',borderRadius:10,boxShadow:'0 30px 80px rgba(15,23,42,0.18)',overflow:'hidden',border:'1px solid #E2E8F0'}}>
        <WindowsExplorerChrome path="Documentos ▸ Facturas recibidas"/>
        <div style={{height:28,background:'#F9F9F9',display:'grid',gridTemplateColumns:'2fr 80px 120px',fontSize:10,color:'#5F6368',padding:'0 12px',alignItems:'center',borderBottom:'1px solid #E5E5E5',fontWeight:500}}>
          <div>Nombre</div><div>Tamaño</div><div>Modificado</div>
        </div>
        {/* Carpeta objetivo */}
        {(()=>{
          const hl = t > 1.7 && t < 2.5;
          const hidden = t >= T.drag.from;
          return (
            <div style={{display:'grid',gridTemplateColumns:'2fr 80px 120px',padding:'12px 14px',alignItems:'center',gap:10,background: hl?'rgba(0,133,255,0.08)':'transparent',borderLeft:hl?'3px solid var(--dn-primary)':'3px solid transparent',opacity:hidden?0.22:1,fontSize:12,color:'#334155',borderBottom:'1px solid #F1F5F9'}}>
              <div style={{display:'flex',alignItems:'center',gap:10}}>
                <svg width="26" height="22" viewBox="0 0 26 22">
                  <path d="M2 6 Q2 3 5 3 L10 3 L12.5 5.5 L21 5.5 Q24 5.5 24 8.5 L24 17 Q24 20 21 20 L5 20 Q2 20 2 17 Z" fill="#FFC64F" stroke="#E8A82A" strokeWidth="0.6"/>
                  <path d="M2 7.5 L24 7.5 L24 8.5 Q24 5.5 21 5.5 L12.5 5.5 L10 3 L5 3 Q2 3 2 6 Z" fill="#FFD67A"/>
                </svg>
                <span style={{fontWeight:600,color:'#0F172A'}}>Noviembre 2025</span> <span style={{fontSize:11,color:'#94A3B8'}}>· 129 archivos</span>
              </div>
              <div className="f-mono" style={{fontSize:11,color:'#94A3B8'}}>—</div>
              <div className="f-mono" style={{fontSize:11,color:'#94A3B8'}}>nov 2025</div>
            </div>
          );
        })()}
        {/* Archivos sueltos */}
        <div style={{padding:'4px 0',opacity: t >= T.drag.from ? 0.5 : 1,transition:'opacity 400ms'}}>
          {files.map((f,i)=>(
            <div key={i} style={{display:'grid',gridTemplateColumns:'2fr 80px 120px',padding:'11px 14px',alignItems:'center',gap:10,fontSize:12,color:'#334155'}}>
              <div style={{display:'flex',alignItems:'center',gap:8}}>
                <div style={{width:22,height:26,background:f.n.endsWith('xlsx')?'linear-gradient(180deg,#34A853,#1D6F42)':'linear-gradient(180deg,#EF5350,#C62828)',borderRadius:2,display:'flex',alignItems:'center',justifyContent:'center',color:'#fff',fontSize:7,fontWeight:700}}>{f.n.endsWith('xlsx')?'XLS':'PDF'}</div>
                <span>{f.n}</span>
              </div>
              <div className="f-mono" style={{fontSize:11,color:'#94A3B8'}}>{f.sz}</div>
              <div className="f-mono" style={{fontSize:11,color:'#94A3B8'}}>nov 2025</div>
            </div>
          ))}
        </div>
      </div>

      {/* ===== Dinaup ===== */}
      <div style={{position:'absolute',top:170,left:820,width:920,height:620,background:'#fff',borderRadius:10,boxShadow:'0 30px 80px rgba(0,133,255,0.15)',overflow:'hidden',border:'1px solid #E2E8F0'}}>
        <BrowserChrome url="play.dinaup.com/App/Pymes/FacturasRecibidas"/>
        <DinaupAppHeader breadcrumb={["Compras","Facturas recibidas"]}/>
        <div style={{padding:20,height:'calc(100% - 142px)',background:'#F8FAFC',display:'flex',flexDirection:'column'}}>

          {/* Drop zone con progreso */}
          <FactDropZone folderDragging={folderDragging} processing={processing} settled={settled} massP={massP} count={count} t={t} startT={T.processing.from}/>

          {/* Tabla en stream */}
          <div style={{marginTop:14,background:'#fff',borderRadius:10,border:'1px solid #E2E8F0',overflow:'hidden',flex:1,display:'flex',flexDirection:'column'}}>
            <div style={{padding:'11px 16px',borderBottom:'1px solid #E2E8F0',display:'flex',alignItems:'center',justifyContent:'space-between'}}>
              <div className="f-plex" style={{fontSize:14,fontWeight:700,color:'#0F172A'}}>Facturas recibidas · Noviembre</div>
              <div style={{fontSize:11,color:'#64748B'}}>
                {26 + count} registros
                {processing && <span style={{color:'var(--dn-primary)',fontWeight:600}}> · +{count} nuevas</span>}
              </div>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'72px 1fr 100px 90px 90px',padding:'8px 16px',background:'#F8FAFC',fontSize:10,color:'#64748B',letterSpacing:0.5,textTransform:'uppercase',borderBottom:'1px solid #E2E8F0'}}>
              <div>Fecha</div><div>Proveedor</div><div>Nº Factura</div><div>Total</div><div>Estado</div>
            </div>
            <div style={{flex:1,overflow:'hidden',position:'relative'}}>
              <FactRowsStream massP={massP} settled={settled}/>
            </div>
          </div>
        </div>
      </div>

      {/* Carpeta voladora */}
      {folderDragging && (()=>{
        const pos = cursorPos;
        return (
          <div style={{position:'absolute',left:pos.x+10,top:pos.y+10,transform:'rotate(-3deg)',pointerEvents:'none',zIndex:15,width:240,background:'#fff',borderRadius:10,boxShadow:'0 22px 55px rgba(0,0,0,0.4)',padding:12,border:'1px solid #E2E8F0'}}>
            <div style={{display:'flex',alignItems:'center',gap:10}}>
              <svg width="36" height="30" viewBox="0 0 26 22">
                <path d="M2 6 Q2 3 5 3 L10 3 L12.5 5.5 L21 5.5 Q24 5.5 24 8.5 L24 17 Q24 20 21 20 L5 20 Q2 20 2 17 Z" fill="#FFC64F" stroke="#E8A82A" strokeWidth="0.6"/>
              </svg>
              <div style={{flex:1,minWidth:0}}>
                <div style={{fontSize:12,fontWeight:700,color:'#0F172A'}}>📁 Noviembre 2025</div>
                <div className="f-mono" style={{fontSize:10,color:'#64748B'}}>129 archivos · 14,8 MB</div>
              </div>
            </div>
            <div style={{position:'absolute',top:-4,right:-4,background:'var(--dn-primary)',color:'#fff',fontSize:10,fontWeight:700,padding:'2px 8px',borderRadius:100,boxShadow:'0 4px 12px rgba(0,133,255,0.5)'}}>129</div>
          </div>
        );
      })()}

      <CineCursor x={cursorPos.x} y={cursorPos.y} clicking={t >= T.click && t < T.click + 0.5}/>
      <SocialCaption t={t} cues={CAPTIONS.slide_facturas}/>
    </SlideCanvas>
  );
}

// ---- Drop zone masivo con barra y workers ----
function FactDropZone({ folderDragging, processing, settled, massP, count, t, startT }){
  const active = folderDragging || processing || settled;
  return (
    <div style={{position:'relative',height:150,border:`2px dashed ${folderDragging?'var(--dn-primary)':(processing||settled?'transparent':'#CBD5E1')}`,borderRadius:12,background:active?'linear-gradient(135deg, rgba(0,133,255,0.08), rgba(0,133,255,0.02))':'#fff',overflow:'hidden',boxShadow:folderDragging?'0 0 0 6px rgba(0,133,255,0.1)':'none',transition:'all 260ms ease',padding:'16px 22px',display:'flex',flexDirection:'column',gap:9}}>
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
        <div style={{display:'flex',alignItems:'center',gap:12}}>
          <div style={{width:42,height:42,borderRadius:10,background:'rgba(0,133,255,0.12)',display:'flex',alignItems:'center',justifyContent:'center',border:'1px solid rgba(0,133,255,0.25)',fontSize:20}}>
            {settled ? '✅' : '📁'}
          </div>
          <div>
            <div className="f-plex" style={{fontSize:15,fontWeight:700,color:'#0F172A'}}>
              {folderDragging ? 'Carpeta detectada' : processing ? 'Procesando 129 facturas…' : settled ? '129 facturas contabilizadas' : 'Arrastra facturas aquí'}
            </div>
            <div className="f-mono" style={{fontSize:11,color:'#64748B',marginTop:2}}>
              {folderDragging ? '📁 Noviembre 2025 · 129 archivos' : processing ? `IA leyendo en paralelo · ${count} / 129` : settled ? '✓ Sin errores · 4,8 s de proceso' : 'PDF · JPG · XML · también carpetas enteras'}
            </div>
          </div>
        </div>
        {(processing || settled) && (
          <div style={{textAlign:'right'}}>
            <div className="f-mono" style={{fontSize:30,fontWeight:800,color:'var(--dn-primary)',lineHeight:1}}>{count}</div>
            <div style={{fontSize:9,color:'#64748B',letterSpacing:0.5,textTransform:'uppercase',fontWeight:600}}>de 129</div>
          </div>
        )}
      </div>
      {(processing || settled) && (
        <div style={{height:7,background:'#E2E8F0',borderRadius:100,overflow:'hidden'}}>
          <div style={{height:'100%',width:`${massP*100}%`,background:'linear-gradient(90deg, #0085FF, #00C6FF)',borderRadius:100,boxShadow:'0 0 12px rgba(0,133,255,0.5)'}}/>
        </div>
      )}
      {(processing || settled) && (
        <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
          {[0,1,2,3,4,5,6,7].map(i=>{
            const wT = (t - startT - i*0.08) % 0.6;
            const wActive = processing && wT > 0 && wT < 0.5;
            return (
              <div key={i} className="f-mono" style={{padding:'3px 8px',background:settled?'rgba(16,185,129,0.12)':(wActive?'rgba(0,133,255,0.18)':'rgba(0,133,255,0.06)'),border:`1px solid ${settled?'rgba(16,185,129,0.35)':'rgba(0,133,255,0.25)'}`,borderRadius:100,fontSize:9,fontWeight:600,color:settled?'#059669':'var(--dn-primary)'}}>
                {settled ? '✓' : '⟳'} worker-{i+1}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

// ---- Stream de filas ----
function FactRowsStream({ massP, settled }){
  const pool = [
    ['Movistar','FM-',79.99],['Endesa','END-',238.40],['Iberdrola','IB-',312.15],
    ['Vodafone','VDF-',120.00],['Amazon EU','AMZ-',145.00],['Correos','CRR-',42.80],
    ['Orange','ORG-',68.50],['Naturgy','NAT-',198.22],['Repsol','RPS-',87.30],
    ['Mapfre','MPF-',410.00],['Makro','MKR-',612.30],['SEUR','SEUR-',56.90],
  ];
  const slots = 12;
  const rows = [];
  for (let i=0;i<slots;i++){
    const threshold = (i+1)/slots;
    if (massP < threshold - 0.08) continue;
    const [prov, prefix, amount] = pool[(i*7+3) % pool.length];
    const dd = `${String(Math.max(29-i,1)).padStart(2,'0')}/11`;
    const num = `${prefix}${String(10000 + i*37).slice(-5)}`;
    const tot = `${amount.toLocaleString('es-ES',{minimumFractionDigits:2})} €`;
    const localP = clamp((massP - (threshold - 0.08))/0.2, 0, 1);
    rows.push(
      <div key={i} style={{display:'grid',gridTemplateColumns:'72px 1fr 100px 90px 90px',padding:'9px 16px',alignItems:'center',fontSize:12,color:'#334155',borderBottom:'1px solid #F1F5F9',background:settled?'transparent':`rgba(0,133,255,${0.06*(1-localP)})`,borderLeft:settled?'3px solid transparent':`3px solid rgba(0,133,255,${1-localP*0.6})`,opacity:localP,transform:`translateY(${(1-localP)*6}px)`}}>
        <div className="f-mono" style={{fontSize:11}}>{dd}</div>
        <div style={{display:'flex',alignItems:'center',gap:8}}><ProviderLogo name={prov} size={16}/> <span style={{whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{prov}</span></div>
        <div className="f-mono" style={{fontSize:11,color:'#64748B'}}>{num}</div>
        <div className="f-mono" style={{fontSize:12,fontWeight:600,color:'var(--dn-primary)'}}>{tot}</div>
        <div><span style={{display:'inline-flex',alignItems:'center',gap:4,padding:'2px 7px',background:'rgba(16,185,129,0.1)',color:'#059669',borderRadius:100,fontSize:9,fontWeight:600,border:'1px solid rgba(16,185,129,0.25)'}}>✓</span></div>
      </div>
    );
  }
  return (
    <div style={{height:'100%',overflow:'hidden',position:'relative'}}>
      {rows}
      <div style={{position:'absolute',top:0,left:0,right:0,height:24,background:'linear-gradient(180deg,#fff,transparent)',pointerEvents:'none'}}/>
    </div>
  );
}

Object.assign(window, { SlideFacturas, FactDropZone, FactRowsStream });