/* Me2You - Driver App: Job Board, Active Delivery, Earnings, Ratings */
/* global React, Icon, StatusTag, Price, panelStyle, btnPrimary, btnGhost, btnDanger, btnSmall, DRIVER_JOBS */

const { useState } = React;

function DriverApp({ onBack }) {
 const [tab, setTab] = useState('jobs');
 const [onDuty, setOnDuty] = useState(false);
 const [accepted, setAccepted] = useState(null);

 const tabs = [
 { key:'jobs', label:'Jobs', icon:'package' },
 { key:'active', label:'Active', icon:'navigation' },
 { key:'earnings', label:'Earnings', icon:'wallet' },
 { key:'ratings', label:'Ratings', icon:'star' },
 { key:'settings', label:'Me', icon:'user-round' },
 ];

 return (
 <div style={{maxWidth:480,margin:'0 auto',minHeight:'100vh',background:'var(--ink-50)',position:'relative',paddingBottom:80}}>
 {/* Driver header */}
 <div style={{background:'var(--paper)',padding:'16px 20px',borderBottom:'1px solid var(--ink-200)',
 display:'flex',justifyContent:'space-between',alignItems:'center',position:'sticky',top:72,zIndex:5}}>
 <div>
 <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:18}}>Job board</div>
 <div style={{fontSize:12,color:'var(--ink-500)'}}>Bongani K. - Scooter</div>
 </div>
 <button onClick={() => setOnDuty(!onDuty)} style={{
 padding:'8px 16px',borderRadius:'var(--radius-pill)',border:'none',cursor:'pointer',
 fontFamily:'var(--font-body)',fontWeight:700,fontSize:13,
 background: onDuty ? 'var(--success)' : 'var(--ink-200)',
 color: onDuty ? 'white' : 'var(--ink-500)',
 transition:'all .2s ease'
 }}>
 {onDuty ? '* On duty' : 'Off duty'}
 </button>
 </div>

 <div style={{padding:'16px 20px'}}>
 {tab === 'jobs' && <DriverJobs onDuty={onDuty} onAccept={j => { setAccepted(j); setTab('active'); }}/>}
 {tab === 'active' && <DriverActive job={accepted} onDeliver={() => { setAccepted(null); setTab('jobs'); }}/>}
 {tab === 'earnings' && <DriverEarnings/>}
 {tab === 'ratings' && <DriverRatings/>}
 {tab === 'settings' && <DriverSettings/>}
 </div>

 {/* Bottom nav */}
 <nav style={{position:'fixed',bottom:0,left:'50%',transform:'translateX(-50%)',width:'100%',maxWidth:480,
 background:'var(--paper)',borderTop:'1px solid var(--ink-200)',display:'flex',height:64,zIndex:10}}>
 {tabs.map(t => (
 <button key={t.key} onClick={() => setTab(t.key)} style={{
 flex:1,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap:2,
 background:'none',border:'none',cursor:'pointer',
 color: tab===t.key ? 'var(--brand-orange)' : 'var(--ink-400)',
 fontFamily:'var(--font-body)',fontSize:10,fontWeight:600,transition:'color .15s'
 }}>
 <Icon name={t.icon} size={20}/>
 {t.label}
 </button>
 ))}
 </nav>
 </div>
 );
}

