/* Me2You - Auth screens: Login, Register (POPIA), Forgot Password, Profile */
/* global React, Icon, Field, panelStyle, btnPrimary, btnGhost, btnSmall */

const { useState } = React;

function AuthLogin({ onLogin, onRegister, onForgot }) {
 return (
 <div style={{maxWidth:440,margin:'0 auto',padding:'48px 0'}}>
 <div style={{textAlign:'center',marginBottom:32}}>
 <img src="assets/logo-peace-orange.png" alt="" style={{height:56,marginBottom:12}}/>
 <h1 style={{fontSize:28,margin:'0 0 4px'}}>Welcome back</h1>
 <p style={{color:'var(--ink-500)',fontSize:15}}>Let's pick up where you left off.</p>
 </div>
 <div style={panelStyle}>
 <Field label="Email" placeholder="sipho@example.co.za" icon="user-round" full/>
 <div style={{marginTop:12}}>
 <Field label="Password" type="password" placeholder="********" icon="shield-check" full/>
 </div>
 <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:12}}>
 <label style={{display:'flex',alignItems:'center',gap:8,fontSize:13,fontFamily:'var(--font-body)',color:'var(--ink-700)',cursor:'pointer'}}>
 <input type="checkbox" style={{accentColor:'var(--brand-orange)'}}/>
 Remember me
 </label>
 <button onClick={onForgot} style={{background:'none',border:'none',cursor:'pointer',
 fontFamily:'var(--font-body)',fontSize:13,fontWeight:600,color:'var(--brand-orange-700)'}}>
 Forgot password?
 </button>
 </div>
 <button onClick={onLogin} style={{...btnPrimary,width:'100%',marginTop:20,padding:'14px',justifyContent:'center',fontSize:16}}>
 Sign in
 </button>
 </div>
 <div style={{textAlign:'center',marginTop:16,fontSize:14,color:'var(--ink-500)'}}>
 Don't have an account? <button onClick={onRegister} style={{background:'none',border:'none',cursor:'pointer',
 fontFamily:'var(--font-body)',fontWeight:700,color:'var(--brand-orange-700)',fontSize:14}}>Sign up</button>
 </div>
 </div>
 );
}

