// Sending.jsx — Cinematic upload progress + success

const STEPS = [
  { id: 'validate', label: 'Validando estructura', detail: 'Verificando secciones y versos' },
  { id: 'format', label: 'Formateando para HolyLyrics', detail: 'Generando bloques con timing' },
  { id: 'upload', label: 'Subiendo al servidor', detail: 'Sincronizando con la iglesia' },
  { id: 'publish', label: 'Publicando en el setlist', detail: 'Disponible en la próxima proyección' },
];

function SendingScreen({ song, onDone, onCancel }) {
  const [step, setStep] = React.useState(0);
  const [done, setDone] = React.useState(false);

  React.useEffect(() => {
    if (step < STEPS.length) {
      const t = setTimeout(() => setStep(step + 1), 900);
      return () => clearTimeout(t);
    } else {
      const t = setTimeout(() => setDone(true), 250);
      return () => clearTimeout(t);
    }
  }, [step]);

  if (done) return <SuccessScreen song={song} onDone={onDone} />;

  return (
    <div style={{
      height: '100%', background: 'linear-gradient(180deg, #0E0726 0%, #08051A 100%)',
      display: 'flex', flexDirection: 'column',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: '20%', left: '50%',
        width: 540, height: 540, borderRadius: '50%', filter: 'blur(120px)',
        opacity: 0.4, pointerEvents: 'none',
        background: 'radial-gradient(circle, #A855F7, transparent 60%)',
        animation: 'hlpulse 2.5s ease-in-out infinite',
      }} />

      <div style={{ height: 'calc(var(--safe-top, 44px) + 14px)', flexShrink: 0 }} />

      <div style={{
        flex: 1, padding: '40px 28px',
        display: 'flex', flexDirection: 'column',
        position: 'relative', zIndex: 2,
      }}>
        <div style={{ alignSelf: 'center', marginTop: 20, position: 'relative' }}>
          <div style={{
            width: 96, height: 96, borderRadius: 26,
            background: 'linear-gradient(135deg, #B45EFF 0%, #7C3AED 50%, #4F1FCB 100%)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 24px 60px rgba(168,85,247,0.55), inset 0 1px 0 rgba(255,255,255,0.3)',
            animation: 'hlfloat 3s ease-in-out infinite',
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', top: 0, left: 0, right: 0, height: '50%',
              background: 'linear-gradient(180deg, rgba(255,255,255,0.2), transparent)',
            }} />
            <div style={{ position: 'relative' }}>
              <LavidMark size={44} loop strokeWidth={90} />
            </div>
          </div>
          <div style={{
            position: 'absolute', inset: -10, borderRadius: 32,
            border: '2px solid rgba(192,132,252,0.5)',
            borderTopColor: 'transparent', borderRightColor: 'transparent',
            animation: 'hlspin 1.4s linear infinite',
          }} />
        </div>

        <div style={{
          textAlign: 'center', marginTop: 32,
          fontFamily: 'var(--hl-font-display)', fontSize: 26, fontWeight: 300,
          color: '#fff', letterSpacing: -0.8, lineHeight: 1.2,
        }}>Enviando <span style={{ fontStyle: 'italic', fontWeight: 400 }}>"{song?.name || song?.title || 'Reckless Love'}"</span></div>
        <div style={{
          textAlign: 'center', marginTop: 8, color: 'rgba(255,255,255,0.55)',
          fontSize: 14, letterSpacing: -0.2,
        }}>No cierres la app durante el envío</div>

        <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {STEPS.map((s, i) => {
            const state = i < step ? 'done' : i === step ? 'active' : 'pending';
            return (
              <div key={s.id} style={{
                display: 'flex', alignItems: 'flex-start', gap: 14,
                padding: '14px 16px', borderRadius: 16,
                background: state === 'active' ? 'rgba(168,85,247,0.14)' : 'rgba(255,255,255,0.035)',
                backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
                border: `1px solid ${state === 'active' ? 'rgba(192,132,252,0.4)' : 'rgba(255,255,255,0.06)'}`,
                transition: 'all 0.4s cubic-bezier(0.22, 1, 0.36, 1)',
                boxShadow: state === 'active' ? '0 0 0 4px rgba(168,85,247,0.10)' : 'none',
              }}>
                <div style={{
                  width: 26, height: 26, borderRadius: '50%', flexShrink: 0,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  background: state === 'done'
                    ? 'linear-gradient(135deg, #B45EFF, #4F1FCB)'
                    : state === 'active' ? 'rgba(192,132,252,0.2)' : 'rgba(255,255,255,0.06)',
                  marginTop: 1,
                  boxShadow: state === 'done' ? '0 4px 12px rgba(168,85,247,0.4)' : 'none',
                }}>
                  {state === 'done' && (
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                      <path d="M2 6l3 3 5-6" stroke="white" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  )}
                  {state === 'active' && (
                    <div style={{
                      width: 12, height: 12, borderRadius: '50%',
                      border: '2px solid rgba(192,132,252,0.3)',
                      borderTopColor: 'var(--hl-accent-light)',
                      animation: 'hlspin 0.8s linear infinite',
                    }} />
                  )}
                  {state === 'pending' && (
                    <div style={{ width: 6, height: 6, borderRadius: '50%', background: 'rgba(255,255,255,0.25)' }} />
                  )}
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{
                    fontSize: 14, fontWeight: 600,
                    color: state === 'pending' ? 'rgba(255,255,255,0.4)' : '#fff',
                    fontFamily: 'var(--hl-font-ui)', letterSpacing: -0.2,
                  }}>{s.label}</div>
                  <div style={{
                    fontSize: 12, marginTop: 2, letterSpacing: -0.1,
                    color: state === 'pending' ? 'rgba(255,255,255,0.25)' : 'rgba(255,255,255,0.55)',
                  }}>{s.detail}</div>
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ flex: 1 }} />

        <button onClick={onCancel} style={{
          alignSelf: 'center', marginBottom: 20,
          background: 'transparent', border: 'none',
          color: 'rgba(255,255,255,0.4)', fontSize: 13,
          cursor: 'pointer', fontFamily: 'var(--hl-font-ui)',
        }}>Cancelar envío</button>
      </div>
    </div>
  );
}

function SuccessScreen({ song, onDone }) {
  return (
    <div style={{
      height: '100%', background: 'linear-gradient(180deg, #0E0726 0%, #08051A 100%)',
      display: 'flex', flexDirection: 'column',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: '12%', left: '50%', transform: 'translateX(-50%)',
        width: 600, height: 600, borderRadius: '50%', filter: 'blur(110px)',
        opacity: 0.45, pointerEvents: 'none',
        background: 'radial-gradient(circle, #34D399, transparent 60%)',
      }} />
      {[1, 2, 3].map(i => (
        <div key={i} style={{
          position: 'absolute', top: '32%', left: '50%',
          width: 200 + i * 60, height: 200 + i * 60, borderRadius: '50%',
          transform: 'translate(-50%, -50%)',
          border: `1px solid rgba(52,211,153,${0.18 - i * 0.04})`,
          animation: `hlbreathe ${2.5 + i * 0.3}s ease-in-out infinite`,
        }} />
      ))}

      <div style={{ height: 'calc(var(--safe-top, 44px) + 14px)', flexShrink: 0 }} />

      <div style={{
        flex: 1, padding: '40px 28px',
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        position: 'relative', zIndex: 2, textAlign: 'center',
      }}>
        <div style={{
          width: 116, height: 116, borderRadius: 32,
          background: 'linear-gradient(135deg, #6EE7B7, #34D399 50%, #059669)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 24px 70px rgba(52,211,153,0.55), inset 0 1px 0 rgba(255,255,255,0.3)',
          animation: 'hlpop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0, height: '50%',
            background: 'linear-gradient(180deg, rgba(255,255,255,0.22), transparent)',
          }} />
          <svg width="54" height="54" viewBox="0 0 50 50" fill="none" style={{ position: 'relative' }}>
            <path d="M12 26l8 8 18-20" stroke="white" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>

        <div style={{
          marginTop: 30,
          fontFamily: 'var(--hl-font-display)', fontSize: 38, fontWeight: 300,
          color: '#fff', letterSpacing: -1.4, lineHeight: 1.0,
        }}><span style={{ fontStyle: 'italic', fontWeight: 400 }}>¡Publicada!</span></div>
        <div style={{
          marginTop: 12, color: 'rgba(255,255,255,0.7)',
          fontSize: 15, lineHeight: 1.55, maxWidth: 290, letterSpacing: -0.2,
        }}>
          "{song?.name || song?.title || 'Reckless Love'}" ya está disponible en HolyLyrics, lista para proyección.
        </div>

        <div style={{
          marginTop: 32, padding: '14px 18px', borderRadius: 14,
          background: 'rgba(255,255,255,0.05)',
          backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
          border: '1px solid rgba(255,255,255,0.10)',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M9 2H4a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2V7M11 1h4v4M7 9l8-8" stroke="rgba(192,132,252,0.95)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          <div style={{
            fontSize: 12, color: 'rgba(255,255,255,0.75)',
            fontFamily: 'var(--hl-font-mono)', letterSpacing: 0.3,
          }}>holylyrics.app/lavid/reckless-love</div>
        </div>
      </div>

      <div style={{
        padding: 'calc(0px) 24px calc(36px + var(--safe-bottom, 16px))',
        display: 'flex', flexDirection: 'column', gap: 10,
        position: 'relative', zIndex: 2,
      }}>
        <button onClick={onDone} style={{
          height: 56, borderRadius: 18, border: 'none',
          position: 'relative', overflow: 'hidden',
          background: 'linear-gradient(135deg, #B45EFF, #7C3AED 50%, #4F1FCB)',
          color: '#fff', fontSize: 16, fontWeight: 600,
          fontFamily: 'var(--hl-font-ui)', cursor: 'pointer', letterSpacing: -0.2,
          boxShadow: '0 14px 40px rgba(168,85,247,0.45), inset 0 1px 0 rgba(255,255,255,0.25)',
        }}>
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0, height: '50%',
            background: 'linear-gradient(180deg, rgba(255,255,255,0.18), transparent)',
            pointerEvents: 'none',
          }} />
          <span style={{ position: 'relative' }}>Volver al setlist</span>
        </button>
        <button style={{
          height: 52, borderRadius: 18,
          background: 'rgba(255,255,255,0.05)',
          backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
          border: '1px solid rgba(255,255,255,0.10)',
          color: 'rgba(255,255,255,0.85)', fontSize: 15, fontWeight: 500,
          fontFamily: 'var(--hl-font-ui)', cursor: 'pointer', letterSpacing: -0.2,
        }}>Añadir otra canción</button>
      </div>
    </div>
  );
}

Object.assign(window, { SendingScreen, SuccessScreen });