// Screens 2/2 — Incidents, New Incident, Messages, Chat, Schedule, Settings, Panic
const { Card, Pill, SectionLabel, Button, BottomNav, AppBar, Avatar, Screen } = window;
const { Icon } = window;
const _T2 = () => window.__BD_THEME__ || window.BD_TOKENS.dark;
const _nav = () => window.__BD_NAV__;

// ════════════════════════════════════════════════════════════
// 7. INCIDENTS LIST
// ════════════════════════════════════════════════════════════
function ScreenIncidents() {
  const t = _T2();
  return (
    <>
      <AppBar t={t} title="Incidents"/>
      <Screen t={t}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', padding: '0 4px' }}>
          <div>
            <div style={{ fontSize: 12.5, color: t.text3, fontWeight: 600 }}>This week</div>
            <div style={{ fontSize: 22, fontWeight: 800, color: t.text, letterSpacing: -0.3 }}>12 incidents</div>
          </div>
          <Button t={t} tone="primary" size="md" icon={<Icon.Plus size={16} sw={2.5}/>} onClick={()=>_nav().push('newIncident')}>New</Button>
        </div>

        {/* quiet stacked bar */}
        <div style={{ background:t.surface, border:`1px solid ${t.line}`, borderRadius:12, padding:'12px 14px' }}>
          <div style={{ display:'flex', height:6, borderRadius:999, overflow:'hidden', background:t.surface2 }}>
            <div style={{ flex:5, background:t.danger }}/>
            <div style={{ flex:3, background:t.warn }}/>
            <div style={{ flex:4, background:t.success }}/>
          </div>
          <div style={{ display:'flex', justifyContent:'space-between', marginTop:8, fontSize:11.5, color:t.text3, fontWeight:600 }}>
            <span><b style={{color:t.danger}}>5</b> open</span>
            <span><b style={{color:t.warn}}>3</b> active</span>
            <span><b style={{color:t.success}}>4</b> closed</span>
          </div>
        </div>

        {/* search + filter */}
        <div style={{ display:'flex', gap:8 }}>
          <div style={{ flex:1, display:'flex', alignItems:'center', gap:8, padding:'10px 12px',
            background:t.surface, border:`1px solid ${t.line}`, borderRadius:12 }}>
            <Icon.Search size={16} stroke={t.text3}/>
            <span style={{ fontSize:13, color:t.text3 }}>Search incidents…</span>
          </div>
          <button onClick={()=>_nav().openSheet('incidentsFilter')} style={{ appearance:'none', cursor:'pointer', padding:'10px 14px', borderRadius:12,
            background:t.surface, border:`1px solid ${t.line}`, color:t.text2, fontSize:12.5, fontWeight:700,
            display:'flex', alignItems:'center', gap:6, fontFamily:window.BD_FONT }}>
            <Icon.Filter size={14}/> Filter
          </button>
        </div>

        {/* tabs */}
        <div style={{ display:'flex', gap:6, padding:4, background:t.surface, border:`1px solid ${t.line}`, borderRadius:12 }}>
          {['List','Map','Mine'].map((l,i)=>(
            <div key={l} style={{ flex:1, textAlign:'center', padding:'7px 10px', borderRadius:8,
              background: i===0?t.primary:'transparent', color: i===0?'#fff':t.text2,
              fontSize:12.5, fontWeight:700 }}>{l}</div>
          ))}
        </div>

        {[
          ['Suspicious Activity','#INC-1007','Main Building · North Entrance','open','danger',<Icon.AlertTri size={18}/>,'09:45'],
          ['Vehicle Accident','#INC-1006','Parking Area · Lot B','active','warn',<Icon.Car size={18}/>,'08:30'],
          ['Theft Report','#INC-1005','Storage Room · Building A','open','danger',<Icon.Shield size={18}/>,'May 19'],
          ['Medical Emergency','#INC-1004','Lobby · Building A','active','warn',<Icon.Plus size={18}/>,'May 19'],
          ['Noise Complaint','#INC-1003','Loading Dock','closed','success',<Icon.Speaker size={18}/>,'May 18'],
        ].map(([t1,id,loc,st,tone,icon,when],i)=>(
          <Card key={i} t={t} onClick={()=>_nav().push('incidentDetail',{id})}>
            <div style={{ display:'flex', gap:12, alignItems:'flex-start' }}>
              <div style={{ width:40, height:40, borderRadius:11, background:t[tone+'Soft'], color:t[tone],
                display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>{icon}</div>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:8 }}>
                  <div style={{ fontSize:14.5, fontWeight:700, color:t.text }}>{t1}</div>
                  <Pill tone={tone} t={t} size="sm">{st}</Pill>
                </div>
                <div style={{ fontSize:12, color:t.text3, marginTop:3, display:'flex', gap:8 }}>
                  <span>{id}</span><span>·</span><span style={{flex:1, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{loc}</span>
                </div>
                <div style={{ display:'flex', alignItems:'center', gap:8, marginTop:8 }}>
                  <div style={{ display:'flex' }}>
                    {['JS','MJ','SW'].map((n,j)=>(
                      <div key={j} style={{ width:22, height:22, borderRadius:999,
                        background:t.surface2, border:`2px solid ${t.surface}`, marginLeft: j? -8: 0,
                        fontSize:9, fontWeight:700, color:t.text2,
                        display:'flex', alignItems:'center', justifyContent:'center' }}>{n}</div>
                    ))}
                  </div>
                  <div style={{ fontSize:11.5, color:t.text3, marginLeft:'auto', display:'flex', alignItems:'center', gap:4 }}>
                    <Icon.Clock size={11}/> {when}
                  </div>
                </div>
              </div>
            </div>
          </Card>
        ))}
      </Screen>
      <BottomNav active="more" t={t}/>
    </>
  );
}

// ════════════════════════════════════════════════════════════
// 8. NEW INCIDENT
// ════════════════════════════════════════════════════════════
function ScreenNewIncident() {
  const t = _T2();
  return (
    <>
      <AppBar t={t} title="New Incident" back/>
      <Screen t={t}>
        {/* progress steps */}
        <div style={{ display:'flex', alignItems:'center', gap:6, padding:'0 4px' }}>
          {['Type','Details','Evidence','Review'].map((s,i)=>(
            <React.Fragment key={s}>
              <div style={{ display:'flex', alignItems:'center', gap:6 }}>
                <div style={{
                  width:22, height:22, borderRadius:999,
                  background: i<=1?t.primary:t.surface2, color: i<=1?'#fff':t.text3,
                  border: i<=1?'none':`1px solid ${t.line}`,
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontSize:11, fontWeight:800,
                }}>{i<1?<Icon.Check size={11} sw={3}/>:i+1}</div>
                <span style={{ fontSize:11.5, fontWeight:700, color: i<=1?t.text:t.text3 }}>{s}</span>
              </div>
              {i<3 && <div style={{ flex:1, height:2, background: i<1?t.primary:t.line, borderRadius:999 }}/>}
            </React.Fragment>
          ))}
        </div>

        <SectionLabel t={t}>Severity</SectionLabel>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:6 }}>
          {[
            ['Low','success'],['Medium','warn'],['High','danger',true],['Critical','purple'],
          ].map(([l,tone,active])=>(
            <div key={l} style={{
              padding:'10px 6px', borderRadius:12, textAlign:'center',
              background: active?t[tone+'Soft']:t.surface, color: active?t[tone]:t.text2,
              border:`1px solid ${active?t[tone]:t.line}`,
              fontSize:12, fontWeight:700,
            }}>{l}</div>
          ))}
        </div>

        <SectionLabel t={t}>Category</SectionLabel>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:8 }}>
          {[
            ['Suspicious','danger',<Icon.AlertTri size={18}/>],
            ['Theft','warn',<Icon.Shield size={18}/>],
            ['Vehicle','primary',<Icon.Car size={18}/>],
            ['Medical','pink',<Icon.Plus size={18}/>,true],
            ['Trespass','purple',<Icon.Lock size={18}/>],
            ['Other','muted',<Icon.More size={18}/>],
          ].map(([l,tone,icon,active],i)=>(
            <div key={i} style={{
              padding:'12px 8px', borderRadius:12, textAlign:'center',
              background: active?t[tone+'Soft']:t.surface,
              border:`1px solid ${active?t[tone]:t.line}`,
              color: active?t[tone]:t.text2,
            }}>
              <div style={{ display:'flex', justifyContent:'center', marginBottom:4 }}>{icon}</div>
              <div style={{ fontSize:11.5, fontWeight:700 }}>{l}</div>
            </div>
          ))}
        </div>

        <SectionLabel t={t}>Location</SectionLabel>
        <Card t={t}>
          <div style={{ display:'flex', alignItems:'center', gap:10 }}>
            <div style={{ width:38, height:38, borderRadius:10, background:t.primarySoft, color:t.primary,
              display:'flex', alignItems:'center', justifyContent:'center' }}><Icon.Pin size={18}/></div>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:13.5, fontWeight:700, color:t.text }}>Lobby · Building A</div>
              <div style={{ fontSize:11.5, color:t.text3 }}>40.7128° N, 74.0060° W · auto-detected</div>
            </div>
            <Button t={t} tone="ghost" size="md">Change</Button>
          </div>
        </Card>

        <SectionLabel t={t}>Evidence</SectionLabel>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:8 }}>
          <EvidenceTile t={t} icon={<Icon.Camera size={20}/>} label="Photo" tone="purple" count={2}/>
          <EvidenceTile t={t} icon={<Icon.Video size={20}/>}  label="Video" tone="primary"/>
          <EvidenceTile t={t} icon={<Icon.Mic size={20}/>}    label="Voice" tone="teal" count={1}/>
        </div>

        <SectionLabel t={t}>Description</SectionLabel>
        <Card t={t} style={{ minHeight: 90, padding: 14 }}>
          <div style={{ fontSize:13.5, color:t.text2, lineHeight:1.5 }}>
            Suspicious individual loitering near the loading dock for &gt;10 min, attempting to look through windows…
          </div>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:10 }}>
            <div style={{ display:'flex', gap:6 }}>
              <Pill tone="primary" t={t} size="sm"><Icon.Mic size={11}/> Dictate</Pill>
              <Pill tone="purple" t={t} size="sm">AI assist</Pill>
            </div>
            <span style={{ fontSize:11, color:t.text3 }}>112 / 1000</span>
          </div>
        </Card>

        <Button t={t} tone="primary" full size="lg" onClick={()=>{ _nav().popTo('incidents'); _nav().showToast('Incident submitted','success'); }}>Continue to review</Button>
      </Screen>
      <BottomNav active="more" t={t}/>
    </>
  );
}