function AuthRegister({ onRegister, onLogin }) {
 const [consent, setConsent] = useState(false);
 const [role, setRole] = useState('buyer');
 return (
 <div style={{maxWidth:520,margin:'0 auto',padding:'48px 0'}}>
 <div style={{textAlign:'center',marginBottom:32}}>
 <img src="assets/logo-peace-orange.png" alt="" style={{height:56,marginBottom:12}}/>
 <h1 style={{fontSize:28,margin:'0 0 4px'}}>Join Me2You</h1>
 <p style={{color:'var(--ink-500)',fontSize:15}}>Start buying or selling in minutes.</p>
 </div>
 <div style={panelStyle}>
 <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
 <Field label="Full name" placeholder="Sipho Mthembu" icon="user-round"/>
 <Field label="Phone" placeholder="071 234 5678" icon="phone"/>
 </div>
 <div style={{marginTop:12}}>
 <Field label="Email" placeholder="sipho@example.co.za" full/>
 </div>
 <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12,marginTop:12}}>
 <Field label="Password" type="password" placeholder="Min 8 characters"/>
 <Field label="Confirm password" type="password" placeholder="********"/>
 </div>

 <div style={{marginTop:16}}>
 <label style={{display:'block',fontFamily:'var(--font-body)',fontWeight:700,fontSize:13,color:'var(--ink-700)',marginBottom:8}}>
 I want to...
 </label>
 <div style={{display:'flex',gap:8}}>
 {[
 {key:'buyer', label:'Buy things', icon:'shopping-bag'},
 {key:'seller', label:'Sell things', icon:'package'},
 {key:'both', label:'Both', icon:'star'},
 ].map(r => (
 <button key={r.key} onClick={() => setRole(r.key)} style={{
 flex:1,padding:'14px 12px',borderRadius:'var(--radius-md)',cursor:'pointer',
 border: role===r.key ? '2px solid var(--brand-orange)' : '1.5px solid var(--ink-200)',
 background: role===r.key ? 'var(--brand-orange-50)' : 'var(--paper)',
 display:'flex',flexDirection:'column',alignItems:'center',gap:6,
 transition:'all .15s'
 }}>
 <Icon name={r.icon} size={22} stroke={role===r.key ? 2 : 1.5}/>
 <span style={{fontFamily:'var(--font-body)',fontWeight:600,fontSize:13,
 color: role===r.key ? 'var(--brand-orange-700)' : 'var(--ink-700)'}}>{r.label}</span>
 </button>
 ))}
 </div>
 </div>

 {/* POPIA consent - required */}
 <div style={{marginTop:20,padding:16,background:'var(--ink-50)',borderRadius:'var(--radius-md)',
 border:'1px solid var(--ink-200)'}}>
 <div style={{display:'flex',alignItems:'start',gap:10}}>
 <input type="checkbox" checked={consent} onChange={e => setConsent(e.target.checked)}
 style={{accentColor:'var(--brand-orange)',marginTop:3,width:18,height:18,flexShrink:0}}/>
 <div>
 <div style={{fontFamily:'var(--font-body)',fontWeight:700,fontSize:13,color:'var(--ink-900)'}}>
 I consent to Me2You processing my personal information
 </div>
 <div style={{fontFamily:'var(--font-body)',fontSize:12,color:'var(--ink-500)',marginTop:4,lineHeight:1.5}}>
 As required by POPIA (Protection of Personal Information Act). Your data is stored securely with bcrypt password hashing. 
 We never share your information with third parties without your consent. 
 Read our <a href="#" style={{color:'var(--brand-orange-700)',fontWeight:600}}>Privacy Policy</a>.
 </div>
 </div>
 </div>
 </div>

 <button onClick={onRegister} disabled={!consent} style={{
 ...btnPrimary,width:'100%',marginTop:20,padding:'14px',justifyContent:'center',fontSize:16,
 opacity: consent ? 1 : 0.5,cursor: consent ? 'pointer' : 'not-allowed'
 }}>
 Create my account
 </button>
 </div>
 <div style={{textAlign:'center',marginTop:16,fontSize:14,color:'var(--ink-500)'}}>
 Already have an account? <button onClick={onLogin} style={{background:'none',border:'none',cursor:'pointer',
 fontFamily:'var(--font-body)',fontWeight:700,color:'var(--brand-orange-700)',fontSize:14}}>Sign in</button>
 </div>
 </div>
 );
}

function AuthForgot({ onBack }) {
 const [sent, setSent] = useState(false);
 return (
 <div style={{maxWidth:440,margin:'0 auto',padding:'48px 0'}}>
 <div style={{textAlign:'center',marginBottom:32}}>
 <img src="assets/logo-peace-orange.png" alt="" style={{height:56,marginBottom:12}}/>
 <h1 style={{fontSize:28,margin:'0 0 4px'}}>Reset your password</h1>
 <p style={{color:'var(--ink-500)',fontSize:15}}>We'll email you a reset link.</p>
 </div>
 {!sent ? (
 <div style={panelStyle}>
 <Field label="Email address" placeholder="sipho@example.co.za" icon="user-round" full/>
 <button onClick={() => setSent(true)} style={{...btnPrimary,width:'100%',marginTop:16,padding:'14px',justifyContent:'center'}}>
 Send reset link
 </button>
 </div>
 ) : (
 <div style={{...panelStyle,textAlign:'center',padding:32}}>
 <div style={{width:56,height:56,borderRadius:999,background:'var(--success-100)',color:'var(--success)',
 display:'inline-flex',alignItems:'center',justifyContent:'center',marginBottom:16}}>
 <Icon name="check" size={28} stroke={2.5}/>
 </div>
 <h3 style={{fontSize:18,margin:'0 0 8px'}}>Check your inbox</h3>
 <p style={{color:'var(--ink-500)',fontSize:14,margin:0}}>
 If that email is registered, you'll receive a password reset link within a few minutes.
 </p>
 </div>
 )}
 <div style={{textAlign:'center',marginTop:16}}>
 <button onClick={onBack} style={{background:'none',border:'none',cursor:'pointer',
 fontFamily:'var(--font-body)',fontWeight:600,color:'var(--ink-500)',fontSize:14,
 display:'inline-flex',alignItems:'center',gap:6}}>
 <Icon name="arrow-left" size={14}/> Back to sign in
 </button>
 </div>
 </div>
 );
}

