// Photo gallery screens — Pınar (pro) + Guest uploads
const { useState: useStatePh } = React;

/* ---------- Pınar's professional photos ---------- */
function PinarPhotos({ onBack }) {
  const [open, setOpen] = useStatePh(null);
  // Pretend we have albums by session
  const albums = [
    { title: 'Hazırlık', count: 24, hue: 0 },
    { title: 'Tören', count: 38, hue: 1 },
    { title: 'İlk Dans', count: 12, hue: 2 },
    { title: 'Aile Pozları', count: 56, hue: 3 },
    { title: 'Davet', count: 80, hue: 4 },
    { title: 'Çıkış', count: 18, hue: 5 },
  ];

  return (
    <ScreenShell onBack={onBack} kicker="04 · PINAR'IN KADRAJI" title="profesyonel fotolar">
      {/* Photographer card */}
      <div style={phStyles.profCard}>
        <div style={phStyles.profAvatar}>
          <PinarAvatar/>
        </div>
        <div style={{flex:1, minWidth:0}}>
          <div className="label" style={{opacity:0.7}}>FOTOĞRAFÇIMIZ</div>
          <div className="hand" style={{fontSize:30, lineHeight:1, margin:'4px 0 4px'}}>pınar gediközer</div>
          <div className="body-sm" style={{opacity:0.85}}>@pinargediközer · instagram</div>
        </div>
      </div>

      <p className="body-sm" style={{opacity:0.85, margin:'18px 0 16px'}}>
        Pınar'ın çektiği tüm fotoğraflar düğünden 2-3 hafta sonra burada olacak.
        Bildirim almak için aşağıdan abone olabilirsin.
      </p>

      {/* Subscribe */}
      <div style={phStyles.notify}>
        <Icons.Sparkle size={18}/>
        <div style={{flex:1}}>
          <div className="label" style={{opacity:0.78}}>HAZIR OLUNCA HABERİM OLSUN</div>
        </div>
        <button style={phStyles.notifyBtn}><span className="label">Bildir</span></button>
      </div>

      {/* Albums grid */}
      <div className="label" style={{opacity:0.7, margin:'26px 0 10px'}}>ALBÜMLER · ÖRNEK</div>
      <div style={phStyles.albumGrid}>
        {albums.map(a => (
          <button key={a.title} onClick={() => setOpen(a)} style={phStyles.album}>
            <div style={phStyles.albumImg}>
              <ImgPlaceholder hue={a.hue}/>
              <div style={phStyles.albumCount}>
                <span className="label-sm">{a.count} foto</span>
              </div>
            </div>
            <div className="hand" style={{fontSize:22, lineHeight:1, marginTop:8}}>{a.title}</div>
          </button>
        ))}
      </div>

      {open && <Lightbox album={open} onClose={() => setOpen(null)} />}
    </ScreenShell>
  );
}

/* ---------- Guest gallery ---------- */
function GuestPhotos({ onBack }) {
  const [open, setOpen] = useStatePh(null);
  // Simulated entries — name, caption, hue
  const items = [
    { who: 'Selin', cap: 'masa 02 · şampanya treni', hue: 6, kind: 'tall'},
    { who: 'Mehmet', cap: 'küçük dans pisti', hue: 7 },
    { who: 'Anonim', cap: 'gelin & kayınvalide', hue: 8, kind: 'tall' },
    { who: 'Burak', cap: 'çiçek dağılırken', hue: 9 },
    { who: 'Esra', cap: '14:00 nikah önü', hue: 10 },
    { who: 'Yasemin', cap: 'yemekten önce yarış', hue: 11, kind: 'tall' },
    { who: 'Ozan', cap: 'dj malik\'in büyük anı', hue: 12 },
    { who: 'Anonim', cap: 'çocukların kostüm yarışı', hue: 13 },
    { who: 'Cem', cap: 'son veda', hue: 14, kind: 'tall' },
  ];

  return (
    <ScreenShell onBack={onBack} kicker="05 · MİSAFİR GALERİSİ" title="sizden bize">
      <div style={phStyles.statRow}>
        <Stat n="142" label="Foto"/>
        <Stat n="38" label="Kişi"/>
        <Stat n="07" label="Video"/>
      </div>

      <p className="body-sm" style={{opacity:0.85, margin:'16px 0 18px'}}>
        Misafirlerimizin yüklediği her şey burada. Beğen, indir, kendi koleksiyonuna ekle.
      </p>

      {/* Masonry-ish grid */}
      <div style={phStyles.masonry}>
        {items.map((it, i) => (
          <button key={i} onClick={() => setOpen(it)} style={{
            ...phStyles.mItem,
            gridRow: it.kind === 'tall' ? 'span 2' : 'span 1',
            aspectRatio: it.kind === 'tall' ? '3 / 4' : '1',
          }}>
            <ImgPlaceholder hue={it.hue}/>
            <div style={phStyles.mItemOver}>
              <div className="label-sm" style={{color:'#fff', opacity:0.85}}>{it.who.toUpperCase()}</div>
              <div className="body-sm" style={{color:'#fff', fontSize:11, opacity:0.95}}>{it.cap}</div>
            </div>
          </button>
        ))}
      </div>

      {open && <Lightbox guest={open} onClose={() => setOpen(null)} />}

      <div style={{marginTop:24, textAlign:'center'}}>
        <button style={phStyles.uploadCta}>
          <Icons.Upload size={16}/>
          <span className="label">Sen de Yükle</span>
        </button>
      </div>
    </ScreenShell>
  );
}

