// SHOT — Main app screens (Map, Feed, Bar, Events, Profile)
(function(){
const { useState, useEffect } = React;
const { StatusBar, TopNav, BottomNav, Icon, AmbianceDot, vibeLabel } = window.SHOT_SCREENS_1;
const { BARS: B, STORIES: S, FRIENDS: F, SUGGESTED: SU, EVENTS: E, REVIEWS: R, INTERESTS: II, avatarColor: avC } = window.SHOT_DATA;

/* ════════════════════════════════════════════════════
   MAP SCREEN
════════════════════════════════════════════════════ */
const MapStreets = () => (
  <>
    <div className="map-grid"></div>
    <div className="map-road" style={{top: '20%', left: '-5%', right: '-5%', height: 8, transform: 'rotate(-2deg)'}}></div>
    <div className="map-road" style={{top: '52%', left: '-5%', right: '-5%', height: 14, transform: 'rotate(1deg)'}}></div>
    <div className="map-road" style={{top: '74%', left: '-5%', right: '-5%', height: 6, transform: 'rotate(-1deg)'}}></div>
    <div className="map-road" style={{top: '0%', left: '38%', width: 8, height: '100%'}}></div>
    <div className="map-road" style={{top: '0%', left: '72%', width: 6, height: '100%', transform: 'skewX(-3deg)'}}></div>
    <div className="map-river"></div>
    <div className="map-bld" style={{top: '10%', left: '8%', width: 60, height: 36}}></div>
    <div className="map-bld" style={{top: '30%', left: '52%', width: 80, height: 50}}></div>
    <div className="map-bld" style={{top: '62%', left: '12%', width: 70, height: 40}}></div>
    <div className="map-bld" style={{top: '82%', left: '60%', width: 90, height: 60}}></div>
    <div className="map-bld" style={{top: '15%', left: '78%', width: 50, height: 70}}></div>
  </>
);

const MapScreen = ({ goBar, goSearch, goFilter, filter = 'all' }) => {
  const filtered = filter === 'all' ? B : B.filter(b => b.vibe === filter || (filter==='events' && false));
  return (
    <div className="map-area" style={{height: '100%', position: 'relative'}}>
      <MapStreets/>

      {/* Pins */}
      {B.map(b => (
        <div key={b.id} className={"pin " + b.vibe} style={{left: b.pinX + '%', top: b.pinY + '%'}} onClick={() => goBar(b.id)}>🍺</div>
      ))}
      <div className="pin event" style={{left: '52%', top: '48%'}} onClick={() => goBar('b3')}>🎉</div>
      <div className="pin me" style={{left: '46%', top: '54%'}}></div>

      <div className="map-search">
        <div className="search-row">
          <div className="search-box" onClick={goSearch}>
            <div className="search-circle"></div>
            <div className="search-txt">Rechercher un bar, une vibe…</div>
          </div>
          <div className="filter-btn" onClick={goFilter}>
            <Icon name="filter" size={18} stroke="#fff"/>
          </div>
        </div>
        <div className="pills">
          <div className={"pill" + (filter==='all'?' on':'')}>Tout · 6</div>
          <div className={"pill" + (filter==='fire'?' on':'')}><AmbianceDot vibe="fire"/>Blindé</div>
          <div className={"pill" + (filter==='hot'?' on':'')}><AmbianceDot vibe="hot"/>Chaud</div>
          <div className={"pill" + (filter==='anime'?' on':'')}><AmbianceDot vibe="anime"/>Animé</div>
          <div className="pill on-g">🎉 BDE</div>
          <div className="pill">📍 Ouvert</div>
        </div>
      </div>

      {/* Bottom sheet */}
      <div className="bsheet">
        <div className="bsheet-handle"></div>
        <div className="bsheet-title">12 bars autour de toi</div>
        <div className="bsheet-sub">5e arrondissement · Live à 21h47</div>
        <div className="bmini-scroll">
          {B.slice(0,4).map(b => (
            <div key={b.id} className="bmini" onClick={() => goBar(b.id)}>
              <div className="bmini-img" style={{background: b.photo}}>
                <div className={"live-badge " + (b.vibe==='fire'?'orange':b.vibe==='hot'?'orange':b.vibe==='anime'?'yellow':'orange')}>
                  <span className="live-pulse"></span> {b.live} live
                </div>
              </div>
              <div className="bmini-info">
                <div className="bmini-name">{b.name}</div>
                <div className="bmini-meta">
                  <span>{b.dist}</span><span className="dot"></span><span>{vibeLabel(b.vibe)}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

/* ════════════════════════════════════════════════════
   FEED SCREEN
════════════════════════════════════════════════════ */
const FeedScreen = ({ goBar, goStory, goNotif }) => (
  <>
    <div className="app-topnav">
      <div className="app-top-title" style={{textAlign:'left',fontSize:24,paddingLeft:4}}>
        <span style={{fontFamily:'var(--font-display)',fontWeight:900,fontStyle:'italic'}}>SHOT<em style={{color:'var(--orange)',fontStyle:'normal'}}>.</em></span>
      </div>
      <div className="app-top-action" onClick={goNotif} style={{position:'relative'}}>
        <Icon name="bell" size={18} stroke="var(--text-1)"/>
        <span style={{position:'absolute',top:6,right:7,width:8,height:8,borderRadius:'50%',background:'var(--orange)',border:'2px solid var(--bg-primary)'}}></span>
      </div>
    </div>

    {/* Stories strip */}
    <div className="stories-strip">
      {S.map(s => (
        <div key={s.id} className="story-item-strip" onClick={() => !s.isAdd && goStory(s.id)}>
          <div className={"story-ring" + (s.isAdd?' add':'') + (s.seen?' seen':'')}>
            <div className="story-inner" style={s.color && !s.isAdd ? {background: s.color, color: '#fff'} : {}}>
              {s.isAdd ? '+' : s.initials}
            </div>
          </div>
          <div className="story-name">{s.name}</div>
        </div>
      ))}
    </div>

    <div className="feed-section-head">
      <div className="feed-section-title">🔥 Ça bouge ce soir</div>
      <div className="feed-section-action">Voir tout</div>
    </div>

    <div className="feed-list">
      {B.slice(0,2).map(b => (
        <div key={b.id} className="bar-card" onClick={() => goBar(b.id)}>
          <div className="bar-card-img" style={{background: b.photo}}>
            <div className={"live-badge " + (b.vibe==='fire'||b.vibe==='hot'?'orange':'yellow')}>
              <span className="live-pulse"></span> {b.live} en live
            </div>
            <div className="bar-card-info-overlay">
              <div className="bar-card-name">{b.name}</div>
              <div className="bar-card-meta">
                <span>{b.addr}</span><span className="dot"></span><span>{b.dist}</span><span className="dot"></span><AmbianceDot vibe={b.vibe}/> {vibeLabel(b.vibe)}
              </div>
            </div>
          </div>
          <div className="bar-card-body">
            <div className="bar-card-row">
              <div className="score-num">★ {b.rating}<em> · {b.reviews} avis</em></div>
              <div className="bar-card-tags" style={{marginLeft:'auto'}}>
                {b.tags.slice(0,2).map(t => <span key={t} className="tag-mini">{t}</span>)}
              </div>
            </div>
            {b.id === 'b1' && (
              <div className="friends-here" style={{marginTop:10}}>
                <div className="friends-here-stack">
                  <div className="av" style={{background:'#E8694A'}}>LM</div>
                  <div className="av" style={{background:'#3A5A40'}}>TD</div>
                  <div className="av" style={{background:'#8FB595'}}>+1</div>
                </div>
                <div className="friends-here-txt"><strong>Léa, Théo</strong> et 1 autre y sont</div>
              </div>
            )}
          </div>
        </div>
      ))}
    </div>

    <div className="feed-section-head">
      <div className="feed-section-title">🎉 Soirées à venir</div>
      <div className="feed-section-action">Tout voir</div>
    </div>
    <div className="event-list" style={{padding:'0 16px 16px'}}>
      {E.slice(0,2).map(e => (
        <div key={e.id} className="event-card">
          <div className={"event-date-block " + (e.tag==='bde'?'green':'orange')}>
            <div className="event-date-day">{e.day}</div>
            <div className="event-date-month">{e.month}</div>
          </div>
          <div className="event-info">
            <div className="event-title">{e.title}</div>
            <div className="event-meta">{e.bar}<span className="dot"></span>{e.time}</div>
            <div className="event-foot">
              <div className="event-rsvp-count">
                <div className="event-rsvp-stack">
                  {e.attendees.slice(0,3).map((a,i) => (
                    <div key={i} className="av" style={{background:avC(a)}}></div>
                  ))}
                </div>
                <span><strong style={{color:'var(--text-1)'}}>{e.rsvp}</strong> · {e.capacity}</span>
              </div>
              <span className={"event-tag " + e.tag}>{e.tag==='bde'?'BDE':'Promo'}</span>
            </div>
          </div>
        </div>
      ))}
    </div>

    <div className="feed-section-head">
      <div className="feed-section-title">⭐ Pour toi</div>
      <div className="feed-section-action">Voir tout</div>
    </div>
    <div className="feed-list" style={{paddingBottom:24}}>
      {B.slice(3,5).map(b => (
        <div key={b.id} className="bar-card" onClick={() => goBar(b.id)}>
          <div className="bar-card-img" style={{background: b.photo, height: 110}}>
            <div className="bar-card-info-overlay">
              <div className="bar-card-name">{b.name}</div>
              <div className="bar-card-meta">
                <AmbianceDot vibe={b.vibe}/> {vibeLabel(b.vibe)}<span className="dot"></span><span>{b.live} live</span>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  </>
);

/* ════════════════════════════════════════════════════
   BAR DETAIL SCREEN
════════════════════════════════════════════════════ */
const BarDetailScreen = ({ barId, onBack, goCheckin, goStory }) => {
  const b = B.find(x => x.id === barId) || B[0];
  return (
    <>
      <div className="bar-hero" style={{background: b.photo}}>
        <div className="bar-hero-back" onClick={onBack}>
          <div style={{width:8,height:8,borderLeft:'2px solid #fff',borderBottom:'2px solid #fff',transform:'rotate(45deg) translate(2px,-2px)'}}></div>
        </div>
        <div className="bar-hero-action">
          <Icon name="share" size={16} stroke="#fff"/>
        </div>
        <div className="bar-hero-live"><span className="live-pulse" style={{background:'#fff'}}></span> {b.live} en live</div>
        <div className="bar-hero-bottom">
          <div className="bar-hero-tags">
            {b.tags.map(t => <span key={t} className="tag-mini">{t}</span>)}
          </div>
          <div className="bar-hero-name">{b.name}</div>
          <div className="bar-hero-meta">
            <span>{b.addr}</span><span className="dot"></span><span>{b.dist}</span><span className="dot"></span>
            <span style={{display:'inline-flex',alignItems:'center',gap:5}}><AmbianceDot vibe={b.vibe}/> {vibeLabel(b.vibe)}</span>
          </div>
        </div>
      </div>

      {/* Quick CTAs */}
      <div style={{display:'flex',gap:8,padding:'16px 18px 4px'}}>
        <button className="phone-cta orange" style={{flex:2}} onClick={goCheckin}>🍻 Check-in</button>
        <button className="phone-cta ghost" style={{flex:1}}>
          <Icon name="bookmark" size={16} stroke="currentColor"/> Sauver
        </button>
      </div>

      {/* Friends here */}
      <div className="bar-section">
        <div className="friends-here">
          <div className="friends-here-stack">
            <div className="av" style={{background:'#E8694A'}}>LM</div>
            <div className="av" style={{background:'#3A5A40'}}>TD</div>
            <div className="av" style={{background:'#8FB595'}}>+1</div>
          </div>
          <div className="friends-here-txt"><strong>Léa M., Théo D.</strong> et 1 autre sont actuellement au bar</div>
        </div>
      </div>

      {/* Stories */}
      <div className="bar-section">
        <div className="bar-section-head">Stories du bar</div>
        <div className="stories-strip" style={{padding:0,gap:10}}>
          {[1,2,3,4].map((_,i) => (
            <div key={i} className="story-item-strip" onClick={() => goStory('s3')}>
              <div className="story-ring">
                <div className="story-inner photo-ph" style={{background: b.photo}}></div>
              </div>
              <div className="story-name">il y a {2+i*3} h</div>
            </div>
          ))}
        </div>
      </div>

      {/* Vibe meter */}
      <div className="bar-section">
        <div className="bar-section-head">Ambiance live · mise à jour il y a 4 min</div>
        <div className="scores">
          <div className="score-row">
            <div className="score-lbl">Ambiance</div>
            <div className="score-track"><div className="score-fill" style={{width: b.scores.ambiance+'%'}}></div></div>
            <div className="score-val">{b.scores.ambiance}</div>
          </div>
          <div className="score-row">
            <div className="score-lbl">Affluence</div>
            <div className="score-track"><div className="score-fill" style={{width: b.scores.foule+'%'}}></div></div>
            <div className="score-val">{b.scores.foule}</div>
          </div>
          <div className="score-row">
            <div className="score-lbl">Musique</div>
            <div className="score-track"><div className="score-fill g" style={{width: b.scores.musique+'%'}}></div></div>
            <div className="score-val">{b.scores.musique}</div>
          </div>
          <div className="score-row">
            <div className="score-lbl">Rapport prix</div>
            <div className="score-track"><div className="score-fill g" style={{width: b.scores.prix+'%'}}></div></div>
            <div className="score-val">{b.scores.prix}</div>
          </div>
        </div>
      </div>

      {/* Infos */}
      <div className="bar-section">
        <div className="bar-section-head">Infos</div>
        <p style={{fontSize:13,color:'var(--text-2)',lineHeight:1.65,marginBottom:12}}>{b.desc}</p>
        <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:8}}>
          <Icon name="clock" size={16} stroke="var(--text-3)"/>
          <span style={{fontSize:13,color:'var(--text-2)'}}><strong style={{color:'var(--text-1)'}}>Ouvert</strong> · {b.hours}</span>
        </div>
        <div style={{display:'flex',alignItems:'center',gap:10}}>
          <Icon name="pin" size={16} stroke="var(--text-3)"/>
          <span style={{fontSize:13,color:'var(--text-2)'}}>{b.addr}</span>
        </div>
      </div>

      {/* Reviews */}
      <div className="bar-section">
        <div className="bar-section-head" style={{display:'flex',justifyContent:'space-between'}}>
          <span>Avis · {b.reviews}</span>
          <span style={{color:'var(--orange)',cursor:'pointer'}}>Tout voir</span>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:10}}>
          {R.slice(0,2).map(rev => (
            <div key={rev.id} className="review">
              <div className="review-head">
                <div className="review-av" style={{background: rev.color}}>{rev.initials}</div>
                <div>
                  <div className="review-name">{rev.name}</div>
                  <div className="review-date">{rev.date}</div>
                </div>
                <div className="review-stars">
                  {[1,2,3,4,5].map(i => <span key={i} className={"star-tiny" + (i>rev.stars?' off':'')}></span>)}
                </div>
              </div>
              <div className="review-txt">{rev.text}</div>
              {rev.reply && (
                <div className="review-reply">
                  <div className="review-reply-lbl">Réponse du bar</div>
                  <div className="review-reply-txt">{rev.reply}</div>
                </div>
              )}
            </div>
          ))}
        </div>
        <button className="phone-cta ghost" style={{width:'100%',marginTop:14}}>Écrire un avis</button>
      </div>
    </>
  );
};

window.SHOT_SCREENS_2 = { MapScreen, FeedScreen, BarDetailScreen };
})();