/* --- Seller OTP Verify (self-collect) --- */
function SellerOTPVerify({ onBack }) {
 const [digits, setDigits] = useState(['','','','','','']);
 const [verified, setVerified] = useState(false);
 return (
 <div style={{maxWidth:440,margin:'0 auto',padding:'48px 0',textAlign:'center'}}>
 <div style={{width:64,height:64,borderRadius:999,
 background: verified ? 'var(--success-100)' : 'var(--brand-orange-50)',
 color: verified ? 'var(--success)' : 'var(--brand-orange)',
 display:'inline-flex',alignItems:'center',justifyContent:'center',marginBottom:16}}>
 <Icon name={verified ? 'check' : 'scan-line'} size={28} stroke={2}/>
 </div>
 {!verified ? (
 <>
 <h1 style={{fontSize:24,margin:'0 0 8px'}}>Self-collect verification</h1>
 <p style={{color:'var(--ink-500)',fontSize:14,marginBottom:24}}>
 Ask the buyer for their 6-digit collection code.
 </p>
 <div style={{display:'flex',gap:8,justifyContent:'center',marginBottom:24}}>
 {[0,1,2,3,4,5].map(i => (
 <input key={i} maxLength={1} value={digits[i]}
 onChange={e => {
 const v = e.target.value.replace(/\D/g,'');
 const nd = [...digits]; nd[i] = v; setDigits(nd);
 if (v && i < 5) e.target.nextSibling?.focus();
 }}
 style={{width:48,height:56,textAlign:'center',fontSize:24,fontFamily:'var(--font-mono)',fontWeight:700,
 border:'2px solid var(--ink-200)',borderRadius:'var(--radius-sm)',background:'var(--paper)',
 transition:'border-color .15s'}}/>
 ))}
 </div>
 <button onClick={() => setVerified(true)} style={{...btnPrimary,padding:'14px 32px'}}>
 <Icon name="shield-check" size={18}/> Verify & release funds
 </button>
 <div style={{marginTop:16}}>
 <button style={{background:'none',border:'none',cursor:'pointer',color:'var(--danger)',
 fontFamily:'var(--font-body)',fontWeight:600,fontSize:13,display:'inline-flex',alignItems:'center',gap:6}}>
 <Icon name="x" size={14}/> Buyer rejected item
 </button>
 </div>
 </>
 ) : (
 <>
 <h1 style={{fontSize:24,margin:'0 0 8px'}}>Collection confirmed</h1>
 <p style={{color:'var(--ink-500)',fontSize:14,marginBottom:16}}>
 Funds have been released to your account. The order is now complete.
 </p>
 <button onClick={onBack} style={btnGhost}>Back to dashboard</button>
 </>
 )}
 </div>
 );
}

