/* Me2You - Community hub: "what's happening" feed of updates, events and
   safety alerts. Join a group, then post or RSVP. Members' local listings
   still sell through escrow. Strictly C2C. */
/* global React, Icon, Price, PRODUCTS, btnPrimary, btnGhost, panelStyle */

const { useState: useCmtyState } = React;

const CMTY_GROUP = { name:'Soweto buy & sell', members:1240, kind:'Public local group' };

/* Each post kind carries icon + colour + word (triple redundancy) */
const POST_KINDS = {
 update: { label:'Update', icon:'megaphone', bg:'var(--info-100)', fg:'var(--info)' },
 event: { label:'Event', icon:'calendar', bg:'var(--success-100)', fg:'var(--success)' },
 alert: { label:'Safety alert', icon:'triangle-alert', bg:'var(--danger-100)', fg:'var(--danger)' },
};

const CMTY_POSTS = [
 { id:1, kind:'update', author:'Lerato N.', time:'1h',
 body:'Stock of school shoes back in, sizes 3 to 7. Message me for sizes.' },
 { id:2, kind:'event', author:'Group admin', time:'Sat 30 May',
 body:'Vilakazi St market day. 09:00 to 13:00. Bring small change.', rsvp:38, when:'09:00, 30 May' },
 { id:3, kind:'alert', author:'Group admin', time:'3h',
 body:'Meet buyers at the Maponya Mall pickup desk, never at home. Stay safe.' },
 { id:4, kind:'update', author:'Gogo B.', time:'5h',
 body:'Fresh vetkoek every morning this week. R 60 a dozen, collect in Tembisa.' },
];

function PostKindTag({ kind }) {
 const k = POST_KINDS[kind] || POST_KINDS.update;
 return (
 <span style={{display:'inline-flex',alignItems:'center',gap:6,
 fontFamily:'var(--font-body)',fontWeight:700,fontSize:11,
 letterSpacing:'.03em',textTransform:'uppercase',
 padding:'4px 10px',borderRadius:999,background:k.bg,color:k.fg,whiteSpace:'nowrap'}}>
 <Icon name={k.icon} size={13} stroke={2.2}/> {k.label}
 </span>
 );
}

/* Post composer / RSVP shown once a member has joined */
function CommunityComposer({ onPost }) {
 const [kind, setKind] = useCmtyState('update');
 const [rsvp, setRsvp] = useCmtyState(null);
 const event = CMTY_POSTS.find(p => p.kind === 'event');

 return (
 <div style={{...panelStyle,borderColor:'var(--brand-orange)'}}>
 <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:12,
 color:'var(--success)',fontFamily:'var(--font-body)',fontWeight:700,fontSize:13}}>
 <Icon name="check-circle" size={16} stroke={2.2}/> You joined {CMTY_GROUP.name}. You can post and RSVP.
 </div>

 <div style={{fontFamily:'var(--font-body)',fontWeight:700,fontSize:13,color:'var(--ink-700)',marginBottom:8}}>Post type</div>
 <div style={{display:'flex',gap:8,flexWrap:'wrap',marginBottom:12}}>
 {Object.keys(POST_KINDS).map(k => (
 <button key={k} onClick={() => setKind(k)} style={{
 display:'inline-flex',alignItems:'center',gap:6,minHeight:36,
 padding:'8px 14px',borderRadius:999,cursor:'pointer',
 fontFamily:'var(--font-body)',fontWeight:700,fontSize:13,
 border:'1.5px solid ' + (kind===k ? 'var(--brand-orange)' : 'var(--ink-200)'),
 background: kind===k ? 'var(--brand-orange-50)' : 'var(--paper)',
 color: kind===k ? 'var(--brand-orange-700)' : 'var(--ink-700)'}}>
 <Icon name={POST_KINDS[k].icon} size={14} stroke={2.2}/> {POST_KINDS[k].label}
 </button>
 ))}
 </div>

 <textarea placeholder="Say something to the group..."
 style={{width:'100%',minHeight:72,padding:'12px 14px',boxSizing:'border-box',
 border:'1.5px solid var(--ink-200)',borderRadius:'var(--radius-sm)',
 fontFamily:'var(--font-body)',fontSize:15,resize:'vertical',background:'var(--paper)'}}/>

 <div style={{display:'flex',gap:8,flexWrap:'wrap',margin:'12px 0'}}>
 <button style={{...btnGhost,padding:'10px 16px',fontSize:13}}>
 <Icon name="image" size={16} stroke={2}/> Attach photo
 </button>
 <button style={{...btnGhost,padding:'10px 16px',fontSize:13}}>
 <Icon name="tag" size={16} stroke={2}/> Link a listing
 </button>
 </div>
 <button onClick={onPost} style={{...btnPrimary,width:'100%',justifyContent:'center',minHeight:48}}>
 <Icon name="send" size={18} stroke={2}/> Post to group
 </button>

 {/* RSVP to the upcoming event */}
 {event && (
 <div style={{marginTop:16,paddingTop:16,borderTop:'1px solid var(--ink-100)'}}>
 <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:10}}>
 <Icon name="calendar" size={16} stroke={2} />
 <span style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:14}}>{event.body.split('.')[0]}</span>
 <span style={{fontFamily:'var(--font-mono)',fontSize:12,color:'var(--ink-500)'}}> -  {event.when}</span>
 </div>
 <div style={{display:'flex',gap:8}}>
 {['Going','Maybe','Cannot make it'].map(r => (
 <button key={r} onClick={() => setRsvp(r)} style={{
 minHeight:36,padding:'8px 14px',borderRadius:999,cursor:'pointer',
 fontFamily:'var(--font-body)',fontWeight:700,fontSize:13,
 border:'1.5px solid ' + (rsvp===r ? 'var(--success)' : 'var(--ink-200)'),
 background: rsvp===r ? 'var(--success-100)' : 'var(--paper)',
 color: rsvp===r ? 'var(--success)' : 'var(--ink-700)'}}>{r}</button>
 ))}
 </div>
 </div>
 )}
 </div>
 );
}

