/* Me2You - Discovery Feed: TikTok-style vertical swipe of listings.
   Discovery only. Tap "Shop this item" to open the normal protected
   escrow listing. Strictly C2C. */
/* global React, Icon, Price, PRODUCTS, btnPrimary, btnGhost */

const { useState: useFeedState } = React;

/* --- One action button on the right rail: icon + word, always paired --- */
function FeedAction({ icon, label, count, active, accent, onClick }) {
 return (
 <button onClick={onClick} aria-label={label}
 style={{display:'flex',flexDirection:'column',alignItems:'center',gap:4,
 background:'none',border:'none',cursor:'pointer',padding:0}}>
 <span style={{
 width:48,height:48,borderRadius:999,
 display:'flex',alignItems:'center',justifyContent:'center',
 background: active ? (accent || 'var(--brand-orange)') : 'rgba(255,255,255,0.92)',
 color: active ? 'white' : 'var(--ink-900)',
 border:'1px solid var(--ink-200)',boxShadow:'var(--shadow-sm)',
 transition:'background .15s, color .15s'
 }}>
 <Icon name={icon} size={22} stroke={2} fill={active && icon==='heart' ? 'currentColor' : 'none'}/>
 </span>
 <span style={{fontFamily:'var(--font-body)',fontSize:11,fontWeight:700,color:'white',
 textShadow:'0 1px 3px rgba(0,0,0,0.55)'}}>{count != null ? count : label}</span>
 </button>
 );
}

/* --- A single full-screen feed card --- */
function FeedCard({ product, onShop, onMessage }) {
 const [liked, setLiked] = useFeedState(false);
 const [following, setFollowing] = useFeedState(false);
 const [playing, setPlaying] = useFeedState(false);
 const likeCount = (product.reviews || 12) + (liked ? 1 : 0);

 return (
 <section style={{
 position:'relative',scrollSnapAlign:'start',
 height:'min(78vh, 620px)',borderRadius:'var(--radius-lg)',overflow:'hidden',
 background:'var(--ink-900)',border:'1px solid var(--ink-200)',flexShrink:0,
 display:'flex',alignItems:'flex-end'
 }}>
 {/* Media area */}
 <div style={{position:'absolute',inset:0,
 backgroundImage:'url(assets/me2you.jpg)',backgroundSize:'cover',backgroundPosition:'center'}}/>
 <div style={{position:'absolute',inset:0,
 background:'linear-gradient(180deg, rgba(0,0,0,0.10) 40%, rgba(0,0,0,0.62) 100%)'}}/>

 {/* Tap-to-play (no autoplay sound: muted by default for low-data, public spaces) */}
 <button onClick={() => setPlaying(p => !p)} aria-label={playing ? 'Pause video' : 'Play video'}
 style={{position:'absolute',top:'50%',left:'50%',transform:'translate(-50%,-50%)',
 width:64,height:64,borderRadius:999,border:'none',cursor:'pointer',
 background:'rgba(255,255,255,0.92)',color:'var(--ink-900)',
 display:'flex',alignItems:'center',justifyContent:'center',boxShadow:'var(--shadow-md)',
 opacity: playing ? 0 : 1,transition:'opacity .2s'}}>
 <Icon name="play" size={28} fill="currentColor" stroke={0}/>
 </button>
 <span style={{position:'absolute',top:16,left:16,display:'inline-flex',alignItems:'center',gap:6,
 background:'rgba(0,0,0,0.45)',color:'white',padding:'5px 10px',borderRadius:999,
 fontFamily:'var(--font-mono)',fontSize:11,fontWeight:600}}>
 <Icon name="volume-x" size={13} stroke={2}/> Muted - tap to play
 </span>

 {/* Right action rail */}
 <div style={{position:'absolute',right:12,bottom:120,zIndex:2,
 display:'flex',flexDirection:'column',gap:16}}>
 <FeedAction icon="heart" label="Like" count={likeCount} active={liked}
 accent="var(--danger)" onClick={() => setLiked(v => !v)}/>
 <FeedAction icon="message-circle" label="Comment" count={6} onClick={() => onMessage && onMessage(product)}/>
 <FeedAction icon="share-2" label="Share" onClick={() => {}}/>
 <FeedAction icon="user-plus" label="Follow" active={following}
 accent="var(--brand-plum)" onClick={() => setFollowing(v => !v)}/>
 <FeedAction icon="shopping-bag" label="Shop" active accent="var(--brand-orange)"
 onClick={() => onShop(product)}/>
 </div>

 {/* Info + Shop CTA */}
 <div style={{position:'relative',zIndex:2,padding:'16px 76px 18px 16px',width:'100%'}}>
 <h3 style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:18,color:'white',
 margin:'0 0 4px',textShadow:'0 1px 4px rgba(0,0,0,0.5)'}}>{product.title}</h3>
 <div style={{marginBottom:8}}>
 <span style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:24,color:'white',
 letterSpacing:'-0.015em',textShadow:'0 1px 4px rgba(0,0,0,0.5)'}}>
 <span style={{fontWeight:600,opacity:.8,fontSize:15}}>R </span>{product.price.toLocaleString('en-ZA')}
 </span>
 </div>
 <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:10,flexWrap:'wrap'}}>
 <span style={{display:'inline-flex',alignItems:'center',gap:5,
 fontFamily:'var(--font-body)',fontSize:13,fontWeight:600,color:'white',
 textShadow:'0 1px 3px rgba(0,0,0,0.5)'}}>
 <Icon name="map-pin" size={13} stroke={2.4}/> {product.seller} - {product.location}
 </span>
 <span style={{display:'inline-flex',alignItems:'center',gap:5,
 background:'var(--success-100)',color:'var(--success)',
 fontFamily:'var(--font-body)',fontWeight:700,fontSize:11,
 padding:'4px 9px',borderRadius:999}}>
 <Icon name="shield-check" size={13} stroke={2.2}/> Escrow protected
 </span>
 </div>
 <button onClick={() => onShop(product)} style={{...btnPrimary,width:'100%',justifyContent:'center',
 minHeight:48,fontSize:16}}>
 <Icon name="shopping-bag" size={18} stroke={2}/> Shop this item
 </button>
 </div>
 </section>
 );
}