function DriverJobs({ onDuty, onAccept }) {
 const available = DRIVER_JOBS.filter(j => j.status === 'available');
 if (!onDuty) return (
 <div style={{textAlign:'center',padding:'48px 20px'}}>
 <div style={{width:64,height:64,borderRadius:999,background:'var(--ink-100)',display:'inline-flex',alignItems:'center',justifyContent:'center',color:'var(--ink-400)',marginBottom:16}}>
 <Icon name="truck" size={28}/>
 </div>
 <h3 style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:18}}>You're off duty</h3>
 <p style={{color:'var(--ink-500)',fontSize:14}}>Toggle <strong>On duty</strong> to start receiving jobs in your service area.</p>
 </div>
 );
 return (
 <div>
 <p style={{fontSize:13,color:'var(--ink-500)',marginBottom:12}}>{available.length} jobs near you</p>
 {available.map(j => (
 <div key={j.id} style={{...panelStyle,padding:16}}>
 <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:8}}>
 <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:16}}>{j.item}</div>
 <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:20,color:'var(--success)'}}>
 R {j.pay}
 </div>
 </div>
 <div style={{fontFamily:'var(--font-mono)',fontSize:11,color:'var(--ink-500)',marginBottom:8}}>{j.id}</div>
 <div style={{display:'flex',flexDirection:'column',gap:6,fontSize:13,color:'var(--ink-700)'}}>
 <div style={{display:'flex',alignItems:'center',gap:8}}>
 <div style={{width:8,height:8,borderRadius:999,background:'var(--brand-orange)',flexShrink:0}}/>
 <span><strong>Pickup:</strong> {j.pickup}</span>
 </div>
 <div style={{width:1,height:16,borderLeft:'1.5px dashed var(--ink-300)',marginLeft:3.5}}/>
 <div style={{display:'flex',alignItems:'center',gap:8}}>
 <div style={{width:8,height:8,borderRadius:999,background:'var(--success)',flexShrink:0}}/>
 <span><strong>Drop:</strong> {j.dropoff}</span>
 </div>
 </div>
 <div style={{display:'flex',gap:12,marginTop:12,fontSize:12,color:'var(--ink-500)'}}>
 <span>~{j.distance}</span>
 <span>~{j.time}</span>
 </div>
 <button onClick={() => onAccept(j)} style={{...btnPrimary,width:'100%',marginTop:12,padding:'12px',justifyContent:'center',fontSize:14}}>
 Accept job
 </button>
 </div>
 ))}
 </div>
 );
}

function DriverActive({ job, onDeliver }) {
 const [step, setStep] = useState(0); // 0=heading to pickup, 1=picked up, 2=delivering
 if (!job) return (
 <div style={{textAlign:'center',padding:'48px 20px'}}>
 <div style={{width:64,height:64,borderRadius:999,background:'var(--ink-100)',display:'inline-flex',alignItems:'center',justifyContent:'center',color:'var(--ink-400)',marginBottom:16}}>
 <Icon name="navigation" size={28}/>
 </div>
 <h3 style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:18}}>No active delivery</h3>
 <p style={{color:'var(--ink-500)',fontSize:14}}>Accept a job from the board to get started.</p>
 </div>
 );

 const steps = ['Head to pickup','Picked up','Delivering'];
 return (
 <div>
 <div style={{...panelStyle,background:'var(--brand-orange-50)',borderColor:'var(--brand-orange)'}}>
 <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:18,marginBottom:4}}>{job.item}</div>
 <div style={{fontSize:13,color:'var(--ink-700)',marginBottom:12}}>
 {step === 0 && `Head to pickup: ${job.pickup}`}
 {step === 1 && 'Confirm you have the parcel'}
 {step === 2 && `Delivering to: ${job.dropoff}`}
 </div>
 <div style={{display:'flex',gap:8,marginBottom:16}}>
 {steps.map((s,i) => (
 <div key={s} style={{flex:1,height:4,borderRadius:2,
 background: i <= step ? 'var(--brand-orange)' : 'var(--ink-200)',transition:'background .3s'}}/>
 ))}
 </div>
 {step < 2 ? (
 <button onClick={() => setStep(step+1)} style={{...btnPrimary,width:'100%',justifyContent:'center',padding:'14px'}}>
 {step === 0 ? <><Icon name="scan-line" size={18}/> Scan parcel</> : <><Icon name="truck" size={18}/> Start delivery</>}
 </button>
 ) : (
 <button onClick={onDeliver} style={{...btnPrimary,width:'100%',justifyContent:'center',padding:'14px',background:'var(--success)'}}>
 <Icon name="camera" size={18}/> Confirm delivery (take photo)
 </button>
 )}
 </div>

 {/* Live driver map */}
 <div style={{borderRadius:'var(--radius-md)',overflow:'hidden',marginBottom:16}}>
 <DriverLiveMap pickup={[-26.2041,28.0473]} dropoff={[-26.2678,27.8585]} driver="You" height={200}/>
 </div>

 <div style={panelStyle}>
 <div style={{display:'flex',justifyContent:'space-between',fontSize:14}}>
 <span style={{color:'var(--ink-500)'}}>Payout</span>
 <span style={{fontFamily:'var(--font-display)',fontWeight:700,color:'var(--success)'}}>R {job.pay}</span>
 </div>
 </div>
 </div>
 );
}

