// AlbumsPage.jsx —— 集体相册（扁平，不分类）
const AlbumsPage = ({ albums, onClose }) => {
  const [lightboxIdx, setLightboxIdx] = React.useState(null);

  return (
    <div className="fade-in" style={{ minHeight: "100vh", minHeight: "100svh", background: "var(--c-bg)", paddingBottom: 80 }}>
      {/* 顶部 */}
      <div style={{
        position: "sticky", top: 0, zIndex: 10,
        padding: "12px 16px",
        display: "flex", alignItems: "center",
        background: "color-mix(in srgb, var(--c-bg) 85%, transparent)",
        backdropFilter: "blur(8px)",
      }}>
        <button onClick={onClose} style={{
          background: "var(--c-paper)", border: "1px solid var(--c-line)",
          borderRadius: 999, padding: "6px 14px", fontSize: 13, color: "var(--c-deep)",
        }}>← 返回</button>
        <div className="h1" style={{ fontSize: 18, color: "var(--c-deep)", marginLeft: "auto", marginRight: "auto" }}>
          我们的相册
        </div>
        <div style={{ width: 60 }} />
      </div>

      {/* 头部标题区 */}
      <div style={{
        padding: "6px 24px 22px",
        position: "relative",
        overflow: "hidden",
      }}>
        <div className="h1" style={{ fontSize: 32, color: "var(--c-deep)", lineHeight: 1.15 }}>
          我们一起走过的
          <br/><span style={{ color: "var(--c-primary)" }}>六年</span>
        </div>
        <div style={{ fontSize: 13, color: "var(--c-sub)", marginTop: 8 }}>
          {albums.length} 张照片 · 从 2020 到 2026
        </div>
      </div>

      {/* 拼贴照片墙（双列瀑布） */}
      <div style={{
        padding: "0 16px",
        columns: "2",
        columnGap: 10,
      }}>
        {albums.map((p, i) => (
          <div
            key={p.id}
            style={{
              breakInside: "avoid",
              marginBottom: 10,
              transform: `rotate(${(i % 2 === 0 ? -1 : 1) * (i % 3)}deg)`,
              animation: `popIn .4s cubic-bezier(.34,1.56,.64,1) ${Math.min(i * 0.03, 0.5)}s both`,
            }}
          >
            <div style={{ background: "white", padding: 6, boxShadow: "var(--shadow-soft)", position: "relative" }}>
              <PhotoPlaceholder
                photo={p}
                hue={(i * 37) % 360}
                onClick={() => setLightboxIdx(i)}
              />
              {/* 日期角标 */}
              {p.date && (
                <div style={{
                  position: "absolute", top: 10, right: 10,
                  background: "rgba(255,255,255,0.85)",
                  color: "var(--c-deep)",
                  fontSize: 10,
                  padding: "2px 7px",
                  borderRadius: 999,
                  fontWeight: 500,
                }}>{p.date}</div>
              )}
              {i % 4 === 0 && (
                <div className="tape" style={{ top: -8, left: "35%", width: 30, height: 10 }} />
              )}
            </div>
          </div>
        ))}
      </div>

      {/* Lightbox（支持左右滑） */}
      {lightboxIdx !== null && (
        <AlbumLightbox
          photos={albums}
          index={lightboxIdx}
          setIndex={setLightboxIdx}
          onClose={() => setLightboxIdx(null)}
        />
      )}

      {/* 底部 */}
      <div style={{ textAlign: "center", marginTop: 30, padding: "0 40px" }}>
        <div style={{ fontSize: 14, color: "var(--c-sub)", lineHeight: 1.8 }}>
          每一张照片都是我们走过的路。
          <br/>
          愿这些瞬间，永远鲜活。
        </div>
      </div>
    </div>
  );
};

const AlbumLightbox = ({ photos, index, setIndex, onClose }) => {
  const tsX = React.useRef(0);
  const onTS = (e) => { tsX.current = e.touches[0].clientX; };
  const onTE = (e) => {
    const dx = e.changedTouches[0].clientX - tsX.current;
    if (Math.abs(dx) > 50) {
      if (dx > 0) setIndex((index - 1 + photos.length) % photos.length);
      else        setIndex((index + 1) % photos.length);
    }
  };
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      else if (e.key === "ArrowLeft")  setIndex((index - 1 + photos.length) % photos.length);
      else if (e.key === "ArrowRight") setIndex((index + 1) % photos.length);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [index]);

  const cur = photos[index];
  const hue = (index * 37) % 360;

  return (
    <div
      onClick={onClose}
      onTouchStart={onTS}
      onTouchEnd={onTE}
      style={{
        position: "fixed", inset: 0,
        background: "rgba(29,53,87,0.92)",
        zIndex: 100,
        display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
        padding: 20,
        animation: "fadeIn .2s ease",
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{ width: "min(500px, 90vw)", animation: "zoomIn .3s cubic-bezier(.2,.9,.3,1.2)" }}
        key={index}
      >
        <PhotoPlaceholder photo={{ ...cur, layout: "wide" }} hue={hue} />
      </div>
      <div style={{ color: "rgba(255,255,255,0.9)", fontSize: 15, marginTop: 18, textAlign: "center", maxWidth: 400 }}>
        {cur.caption}
      </div>
      <div style={{ color: "rgba(255,255,255,0.55)", fontSize: 12, marginTop: 6 }}>
        {cur.date && <span>{cur.date} · </span>}{index + 1} / {photos.length}
      </div>

      <button
        onClick={(e) => { e.stopPropagation(); setIndex((index - 1 + photos.length) % photos.length); }}
        style={{ position: "absolute", top: "50%", transform: "translateY(-50%)", left: 16, width: 44, height: 44, borderRadius: "50%", background: "rgba(255,255,255,0.15)", color: "white", fontSize: 22, backdropFilter: "blur(8px)", display: "flex", alignItems: "center", justifyContent: "center" }}
      >←</button>
      <button
        onClick={(e) => { e.stopPropagation(); setIndex((index + 1) % photos.length); }}
        style={{ position: "absolute", top: "50%", transform: "translateY(-50%)", right: 16, width: 44, height: 44, borderRadius: "50%", background: "rgba(255,255,255,0.15)", color: "white", fontSize: 22, backdropFilter: "blur(8px)", display: "flex", alignItems: "center", justifyContent: "center" }}
      >→</button>

      <style>{`@keyframes zoomIn { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }`}</style>
    </div>
  );
};

Object.assign(window, { AlbumsPage });