// 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' },
];

// ── TECHNICIAN HOME ───────────────────────────────────────────
function HomeTech({ onNav, plan = 'pro' }) {
  const showTimeTracker = ['pro','enterprise','enterprise+'].includes(plan);
  const nextJob   = TODAY_JOBS_TECH[1];
  const remaining = TODAY_JOBS_TECH.filter(j => j.status !== 'completed').length;
  const completed = TODAY_JOBS_TECH.filter(j => j.status === 'completed').length;

  return (
    <div style={{paddingBottom:100, background:'#f2f2f7', minHeight:'100%'}}>

      {/* ── HEADER ─────────────────────────────────────── */}
      <div style={{background:'#0f172a', paddingTop:6, paddingBottom:18, paddingLeft:20, paddingRight:20}}>

        {/* Identity row */}
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:16}}>
          <div>
            <div style={{fontSize:11,fontWeight:500,color:'rgba(255,255,255,0.28)',
              letterSpacing:'0.08em',textTransform:'uppercase',marginBottom:2,lineHeight:1}}>
              Monday · Apr 21
            </div>
            <div style={{fontSize:20,fontWeight:600,color:'white',
              letterSpacing:'-0.022em',lineHeight:1.05,marginTop:3}}>
              Marcus Leal
            </div>
          </div>
          <div style={{display:'flex',alignItems:'center',gap:8}}>
            <div style={{position:'relative',cursor:'pointer'}} onClick={() => onNav('notifications')}>
              <div style={{width:32,height:32,borderRadius:'50%',
                background:'rgba(255,255,255,0.07)',border:'0.5px solid rgba(255,255,255,0.1)',
                display:'flex',alignItems:'center',justifyContent:'center',color:'rgba(255,255,255,0.45)'}}>
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round">
                  <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/>
                  <path d="M13.73 21a2 2 0 01-3.46 0"/>
                </svg>
              </div>
              <div style={{position:'absolute',top:6,right:6,width:6,height:6,borderRadius:'50%',
                background:'#ef4444',border:'1.5px solid #0f172a'}}/>
            </div>
            <div style={{width:32,height:32,borderRadius:'50%',
              background:'rgba(255,255,255,0.09)',border:'0.5px solid rgba(255,255,255,0.11)',
              display:'flex',alignItems:'center',justifyContent:'center',
              fontSize:11,fontWeight:600,color:'rgba(255,255,255,0.65)',letterSpacing:'0.02em'}}>
              ML
            </div>
          </div>
        </div>

        {/* Stats band — single ambient object, no hard tile borders */}
        <div style={{
          background:'rgba(255,255,255,0.055)',
          borderRadius:12,
          border:'0.5px solid rgba(255,255,255,0.07)',
          display:'flex',
        }}>
          {[
            { value: remaining, label:'Remaining', accent:'#93c5fd', onTap:()=>onNav('jobs') },
            { value: completed, label:'Completed', accent:'#6ee7b7', border:true, onTap:()=>onNav('jobs') },
            { value:'5:30',     label:'Last job',  accent:'rgba(255,255,255,0.3)', border:true, onTap:()=>onNav('schedule') },
          ].map((s,i) => (
            <div key={s.label} onClick={s.onTap}
              style={{flex:1, padding:'10px 13px', cursor:'pointer',
                borderLeft: i>0 ? '0.5px solid rgba(255,255,255,0.07)' : 'none'}}>
              <div style={{fontSize:21,fontWeight:700,color:s.accent,
                letterSpacing:'-0.03em',lineHeight:1,fontVariantNumeric:'tabular-nums'}}>{s.value}</div>
              <div style={{fontSize:10,fontWeight:500,color:'rgba(255,255,255,0.25)',
                marginTop:4,letterSpacing:'0.05em',textTransform:'uppercase',lineHeight:1}}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>

      {/* ── NEXT JOB ────────────────────────────────────── */}
      <div style={{margin:'12px 16px 0', borderRadius:16, overflow:'hidden',
        background:'#0071e3',
        boxShadow:'0 2px 14px rgba(0,113,227,0.22), 0 1px 3px rgba(0,0,0,0.06)'}}>

        {/* Info area — full card tappable for detail */}
        <div onClick={() => onNav('job-detail', {job: nextJob})}
          style={{padding:'13px 16px 0', cursor:'pointer', position:'relative', overflow:'hidden'}}>
          <div style={{position:'absolute',top:-28,right:-28,width:120,height:120,
            borderRadius:'50%',background:'rgba(255,255,255,0.04)',pointerEvents:'none'}}/>
          <div style={{fontSize:10,fontWeight:600,color:'rgba(255,255,255,0.45)',
            letterSpacing:'0.08em',textTransform:'uppercase',marginBottom:5,lineHeight:1}}>
            Up next · 11:30 AM · 1.5 hrs
          </div>
          <div style={{fontSize:18,fontWeight:700,color:'white',
            letterSpacing:'-0.02em',lineHeight:1.2,marginBottom:6}}>
            {nextJob.name}
          </div>
          <div style={{display:'flex',alignItems:'center',gap:4,paddingBottom:13}}>
            <svg width="9" height="9" viewBox="0 0 24 24" fill="none"
              stroke="rgba(255,255,255,0.42)" strokeWidth="2.5" strokeLinecap="round">
              <path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0118 0z"/>
              <circle cx="12" cy="10" r="3"/>
            </svg>
            <span style={{fontSize:12,color:'rgba(255,255,255,0.52)',letterSpacing:'-0.005em'}}>
              {nextJob.client} · {nextJob.address}
            </span>
          </div>
        </div>

        {/* CTA — seamless bottom of the card */}
        <div style={{borderTop:'0.5px solid rgba(255,255,255,0.12)',
          display:'flex',alignItems:'stretch'}}>
          <button onClick={() => onNav('job-detail', {job: nextJob, action:'onmyway'})}
            style={{flex:1, height:44, background:'rgba(255,255,255,0.96)',
              color:'#004fa3', border:'none', fontSize:15, fontWeight:700,
              cursor:'pointer', letterSpacing:'-0.016em',
              fontFamily:'inherit', borderRadius:'0 0 0 16px',
              display:'flex',alignItems:'center',justifyContent:'center',gap:7}}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" strokeWidth="2.3" strokeLinecap="round">
              <circle cx="12" cy="12" r="10"/>
              <polyline points="12 6 12 12 16 14"/>
            </svg>
            On My Way
          </button>
          <div style={{width:'0.5px',background:'rgba(0,0,0,0.07)',flexShrink:0}}/>
          <button onClick={() => onNav('job-detail', {job: nextJob})}
            style={{width:46, height:44,
              background:'rgba(255,255,255,0.82)',
              border:'none', cursor:'pointer',
              borderRadius:'0 0 16px 0',
              display:'flex',alignItems:'center',justifyContent:'center',
              color:'rgba(0,79,163,0.35)'}}>
            <svg width="7" height="12" viewBox="0 0 7 12" fill="none"
              stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M1 1l5 5-5 5"/>
            </svg>
          </button>
        </div>
      </div>

      {/* ── TIME TRACKER (Pro+ plans only) ── */}
      {showTimeTracker && (() => {
        const [clocked, setClocked] = React.useState(false);
        const [elapsed, setElapsed] = React.useState(0);
        React.useEffect(() => {
          if (!clocked) return;
          const t = setInterval(() => setElapsed(e => e + 1), 1000);
          return () => clearInterval(t);
        }, [clocked]);
        const fmt = s => `${String(Math.floor(s/3600)).padStart(2,'0')}:${String(Math.floor((s%3600)/60)).padStart(2,'0')}:${String(s%60).padStart(2,'0')}`;
        return (
          <div style={{margin:'10px 16px 0',background:'white',borderRadius:14,
            boxShadow:'0 0 0 0.5px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04)',
            padding:'12px 16px',display:'flex',alignItems:'center',gap:12}}>
            <div style={{flex:1}}>
              <div style={{fontSize:11,fontWeight:600,color:'rgba(0,0,0,0.35)',
                letterSpacing:'0.05em',textTransform:'uppercase',marginBottom:3}}>
                {clocked ? 'Time on job' : 'Not clocked in'}
              </div>
              <div style={{fontSize:22,fontWeight:700,color: clocked ? '#0071e3' : '#111',
                letterSpacing:'-0.02em',fontVariantNumeric:'tabular-nums'}}>
                {clocked ? fmt(elapsed) : '00:00:00'}
              </div>
            </div>
            <button onClick={() => { setClocked(!clocked); if(clocked) setElapsed(0); }}
              style={{height:38,padding:'0 18px',borderRadius:999,
                background: clocked ? '#fef2f2' : '#0071e3',
                color: clocked ? '#dc2626' : 'white',
                border:'none',fontSize:13,fontWeight:600,cursor:'pointer',fontFamily:'inherit'}}>
              {clocked ? 'Clock Out' : 'Clock In'}
            </button>
          </div>
        );
      })()}

      {/* ── BELLE ───────────────────────────────────────── */}
      <div style={{margin:'9px 16px 0', background:'white', borderRadius:14,
        boxShadow:'0 0 0 0.5px rgba(124,58,237,0.15), 0 1px 4px rgba(0,0,0,0.04)',
        padding:'13px 15px 14px'}}>
        <div style={{display:'flex',alignItems:'flex-start',gap:10}}>
          {/* Star */}
          <div style={{width:26,height:26,borderRadius:'50%',flexShrink:0,marginTop:1,
            background:'linear-gradient(140deg,#7c3aed 0%,#4f46e5 100%)',
            display:'flex',alignItems:'center',justifyContent:'center',
            boxShadow:'0 2px 8px rgba(124,58,237,0.28)'}}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="white">
              <path d="M12 2l2.09 6.26L20 9.27l-4.91 4.73 1.18 6.88L12 17.77l-6.27 3.11 1.18-6.88L2 9.27l5.91-1.01L12 2z"/>
            </svg>
          </div>

          <div style={{flex:1,minWidth:0}}>
            {/* Label */}
            <div style={{display:'flex',alignItems:'center',gap:5,marginBottom:6}}>
              <span style={{fontSize:11,fontWeight:700,color:'#7c3aed',
                letterSpacing:'0.05em',textTransform:'uppercase',opacity:0.8}}>Belle</span>
              <div style={{flex:1,height:'0.5px',background:'rgba(124,58,237,0.1)'}}/>
            </div>
            {/* Body */}
            <div style={{fontSize:14,color:'#1a1a2e',lineHeight:1.56,
              letterSpacing:'-0.009em',fontWeight:400,marginBottom:12}}>
              Ramos Residence is next at 11:30. They haven't been contacted today.
            </div>
            {/* Actions — harmonized pill row */}
            <div style={{display:'flex',gap:6}}>
              <button onClick={() => onNav('belle', {prompt:"Text Ramos Residence I'm on my way"})}
                style={{flex:1,height:30,borderRadius:999,background:'#7c3aed',color:'white',
                  border:'none',fontSize:12,fontWeight:600,cursor:'pointer',
                  letterSpacing:'-0.005em',fontFamily:'inherit'}}>
                Text them
              </button>
              <button onClick={() => {}}
                style={{height:30,padding:'0 13px',borderRadius:999,
                  background:'#f0ebff',color:'#5b21b6',
                  border:'none',fontSize:12,fontWeight:500,cursor:'pointer',fontFamily:'inherit'}}>
                Call
              </button>
              <button onClick={() => {}}
                style={{height:30,padding:'0 11px',borderRadius:999,
                  background:'transparent',color:'rgba(0,0,0,0.24)',
                  border:'none',fontSize:12,cursor:'pointer',fontFamily:'inherit'}}>
                Later
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* ── TODAY ───────────────────────────────────────── */}
      <div style={{padding:'17px 20px 8px',display:'flex',
        justifyContent:'space-between',alignItems:'baseline'}}>
        <span style={{fontSize:15,fontWeight:600,color:'#111',letterSpacing:'-0.016em',lineHeight:1}}>Today</span>
        <span onClick={() => onNav('schedule')}
          style={{fontSize:13,color:'#0071e3',cursor:'pointer',fontWeight:400,letterSpacing:'-0.005em'}}>
          Schedule →
        </span>
      </div>

      <div style={{margin:'0 16px', background:'white', borderRadius:14,
        boxShadow:'0 0 0 0.5px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04)',
        overflow:'hidden'}}>
        {TODAY_JOBS_TECH.map((job, i) => {
          const isActive = job.status === 'in progress';
          const isDone   = job.status === 'completed';
          const [timeVal, ampm] = job.time.split(' ');
          return (
            <div key={job.id} onClick={() => onNav('job-detail', {job})}
              style={{
                display:'flex', alignItems:'center',
                borderBottom: i < TODAY_JOBS_TECH.length-1
                  ? '0.5px solid rgba(0,0,0,0.055)' : 'none',
                background: isActive
                  ? 'linear-gradient(90deg, rgba(0,113,227,0.04) 0%, transparent 100%)'
                  : 'white',
                cursor:'pointer',
                opacity: isDone ? 0.4 : 1,
              }}>
              {/* Active accent bar */}
              <div style={{width:2,alignSelf:'stretch',flexShrink:0,
                background: isActive ? '#0071e3' : 'transparent',
                transition:'background 0.2s'}}/>
              {/* Time */}
              <div style={{width:52,padding:'12px 0 12px 12px',flexShrink:0}}>
                <div style={{fontSize:13,fontWeight: isActive ? 700 : 500,
                  color: isActive ? '#0071e3' : isDone ? 'rgba(0,0,0,0.2)' : 'rgba(0,0,0,0.7)',
                  letterSpacing:'-0.014em',fontVariantNumeric:'tabular-nums',lineHeight:1}}>
                  {timeVal}
                </div>
                <div style={{fontSize:10,fontWeight:400,lineHeight:1,
                  color: isActive ? 'rgba(0,113,227,0.45)' : 'rgba(0,0,0,0.22)',
                  marginTop:2.5,letterSpacing:'0.02em'}}>{ampm}</div>
              </div>
              {/* Content */}
              <div style={{flex:1,padding:'12px 8px 12px 3px',minWidth:0}}>
                <div style={{fontSize:14,fontWeight: isActive ? 600 : 500,
                  color: isActive ? '#0a1929' : '#111',
                  letterSpacing:'-0.011em',lineHeight:1.25,
                  whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',marginBottom:2.5}}>
                  {job.name}
                </div>
                <div style={{fontSize:11.5,color:'rgba(0,0,0,0.36)',
                  letterSpacing:'-0.004em',fontWeight:400,lineHeight:1}}>{job.client}</div>
              </div>
              {/* Status */}
              <div style={{padding:'0 13px',flexShrink:0}}>
                <Badge status={job.status} small/>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ── OWNER HOME ────────────────────────────────────────────────
function HomeOwner({ onNav }) {
  const urgentCount = 2;
  return (
    <div style={{paddingBottom:100, background:'#f7f7f8', minHeight:'100%'}}>
      {/* Header — dark */}
      <div style={{background:'#0f172a', paddingTop:56, paddingBottom:20, paddingLeft:20, paddingRight:20}}>
        <div style={{fontSize:12,fontWeight:500,color:'rgba(255,255,255,0.38)',marginBottom:3,letterSpacing:'0.02em'}}>Monday, Apr 21</div>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end'}}>
          <div style={{fontSize:28,fontWeight:700,color:'white',letterSpacing:'-0.025em',lineHeight:1.15}}>
            Business<br/>Overview
          </div>
          <div style={{textAlign:'right'}}>
            <div style={{fontSize:11,color:'rgba(255,255,255,0.38)',fontWeight:500,marginBottom:2}}>Today's revenue</div>
            <div style={{fontSize:26,fontWeight:700,color:'#4ade80',letterSpacing:'-0.025em',fontVariantNumeric:'tabular-nums'}}>$4,820</div>
          </div>
        </div>
        {/* Quick stat pills */}
        <div style={{display:'flex',gap:8,marginTop:16}}>
          {[{label:'4 jobs today',color:'rgba(255,255,255,0.10)',text:'rgba(255,255,255,0.7)'},
            {label:'2 in progress',color:'rgba(37,99,235,0.3)',text:'#93c5fd'},
            {label:'2 urgent',color:'rgba(220,38,38,0.3)',text:'#fca5a5'}].map(p=>(
            <div key={p.label} style={{height:26,padding:'0 10px',borderRadius:999,
              background:p.color,color:p.text,fontSize:11,fontWeight:600,
              display:'flex',alignItems:'center',letterSpacing:'0.01em'}}>
              {p.label}
            </div>
          ))}
        </div>
      </div>

      {/* Urgent alert */}
      {urgentCount > 0 && (
        <div onClick={() => onNav('dispatch')}
          style={{margin:'12px 16px 0',background:'#fef2f2',border:'1px solid rgba(220,38,38,0.18)',
            borderRadius:12,padding:'12px 14px',display:'flex',alignItems:'center',gap:10,cursor:'pointer'}}>
          <div style={{width:32,height:32,borderRadius:9,background:'#dc2626',display:'flex',alignItems:'center',
            justifyContent:'center',flexShrink:0,color:'white'}}>
            {Icons.warning}
          </div>
          <div style={{flex:1}}>
            <div style={{fontSize:14,fontWeight:600,color:'#991b1b'}}>2 items need attention</div>
            <div style={{fontSize:12,color:'rgba(153,27,27,0.7)'}}>1 unassigned job · 1 overdue invoice</div>
          </div>
          <div style={{color:'rgba(153,27,27,0.4)'}}>{Icons.chevronR}</div>
        </div>
      )}

      {/* Stats grid */}
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,padding:'14px 16px 0'}}>
        <StatCard label="Open Jobs" value="12" color="#0071e3" bg="#e8f2fd" onTap={() => onNav('jobs')}/>
        <StatCard label="Scheduled Today" value="4" color="#d97706" bg="#fef3e2" sub="2 in progress" onTap={() => onNav('schedule')}/>
        <StatCard label="Unpaid Invoices" value="$8.4k" color="#dc2626" bg="#fef2f2" sub="3 invoices" onTap={() => onNav('invoices')}/>
        <StatCard label="This Week" value="$18.2k" color="#1a9e5c" bg="#e6f7ef" sub="+12% vs last" onTap={() => onNav('reports')}/>
      </div>

      {/* Belle suggestion */}
      <BelleSuggestion
        text="Jake is running late on Steinberg Corp. The client hasn't been notified. Want me to send an update?"
        actions={['Notify client', 'Dismiss']}
        onAction={(a) => { if(a!=='Dismiss') onNav('belle', {prompt:'Update Steinberg Corp about Jake'}); }}
      />

      {/* Team status */}
      <SectionHeader title="Team Today" action="Full view" onAction={() => onNav('team')}/>
      <Card>
        {TODAY_JOBS_OWNER.map((row, i) => (
          <div key={row.id || i}
            onClick={() => onNav('job-detail')}
            style={{padding:'12px 16px',display:'flex',alignItems:'center',gap:12,
              borderBottom: i < TODAY_JOBS_OWNER.length-1 ? '0.5px solid rgba(0,0,0,0.07)' : 'none',
              cursor:'pointer'}}>
            <div style={{width:36,height:36,borderRadius:'50%',background:row.avatarBg,
              display:'flex',alignItems:'center',justifyContent:'center',
              fontSize:12,fontWeight:700,color:row.avatarColor,flexShrink:0}}>
              {row.avatar}
            </div>
            <div style={{flex:1,minWidth:0}}>
              <div style={{fontSize:14,fontWeight:500,color:'#111',letterSpacing:'-0.008em'}}>{row.tech}</div>
              <div style={{fontSize:12,color:'rgba(0,0,0,0.45)',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{row.job}</div>
            </div>
            <Badge status={row.status} small/>
          </div>
        ))}
      </Card>
    </div>
  );
}

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