function Stat({ n, label }) {
  return (
    <div style={{flex:1, textAlign:'center', padding:'14px 8px',
      border:'1px solid rgba(255,185,201,0.25)', borderRadius:14,
      background:'rgba(255,185,201,0.04)',
    }}>
      <div className="hand" style={{fontSize:32, lineHeight:1, color:'var(--pink)'}}>{n}</div>
      <div className="label-sm" style={{opacity:0.65, marginTop:2}}>{label}</div>
    </div>
  );
}

/* ---------- Lightbox ---------- */
function Lightbox({ album, guest, onClose }) {
  const isAlbum = !!album;
  const n = isAlbum ? Math.min(album.count, 9) : 1;
  const items = Array.from({length: n}, (_, i) => ({
    hue: isAlbum ? (album.hue * 7 + i * 11) % 30 : guest.hue,
  }));

  return (
    <div style={lbStyles.backdrop} onClick={onClose}>
      <div style={lbStyles.sheet} onClick={(e) => e.stopPropagation()}>
        <div style={lbStyles.header}>
          <div>
            <div className="label-sm" style={{opacity:0.65}}>{isAlbum ? 'ALBÜM' : 'MİSAFİR'}</div>
            <div className="hand" style={{fontSize:30, lineHeight:1, marginTop:2}}>
              {isAlbum ? album.title : guest.who}
            </div>
          </div>
          <button onClick={onClose} style={lbStyles.x}><Icons.Close size={18}/></button>
        </div>
        <div style={{padding:'14px 16px 24px'}}>
          {isAlbum ? (
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
              {items.map((it, i) => (
                <div key={i} style={{borderRadius:12,overflow:'hidden',aspectRatio:'1'}}>
                  <ImgPlaceholder hue={it.hue}/>
                </div>
              ))}
            </div>
          ) : (
            <div>
              <div style={{borderRadius:14,overflow:'hidden',aspectRatio:'3/4'}}>
                <ImgPlaceholder hue={guest.hue}/>
              </div>
              <div className="body-sm" style={{marginTop:14, opacity:0.9}}>{guest.cap}</div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* ---------- Placeholders ---------- */
function ImgPlaceholder({ hue = 0 }) {
  // Subtle striped/tone placeholder
  const palette = [
    ['#D58C9A','#A23A55'],
    ['#FFD1DC','#C66A82'],
    ['#A23A55','#5C0F22'],
    ['#FFB9C9','#7A1F33'],
    ['#FFE5EC','#962840'],
    ['#7A1F33','#FFB9C9'],
  ];
  const [a, b] = palette[hue % palette.length];
  return (
    <div style={{
      width:'100%',height:'100%',
      background:`linear-gradient(135deg, ${a}, ${b})`,
      position:'relative',
    }}>
      <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{position:'absolute',inset:0,width:'100%',height:'100%',opacity:0.4}}>
        <path d="M0 70 Q 30 40, 50 60 T 100 50 L 100 100 L 0 100 Z" fill="rgba(255,255,255,0.15)"/>
        <circle cx="80" cy="22" r="8" fill="rgba(255,255,255,0.4)"/>
      </svg>
      <div style={{
        position:'absolute',inset:0,
        display:'flex',alignItems:'center',justifyContent:'center',
        opacity:0.45,
      }}>
        <Icons.Camera size={28}/>
      </div>
    </div>
  );
}

function PinarAvatar() {
  return (
    <div style={{
      width:'100%',height:'100%',
      borderRadius:999,
      background:'linear-gradient(135deg, #FFD7DE, #E58AA0)',
      display:'flex',alignItems:'center',justifyContent:'center',
      color:'var(--burgundy)',
    }}>
      <Icons.Camera size={20}/>
    </div>
  );
}

const phStyles = {
  profCard:{
    display:'flex',alignItems:'center',gap:14,
    padding:'14px 16px',
    borderRadius:18,
    border:'1px solid rgba(255,185,201,0.3)',
    background:'rgba(255,185,201,0.06)',
  },
  profAvatar:{
    width:54,height:54,borderRadius:999,overflow:'hidden',flexShrink:0,
    border:'2px solid var(--pink)',
  },
  notify:{
    display:'flex',alignItems:'center',gap:12,
    padding:'12px 14px',
    borderRadius:999,
    border:'1px dashed rgba(255,185,201,0.4)',
  },
  notifyBtn:{
    padding:'8px 14px', borderRadius:999,
    background:'var(--pink)', color:'var(--burgundy)',
    flexShrink:0,
  },
  albumGrid:{
    display:'grid',
    gridTemplateColumns:'1fr 1fr',
    gap:14,
  },
  album:{
    color:'var(--pink)', textAlign:'left',
  },
  albumImg:{
    aspectRatio:'4/5',
    borderRadius:14,
    overflow:'hidden',
    position:'relative',
    border:'1px solid rgba(255,185,201,0.2)',
  },
  albumCount:{
    position:'absolute', bottom:8, left:8,
    background:'rgba(0,0,0,0.4)', color:'#fff',
    padding:'4px 8px', borderRadius:999,
    backdropFilter:'blur(4px)',
  },
  statRow:{display:'flex',gap:8},
  masonry:{
    display:'grid',
    gridTemplateColumns:'1fr 1fr 1fr',
    gap:6,
    gridAutoRows:'minmax(80px, auto)',
  },
  mItem:{
    position:'relative',
    borderRadius:10,
    overflow:'hidden',
    color:'var(--pink)',
  },
  mItemOver:{
    position:'absolute',
    left:0,right:0,bottom:0,
    padding:'18px 8px 6px',
    background:'linear-gradient(transparent, rgba(0,0,0,0.55))',
    textAlign:'left',
  },
  uploadCta:{
    display:'inline-flex',alignItems:'center',gap:8,
    padding:'12px 22px', borderRadius:999,
    background:'var(--pink)', color:'var(--burgundy)',
  },
};

const lbStyles = {
  backdrop:{
    position:'fixed', inset:0, zIndex:60,
    background:'rgba(20,5,10,0.85)',
    display:'flex',alignItems:'flex-end',
    backdropFilter:'blur(8px)',
  },
  sheet:{
    width:'100%',
    maxWidth:480,
    margin:'0 auto',
    background:'var(--burgundy)',
    borderTop:'1px solid rgba(255,185,201,0.25)',
    borderRadius:'24px 24px 0 0',
    color:'var(--pink)',
    maxHeight:'90dvh',
    overflowY:'auto',
  },
  header:{
    display:'flex',alignItems:'center',justifyContent:'space-between',
    padding:'18px 18px 8px',
    borderBottom:'1px solid rgba(255,185,201,0.15)',
  },
  x:{
    width:36,height:36,borderRadius:999,
    border:'1px solid rgba(255,185,201,0.35)',
    display:'flex',alignItems:'center',justifyContent:'center',
  },
};

window.PinarPhotos = PinarPhotos;
window.GuestPhotos = GuestPhotos;
window.ImgPlaceholder = ImgPlaceholder;