function EvidenceTile({ t, icon, label, tone, count }) {
  const c = t[tone];
  return (
    <div style={{ position:'relative', padding:'14px 8px', borderRadius:12,
      background: t[tone+'Soft'], border:`1px dashed ${c}66`, color:c, textAlign:'center' }}>
      <div style={{ display:'flex', justifyContent:'center', marginBottom:4 }}>{icon}</div>
      <div style={{ fontSize:12, fontWeight:700 }}>{label}</div>
      {count != null && (
        <span style={{ position:'absolute', top:6, right:6, minWidth:18, height:18, padding:'0 5px',
          borderRadius:999, background:c, color:'#fff', fontSize:10.5, fontWeight:800,
          display:'flex', alignItems:'center', justifyContent:'center' }}>{count}</span>
      )}
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// 9. MESSAGES list
// ════════════════════════════════════════════════════════════
function ScreenMessages() {
  const t = _T2();
  return (
    <>
      <AppBar t={t} title="Messages"/>
      <Screen t={t}>
        <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', padding:'0 4px' }}>
          <div>
            <div style={{ fontSize:13, color:t.text3, fontWeight:600 }}>3 unread</div>
            <div style={{ fontSize:22, fontWeight:800, color:t.text, letterSpacing:-0.3 }}>Inbox</div>
          </div>
          <Button t={t} tone="primary" size="md" icon={<Icon.Plus size={16} sw={2.5}/>} onClick={()=>_nav().push('broadcast')}>New</Button>
        </div>

        <div onClick={()=>_nav().push('search')} style={{ display:'flex', alignItems:'center', gap:8, padding:'10px 12px',
          background:t.surface, border:`1px solid ${t.line}`, borderRadius:12, cursor:'pointer' }}>
          <Icon.Search size={16} stroke={t.text3}/>
          <span style={{ fontSize:13, color:t.text3 }}>Search messages…</span>
        </div>

        <div style={{ display:'flex', gap:6, padding:4, background:t.surface, border:`1px solid ${t.line}`, borderRadius:12 }}>
          {[['All',true],['Unread',false,2],['Channels',false],['Direct',false]].map(([l,on,b],i)=>(
            <div key={i} style={{ flex:1, textAlign:'center', padding:'7px 8px', borderRadius:8,
              background: on?t.primary:'transparent', color:on?'#fff':t.text2,
              fontSize:12, fontWeight:700, position:'relative' }}>
              {l}{b!=null && <span style={{ marginLeft:6, fontSize:10, padding:'1px 5px',
                borderRadius:999, background: on?'#ffffff33':t.dangerSoft, color: on?'#fff':t.danger }}>{b}</span>}
            </div>
          ))}
        </div>

        {[
          ['Team Channel','Shift starting in 10 minutes.','9:30 AM','primary',<Icon.Users size={18}/>,2,true],
          ['Mike Johnson','Can you cover the north gate?','9:15 AM','muted','MJ',1],
          ['Sarah Williams','North entrance is clear.','8:45 AM','muted','SW'],
          ['Dispatch Center','Incident #INC-1007 updated.','8:30 AM','purple',<Icon.Headset size={18}/>],
          ['David Brown','On my way.','7:50 AM','muted','DB'],
          ['System Alerts','Scheduled maintenance tonight at 23:00…','Yesterday','warn',<Icon.Bell size={18}/>],
        ].map(([name,msg,when,tone,avatar,unread,channel],i)=>(
          <div key={i} onClick={()=>_nav().push('chat',{name})} style={{ cursor:'pointer',
            display:'flex', gap:12, alignItems:'center', padding:'12px 4px',
            borderBottom: i===5?'none':`1px solid ${t.line}`,
          }}>
            {typeof avatar === 'string' ? (
              <Avatar size={42} name={avatar} tone={tone==='muted'?'primary':tone} t={t}/>
            ) : (
              <div style={{ width:42, height:42, borderRadius:999, background:t[tone+'Soft'], color:t[tone],
                display:'flex', alignItems:'center', justifyContent:'center' }}>{avatar}</div>
            )}
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', gap:6 }}>
                <div style={{ fontSize:14, fontWeight:unread?800:700, color:t.text, display:'flex', alignItems:'center', gap:6 }}>
                  {name}
                  {channel && <Pill tone="primary" t={t} size="sm">Channel</Pill>}
                </div>
                <div style={{ fontSize:11, color:unread?t.primary:t.text3, fontWeight:700 }}>{when}</div>
              </div>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginTop:2, gap:6 }}>
                <div style={{ fontSize:12.5, color:unread?t.text2:t.text3, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', flex:1 }}>{msg}</div>
                {unread && (
                  <span style={{ minWidth:18, height:18, padding:'0 5px', borderRadius:999,
                    background:t.primary, color:'#fff', fontSize:10.5, fontWeight:800,
                    display:'flex', alignItems:'center', justifyContent:'center' }}>{unread}</span>
                )}
              </div>
            </div>
          </div>
        ))}
      </Screen>
      <BottomNav active="more" t={t}/>
    </>
  );
}

// ════════════════════════════════════════════════════════════
// 10. CHAT THREAD
// ════════════════════════════════════════════════════════════
function ScreenChat() {
  const t = _T2();
  return (
    <>
      {/* custom header */}
      <div style={{ padding:'54px 16px 12px', display:'flex', alignItems:'center', gap:10,
        borderBottom:`1px solid ${t.line}`, background:t.bg2 }}>
        <button onClick={()=>_nav().pop()} style={{ appearance:'none', border:`1px solid ${t.line}`, background:t.surface,
          width:36, height:36, borderRadius:12, display:'flex', alignItems:'center', justifyContent:'center',
          color:t.text, cursor:'pointer' }}><Icon.ArrowL size={18}/></button>
        <div style={{ width:38, height:38, borderRadius:999, background:t.primarySoft, color:t.primary,
          display:'flex', alignItems:'center', justifyContent:'center' }}><Icon.Users size={18}/></div>
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontSize:15, fontWeight:700, color:t.text }}>Team Channel</div>
          <div style={{ fontSize:11.5, color:t.text3, display:'flex', alignItems:'center', gap:5 }}>
            <span style={{ width:6, height:6, borderRadius:999, background:t.success }}/>
            8 members · 3 active
          </div>
        </div>
        <button style={{ appearance:'none', border:`1px solid ${t.line}`, background:t.surface,
          width:36, height:36, borderRadius:12, display:'flex', alignItems:'center', justifyContent:'center',
          color:t.text, cursor:'pointer' }}><Icon.More size={18}/></button>
      </div>

      <div style={{ flex:1, overflow:'auto', padding:'14px 16px 100px', display:'flex', flexDirection:'column', gap:12 }}>
        <div style={{ alignSelf:'center', fontSize:11, color:t.text3, fontWeight:700, padding:'4px 10px',
          background:t.surface, border:`1px solid ${t.line}`, borderRadius:999 }}>Today</div>

        <Bubble t={t} who="Mike Johnson" name="MJ" tone="primary" time="9:00 AM"
          msg="Good morning team. Please check in when you're on duty."/>
        <Bubble t={t} who="Sarah Williams" name="SW" tone="purple" time="9:05 AM"
          msg="North entrance is clear."/>
        <Bubble t={t} self time="9:10 AM" msg="I'll take the south parking area."/>
        <Bubble t={t} who="Mike Johnson" name="MJ" tone="primary" time="9:12 AM"
          msg="Copy that. Stay safe everyone." />
        <Bubble t={t} who="Dispatch" tone="purple" pillIcon={<Icon.Headset size={14}/>} time="9:30 AM"
          msg="Shift starting in 10 minutes. All units, please be ready." pinned/>
        <Bubble t={t} self time="9:31 AM" msg="On post. North-east sector." status="read"/>
        <div style={{ alignSelf:'flex-start', display:'flex', alignItems:'center', gap:8, fontSize:11, color:t.text3 }}>
          <div style={{ display:'flex', gap:3 }}>
            {[0,1,2].map(i=> <span key={i} style={{ width:4, height:4, borderRadius:999, background:t.text3 }}/>)}
          </div>
          Mike is typing…
        </div>
      </div>

      {/* composer */}
      <div style={{ position:'absolute', left:0, right:0, bottom:0, padding:'10px 12px 28px',
        background:t.bg2, borderTop:`1px solid ${t.line}` }}>
        <div style={{ display:'flex', alignItems:'center', gap:8 }}>
          <button onClick={()=>_nav().push('ptt')} style={{ appearance:'none', cursor:'pointer', width:38, height:38, borderRadius:12,
            background:t.surface, border:`1px solid ${t.line}`, color:t.text2,
            display:'flex', alignItems:'center', justifyContent:'center' }}><Icon.Plus size={18}/></button>
          <div style={{ flex:1, display:'flex', alignItems:'center', gap:8, padding:'10px 14px',
            background:t.surface, border:`1px solid ${t.line}`, borderRadius:999 }}>
            <span style={{ flex:1, fontSize:13, color:t.text3 }}>Type a message…</span>
            <Icon.Mic size={16} stroke={t.text2}/>
          </div>
          <button onClick={()=>_nav().showToast('Message sent','success')} style={{ appearance:'none', cursor:'pointer', width:38, height:38, borderRadius:12,
            background:t.primary, color:'#fff', border:'none',
            display:'flex', alignItems:'center', justifyContent:'center' }}><Icon.Send size={16} sw={2.2}/></button>
        </div>
      </div>
    </>
  );
}