function CommunityPost({ post }) {
 return (
 <article style={{...panelStyle,marginBottom:12,
 borderColor: post.kind==='alert' ? 'var(--danger)' : 'var(--ink-200)'}}>
 <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:8}}>
 <PostKindTag kind={post.kind}/>
 <span style={{fontFamily:'var(--font-mono)',fontSize:12,color:'var(--ink-400)'}}>{post.time}</span>
 </div>
 <div style={{fontFamily:'var(--font-body)',fontSize:13,fontWeight:700,color:'var(--ink-700)',marginBottom:4}}>{post.author}</div>
 <p style={{margin:0,fontSize:15,color:'var(--ink-900)',lineHeight:1.5}}>{post.body}</p>
 {post.kind==='event' && (
 <div style={{display:'flex',alignItems:'center',gap:12,marginTop:12}}>
 <button style={{...btnPrimary,padding:'10px 18px',fontSize:14,minHeight:40}}>
 <Icon name="calendar" size={16} stroke={2}/> RSVP
 </button>
 <span style={{display:'inline-flex',alignItems:'center',gap:6,
 fontFamily:'var(--font-body)',fontSize:13,color:'var(--ink-500)'}}>
 <Icon name="users" size={14} stroke={2}/> {post.rsvp} going
 </span>
 </div>
 )}
 </article>
 );
}