/* --- Profile / My Account --- */
function ProfilePage({ onNav }) {
 return (
 <div style={{maxWidth:600,margin:'0 auto'}}>
 <h1 style={{marginBottom:24}}>My account</h1>
 <div style={{...panelStyle,display:'flex',alignItems:'center',gap:16,padding:20}}>
 <div style={{width:64,height:64,borderRadius:999,background:'var(--brand-orange-100)',
 display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--font-display)',
 fontWeight:700,fontSize:24,color:'var(--brand-orange-700)'}}>NM</div>
 <div>
 <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:20}}>Nomsa Mthembu</div>
 <div style={{fontSize:14,color:'var(--ink-500)'}}>nomsa@email.co.za - Buyer</div>
 <div style={{fontSize:12,color:'var(--ink-400)',marginTop:2}}>Member since Feb 2026</div>
 </div>
 </div>

 <div style={panelStyle}>
 <h3 style={{fontSize:16,margin:'0 0 12px'}}>Personal information</h3>
 <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
 <Field label="Full name" value="Nomsa Mthembu"/>
 <Field label="Phone" value="071 234 5678"/>
 <Field label="Email" value="nomsa@email.co.za" full/>
 </div>
 <button style={{...btnSmall,marginTop:12}}>Update details</button>
 </div>

 <div style={panelStyle}>
 <h3 style={{fontSize:16,margin:'0 0 12px'}}>Delivery address</h3>
 <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
 <Field label="Street" value="42 Vilakazi St" full/>
 <Field label="Suburb" value="Orlando West"/>
 <Field label="City" value="Soweto"/>
 <Field label="Province" value="Gauteng"/>
 <Field label="Postal code" value="1804"/>
 </div>
 <button style={{...btnSmall,marginTop:12}}>Save address</button>
 </div>

 <div style={panelStyle}>
 <h3 style={{fontSize:16,margin:'0 0 12px'}}>Verification & trust</h3>
 <div style={{display:'flex',flexDirection:'column',gap:8}}>
 <button onClick={() => onNav && onNav('verify')} style={{display:'flex',alignItems:'center',gap:12,padding:14,background:'var(--brand-orange-50)',borderRadius:'var(--radius-md)',border:'1.5px solid var(--brand-orange)',cursor:'pointer',textAlign:'left',width:'100%'}}>
 <div style={{width:36,height:36,borderRadius:8,background:'var(--brand-orange)',color:'white',display:'flex',alignItems:'center',justifyContent:'center'}}>
 <Icon name="shield-check" size={18}/>
 </div>
 <div style={{flex:1}}>
 <div style={{fontWeight:700,fontSize:14}}>Verify your identity</div>
 <div style={{fontSize:12,color:'var(--ink-500)'}}>Get a verified badge, required for vehicles & property</div>
 </div>
 <Icon name="chevron-right" size={16}/>
 </button>
 <button onClick={() => onNav && onNav('proof')} style={{display:'flex',alignItems:'center',gap:12,padding:14,background:'var(--paper)',borderRadius:'var(--radius-md)',border:'1.5px solid var(--ink-200)',cursor:'pointer',textAlign:'left',width:'100%'}}>
 <div style={{width:36,height:36,borderRadius:8,background:'var(--ink-100)',color:'var(--ink-700)',display:'flex',alignItems:'center',justifyContent:'center'}}>
 <Icon name="package" size={18}/>
 </div>
 <div style={{flex:1}}>
 <div style={{fontWeight:700,fontSize:14}}>Upload proof of ownership</div>
 <div style={{fontSize:12,color:'var(--ink-500)'}}>NaTIS for vehicles, title deed for property</div>
 </div>
 <Icon name="chevron-right" size={16}/>
 </button>
 <button onClick={() => onNav && onNav('2fa')} style={{display:'flex',alignItems:'center',gap:12,padding:14,background:'var(--paper)',borderRadius:'var(--radius-md)',border:'1.5px solid var(--ink-200)',cursor:'pointer',textAlign:'left',width:'100%'}}>
 <div style={{width:36,height:36,borderRadius:8,background:'var(--ink-100)',color:'var(--ink-700)',display:'flex',alignItems:'center',justifyContent:'center'}}>
 <Icon name="phone" size={18}/>
 </div>
 <div style={{flex:1}}>
 <div style={{fontWeight:700,fontSize:14}}>Enable two-factor auth</div>
 <div style={{fontSize:12,color:'var(--ink-500)'}}>Extra security via SMS or authenticator app</div>
 </div>
 <Icon name="chevron-right" size={16}/>
 </button>
 </div>
 </div>

 <div style={panelStyle}>
 <h3 style={{fontSize:16,margin:'0 0 12px'}}>Security</h3>
 <button style={btnSmall}><Icon name="shield-check" size={14}/> Change password</button>
 </div>

 <div style={panelStyle}>
 <h3 style={{fontSize:16,margin:'0 0 8px'}}>POPIA & Privacy</h3>
 <p style={{fontSize:13,color:'var(--ink-500)',margin:'0 0 8px'}}>
 Your data is protected under the Protection of Personal Information Act. Passwords are stored with bcrypt hashing. 
 No personal data is shared with third parties without your consent.
 </p>
 <a href="#" style={{fontSize:13,fontWeight:600,color:'var(--brand-orange-700)'}}>Read Privacy Policy</a>
 </div>
 </div>
 );
}