function Bubble({ t, who, name, tone='primary', time, msg, self, status, pinned, pillIcon }) {
  if (self) {
    return (
      <div style={{ alignSelf:'flex-end', maxWidth:'78%' }}>
        <div style={{ background:t.primary, color:'#fff', padding:'9px 13px', borderRadius:'16px 16px 4px 16px',
          fontSize:13.5, lineHeight:1.4 }}>{msg}</div>
        <div style={{ fontSize:10.5, color:t.text3, marginTop:3, textAlign:'right', display:'flex', justifyContent:'flex-end', alignItems:'center', gap:4 }}>
          {time}{status==='read' && <Icon.CheckDouble size={12} stroke={t.primary}/>}
        </div>
      </div>
    );
  }
  return (
    <div style={{ alignSelf:'flex-start', maxWidth:'82%', display:'flex', gap:8 }}>
      {name ? <Avatar size={28} name={name} tone={tone} t={t}/> :
        <div style={{ width:28, height:28, borderRadius:999, background:t[tone+'Soft'], color:t[tone],
          display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>{pillIcon}</div>}
      <div>
        <div style={{ display:'flex', alignItems:'center', gap:6, marginBottom:3 }}>
          <span style={{ fontSize:11.5, fontWeight:700, color:t[tone] }}>{who}</span>
          <span style={{ fontSize:10.5, color:t.text3 }}>{time}</span>
          {pinned && <Pill tone="warn" t={t} size="sm"><Icon.Pin size={9}/> Pinned</Pill>}
        </div>
        <div style={{ background:t.surface, border:`1px solid ${t.line}`, color:t.text,
          padding:'9px 13px', borderRadius:'4px 16px 16px 16px', fontSize:13.5, lineHeight:1.4 }}>{msg}</div>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// 11. SCHEDULE
// ════════════════════════════════════════════════════════════
function ScreenSchedule() {
  const t = _T2();
  const days = [
    ['Sun','18','off'],['Mon','19','day'],['Tue','20','day','today'],['Wed','21','eve'],
    ['Thu','22','day'],['Fri','23','off'],['Sat','24','day'],
  ];
  return (
    <>
      <AppBar t={t} title="Schedule"/>
      <Screen t={t}>
        <div style={{ padding:'0 4px', display:'flex', justifyContent:'space-between', alignItems:'flex-end' }}>
          <div>
            <div style={{ fontSize:13, color:t.text3, fontWeight:600 }}>This week</div>
            <div style={{ fontSize:22, fontWeight:800, color:t.text, letterSpacing:-0.3 }}>40h scheduled</div>
          </div>
          <Pill tone="primary" t={t}>May 18 — 24</Pill>
        </div>

        {/* week strip */}
        <div style={{ display:'grid', gridTemplateColumns:'repeat(7,1fr)', gap:6 }}>
          {days.map(([d,n,k,today],i)=>{
            const tone = k==='day'?'success':k==='eve'?'purple':'muted';
            return (
              <div key={i} style={{
                background: today ? t.primarySoft : t.surface,
                border:`1px solid ${today?t.primary:t.line}`,
                borderRadius:12, padding:'8px 4px', textAlign:'center',
              }}>
                <div style={{ fontSize:10.5, color:t.text3, fontWeight:700, textTransform:'uppercase' }}>{d}</div>
                <div style={{ fontSize:16, fontWeight:800, color:today?t.primary:t.text, marginTop:2 }}>{n}</div>
                <div style={{ width:6, height:6, borderRadius:999, background: t[tone] || t.text3,
                  margin:'6px auto 0' }}/>
              </div>
            );
          })}
        </div>

        <SectionLabel t={t}>Today · Tue, May 20</SectionLabel>
        <Card t={t} onClick={()=>_nav().push('calendarDay',{date:'2026-05-20'})}>
          <div style={{ display:'flex', alignItems:'center', gap:12 }}>
            <div style={{ textAlign:'center' }}>
              <div style={{ fontSize:11, color:t.text3, fontWeight:700, letterSpacing:0.4, textTransform:'uppercase' }}>Day Shift</div>
              <div style={{ fontSize:18, fontWeight:800, color:t.text, marginTop:2 }}>08:00</div>
              <div style={{ fontSize:11.5, color:t.text3 }}>16:00</div>
            </div>
            <div style={{ width:1, alignSelf:'stretch', background:t.line }}/>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:14.5, fontWeight:700, color:t.text }}>Main Building Patrol</div>
              <div style={{ fontSize:11.5, color:t.text3, marginTop:2, display:'flex', alignItems:'center', gap:5 }}>
                <Icon.Pin size={12}/> 123 Security Blvd
              </div>
              <div style={{ display:'flex', gap:6, marginTop:8 }}>
                <Pill tone="success" t={t} size="sm">8h 0m</Pill>
                <Pill tone="primary" t={t} size="sm">Confirmed</Pill>
              </div>
            </div>
          </div>
        </Card>

        <SectionLabel t={t}>This week summary</SectionLabel>
        <Card t={t} pad={0}>
          {[
            ['Scheduled','40h','5 shifts'],
            ['Worked','32h','4 completed'],
            ['Overtime','0h','within policy'],
          ].map(([k,v,sub],i,a)=>(
            <div key={i} style={{ display:'flex', alignItems:'center', padding:'12px 14px',
              borderBottom: i===a.length-1?'none':`1px solid ${t.line}` }}>
              <div style={{ flex:1, fontSize:13.5, fontWeight:600, color:t.text2 }}>{k}</div>
              <div style={{ fontSize:15, fontWeight:800, color:t.text, letterSpacing:-0.2, marginRight:10 }}>{v}</div>
              <div style={{ fontSize:11.5, color:t.text3, width:90, textAlign:'right' }}>{sub}</div>
            </div>
          ))}
        </Card>

        <SectionLabel t={t} action="View all">Time off</SectionLabel>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8 }}>
          {[
            ['PTO','24h 0m','24h available','primary'],
            ['Sick','16h 0m','24h accrued','danger'],
            ['Vacation','40h 0m','48h accrued','purple'],
            ['Comp','6h 0m','earned YTD','gold'],
          ].map(([l,v,sub,tone],i)=>(
            <div key={i} style={{ background:t.surface, border:`1px solid ${t.line}`, borderRadius:12, padding:12 }}>
              <div style={{ fontSize:11, color:t[tone], fontWeight:800, letterSpacing:0.4, textTransform:'uppercase' }}>{l}</div>
              <div style={{ fontSize:18, fontWeight:800, color:t.text, marginTop:4 }}>{v}</div>
              <div style={{ fontSize:11, color:t.text3, marginTop:1 }}>{sub}</div>
            </div>
          ))}
        </div>

        <Button t={t} tone="ghost" full size="md" icon={<Icon.Plus size={16}/>} onClick={()=>_nav().openSheet('timeOff')}>Request time off</Button>
      </Screen>
      <BottomNav active="more" t={t}/>
    </>
  );
}