/* --- Community hub screen --- */
function CommunityScreen({ onShop }) {
 const [joined, setJoined] = useCmtyState(false);
 const local = PRODUCTS.filter(p => p.location === 'Soweto' || p.seller === 'Mama K.' || p.seller === 'Gogo B.').slice(0, 4);

 return (
 <div>
 <div style={{marginBottom:16}}>
 <h1 style={{margin:0}}>Community</h1>
 <p style={{margin:'4px 0 0',color:'var(--ink-500)',fontSize:14}}>
 What is happening near you. Join a group to post, RSVP and see members' listings.
 </p>
 </div>

 {/* Group header + Join */}
 <div style={{...panelStyle,background:'var(--brand-orange-50)',borderColor:'var(--brand-orange)',
 display:'flex',justifyContent:'space-between',alignItems:'center',gap:12,flexWrap:'wrap'}}>
 <div style={{display:'flex',alignItems:'center',gap:12}}>
 <div style={{width:48,height:48,borderRadius:'var(--radius-md)',background:'var(--paper)',
 display:'flex',alignItems:'center',justifyContent:'center',color:'var(--brand-orange-700)',
 border:'1px solid var(--brand-orange-100)'}}>
 <Icon name="users" size={24} stroke={2}/>
 </div>
 <div>
 <h2 style={{margin:0,fontSize:20}}>{CMTY_GROUP.name}</h2>
 <div style={{display:'flex',alignItems:'center',gap:8,marginTop:2,
 fontFamily:'var(--font-body)',fontSize:13,color:'var(--ink-500)'}}>
 <Icon name="users" size={13} stroke={2}/> {CMTY_GROUP.members.toLocaleString('en-ZA')} members - {CMTY_GROUP.kind}
 </div>
 </div>
 </div>
 <button onClick={() => setJoined(j => !j)} aria-pressed={joined}
 style={ joined
 ? {...btnGhost,minHeight:44,borderColor:'var(--success)',color:'var(--success)'}
 : {...btnPrimary,minHeight:44}}>
 {joined ? (<><Icon name="check" size={18} stroke={2.4}/> Joined</>)
 : (<><Icon name="user-plus" size={18} stroke={2}/> Join group</>)}
 </button>
 </div>

 <div style={{display:'grid',gridTemplateColumns:'1fr 320px',gap:24,alignItems:'start',marginTop:8}}>
 <div>
 {joined && <CommunityComposer onPost={() => {}}/>}
 <div style={{display:'flex',alignItems:'center',gap:8,margin:'16px 0 12px'}}>
 <h3 style={{margin:0}}>What is happening</h3>
 </div>
 {CMTY_POSTS.map(p => <CommunityPost key={p.id} post={p}/>)}
 </div>

 {/* Sidebar: members + local listings */}
 <aside style={{display:'flex',flexDirection:'column',gap:16}}>
 <div style={panelStyle}>
 <h4 style={{margin:'0 0 12px'}}>Members</h4>
 <div style={{display:'flex',alignItems:'center',gap:6}}>
 {[0,1,2,3].map(i => (
 <div key={i} style={{width:32,height:32,borderRadius:999,
 background:'var(--brand-plum-100)',color:'var(--brand-plum-700)',
 display:'flex',alignItems:'center',justifyContent:'center',
 border:'2px solid var(--paper)',marginLeft: i ? -8 : 0,
 fontFamily:'var(--font-display)',fontWeight:700,fontSize:12}}>
 <Icon name="user-round" size={16} stroke={2}/>
 </div>
 ))}
 <span style={{fontFamily:'var(--font-body)',fontSize:13,color:'var(--ink-500)',marginLeft:6}}>
 +{(CMTY_GROUP.members - 4).toLocaleString('en-ZA')} more
 </span>
 </div>
 </div>

 <div style={panelStyle}>
 <h4 style={{margin:'0 0 12px'}}>Local listings</h4>
 <div style={{display:'flex',flexDirection:'column',gap:10}}>
 {local.map(p => (
 <button key={p.id} onClick={() => onShop && onShop(p)}
 style={{display:'flex',gap:10,alignItems:'center',textAlign:'left',cursor:'pointer',
 background:'none',border:'none',padding:0,width:'100%'}}>
 <span style={{width:48,height:48,borderRadius:'var(--radius-sm)',flexShrink:0,
 backgroundImage:'url(assets/me2you.jpg)',backgroundSize:'cover',backgroundPosition:'center'}}/>
 <span style={{flex:1,minWidth:0}}>
 <span style={{display:'block',fontFamily:'var(--font-display)',fontWeight:700,fontSize:14,
 whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{p.title}</span>
 <span style={{display:'flex',alignItems:'center',gap:6,marginTop:2}}>
 <Price amount={p.price} size="sm"/>
 <span style={{fontFamily:'var(--font-body)',fontSize:12,color:'var(--ink-500)'}}> -  {p.seller}</span>
 </span>
 </span>
 <span style={{display:'inline-flex',alignItems:'center',gap:4,
 background:'var(--success-100)',color:'var(--success)',
 fontFamily:'var(--font-body)',fontWeight:700,fontSize:10,
 padding:'3px 7px',borderRadius:999,flexShrink:0}}>
 <Icon name="shield-check" size={11} stroke={2.2}/> Escrow
 </span>
 </button>
 ))}
 </div>
 </div>
 </aside>
 </div>
 </div>
 );
}

Object.assign(window, { CommunityScreen, CommunityPost, CommunityComposer, PostKindTag });