/* --- Privacy Policy --- */
function PrivacyPolicy({ onBack }) {
 return (
 <div style={{maxWidth:720,margin:'0 auto'}}>
 <button onClick={onBack} style={{...btnSmall,border:'none',color:'var(--ink-500)',padding:'8px 0',marginBottom:12}}>
 <Icon name="arrow-left" size={16}/> Back
 </button>
 <h1 style={{marginBottom:4}}>Privacy Policy</h1>
 <p style={{color:'var(--ink-500)',fontSize:14,marginBottom:24}}>Last updated: 1 May 2026</p>
 
 <div style={panelStyle}>
 <h3 style={{fontSize:16,margin:'0 0 8px'}}>1. Introduction</h3>
 <p style={{fontSize:14,color:'var(--ink-700)',lineHeight:1.6}}>
 Me2You ("we", "us", "our") is committed to protecting your personal information in compliance with the 
 Protection of Personal Information Act, 2013 (POPIA). This policy explains what data we collect, why, and how we protect it.
 </p>
 </div>
 <div style={panelStyle}>
 <h3 style={{fontSize:16,margin:'0 0 8px'}}>2. What we collect</h3>
 <p style={{fontSize:14,color:'var(--ink-700)',lineHeight:1.6}}>
 Registration details (name, email, phone), delivery addresses, order history, and payment references from PayFast. 
 We never store full card numbers - payments are processed entirely through PayFast's secure gateway.
 </p>
 </div>
 <div style={panelStyle}>
 <h3 style={{fontSize:16,margin:'0 0 8px'}}>3. How we protect your data</h3>
 <p style={{fontSize:14,color:'var(--ink-700)',lineHeight:1.6}}>
 All passwords are stored using PHP <code style={{fontFamily:'var(--font-mono)',fontSize:13,background:'var(--ink-100)',padding:'2px 6px',borderRadius:4}}>password_hash()</code> (bcrypt). 
 All database queries use prepared statements to prevent SQL injection. 
 HTTPS is enforced with TLS terminated by AWS Certificate Manager on our load balancer.
 </p>
 </div>
 <div style={panelStyle}>
 <h3 style={{fontSize:16,margin:'0 0 8px'}}>4. Your rights under POPIA</h3>
 <p style={{fontSize:14,color:'var(--ink-700)',lineHeight:1.6}}>
 You have the right to access, correct, or delete your personal information at any time. 
 Contact us at team@m2y.online to exercise these rights.
 </p>
 </div>
 <div style={panelStyle}>
 <h3 style={{fontSize:16,margin:'0 0 8px'}}>5. Consent</h3>
 <p style={{fontSize:14,color:'var(--ink-700)',lineHeight:1.6}}>
 By registering on Me2You, you explicitly consent to the collection and processing of your personal information 
 as described in this policy. Your consent timestamp is recorded in our database.
 </p>
 </div>
 </div>
 );
}

