// ByDuty Guard — Screens Registry
// Maps router names → React components (existing + new), and patches
// AppBar / BottomNav to wire their default buttons to nav actions.

(function () {
  const origAppBar = window.AppBar;
  const origBottomNav = window.BottomNav;

  // Patched AppBar: back button pops; bell opens notifications
  window.AppBar = function PatchedAppBar(props) {
    const nav = window.__BD_NAV__;
    const onBack = props.onBack || (() => nav && nav.pop());
    const onBell = props.onBell || (() => nav && nav.push('notifications'));
    return React.createElement(BDPatchedAppBar, { ...props, onBack, onBell });
  };

  function BDPatchedAppBar({ title, back, bell = true, badge = 3, right, onBack, onBell, t }) {
    const tt = t || (window.__BD_THEME__ || window.BD_TOKENS.dark);
    const I = window.Icon;
    return (
      <div style={{
        display:'flex', alignItems:'center', justifyContent:'space-between',
        padding:'54px 18px 12px', gap:12, flexShrink:0,
      }}>
        <div style={{ display:'flex', alignItems:'center', gap:10, minWidth:0 }}>
          {back ? (
            <button onClick={onBack} style={{ appearance:'none', border:`1px solid ${tt.line}`, background:tt.surface,
              width:36, height:36, borderRadius:12, display:'flex', alignItems:'center', justifyContent:'center',
              color:tt.text, cursor:'pointer' }}><I.ArrowL size={18} sw={2}/></button>
          ) : (
            <window.BDLogo size={32}/>
          )}
          {title ? (
            <div style={{ fontSize:17, fontWeight:700, color:tt.text }}>{title}</div>
          ) : (
            <div style={{ fontSize:17, fontWeight:800, letterSpacing:0.2, color:tt.text }}>ByDuty</div>
          )}
        </div>
        <div style={{ display:'flex', alignItems:'center', gap:8 }}>
          {right}
          {bell && (
            <div style={{ position:'relative' }}>
              <button onClick={onBell} style={{ appearance:'none', border:`1px solid ${tt.line}`, background:tt.surface,
                width:36, height:36, borderRadius:12, display:'flex', alignItems:'center', justifyContent:'center',
                color:tt.text, cursor:'pointer' }}>
                <I.Bell size={18} sw={2}/>
              </button>
              {!!badge && (
                <span style={{ position:'absolute', top:-4, right:-4, minWidth:18, height:18, padding:'0 5px', borderRadius:999,
                  background:tt.danger, color:'#fff', fontSize:10.5, fontWeight:700,
                  display:'flex', alignItems:'center', justifyContent:'center', border:`2px solid ${tt.bg}` }}>{badge}</span>
              )}
            </div>
          )}
        </div>
      </div>
    );
  }

  // Patched BottomNav — auto onChange via nav.tab
  window.BottomNav = function PatchedBottomNav(props) {
    const nav = window.__BD_NAV__;
    const onChange = props.onChange || ((k) => {
      if (!nav) return;
      const map = { home:'home', patrol:'patrol', scan:'scan', reports:'reports', more:'more' };
      nav.tab(map[k] || 'home');
    });
    return React.createElement(origBottomNav, { ...props, onChange });
  };

  // ────────────────────────────────────────────────────────────
  // Screen wrappers — adapt existing components to the router
  // ────────────────────────────────────────────────────────────
  const useNav = () => window.Nav.useNav();
  const useTweaks = () => window.__BD_TWEAKS__ || { density:'medium', dark:true, role:'guard' };

  function W_Home() {
    const tw = useTweaks();
    return <window.ScreenHome density={tw.density} dark={tw.dark}/>;
  }
  function W_TimeClock() { return <window.ScreenTimeClock dark={useTweaks().dark}/>; }
  function W_Break() { return <window.ScreenBreak dark={useTweaks().dark}/>; }
  function W_PatrolList() { return <window.ScreenPatrolList dark={useTweaks().dark}/>; }
  function W_ActivePatrol() { return <window.ScreenActivePatrol dark={useTweaks().dark}/>; }
  function W_Scan() { return <window.ScreenScan dark={useTweaks().dark}/>; }
  function W_Incidents() { return <window.ScreenIncidents/>; }
  function W_NewIncident() { return <window.ScreenNewIncident/>; }
  function W_Messages() { return <window.ScreenMessages/>; }
  function W_Chat() { return <window.ScreenChat/>; }
  function W_Schedule() { return <window.ScreenSchedule/>; }
  function W_Settings() {
    const tw = useTweaks();
    return <window.ScreenSettings role={tw.role}/>;
  }
  function W_Panic() { return <window.ScreenPanic/>; }
  function W_Login() { return <window.ScreenLogin/>; }
  function W_Permissions() { return <window.ScreenPermissions/>; }
  function W_Notifications() { return <window.ScreenNotifications/>; }
  function W_DAREditor() { return <window.ScreenDAREditor/>; }
  function W_Reports() { return <window.ScreenReports/>; }
  function W_IncidentDetail({ id }) { return <window.ScreenIncidentDetail id={id}/>; }
  function W_TeamMap() { return <window.ScreenTeamMap/>; }
  function W_Approvals() { return <window.ScreenApprovals/>; }
  function W_SiteDetail({ id }) { return <window.ScreenSiteDetail id={id}/>; }
  function W_VisitorLog() { return <window.ScreenVisitorLog/>; }
  function W_ShiftSwap() { return <window.ScreenShiftSwap/>; }

  // Sites list (lightweight)
  function ScreenSitesList() {
    const t = window.__BD_THEME__ || window.BD_TOKENS.dark;
    const nav = useNav();
    const sites = window.Store.useStore(s => s.sites);
    return (
      <>
        <window.AppBar t={t} title="Sites" back/>
        <window.Screen t={t}>
          <div style={{ padding:'0 4px' }}>
            <div style={{ fontSize:13, color:t.text3, fontWeight:600 }}>{sites.length} sites</div>
            <div style={{ fontSize:22, fontWeight:800, color:t.text, letterSpacing:-0.3 }}>Your assignments</div>
          </div>
          {sites.map(s => (
            <div key={s.id} onClick={()=>nav.push('siteDetail',{id:s.id})} style={{
              display:'flex', alignItems:'center', gap:12, padding:14,
              background:t.surface, border:`1px solid ${t.line}`, borderRadius:14, cursor:'pointer'
            }}>
              <div style={{ width:42, height:42, borderRadius:11, background:t.primarySoft, color:t.primary,
                display:'flex', alignItems:'center', justifyContent:'center' }}><window.Icon.Building size={20}/></div>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ fontSize:14.5, fontWeight:700, color:t.text }}>{s.name}</div>
                <div style={{ fontSize:11.5, color:t.text3, marginTop:2 }}>{s.address}</div>
              </div>
              {s.openIncidents > 0 && (
                <div style={{ padding:'4px 8px', borderRadius:999, background:t.dangerSoft, color:t.danger,
                  fontSize:11, fontWeight:700 }}>{s.openIncidents} open</div>
              )}
              <window.Icon.Chev size={14} stroke={t.text3}/>
            </div>
          ))}
        </window.Screen>
        <window.BottomNav active="more" t={t}/>
      </>
    );
  }

  // "More" tab landing — list of secondary destinations
  function ScreenMore() {
    const t = window.__BD_THEME__ || window.BD_TOKENS.dark;
    const nav = useNav();
    const tw = useTweaks();
    const items = [
      ['Schedule','schedule','primary',<window.Icon.Cal size={18}/>],
      ['Calendar','calendar','primary',<window.Icon.Cal size={18}/>],
      ['Messages','messages','teal',<window.Icon.Chat size={18}/>],
      ['Notifications','notifications','warn',<window.Icon.Bell size={18}/>],
      ['Sites','sites','purple',<window.Icon.Building size={18}/>],
      ['Visitor Log','visitorLog','success',<window.Icon.Users size={18}/>],
      ['Vehicle Log','vehicleLog','primary',<window.Icon.Truck size={18}/>],
      ['Equipment','equipment','purple',<window.Icon.Camera size={18}/>],
      ['Search','search','muted',<window.Icon.Search size={18}/>],
      ['Profile & Settings','settings','muted',<window.Icon.User size={18}/>],
    ];
    if (tw.role==='supervisor') {
      items.unshift(
        ['Live Team Map','teamMap','danger',<window.Icon.Map size={18}/>],
        ['Approvals','approvals','warn',<window.Icon.ClipChk size={18}/>],
        ['Broadcast','broadcast','primary',<window.Icon.Send size={18}/>],
      );
    }
    return (
      <>
        <window.AppBar t={t} title="More"/>
        <window.Screen t={t}>
          {items.map(([label,name,tone,icon],i)=>(
            <div key={name} onClick={()=>nav.push(name)} style={{
              display:'flex', alignItems:'center', gap:12, padding:'14px',
              background:t.surface, border:`1px solid ${t.line}`, borderRadius:14, cursor:'pointer'
            }}>
              <div style={{ width:38, height:38, borderRadius:10, background:t[tone+'Soft']||t.surface2, color:t[tone]||t.text2,
                display:'flex', alignItems:'center', justifyContent:'center' }}>{icon}</div>
              <div style={{ flex:1, fontSize:14.5, fontWeight:700, color:t.text }}>{label}</div>
              <window.Icon.Chev size={14} stroke={t.text3}/>
            </div>
          ))}
          <div style={{ padding:'12px 4px', fontSize:11, color:t.text3 }}>ByDuty Guard · v0.9.4 (build 412)</div>
        </window.Screen>
        <window.BottomNav active="more" t={t}/>
      </>
    );
  }

  // Help screen (small)
  function ScreenHelp() {
    const t = window.__BD_THEME__ || window.BD_TOKENS.dark;
    const nav = useNav();
    return (
      <>
        <window.AppBar t={t} title="Help" back/>
        <window.Screen t={t}>
          {[
            ['Contact dispatch (24/7)','contactSupport','primary',<window.Icon.Phone size={18}/>],
            ['Field guide','fieldGuide','muted',<window.Icon.Doc size={18}/>],
            ['Keyboard / device tips','tips','muted',<window.Icon.Info size={18}/>],
          ].map(([l,sheet,tone,icon],i)=>(
            <div key={i} onClick={()=>{ if (sheet==='contactSupport') nav.openSheet('contactSupport'); else nav.showToast('Coming soon','muted'); }}
              style={{ display:'flex', alignItems:'center', gap:12, padding:14,
              background:t.surface, border:`1px solid ${t.line}`, borderRadius:14, cursor:'pointer' }}>
              <div style={{ width:38, height:38, borderRadius:10, background:t[tone+'Soft']||t.surface2, color:t[tone]||t.text2,
                display:'flex', alignItems:'center', justifyContent:'center' }}>{icon}</div>
              <div style={{ flex:1, fontSize:14, fontWeight:700, color:t.text }}>{l}</div>
              <window.Icon.Chev size={14} stroke={t.text3}/>
            </div>
          ))}
        </window.Screen>
      </>
    );
  }

  // ────────────────────────────────────────────────────────────
  // Register screens & sheets
  // ────────────────────────────────────────────────────────────
  window.Screens = {
    // auth / onboarding
    splash: window.ScreenSplash,
    login: W_Login,
    forgot: window.ScreenForgot,
    reset: window.ScreenReset,
    permissions: W_Permissions,
    profileSetup: window.ScreenProfileSetup,

    // tabs
    home: W_Home,
    patrol: W_PatrolList,
    scan: W_Scan,
    reports: W_Reports,
    more: ScreenMore,

    // time
    timeClock: W_TimeClock,
    break: W_Break,

    // patrol flow
    activePatrol: W_ActivePatrol,
    scanSuccess: window.ScreenScanSuccess,
    scanFail: window.ScreenScanFail,
    patrolSummary: window.ScreenPatrolSummary,

    // incidents
    incidents: W_Incidents,
    newIncident: W_NewIncident,
    incidentDetail: W_IncidentDetail,
    audioRecord: window.ScreenAudioRecorder,
    videoRecord: window.ScreenVideoRecorder,
    photoViewer: window.ScreenPhotoViewer,

    // reports
    darEditor: W_DAREditor,

    // messages / comms
    messages: W_Messages,
    chat: W_Chat,
    broadcast: window.ScreenBroadcast,
    ptt: window.ScreenPTT,

    // schedule
    schedule: W_Schedule,
    calendar: window.ScreenCalendar,
    calendarDay: window.ScreenCalendarDay,
    shiftSwap: W_ShiftSwap,

    // sites
    sites: ScreenSitesList,
    siteDetail: W_SiteDetail,
    visitorLog: W_VisitorLog,
    vehicleLog: window.ScreenVehicleLog,
    equipment: window.ScreenEquipment,

    // notifications & profile
    notifications: W_Notifications,
    settings: W_Settings,
    help: ScreenHelp,

    // supervisor
    teamMap: W_TeamMap,
    approvals: W_Approvals,
    approvalDetail: window.ScreenApprovalDetail,

    // sos
    panic: W_Panic,
    sosPost: window.ScreenSOSPost,

    // global
    search: window.ScreenSearch,
    offline: window.ScreenOffline,
  };

  window.Sheets = {
    missedReason: window.SheetMissedReason,
    timeOff: window.SheetTimeOff,
    incidentsFilter: window.SheetIncidentsFilter,
    contactSupport: window.SheetContactSupport,
    shiftSwapPick: window.SheetShiftSwapPick,
    visitorEntry: window.SheetVisitorEntry,
    vehicleEntry: window.SheetVehicleEntry,
    clockOut: window.SheetClockOut,
    breakKind: window.SheetBreakKind,
    geofence: window.SheetGeofence,
    comment: window.SheetComment,
    density: window.SheetDensity,
  };
})();