// Gallery — private photo album (Bento Grid style)

function GalleryScreen({ gallery = [] }) {
  // Use real data, or fallback to an empty state
  const items = gallery.length > 0 ? gallery : [];
  const recentItems = items.slice(0, 3); // Emulate recent uploads
  
  return (
    <div style={{ position: 'absolute', inset: 0, overflowY: 'auto', paddingBottom: 120 }}>
      {/* Header */}
      <div style={{ padding: '64px 20px 20px', textAlign: 'center' }}>
        <h2 style={{ 
          fontFamily: serifDisplay, fontStyle: 'italic', fontSize: 32, 
          fontWeight: 600, color: GOLD, margin: '0 0 8px', letterSpacing: '-0.01em' 
        }}>Our Sanctuary</h2>
        
        {/* Diamond Divider */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16 }}>
           <div style={{ height: 1, width: 48, background: `linear-gradient(to right, transparent, ${GOLD})`, opacity: 0.3 }} />
           <div style={{ width: 6, height: 6, transform: 'rotate(45deg)', background: GOLD, opacity: 0.8 }} />
           <div style={{ height: 1, width: 48, background: `linear-gradient(to left, transparent, ${GOLD})`, opacity: 0.3 }} />
        </div>
        
        <p style={{ fontFamily: sans, fontSize: 14, color: MUTED, marginTop: 16, opacity: 0.8 }}>Glimpses of a timeless devotion.</p>
      </div>

      {/* Segmented Tabs */}
      <div style={{ 
        display: 'flex', justifyContent: 'center', gap: 24, 
        paddingBottom: 24, overflowX: 'auto' 
      }}>
         <button style={{ background: 'none', border: 'none', borderBottom: `1px solid ${GOLD}`, paddingBottom: 4, fontFamily: sans, fontSize: 10, letterSpacing: 2, color: GOLD, textTransform: 'uppercase' }}>All</button>
         <button style={{ background: 'none', border: 'none', paddingBottom: 4, fontFamily: sans, fontSize: 10, letterSpacing: 2, color: MUTED, textTransform: 'uppercase' }}>Travels</button>
         <button style={{ background: 'none', border: 'none', paddingBottom: 4, fontFamily: sans, fontSize: 10, letterSpacing: 2, color: MUTED, textTransform: 'uppercase' }}>Intimacy</button>
         <button style={{ background: 'none', border: 'none', paddingBottom: 4, fontFamily: sans, fontSize: 10, letterSpacing: 2, color: MUTED, textTransform: 'uppercase' }}>Dreams</button>
      </div>

      {/* Mosaic Grid (Bento Style) */}
      <div style={{ 
        padding: '0 20px', 
        display: 'grid', 
        gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', 
        gap: 16 
      }}>
         {items.length === 0 && (
           <div style={{ 
             gridColumn: 'span 2', textAlign: 'center', marginTop: 40,
             fontFamily: serif, fontStyle: 'italic', fontSize: 18, color: MUTED 
           }}>The gallery is currently empty.</div>
         )}
         {items.map((p, i) => <PhotoBentoCard key={p.id || i} photo={p} index={i} />)}
      </div>

      {/* Ornate Divider */}
      <div style={{ padding: '64px 20px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
         <div style={{ display: 'flex', alignItems: 'center', gap: 24, width: '100%', maxWidth: 300 }}>
             <div style={{ flex: 1, height: 1, background: `linear-gradient(to right, transparent, ${GOLD})`, opacity: 0.4 }} />
             <div style={{ fontFamily: serifDisplay, color: GOLD, fontSize: 24, opacity: 0.6 }}>❦</div>
             <div style={{ flex: 1, height: 1, background: `linear-gradient(to left, transparent, ${GOLD})`, opacity: 0.4 }} />
         </div>
      </div>

      {/* Recently Added Section */}
      {recentItems.length > 0 && (
        <section style={{ marginBottom: 40 }}>
          <h3 style={{ 
            fontFamily: serifDisplay, fontSize: 24, fontWeight: 600, 
            color: INK, marginBottom: 24, padding: '0 20px' 
          }}>Recently Added</h3>
          
          <div style={{ 
            display: 'flex', gap: 16, overflowX: 'auto', 
            padding: '0 20px 20px', scrollSnapType: 'x mandatory',
            scrollbarWidth: 'none', WebkitOverflowScrolling: 'touch'
          }}>
            {recentItems.map((p, i) => <RecentCard key={p.id || i} photo={p} index={i} />)}
          </div>
        </section>
      )}
    </div>
  );
}

function PhotoBentoCard({ photo, index }) {
  // Bento patterns based on index to emulate masonry 
  const patterns = [
    { span: 2, aspect: '4/3', tall: false },
    { span: 1, aspect: '3/4', tall: true },
    { span: 1, aspect: '1/1', tall: false },
    { span: 2, aspect: '16/9', tall: false },
    { span: 1, aspect: '1/1', tall: false },
  ];
  
  const pattern = patterns[index % patterns.length];

  return (
    <div style={{
      gridColumn: `span ${pattern.span}`,
      gridRow: pattern.tall ? 'span 2' : 'span 1',
      position: 'relative',
      overflow: 'hidden',
      borderRadius: 12,
      background: 'rgba(255, 255, 255, 0.03)',
      backdropFilter: 'blur(15px)',
      WebkitBackdropFilter: 'blur(15px)',
      border: `0.5px solid ${GOLD}`,
      boxShadow: '0 10px 30px rgba(0,0,0,0.15)',
      padding: 8,
      display: 'flex', flexDirection: 'column'
    }}>
      <div style={{
        aspectRatio: pattern.aspect,
        overflow: 'hidden',
        borderRadius: 8,
        position: 'relative',
        background: 'rgba(0,0,0,0.2)'
      }}>
        {photo.src && (
          <img 
            src={photo.src} 
            alt={photo.caption || 'Memory'} 
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} 
          />
        )}
      </div>
      
      {(photo.caption || photo.title) && (
        <p style={{
          textAlign: 'center', fontFamily: serifDisplay, fontStyle: 'italic',
          color: GOLD, marginTop: 12, fontSize: 13, letterSpacing: 0.5,
          opacity: 0.9, lineHeight: 1.3
        }}>
          {photo.caption || photo.title}
        </p>
      )}
    </div>
  );
}