// ════════════════════════════════════════════════════════════
// 12. PROFILE & SETTINGS
// ════════════════════════════════════════════════════════════
function ScreenSettings({ role='guard' }) {
  const t = _T2();
  return (
    <>
      <AppBar t={t} title="Profile"/>
      <Screen t={t}>
        {/* hero */}
        <Card t={t} pad={0} style={{ overflow:'hidden', position:'relative' }}>
          <div style={{ height:80, background: `linear-gradient(135deg, ${t.primary}, ${t.purple})`,
            position:'relative' }}>
            <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position:'absolute', inset:0, width:'100%', height:'100%', opacity:0.15 }}>
              <defs><pattern id="dots" width="6" height="6" patternUnits="userSpaceOnUse"><circle cx="3" cy="3" r="0.6" fill="#fff"/></pattern></defs>
              <rect width="100" height="100" fill="url(#dots)"/>
            </svg>
          </div>
          <div style={{ padding:'0 16px 16px', marginTop:-30 }}>
            <Avatar size={64} name="JS" tone="gold" online t={t}/>
            <div style={{ marginTop:8, display:'flex', justifyContent:'space-between', alignItems:'flex-end' }}>
              <div>
                <div style={{ fontSize:18, fontWeight:800, color:t.text }}>John Smith</div>
                <div style={{ fontSize:12.5, color:t.text3 }}>Security Guard · ID SG-1024</div>
                <div style={{ display:'flex', gap:6, marginTop:6 }}>
                  <Pill tone="success" t={t} size="sm">On Duty</Pill>
                  <Pill tone="primary" t={t} size="sm">{role === 'supervisor' ? 'Supervisor' : 'Guard'}</Pill>
                </div>
              </div>
              <Button t={t} tone="soft" size="md" icon={<Icon.Edit size={14}/>} onClick={()=>_nav().push('profileSetup')}>Edit</Button>
            </div>
          </div>
        </Card>

        {/* career stats — quiet inline strip, no colored tiles */}
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-around', padding:'10px 4px',
          background:t.surface, border:`1px solid ${t.line}`, borderRadius:12 }}>
          {[['468','Patrols'],['98%','On time'],['4.9★','Rating']].map(([n,l],i,a)=>(
            <React.Fragment key={i}>
              <div style={{ textAlign:'center' }}>
                <div style={{ fontSize:18, fontWeight:800, color:t.text, letterSpacing:-0.3 }}>{n}</div>
                <div style={{ fontSize:10.5, color:t.text3, fontWeight:700, textTransform:'uppercase', letterSpacing:0.4, marginTop:2 }}>{l}</div>
              </div>
              {i<a.length-1 && <div style={{ width:1, height:32, background:t.line }}/>}
            </React.Fragment>
          ))}
        </div>

        <SectionLabel t={t}>Account</SectionLabel>
        <SettingsGroup t={t} rows={[
          [<Icon.User size={18}/>,'Personal info','primary'],
          [<Icon.Shield size={18}/>,'Certifications & licenses','success','3 active'],
          [<Icon.Phone size={18}/>,'Emergency contact','warn'],
          [<Icon.Lock size={18}/>,'Security & passcode','danger'],
        ]}/>

        <SectionLabel t={t}>Preferences</SectionLabel>
        <SettingsGroup t={t} rows={[
          [<Icon.Sun size={18}/>,'Appearance','gold','System'],
          [<Icon.Bell size={18}/>,'Notifications','purple'],
          [<Icon.Globe size={18}/>,'Language & timezone','teal','English · UTC−5'],
          [<Icon.Eye size={18}/>,'Density','primary','Medium'],
        ]}/>

        <SectionLabel t={t}>Work</SectionLabel>
        <SettingsGroup t={t} rows={[
          [<Icon.Briefcase size={18}/>,'My posts & sites','primary','3 sites'],
          [<Icon.Cal size={18}/>,'Availability','success'],
          [<Icon.Doc size={18}/>,'Pay stubs & timesheets','warn'],
        ]}/>

        <SectionLabel t={t}>Support</SectionLabel>
        <SettingsGroup t={t} rows={[
          [<Icon.Info size={18}/>,'Help center','muted'],
          [<Icon.Headset size={18}/>,'Contact dispatch','purple'],
          [<Icon.Star size={18}/>,'Send feedback','gold'],
        ]}/>

        <Button t={t} tone="ghost" full size="md" icon={<Icon.Logout size={16}/>} onClick={()=>_nav().reset('login')}>Sign out</Button>
        <div style={{ textAlign:'center', fontSize:10.5, color:t.text3, marginTop:4 }}>ByDuty v3.0.1 · Built May 2026</div>
      </Screen>
      <BottomNav active="more" t={t}/>
    </>
  );
}

