// Simple Pro Mobile — Home / Today Screen
const { useState } = React;

const TODAY_JOBS_TECH = [
  { id:1, time:'8:00 AM', duration:'2h', name:'Water Heater Install', client:'Chen Family', address:'2847 Riverside Dr', status:'completed', color:'#e6f7ef', dot:'#1a9e5c' },
  { id:2, time:'11:30 AM', duration:'1.5h', name:'Drain Clog — Kitchen', client:'Ramos Residence', address:'104 Oakmont Ave', status:'in progress', color:'#eff6ff', dot:'#2563eb' },
  { id:3, time:'2:00 PM', duration:'3h', name:'Full Bathroom Re-pipe', client:'Steinberg Corp', address:'901 Park Ave, Suite 3', status:'scheduled', color:'#f3f4f6', dot:'#6b7280' },
  { id:4, time:'5:30 PM', duration:'1h', name:'Leak Inspection', client:'Nguyen Group', address:'55 Marina Blvd', status:'scheduled', color:'#f3f4f6', dot:'#6b7280' },
];

const TODAY_JOBS_OWNER = [
  { id:1, tech:'Marcus L.', job:'Water Heater Install', client:'Chen Family', status:'completed', avatar:'ML', avatarBg:'#e6f7ef', avatarColor:'#1a9e5c' },
  { id:2, tech:'Dani R.',   job:'Drain Clog — Kitchen', client:'Ramos Residence', status:'in progress', avatar:'DR', avatarBg:'#eff6ff', avatarColor:'#2563eb' },
  { id:3, tech:'Jake T.',   job:'Full Bathroom Re-pipe', client:'Steinberg Corp', status:'on my way', avatar:'JT', avatarBg:'#f0fdf4', avatarColor:'#16a34a' },
  { id:4, tech:'Unassigned',job:'Leak Inspection', client:'Nguyen Group', status:'urgent', avatar:'?', avatarBg:'#fef2f2', avatarColor:'#dc2626' },
];

function HomeHeader({ onNav, belleOnline }) {
  return (
    <div style={{padding:'18px 4px 12px',display:'flex',alignItems:'center',justifyContent:'space-between'}}>
      <div>
        <div style={{fontSize:13,fontWeight:600,color:'rgba(17,24,39,0.42)',letterSpacing:'-0.01em'}}>Monday, Apr 21</div>
        <div style={{fontSize:17,fontWeight:700,color:'#111827',marginTop:2,letterSpacing:'-0.02em'}}>Simple Pro Plumbing</div>
      </div>
      <div onClick={()=>onNav('settings-belle')} style={{height:32,padding:'0 12px',borderRadius:999,background:'rgba(255,255,255,0.72)',boxShadow:'0 1px 0 rgba(255,255,255,0.75) inset, 0 0 0 0.5px rgba(0,0,0,0.07)',display:'flex',alignItems:'center',gap:7,cursor:'pointer',backdropFilter:'blur(18px)',WebkitBackdropFilter:'blur(18px)'}}>
        <span style={{width:7,height:7,borderRadius:'50%',background:belleOnline?'#30d158':'#ff9f0a',boxShadow:belleOnline?'0 0 0 3px rgba(48,209,88,0.14)':'0 0 0 3px rgba(255,159,10,0.14)'}} />
        <span style={{fontSize:13,fontWeight:700,color:'#1f2937'}}>{belleOnline ? 'Online' : 'Manual'}</span>
      </div>
    </div>
  );
}

function CompactBelleCard({ title, sub }) {
  return (
    <div style={{borderRadius:22,padding:'14px 15px',background:'linear-gradient(145deg,rgba(15,23,42,0.98),rgba(49,46,129,0.94) 58%,rgba(88,28,135,0.9))',color:'white',boxShadow:'0 14px 30px rgba(15,23,42,0.16), inset 0 1px 0 rgba(255,255,255,0.14)',overflow:'hidden',position:'relative'}}>
      <div style={{position:'absolute',right:-34,top:-46,width:128,height:128,borderRadius:'50%',background:'radial-gradient(circle,rgba(124,58,237,0.38),rgba(124,58,237,0))'}} />
      <div style={{position:'relative',zIndex:1,display:'flex',alignItems:'center',gap:12}}>
        <div style={{width:38,height:38,borderRadius:14,background:'linear-gradient(145deg,#a78bfa,#007aff)',display:'flex',alignItems:'center',justifyContent:'center',boxShadow:'0 8px 18px rgba(124,58,237,0.28)',flexShrink:0}}>{Icons.sparkle}</div>
        <div style={{flex:1,minWidth:0}}>
          <div style={{fontSize:18,fontWeight:850,lineHeight:1.08,letterSpacing:'-0.038em'}}>{title}</div>
          <div style={{fontSize:12.5,lineHeight:1.28,color:'rgba(255,255,255,0.66)',marginTop:4}}>{sub}</div>
        </div>
      </div>
    </div>
  );
}