function RecentCard({ photo, index }) {
  const times = ['YESTERDAY', '3 DAYS AGO', 'LAST WEEK'];
  const textTime = times[index % times.length];
  
  return (
    <div style={{
      minWidth: 280,
      scrollSnapAlign: 'center',
      borderRadius: 12,
      background: 'rgba(255, 255, 255, 0.03)',
      backdropFilter: 'blur(15px)',
      WebkitBackdropFilter: 'blur(15px)',
      border: `0.5px solid ${GOLD}`,
      boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.1), 0 8px 24px rgba(0,0,0,0.1)',
      padding: 6,
    }}>
      <div style={{ height: 192, borderRadius: 8, overflow: 'hidden', marginBottom: 12, background: 'rgba(0,0,0,0.2)' }}>
         {photo.src && (
           <img 
             src={photo.src} 
             alt="Recent Upload" 
             style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} 
           />
         )}
      </div>
      <p style={{ 
        textAlign: 'center', fontFamily: serifDisplay, fontStyle: 'italic', 
        color: GOLD, fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', 
        marginBottom: 8, opacity: 0.8 
      }}>
        {photo.caption || photo.title || 'Echoes'}
      </p>
      <div style={{ padding: '4px 12px 12px' }}>
         <p style={{ fontFamily: sans, fontSize: 10, letterSpacing: 1, color: GOLD, textTransform: 'uppercase', marginBottom: 4 }}>
           {textTime}
         </p>
         <p style={{ fontFamily: sans, fontSize: 14, color: INK, opacity: 0.9 }}>
           {photo.title || 'Treasures from the attic'}
         </p>
      </div>
    </div>
  );
}

Object.assign(window, { GalleryScreen });