function DriverEarnings() {
 const earnings = [
 { date:'28 Apr', item:'Hisense TV delivery', amount:45, status:'paid' },
 { date:'27 Apr', item:'School blazer delivery', amount:30, status:'paid' },
 { date:'26 Apr', item:'PS4 Slim delivery', amount:35, status:'pending' },
 { date:'25 Apr', item:'Drill set delivery', amount:60, status:'paid' },
 { date:'24 Apr', item:'Cast-iron pot delivery', amount:55, status:'paid' },
 ];
 const total = earnings.reduce((s,e) => s + e.amount, 0);
 return (
 <div>
 <div style={{...panelStyle,background:'var(--success-100)',borderColor:'var(--success)',textAlign:'center',padding:24}}>
 <div style={{fontSize:13,color:'var(--status-paid-fg)',fontWeight:600,marginBottom:4}}>This week</div>
 <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:36,color:'var(--ink-900)'}}>R {total}</div>
 <div style={{fontSize:12,color:'var(--ink-500)',marginTop:4}}>{earnings.length} deliveries</div>
 </div>
 {earnings.map((e,i) => (
 <div key={i} style={{...panelStyle,display:'flex',justifyContent:'space-between',alignItems:'center'}}>
 <div>
 <div style={{fontWeight:600,fontSize:14}}>{e.item}</div>
 <div style={{fontSize:12,color:'var(--ink-500)'}}>{e.date}</div>
 </div>
 <div style={{textAlign:'right'}}>
 <div style={{fontFamily:'var(--font-display)',fontWeight:700}}>R {e.amount}</div>
 <StatusTag status={e.status}/>
 </div>
 </div>
 ))}
 </div>
 );
}

function DriverRatings() {
 const reviews = [
 { buyer:'Nomsa M.', stars:5, comment:'Super fast, very friendly!', date:'28 Apr' },
 { buyer:'Thandi K.', stars:5, comment:'Handled with care.', date:'27 Apr' },
 { buyer:'James R.', stars:4, comment:'Good delivery, bit late though.', date:'26 Apr' },
 { buyer:'Siya N.', stars:5, comment:'', date:'25 Apr' },
 ];
 return (
 <div>
 <div style={{...panelStyle,textAlign:'center',padding:24}}>
 <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:42,color:'var(--brand-orange)'}}>4.8</div>
 <div style={{fontSize:14,color:'var(--ink-500)'}}> - {reviews.length} ratings</div>
 </div>
 {reviews.map((r,i) => (
 <div key={i} style={panelStyle}>
 <div style={{display:'flex',justifyContent:'space-between',marginBottom:4}}>
 <strong style={{fontSize:14}}>{r.buyer}</strong>
 <span style={{color:'var(--brand-orange)',fontSize:13,display:'inline-flex',gap:2}}>
            {[1,2,3,4,5].map(n => <Icon key={n} name="star" size={12} fill={n <= r.stars ? 'currentColor' : 'none'}/>)}
          </span>
 </div>
 {r.comment && <p style={{fontSize:13,color:'var(--ink-700)',margin:0}}>{r.comment}</p>}
 <div style={{fontSize:11,color:'var(--ink-400)',marginTop:4}}>{r.date}</div>
 </div>
 ))}
 </div>
 );
}

function DriverSettings() {
 return (
 <div>
 <div style={{...panelStyle,display:'flex',alignItems:'center',gap:16,padding:20}}>
 <div style={{width:56,height:56,borderRadius:999,background:'var(--brand-orange-100)',
 display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--font-display)',
 fontWeight:700,fontSize:22,color:'var(--brand-orange-700)'}}>BK</div>
 <div>
 <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:18}}>Bongani K.</div>
 <div style={{fontSize:13,color:'var(--ink-500)'}}>driver@m2y.online - Scooter</div>
 </div>
 </div>
 <div style={panelStyle}>
 <h3 style={{fontSize:16,marginBottom:12}}>Service areas</h3>
 <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
 {['Soweto','Sandton','Randburg','Roodepoort','Midrand'].map(s => (
 <span key={s} style={{padding:'6px 12px',borderRadius:999,background:'var(--ink-100)',fontSize:13,fontWeight:600}}>{s}</span>
 ))}
 </div>
 </div>
 <div style={panelStyle}>
 <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:12,textAlign:'center'}}>
 <div><div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:20}}>96%</div><div style={{fontSize:11,color:'var(--ink-500)'}}>Acceptance</div></div>
 <div><div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:20}}>100%</div><div style={{fontSize:11,color:'var(--ink-500)'}}>Completion</div></div>
 <div><div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:20}}>94%</div><div style={{fontSize:11,color:'var(--ink-500)'}}>On time</div></div>
 </div>
 </div>
 <button style={{...btnDanger,width:'100%',justifyContent:'center'}}><Icon name="log-out" size={16}/> Sign out</button>
 </div>
 );
}

Object.assign(window, { DriverApp });