// Galeria — grade estilo Instagram na seção, página exclusiva ao expandir
window.Gallery = function Gallery() {
  const C = window.CONFIG;
  const [tab, setTab]               = React.useState("nossas");
  const [galleryOpen, setGalleryOpen] = React.useState(false);
  const [currentIdx, setCurrentIdx] = React.useState(0);
  const stripRef = React.useRef(null);

  // --- Estados da aba nossas fotos ---
  const [couplePhotos,  setCouplePhotos]  = React.useState([]);
  const [loadingCouple, setLoadingCouple] = React.useState(false);
  const [coupleLoaded,  setCoupleLoaded]  = React.useState(false);

  // --- Estados da aba de convidados ---
  const [guestPhotos, setGuestPhotos]   = React.useState([]);
  const [loadingGuest, setLoadingGuest] = React.useState(false);
  const [errorGuest, setErrorGuest]     = React.useState(false);
  const [guestLoaded, setGuestLoaded]   = React.useState(false);

  const fetchGuestPhotos = React.useCallback(() => {
    if (!window.db) { setGuestLoaded(true); return; }
    setLoadingGuest(true); setErrorGuest(false);
    window.db.collection('fotos')
      .where('status', '==', 'aprovada')
      .orderBy('createdAt', 'desc')
      .get()
      .then(snap => {
        const photos = snap.docs.map(doc => {
          const d = doc.data();
          const cn = d.cloudName || C.cloudinary.cloudName;
          return {
            src:        `https://res.cloudinary.com/${cn}/image/upload/w_1200,q_auto,f_auto/${d.publicId}`,
            thumb:      `https://res.cloudinary.com/${cn}/image/upload/w_400,q_auto,f_auto/${d.publicId}`,
            alt:        `Foto de ${d.guestName || 'convidado'}`,
            guest_name: d.guestName || 'Anônimo',
            message:    d.message   || '',
            created_at: d.createdAt ? d.createdAt.toDate().toISOString() : ''
          };
        });
        setGuestPhotos(photos);
        setGuestLoaded(true);
      })
      .catch(() => setErrorGuest(true))
      .finally(() => setLoadingGuest(false));
  }, []);

  // Carrega fotos do casal do Firestore ao abrir aba
  React.useEffect(() => {
    if (tab !== 'nossas' || coupleLoaded || loadingCouple) return;
    if (!window.db) { setCoupleLoaded(true); return; }
    setLoadingCouple(true);
    window.db.collection('galeria').orderBy('ordem').get()
      .then(snap => {
        const photos = snap.docs.map(doc => {
          const d = doc.data();
          const cn = d.cloudName || C.cloudinary.cloudName;
          return {
            src:   `https://res.cloudinary.com/${cn}/image/upload/w_1200,q_auto,f_auto/${d.publicId}`,
            thumb: `https://res.cloudinary.com/${cn}/image/upload/w_400,q_auto,f_auto/${d.publicId}`,
            alt:   d.alt || 'Foto do casal',
          };
        });
        setCouplePhotos(photos);
      })
      .catch(() => {})
      .finally(() => { setCoupleLoaded(true); setLoadingCouple(false); });
  }, [tab, coupleLoaded, loadingCouple]);

  React.useEffect(() => {
    if (tab === 'convidados' && !guestLoaded && !loadingGuest && !errorGuest) {
      fetchGuestPhotos();
    }
  }, [tab, guestLoaded, loadingGuest, errorGuest, fetchGuestPhotos]);

  const activePhotos = tab === 'nossas' ? couplePhotos : guestPhotos;
  const current = activePhotos[currentIdx] || null;

  // --- Abrir página de galeria ---
  const openGallery = (index) => {
    setCurrentIdx(index);
    setGalleryOpen(true);
    document.body.style.overflow = 'hidden';
  };

  const closeGallery = () => {
    setGalleryOpen(false);
    document.body.style.overflow = '';
  };

  const goNext = () => setCurrentIdx(i => (i + 1) % activePhotos.length);
  const goPrev = () => setCurrentIdx(i => (i - 1 + activePhotos.length) % activePhotos.length);

  // Scroll da strip para o thumb ativo
  React.useEffect(() => {
    if (!galleryOpen || !stripRef.current) return;
    const thumb = stripRef.current.querySelector('.fg-thumb--active');
    if (thumb) thumb.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
  }, [currentIdx, galleryOpen]);

  // Teclado
  React.useEffect(() => {
    if (!galleryOpen) return;
    const onKey = (e) => {
      if (e.key === 'Escape')      closeGallery();
      if (e.key === 'ArrowRight')  goNext();
      if (e.key === 'ArrowLeft')   goPrev();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [galleryOpen, activePhotos.length]);

  const fmtDate = (iso) => {
    if (!iso) return '';
    const d = new Date(iso);
    if (isNaN(d)) return '';
    const m = ['jan','fev','mar','abr','mai','jun','jul','ago','set','out','nov','dez'];
    return `${d.getDate()} ${m[d.getMonth()]} ${d.getFullYear()}`;
  };

  // --- Seção principal ---
  return (
    <>
      <section id="galeria" className="galeria">
        <div className="container">
          <header className="section-header" data-animate>
            <p className="sub">Memórias</p>
            <h2>Galeria</h2>
            <Ornament width={140} color="#ffffff" />
            <p className="galeria-intro">
              Pequenos momentos da nossa história e as memórias que vocês
              estão criando conosco.
            </p>
          </header>

          {/* Abas */}
          <div className="g-tabs" role="tablist" data-animate>
            <button role="tab" aria-selected={tab === 'nossas'}
              className={`g-tab ${tab === 'nossas' ? 'g-tab--active' : ''}`}
              onClick={() => setTab('nossas')}>
              <Icon name="heart" size={14} /> Nossas fotos
            </button>
            <button role="tab" aria-selected={tab === 'convidados'}
              className={`g-tab ${tab === 'convidados' ? 'g-tab--active' : ''}`}
              onClick={() => setTab('convidados')}>
              <Icon name="image" size={14} /> Enviadas pelos convidados
              {guestPhotos.length > 0 &&
                <span className="g-tab-badge">{guestPhotos.length}</span>}
            </button>
          </div>

          {/* Grade Instagram — aba nossas fotos */}
          {tab === 'nossas' && (
            <>
              {loadingCouple && <GuestSkeleton />}
              {!loadingCouple && coupleLoaded && couplePhotos.length === 0 && (
                <div className="g-state g-state--nossas">
                  <Icon name="heart" size={36} color="#ADADAD" />
                  <p className="g-nossas-aviso">Em breve colocaremos nossas fotos aqui.</p>
                  <p className="g-nossas-sub">Estamos preparando cada memória com muito carinho para compartilhar com vocês.</p>
                </div>
              )}
              {!loadingCouple && couplePhotos.length > 0 && (
                <div className="ig-grid">
                  {couplePhotos.map((foto, i) => (
                    <button key={i} className="ig-cell" onClick={() => openGallery(i)}
                            aria-label={`Ver foto ${i + 1}`}>
                      <img src={foto.thumb || foto.src} alt={foto.alt} loading="lazy" />
                      <span className="ig-overlay">
                        <Icon name="zoom-in" size={26} color="#ffffff" />
                      </span>
                    </button>
                  ))}
                </div>
              )}
            </>
          )}

          {/* Grade Instagram — aba convidados */}
          {tab === 'convidados' && (
            <>
              {loadingGuest && <GuestSkeleton />}
              {!loadingGuest && errorGuest && (
                <div className="g-state">
                  <p className="g-state-msg">Não foi possível carregar as fotos.</p>
                  <button className="btn-outline-marsala g-state-btn" onClick={fetchGuestPhotos}>
                    Tentar novamente
                  </button>
                </div>
              )}
              {!loadingGuest && !errorGuest && guestLoaded && guestPhotos.length === 0 && (
                <div className="g-state">
                  <Ornament width={100} />
                  <p className="g-empty">As fotos dos convidados aparecerão aqui em breve.</p>
                  <a href={C.uploadUrl} target="_blank" rel="noopener"
                     className="btn-outline-marsala g-state-btn">
                    Seja o primeiro a enviar
                  </a>
                </div>
              )}
              {!loadingGuest && !errorGuest && guestPhotos.length > 0 && (
                <div className="ig-grid">
                  {guestPhotos.map((foto, i) => (
                    <button key={i} className="ig-cell" onClick={() => openGallery(i)}
                            aria-label={`Ver foto de ${foto.guest_name}`}>
                      <img src={foto.thumb || foto.src} alt={foto.alt} loading="lazy" />
                      <span className="ig-name">{foto.guest_name}</span>
                      <span className="ig-overlay">
                        <Icon name="zoom-in" size={26} color="#ffffff" />
                      </span>
                    </button>
                  ))}
                </div>
              )}
            </>
          )}
        </div>

        {/* FAB upload */}
        <a href={C.uploadUrl} target="_blank" rel="noopener" className="galeria-upload-fab">
          <Icon name="image" size={14} />
          Enviar suas fotos
          <span aria-hidden="true">→</span>
        </a>
      </section>

      {/* ===== Página exclusiva da galeria (full-screen) ===== */}
      {galleryOpen && current && (
        <div className="fg-backdrop">

          {/* Header */}
          <div className="fg-header">
            <button className="fg-close" onClick={closeGallery} aria-label="Fechar galeria">
              <Icon name="arrow-left" size={20} />
              <span>Galeria</span>
            </button>
            <div className="fg-tabs-mini">
              <button className={`fg-tab-mini ${tab === 'nossas' ? 'fg-tab-mini--active' : ''}`}
                      onClick={() => { setTab('nossas'); setCurrentIdx(0); }}>
                Nossas fotos
              </button>
              <button className={`fg-tab-mini ${tab === 'convidados' ? 'fg-tab-mini--active' : ''}`}
                      onClick={() => { setTab('convidados'); setCurrentIdx(0); }}>
                Convidados
              </button>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <div className="fg-counter">{currentIdx + 1} / {activePhotos.length}</div>
            <button className="fg-x" onClick={closeGallery} aria-label="Fechar galeria">
              <Icon name="x" size={20} />
            </button>
          </div>
          </div>

          {/* Área da foto */}
          <div className="fg-stage">
            <button className="fg-nav fg-nav--prev" onClick={goPrev} aria-label="Foto anterior">
              <Icon name="chevron-left" size={32} />
            </button>

            <figure className="fg-figure">
              <img key={currentIdx} src={current.src} alt={current.alt} className="fg-img" />
              {tab === 'convidados' && (
                <figcaption className="fg-caption">
                  <span className="fg-cap-name">{current.guest_name}</span>
                  {current.message && <span className="fg-cap-msg">"{current.message}"</span>}
                  {current.created_at && <span className="fg-cap-date">{fmtDate(current.created_at)}</span>}
                </figcaption>
              )}
            </figure>

            <button className="fg-nav fg-nav--next" onClick={goNext} aria-label="Próxima foto">
              <Icon name="chevron-right" size={32} />
            </button>
          </div>

          {/* Strip de miniaturas */}
          <div className="fg-strip" ref={stripRef}>
            {activePhotos.map((foto, i) => (
              <button key={i}
                      className={`fg-thumb ${i === currentIdx ? 'fg-thumb--active' : ''}`}
                      onClick={() => setCurrentIdx(i)}
                      aria-label={`Ir para foto ${i + 1}`}>
                <img src={foto.thumb || foto.src} alt="" loading="lazy" />
              </button>
            ))}
          </div>
        </div>
      )}

      <style>{`
        /* ===== Seção ===== */
        .galeria {
          background: #711312;
          padding: 96px 0 110px;
          position: relative;
        }
        .galeria .section-header h2 { color: #ffffff; }
        .galeria .section-header .sub { color: rgba(255,255,255,0.7); }
        .galeria-intro {
          font-family: 'Cormorant Garamond', serif;
          font-style: italic; font-size: 17px;
          color: #ffffff; max-width: 560px;
          margin: 14px auto 0; line-height: 1.6;
        }

        /* Abas */
        .g-tabs {
          display: flex; justify-content: center;
          gap: 10px; margin: 0 auto 32px; flex-wrap: wrap;
        }
        .g-tab {
          font-family: 'Lato', sans-serif; font-size: 12px;
          letter-spacing: 1.5px; text-transform: uppercase;
          padding: 11px 22px; border-radius: 999px;
          border: 1px solid rgba(255,255,255,0.6); color: #ffffff;
          background: transparent;
          display: inline-flex; align-items: center; gap: 8px;
          transition: all 0.25s ease;
        }
        .g-tab:hover { background: rgba(255,255,255,0.12); }
        .g-tab--active { background: #ffffff; color: #711312; border-color: #ffffff; }
        .g-tab--active:hover { background: #ffffff; }
        .g-tab-badge {
          background: #ADADAD; color: #ffffff;
          font-size: 10px; padding: 2px 7px; border-radius: 999px;
          letter-spacing: 0; font-weight: 700;
        }

        /* Grade Instagram */
        .ig-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 3px;
          max-width: 900px;
          margin: 0 auto;
          animation: fadeInUp 0.4s ease both;
        }
        .ig-cell {
          position: relative;
          aspect-ratio: 1 / 1;
          overflow: hidden;
          background: #ffffff;
          padding: 0; border: none; cursor: pointer;
          display: block;
        }
        .ig-cell img {
          width: 100%; height: 100%;
          object-fit: cover;
          display: block;
          transition: transform 0.4s ease;
        }
        .ig-cell:hover img { transform: scale(1.06); }
        .ig-overlay {
          position: absolute; inset: 0;
          display: flex; align-items: center; justify-content: center;
          background: rgba(107,26,38,0);
          opacity: 0;
          transition: background 0.3s ease, opacity 0.3s ease;
        }
        .ig-cell:hover .ig-overlay {
          opacity: 1; background: rgba(107,26,38,0.5);
        }
        .ig-overlay--more {
          background: rgba(0,0,0,0.55) !important;
          opacity: 1 !important;
          flex-direction: column; gap: 4px;
        }
        .ig-more-count {
          font-family: 'Cormorant Garamond', serif;
          font-size: 36px; font-weight: 600; color: #ffffff; line-height: 1;
        }
        .ig-more-label {
          font-family: 'Lato', sans-serif; font-size: 11px;
          letter-spacing: 2px; text-transform: uppercase; color: #ffffff;
          opacity: 0.85;
        }
        .ig-name {
          position: absolute; left: 8px; bottom: 8px;
          background: rgba(0,0,0,0.55); color: #ffffff;
          font-family: 'Cormorant Garamond', serif;
          font-size: 12px; font-style: italic;
          padding: 2px 9px; border-radius: 999px;
          border: 0.5px solid rgba(184,134,11,0.4);
        }

        /* Estados */
        .g-state {
          display: flex; flex-direction: column; align-items: center;
          gap: 14px; padding: 60px 24px; text-align: center;
        }
        .g-state-msg, .g-empty {
          font-family: 'Cormorant Garamond', serif; font-style: italic;
          font-size: 17px; color: #ffffff;
        }
        .g-state--nossas { padding: 72px 24px; gap: 16px; }
        .g-nossas-aviso {
          font-family: 'Cormorant Garamond', serif;
          font-size: clamp(20px, 3vw, 26px);
          font-weight: 600; color: #ffffff;
          margin: 0;
        }
        .g-nossas-sub {
          font-family: 'Cormorant Garamond', serif;
          font-style: italic; font-size: 16px;
          color: rgba(255,255,255,0.7); max-width: 400px;
          line-height: 1.6; margin: 0;
        }
        .g-state-btn { width: auto !important; padding: 12px 22px; }

        /* Skeleton */
        .skel-grid {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
          max-width: 900px; margin: 0 auto;
        }
        .skel {
          aspect-ratio: 1 / 1;
          background: linear-gradient(90deg, #F1EFE8 0%, #ffffff 50%, #F1EFE8 100%);
          background-size: 200% 100%;
          animation: shimmer 1.6s ease-in-out infinite;
        }
        @keyframes shimmer {
          0%   { background-position: 200% 0; }
          100% { background-position: -200% 0; }
        }

        /* FAB */
        .galeria-upload-fab {
          position: absolute; right: 24px; bottom: 28px;
          background: #711312; color: #ffffff;
          padding: 12px 20px; border-radius: 24px;
          font-family: 'Lato', sans-serif; font-size: 13px; letter-spacing: 1px;
          display: inline-flex; align-items: center; gap: 8px;
          box-shadow: 0 10px 28px -8px rgba(139,38,53,0.55);
          transition: transform 0.25s ease, background 0.25s ease;
          z-index: 4;
        }
        .galeria-upload-fab:hover {
          background: #711312; transform: translateY(-2px);
        }

        /* ===== Página exclusiva da galeria ===== */
        .fg-backdrop {
          position: fixed; inset: 0; z-index: 500;
          background: #0D0D0D;
          display: flex; flex-direction: column;
          animation: fgIn 0.3s ease both;
        }
        @keyframes fgIn {
          from { opacity: 0; transform: scale(0.98); }
          to   { opacity: 1; transform: scale(1); }
        }

        /* Header */
        .fg-header {
          display: flex; align-items: center; justify-content: space-between;
          padding: 0 20px;
          height: 56px; flex-shrink: 0;
          background: rgba(0,0,0,0.7);
          border-bottom: 1px solid rgba(184,134,11,0.18);
          backdrop-filter: blur(8px);
        }
        .fg-close {
          display: inline-flex; align-items: center; gap: 8px;
          color: #ffffff; font-family: 'Lato', sans-serif;
          font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
          background: none; border: none; cursor: pointer;
          padding: 8px 4px;
          transition: color 0.2s ease;
        }
        .fg-close:hover { color: #ADADAD; }
        .fg-tabs-mini {
          display: flex; gap: 6px;
        }
        .fg-tab-mini {
          font-family: 'Lato', sans-serif; font-size: 11px;
          letter-spacing: 1.5px; text-transform: uppercase;
          padding: 6px 14px; border-radius: 999px;
          border: 1px solid rgba(245,196,179,0.3); color: rgba(245,196,179,0.7);
          background: transparent; cursor: pointer;
          transition: all 0.2s ease;
        }
        .fg-tab-mini--active {
          border-color: #ADADAD; color: #ADADAD;
          background: rgba(184,134,11,0.1);
        }
        .fg-counter {
          font-family: 'Lato', sans-serif; font-size: 12px;
          letter-spacing: 2px; color: rgba(245,196,179,0.6);
        }
        .fg-x {
          width: 36px; height: 36px;
          display: flex; align-items: center; justify-content: center;
          border-radius: 50%;
          border: 1px solid rgba(245,196,179,0.2);
          background: rgba(0,0,0,0.35);
          color: #ffffff; cursor: pointer;
          transition: background 0.2s ease, border-color 0.2s ease;
        }
        .fg-x:hover { background: rgba(139,38,53,0.7); border-color: #ADADAD; }

        /* Stage */
        .fg-stage {
          flex: 1; min-height: 0;
          display: flex; align-items: center; justify-content: center;
          position: relative; padding: 16px 72px;
        }
        .fg-figure {
          display: flex; flex-direction: column; align-items: center; gap: 14px;
          max-width: 100%; max-height: 100%;
        }
        .fg-img {
          max-width: 100%; max-height: calc(100vh - 200px);
          object-fit: contain; border-radius: 4px;
          box-shadow: 0 32px 80px -20px rgba(0,0,0,0.8);
          animation: fgImgIn 0.25s ease both;
        }
        @keyframes fgImgIn {
          from { opacity: 0; transform: scale(0.97); }
          to   { opacity: 1; transform: scale(1); }
        }
        .fg-caption {
          background: rgba(107,26,38,0.8);
          border: 0.5px solid rgba(184,134,11,0.35);
          border-radius: 10px; padding: 10px 18px;
          max-width: 500px; text-align: center;
          display: flex; flex-direction: column; gap: 3px;
        }
        .fg-cap-name {
          font-family: 'Cormorant Garamond', serif; font-style: italic;
          font-size: 16px; color: #ffffff;
        }
        .fg-cap-msg {
          font-family: 'Lato', sans-serif; font-size: 13px;
          color: #F5C4B3; line-height: 1.5;
        }
        .fg-cap-date {
          font-family: 'Lato', sans-serif; font-size: 11px;
          color: #B4B2A9; letter-spacing: 1px; margin-top: 2px;
        }

        /* Setas */
        .fg-nav {
          position: absolute; top: 50%; transform: translateY(-50%);
          width: 52px; height: 52px;
          display: flex; align-items: center; justify-content: center;
          border-radius: 50%;
          border: 1px solid rgba(245,196,179,0.2);
          background: rgba(0,0,0,0.4);
          color: #ffffff; cursor: pointer;
          transition: background 0.2s ease, border-color 0.2s ease;
        }
        .fg-nav:hover { background: rgba(139,38,53,0.7); border-color: #ADADAD; }
        .fg-nav--prev { left: 12px; }
        .fg-nav--next { right: 12px; }

        /* Strip de miniaturas */
        .fg-strip {
          height: 76px; flex-shrink: 0;
          display: flex; align-items: center; gap: 4px;
          overflow-x: auto; padding: 8px 16px;
          background: rgba(0,0,0,0.55);
          border-top: 1px solid rgba(184,134,11,0.12);
          scrollbar-width: none;
        }
        .fg-strip::-webkit-scrollbar { display: none; }
        .fg-thumb {
          flex-shrink: 0;
          width: 58px; height: 58px;
          border-radius: 4px; overflow: hidden;
          border: 2px solid transparent;
          opacity: 0.55;
          transition: opacity 0.2s ease, border-color 0.2s ease;
          cursor: pointer; padding: 0; background: none;
        }
        .fg-thumb img {
          width: 100%; height: 100%; object-fit: cover; display: block;
        }
        .fg-thumb:hover { opacity: 0.85; }
        .fg-thumb--active {
          border-color: #ADADAD;
          opacity: 1;
        }

        /* Responsivo */
        @media (max-width: 640px) {
          .galeria { padding: 72px 0 100px; }
          .ig-grid { gap: 2px; }
          .fg-stage { padding: 12px 52px; }
          .fg-nav { width: 40px; height: 40px; }
          .fg-nav--prev { left: 6px; }
          .fg-nav--next { right: 6px; }
          .fg-tabs-mini { display: none; }
          .fg-thumb { width: 48px; height: 48px; }
          .galeria-upload-fab { right: 16px; bottom: 16px; font-size: 12px; padding: 11px 16px; }
        }
      `}</style>
    </>
  );
};

function GuestSkeleton() {
  return (
    <div className="skel-grid" aria-hidden="true">
      {Array.from({ length: 9 }).map((_, i) => <div key={i} className="skel" />)}
    </div>
  );
}