function NextJobCard({ onNav }) {
  const nextJob = TODAY_JOBS_TECH[1];
  return (
    <div style={{marginTop:12,borderRadius:22,background:'white',border:'0.5px solid rgba(0,0,0,0.06)',boxShadow:'0 8px 22px rgba(15,23,42,0.055)',padding:15}} onClick={()=>onNav('job-detail',{job:nextJob})}>
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:12}}>
        <div style={{flex:1,minWidth:0}}>
          <div style={{fontSize:12,fontWeight:800,color:'#007aff',letterSpacing:'0.045em',textTransform:'uppercase'}}>Next job · 11:30 AM</div>
          <div style={{fontSize:21,fontWeight:850,color:'#111827',letterSpacing:'-0.045em',marginTop:6}}>Drain Clog — Ramos</div>
          <div style={{display:'flex',alignItems:'center',gap:6,fontSize:13,color:'rgba(17,24,39,0.52)',marginTop:6}}>{Icons.pin}<span>418 Cedar Ave</span></div>
        </div>
        <button onClick={(e)=>{e.stopPropagation();onNav('job-detail',{job:nextJob,action:'onmyway'});}} style={{height:43,padding:'0 14px',border:'none',borderRadius:14,background:'#007aff',color:'white',fontSize:14,fontWeight:800,fontFamily:'inherit',cursor:'pointer',boxShadow:'0 8px 16px rgba(0,122,255,0.18)'}}>On My Way</button>
      </div>
    </div>
  );
}

function ScheduleList({ onNav, title='Rest of today', subtitle='Belle will keep customers updated.' }) {
  return (
    <div style={{marginTop:12,borderRadius:22,background:'rgba(255,255,255,0.84)',border:'0.5px solid rgba(0,0,0,0.06)',overflow:'hidden',boxShadow:'0 8px 20px rgba(15,23,42,0.04)'}}>
      <div style={{padding:'15px 16px 8px'}}><div style={{fontSize:17,fontWeight:800,letterSpacing:'-0.025em'}}>{title}</div><div style={{fontSize:12.5,color:'rgba(17,24,39,0.48)',marginTop:2}}>{subtitle}</div></div>
      {TODAY_JOBS_TECH.slice(2).map((job)=>
        <div key={job.id} onClick={()=>onNav('job-detail',{job})} style={{padding:'12px 16px',borderTop:'0.5px solid rgba(0,0,0,0.06)',display:'flex',justifyContent:'space-between',alignItems:'center',cursor:'pointer'}}>
          <div><div style={{fontSize:14.5,fontWeight:750}}>{job.name}</div><div style={{fontSize:12.2,color:'rgba(17,24,39,0.48)',marginTop:2}}>{job.time} · {job.client}</div></div><Badge status={job.status} small/>
        </div>)}
    </div>
  );
}

function ManualModeRow({ onNav }) {
  return (
    <div onClick={()=>onNav('settings-belle')} style={{marginTop:12,height:54,borderRadius:18,background:'rgba(255,255,255,0.72)',border:'0.5px solid rgba(0,0,0,0.06)',display:'flex',alignItems:'center',gap:12,padding:'0 15px',cursor:'pointer',backdropFilter:'blur(18px)',WebkitBackdropFilter:'blur(18px)'}}>
      <div style={{width:30,height:30,borderRadius:10,background:'#eef6ff',color:'#007aff',display:'flex',alignItems:'center',justifyContent:'center'}}>{Icons.check}</div>
      <div style={{flex:1}}><div style={{fontSize:14.5,fontWeight:780,letterSpacing:'-0.015em'}}>Manual mode available</div><div style={{fontSize:12.2,color:'rgba(17,24,39,0.48)',marginTop:1}}>Switch Belle off and run the workflow manually.</div></div>
      <div style={{color:'rgba(17,24,39,0.26)'}}>{Icons.chevronR}</div>
    </div>
  );
}

function HomeTech({ onNav, plan = 'pro' }) {
  const { belleOnline } = useBelleOnline();
  return (
    <div style={{minHeight:'100%',padding:'0 16px 112px',background:'linear-gradient(180deg,#f8f8fb 0%,#f2f2f7 54%,#eeeeF4 100%)',color:'#111827'}}>
      <HomeHeader onNav={onNav} belleOnline={belleOnline}/>
      <CompactBelleCard title="Belle is running your workflow" sub="Customer updates and follow-ups are covered. Your focus is the next job."/>
      <NextJobCard onNav={onNav}/>
      <ScheduleList onNav={onNav} title="Today’s schedule" subtitle="What is still ahead after this job."/>
      <ManualModeRow onNav={onNav}/>
    </div>
  );
}

