// CardDrop — pop-up que aparece cuando dropea una carta tras leer un capítulo.
// Animación: sobre → revelar carta. Si dropean varias a la vez, las cicla con
// "SIGUIENTE →"; en la última (o única) carta muestra los tres botones de acción:
//   - MIRAR COLECCIÓN  → abre el álbum
//   - VOLVER           → cierra y regresa a la galería de donde vino
//   - CONTINUAR        → sólo si hay siguiente capítulo disponible

function CardDropOverlay({
  queue,
  onDismiss,
  onOpenAlbum,
  onVolver,
  onContinue,
}) {
  const [idx, setIdx] = React.useState(0);
  const [phase, setPhase] = React.useState("envelope"); // envelope | revealing | revealed
  const card = queue[idx];

  React.useEffect(() => {
    if (!card) return;
    setPhase("envelope");
    const t1 = setTimeout(() => setPhase("revealing"), 900);
    const t2 = setTimeout(() => setPhase("revealed"), 1700);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, [idx, card]);

  if (!card) return null;

  const isDuplicate = card._duplicate;
  const rarity = window.CardSystem.getRarity(card.rarity);
  const isLast = idx + 1 >= queue.length;

  // Cicla a la siguiente carta del queue (cuando hay varias dropeando juntas).
  const nextInQueue = () => setIdx(idx + 1);

  // Acciones finales — todas cierran el drop primero.
  const goAlbum = () => { onDismiss(); onOpenAlbum && onOpenAlbum(); };
  const goVolver = () => { onDismiss(); onVolver && onVolver(); };
  const goContinue = () => { onDismiss(); onContinue && onContinue(); };

  return (
    <div className="carddrop-overlay" onClick={(e) => e.stopPropagation()}>
      <div className="carddrop-static" />
      <div className="carddrop-vignette" />

      <div className={"carddrop-stage carddrop-phase-" + phase}>
        {phase === "envelope" && (
          <div className="carddrop-envelope">
            <div className="carddrop-flap" />
            <div className="carddrop-body" />
            <div className="carddrop-seal">★</div>
          </div>
        )}

        {phase !== "envelope" && (
          <>
            <div className="carddrop-header">
              <div className="carddrop-eyebrow" style={{ color: rarity.color }}>
                {isDuplicate ? "DUPLICADO · +1" : "¡NUEVA TARJETA DESBLOQUEADA!"}
              </div>
              <div className="carddrop-rays" style={{ "--ray": rarity.glow }} />
            </div>

            <div className="carddrop-card">
              <window.HoloCard card={card} size="lg" />
            </div>

            {!isLast ? (
              // Hay más cartas en el queue → solo "SIGUIENTE →"
              <div className="carddrop-actions">
                <button
                  className="carddrop-btn carddrop-btn-secondary"
                  onClick={() => window.CardSystem.downloadWallpaper(card)}
                >
                  ↓ WALLPAPER
                </button>
                <button className="carddrop-btn carddrop-btn-primary" onClick={nextInQueue}>
                  SIGUIENTE →
                </button>
              </div>
            ) : (
              // Última carta → opciones finales
              <>
                <div className="carddrop-actions" style={{ flexWrap: "wrap", justifyContent: "center" }}>
                  <button
                    className="carddrop-btn carddrop-btn-secondary"
                    onClick={goAlbum}
                  >
                    ◆ MIRAR COLECCIÓN
                  </button>
                  <button
                    className="carddrop-btn carddrop-btn-secondary"
                    onClick={goVolver}
                  >
                    ◄ VOLVER
                  </button>
                  {onContinue && (
                    <button
                      className="carddrop-btn carddrop-btn-primary"
                      onClick={goContinue}
                    >
                      CONTINUAR ▸
                    </button>
                  )}
                </div>
                <div style={{ marginTop: 6 }}>
                  <button
                    onClick={() => window.CardSystem.downloadWallpaper(card)}
                    style={{
                      background: "transparent",
                      border: 0,
                      color: "rgba(255,255,255,0.45)",
                      fontFamily: "'Geist Sans', system-ui, sans-serif",
                      fontSize: 10,
                      letterSpacing: "0.3em",
                      cursor: "pointer",
                      padding: "6px 10px",
                    }}
                  >
                    ↓ DESCARGAR WALLPAPER
                  </button>
                </div>
              </>
            )}

            <div className="carddrop-counter">
              {idx + 1} / {queue.length}
            </div>
          </>
        )}
      </div>
    </div>
  );
}

window.CardDropOverlay = CardDropOverlay;