function SettingsGroup({ t, rows }) {
  const navTargets = {
    'Personal info':'profileSetup','Certifications & licenses':null,'Emergency contact':null,'Security & passcode':'reset',
    'Appearance':null,'Notifications':'notifications','Language & timezone':null,'Density':null,
    'My posts & sites':'sites','Availability':'schedule','Pay stubs & timesheets':'reports',
    'Help center':'help','Contact dispatch':null,'Send feedback':null,
  };
  return (
    <Card t={t} pad={0}>
      {rows.map(([icon,label,tone,sub],i)=>(
        <div key={i} onClick={()=>{ const tgt=navTargets[label]; if (tgt) _nav().push(tgt); else if (label==='Contact dispatch') _nav().openSheet('contactSupport'); else if (label==='Density') _nav().openSheet('density'); else _nav().showToast(label+' — coming soon','muted'); }} style={{
          display:'flex', alignItems:'center', gap:12, padding:'13px 14px', cursor:'pointer',
          borderBottom: i===rows.length-1?'none':`1px solid ${t.line}`,
        }}>
          <div style={{ width:32, height:32, borderRadius:9, background:t[tone+'Soft']||t.line, color:t[tone]||t.text2,
            display:'flex', alignItems:'center', justifyContent:'center' }}>{icon}</div>
          <div style={{ flex:1, fontSize:14, fontWeight:600, color:t.text }}>{label}</div>
          {sub && <div style={{ fontSize:12, color:t.text3 }}>{sub}</div>}
          <Icon.Chev size={14} stroke={t.text3}/>
        </div>
      ))}
    </Card>
  );
}