function HomeSoloOwner({ onNav, plan = 'pro' }) {
  const { belleOnline } = useBelleOnline();
  return (
    <div style={{minHeight:'100%',padding:'0 16px 112px',background:'linear-gradient(180deg,#f8f8fb 0%,#f2f2f7 54%,#eeeeF4 100%)',color:'#111827'}}>
      <HomeHeader onNav={onNav} belleOnline={belleOnline}/>
      <CompactBelleCard title="Belle is running your day" sub="Jobs stay front and center. Money is visible because you own the business."/>
      <NextJobCard onNav={onNav}/>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:10,marginTop:12}}>
        {[{label:'Today',value:'4 jobs',route:'schedule'},{label:'Revenue',value:'$1.4k',route:'billing'},{label:'Unpaid',value:'$920',route:'billing'}].map(k=><div key={k.label} onClick={()=>onNav(k.route)} style={{minHeight:82,borderRadius:20,background:'rgba(255,255,255,0.84)',border:'0.5px solid rgba(0,0,0,0.06)',boxShadow:'0 7px 18px rgba(15,23,42,0.04)',padding:'12px 10px',cursor:'pointer'}}><div style={{fontSize:12,color:'rgba(17,24,39,0.48)',fontWeight:650}}>{k.label}</div><div style={{fontSize:21,fontWeight:850,letterSpacing:'-0.05em',marginTop:10}}>{k.value}</div></div>)}
      </div>
      <ScheduleList onNav={onNav}/>
      <ManualModeRow onNav={onNav}/>
    </div>
  );
}

function HomeTeamOwner({ onNav, plan = 'standard' }) {
  const { belleOnline } = useBelleOnline();
  const rows = TODAY_JOBS_OWNER;
  return (
    <div style={{minHeight:'100%',padding:'0 16px 112px',background:'linear-gradient(180deg,#f8f8fb 0%,#f2f2f7 54%,#eeeeF4 100%)',color:'#111827'}}>
      <HomeHeader onNav={onNav} belleOnline={belleOnline}/>
      <CompactBelleCard title="Belle is coordinating the team" sub="Scheduling, dispatch gaps, and revenue exceptions surface here for owner review."/>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:10,marginTop:12}}>
        {[{label:'Revenue',value:'$4.8k',route:'billing'},{label:'Approvals',value:((typeof isPremiumPlan === 'function') ? isPremiumPlan(plan) : plan==='premium')?'5':'🔒',route:((typeof isPremiumPlan === 'function') ? isPremiumPlan(plan) : plan==='premium')?'approvals':'feature-detail',params:{feature:'approvals'}},{label:'Margin',value:((typeof isPremiumPlan === 'function') ? isPremiumPlan(plan) : plan==='premium')?'38%':'🔒',route:((typeof isPremiumPlan === 'function') ? isPremiumPlan(plan) : plan==='premium')?'job-costing':'feature-detail',params:{feature:'job-costing'}}].map(k=><div key={k.label} onClick={()=>onNav(k.route,k.params)} style={{minHeight:82,borderRadius:20,background:'rgba(255,255,255,0.84)',border:'0.5px solid rgba(0,0,0,0.06)',boxShadow:'0 7px 18px rgba(15,23,42,0.04)',padding:'12px 10px',cursor:'pointer'}}><div style={{fontSize:12,color:'rgba(17,24,39,0.48)',fontWeight:650}}>{k.label}</div><div style={{fontSize:21,fontWeight:850,letterSpacing:'-0.05em',marginTop:10}}>{k.value}</div></div>)}
      </div>
      <div style={{marginTop:12,borderRadius:22,background:'rgba(255,255,255,0.84)',border:'0.5px solid rgba(0,0,0,0.06)',overflow:'hidden',boxShadow:'0 8px 20px rgba(15,23,42,0.04)'}}>
        <div style={{padding:'15px 16px 8px',display:'flex',justifyContent:'space-between',alignItems:'baseline'}}><div><div style={{fontSize:17,fontWeight:800,letterSpacing:'-0.025em'}}>Team schedule</div><div style={{fontSize:12.5,color:'rgba(17,24,39,0.48)',marginTop:2}}>Belle has routed most jobs.</div></div><button onClick={()=>onNav(((typeof isPremiumPlan === 'function') ? isPremiumPlan(plan) : plan==='premium')?'approvals':'schedule')} style={{border:'none',background:'rgba(0,122,255,0.10)',color:'#007aff',height:30,padding:'0 11px',borderRadius:999,fontWeight:750}}>{((typeof isPremiumPlan === 'function') ? isPremiumPlan(plan) : plan==='premium')?'Approvals':'Dispatch'}</button></div>
        {rows.map((row)=><div key={row.id} onClick={()=>onNav('tech-schedule',{tech:row.tech})} style={{padding:'12px 16px',borderTop:'0.5px solid rgba(0,0,0,0.06)',display:'flex',alignItems:'center',gap:12,cursor:'pointer'}}><Avatar name={row.tech} size={36} color={row.avatarBg} textColor={row.avatarColor}/><div style={{flex:1,minWidth:0}}><div style={{fontSize:14.5,fontWeight:750}}>{row.tech}</div><div style={{fontSize:12.2,color:'rgba(17,24,39,0.48)',marginTop:2,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{row.job} · {row.client}</div></div><Badge status={row.status} small/></div>)}
      </div>
      <ManualModeRow onNav={onNav}/>
    </div>
  );
}

function HomeOwner({ onNav }) {
  return <HomeTeamOwner onNav={onNav}/>;
}

Object.assign(window, { HomeTech, HomeSoloOwner, HomeTeamOwner, HomeOwner });