/* --- Feed screen: vertical, snap-scrolling column --- */
function FeedScreen({ onShop, onMessage }) {
 const [tab, setTab] = useFeedState('for-you');
 const items = PRODUCTS.slice(0, 6);
 const tabs = [
 { key:'for-you', label:'For you' },
 { key:'nearby', label:'Nearby' },
 { key:'following', label:'Following' },
 ];

 return (
 <div style={{maxWidth:440,margin:'0 auto'}}>
 <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:16,gap:12}}>
 <div>
 <h1 style={{margin:0}}>Discover</h1>
 <p style={{margin:'4px 0 0',color:'var(--ink-500)',fontSize:14}}>
 Swipe through short clips. Tap Shop to buy on the protected listing.
 </p>
 </div>
 </div>

 {/* For you / Nearby / Following */}
 <div style={{display:'inline-flex',gap:2,padding:4,background:'var(--ink-100)',borderRadius:999,marginBottom:16}}>
 {tabs.map(t => (
 <button key={t.key} onClick={() => setTab(t.key)} style={{
 padding:'8px 16px',borderRadius:999,border:'none',cursor:'pointer',minHeight:36,
 fontFamily:'var(--font-body)',fontWeight:700,fontSize:13,
 background: tab===t.key ? 'var(--paper)' : 'transparent',
 color: tab===t.key ? 'var(--ink-900)' : 'var(--ink-500)',
 boxShadow: tab===t.key ? 'var(--shadow-xs)' : 'none'}}>{t.label}</button>
 ))}
 </div>

 <div style={{display:'flex',flexDirection:'column',gap:16,
 maxHeight:'min(78vh, 620px)',overflowY:'auto',scrollSnapType:'y mandatory',
 borderRadius:'var(--radius-lg)'}}>
 {items.map(p => (
 <FeedCard key={p.id} product={p} onShop={onShop} onMessage={onMessage}/>
 ))}
 </div>
 </div>
 );
}

Object.assign(window, { FeedScreen, FeedCard, FeedAction });