/* --- Admin Payout Run --- */
function AdminPayoutRun() {
 const payouts = [
 { seller:'Thandi Q.', bank:'FNB ****4521', amount:1850, orders:3, status:'pending' },
 { seller:'Mama K.', bank:'Capitec ****7832', amount:380, orders:1, status:'pending' },
 { seller:'Sipho M.', bank:'Nedbank ****1290', amount:3200, orders:5, status:'paid' },
 { seller:'Naledi S.', bank:'Standard ****5643', amount:180, orders:1, status:'paid' },
 ];
 return (
 <div>
 <h1 style={{marginBottom:4}}>Payout run</h1>
 <p style={{color:'var(--ink-500)',fontSize:14,marginBottom:20}}>
 Release escrowed funds to sellers for completed orders.
 </p>
 <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:12,marginBottom:24}}>
 <div style={{...panelStyle,padding:16,marginBottom:0,textAlign:'center'}}>
 <div style={{fontSize:12,color:'var(--ink-500)',fontWeight:600}}>Pending payout</div>
 <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:28,color:'var(--brand-orange)'}}>R 2 230</div>
 </div>
 <div style={{...panelStyle,padding:16,marginBottom:0,textAlign:'center'}}>
 <div style={{fontSize:12,color:'var(--ink-500)',fontWeight:600}}>Sellers waiting</div>
 <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:28}}>2</div>
 </div>
 <div style={{...panelStyle,padding:16,marginBottom:0,textAlign:'center'}}>
 <div style={{fontSize:12,color:'var(--ink-500)',fontWeight:600}}>Total paid (30d)</div>
 <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:28,color:'var(--success)'}}>R 3 380</div>
 </div>
 </div>

 <div style={{...panelStyle,padding:0,overflow:'hidden'}}>
 <table style={{width:'100%',borderCollapse:'collapse',fontFamily:'var(--font-body)',fontSize:14}}>
 <thead>
 <tr style={{background:'var(--ink-50)',textAlign:'left'}}>
 <th style={{padding:'10px 16px',fontFamily:'var(--font-mono)',fontSize:11,fontWeight:600,color:'var(--ink-500)',textTransform:'uppercase',letterSpacing:'.06em'}}>Seller</th>
 <th style={{padding:'10px 16px',fontFamily:'var(--font-mono)',fontSize:11,fontWeight:600,color:'var(--ink-500)',textTransform:'uppercase',letterSpacing:'.06em'}}>Bank</th>
 <th style={{padding:'10px 16px',fontFamily:'var(--font-mono)',fontSize:11,fontWeight:600,color:'var(--ink-500)',textTransform:'uppercase',letterSpacing:'.06em'}}>Orders</th>
 <th style={{padding:'10px 16px',fontFamily:'var(--font-mono)',fontSize:11,fontWeight:600,color:'var(--ink-500)',textTransform:'uppercase',letterSpacing:'.06em',textAlign:'right'}}>Amount</th>
 <th style={{padding:'10px 16px',fontFamily:'var(--font-mono)',fontSize:11,fontWeight:600,color:'var(--ink-500)',textTransform:'uppercase',letterSpacing:'.06em'}}>Status</th>
 <th style={{padding:'10px 16px'}}></th>
 </tr>
 </thead>
 <tbody>
 {payouts.map((p,i) => (
 <tr key={i} style={{borderBottom:'1px solid var(--ink-100)'}}>
 <td style={{padding:'12px 16px',fontWeight:600}}>{p.seller}</td>
 <td style={{padding:'12px 16px',fontFamily:'var(--font-mono)',fontSize:12}}>{p.bank}</td>
 <td style={{padding:'12px 16px'}}>{p.orders}</td>
 <td style={{padding:'12px 16px',textAlign:'right',fontFamily:'var(--font-display)',fontWeight:700}}>R {p.amount.toLocaleString('en-ZA')}</td>
 <td style={{padding:'12px 16px'}}><StatusTag status={p.status}/></td>
 <td style={{padding:'12px 16px'}}>
 {p.status === 'pending' && (
 <button style={{...btnSmall,padding:'4px 12px',color:'var(--success)',borderColor:'var(--success)',fontSize:12}}>
 <Icon name="check" size={14}/> Pay out
 </button>
 )}
 </td>
 </tr>
 ))}
 </tbody>
 </table>
 </div>

 <button style={{...btnPrimary,marginTop:16}}>
 <Icon name="wallet" size={18}/> Run batch payout (2 sellers, R 2 230)
 </button>
 </div>
 );
}

Object.assign(window, { AuthLogin, AuthRegister, AuthForgot, SellerOTPVerify, ProfilePage, PrivacyPolicy, AdminPayoutRun });