// ════════════════════════════════════════════════════════════
// 13. PANIC — countdown overlay
// ════════════════════════════════════════════════════════════
function ScreenPanic() {
  const t = _T2();
  return (
    <div style={{
      flex:1, position:'relative', overflow:'hidden',
      background: `radial-gradient(120% 80% at 50% 20%, ${t.danger}55, ${t.bg} 70%)`,
    }}>
      {/* pulse rings */}
      <svg viewBox="0 0 390 600" style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}>
        {[1,2,3].map(i=>(
          <circle key={i} cx={195} cy={300} r={70+i*55} fill="none" stroke={t.danger} strokeOpacity={0.18 - i*0.04} strokeWidth={2}/>
        ))}
      </svg>

      <AppBar t={t} title="Emergency" back/>

      <div style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
        padding:'0 24px', position:'relative', zIndex:2, gap:24 }}>
        {/* ring with countdown */}
        <div style={{ position:'relative', width:240, height:240 }}>
          <svg viewBox="0 0 240 240" width="240" height="240">
            <circle cx="120" cy="120" r="108" fill="none" stroke={t.surface} strokeWidth="6"/>
            <circle cx="120" cy="120" r="108" fill="none" stroke={t.danger} strokeWidth="6"
              strokeDasharray={`${2*Math.PI*108*0.6} 999`} strokeLinecap="round"
              transform="rotate(-90 120 120)"/>
          </svg>
          <div style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center' }}>
            <div style={{ fontSize:14, color:t.danger, fontWeight:800, letterSpacing:1.2, textTransform:'uppercase' }}>Sending alert</div>
            <div style={{ fontSize:80, fontWeight:800, color:t.text, lineHeight:1, marginTop:8, letterSpacing:-3,
              fontFamily:'"SF Mono","JetBrains Mono",ui-monospace,monospace' }}>2</div>
            <div style={{ fontSize:12, color:t.text3, marginTop:8 }}>Hold to confirm</div>
          </div>
          {/* outer pulse */}
          <div style={{ position:'absolute', inset:-10, borderRadius:999, border:`2px solid ${t.danger}55` }}/>
        </div>

        <div style={{ textAlign:'center' }}>
          <div style={{ fontSize:22, fontWeight:800, color:t.text, letterSpacing:-0.4 }}>Panic alert in progress</div>
          <div style={{ fontSize:13.5, color:t.text2, marginTop:6, lineHeight:1.5 }}>
            Live location, audio recording, and incident draft will be sent to dispatch.
          </div>
        </div>

        {/* what happens next */}
        <div style={{ width:'100%', display:'flex', flexDirection:'column', gap:8 }}>
          {[
            [<Icon.Pin size={16}/>, 'Live location streaming', 'primary'],
            [<Icon.Mic size={16}/>, 'Audio recording started',   'purple'],
            [<Icon.Headset size={16}/>, 'Dispatch supervisor notified', 'warn'],
            [<Icon.Phone size={16}/>, 'Auto-dial 911 in 30s',     'danger'],
          ].map(([icon,label,tone],i)=>(
            <div key={i} style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 12px',
              background:t.surface, border:`1px solid ${t.line}`, borderRadius:12 }}>
              <div style={{ width:28, height:28, borderRadius:8, background:t[tone+'Soft'], color:t[tone],
                display:'flex', alignItems:'center', justifyContent:'center' }}>{icon}</div>
              <div style={{ flex:1, fontSize:13, fontWeight:600, color:t.text }}>{label}</div>
              <Icon.Check size={14} stroke={t.success} sw={3}/>
            </div>
          ))}
        </div>

        {/* cancel */}
        <Button t={t} tone="ghost" full size="lg" onClick={()=>{ _nav().pop(); _nav().showToast('Panic cancelled','muted'); }}>Cancel — false alarm</Button>
      </div>
    </div>
  );
}

Object.assign(window, {
  ScreenIncidents, ScreenNewIncident, ScreenMessages, ScreenChat, ScreenSchedule, ScreenSettings, ScreenPanic,
});