// Simple Pro Mobile — Root App component
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "role": "technician",
  "plan": "standard",
  "darkMode": false,
  "showOfflineBanner": false,
  "accentColor": "#0071e3"
}/*EDITMODE-END*/;

function App() {
  // Load tweaks + localStorage state
  const saved = (() => { try { return JSON.parse(localStorage.getItem('sp_app_state') || '{}'); } catch(e) { return {}; } })();

  const [role, setRole] = useState(saved.role || TWEAK_DEFAULTS.role);
  const [plan, setPlan] = useState(saved.plan || TWEAK_DEFAULTS.plan);
  const [activeTab, setActiveTab] = useState(saved.activeTab || 'home');
  const [screenStack, setScreenStack] = useState([]); // [{screen, params}]
  const [tweaksOpen, setTweaksOpen] = useState(false);
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
  // Belle-health state — drives BelleHealthBanner + flips "Ask Belle" CTAs
  const [belleOnline, setBelleOnline] = useState(
    typeof saved.belleOnline === 'boolean' ? saved.belleOnline : true
  );

  // Persist state
  useEffect(() => {
    localStorage.setItem('sp_app_state', JSON.stringify({ role, activeTab, plan, belleOnline }));
  }, [role, activeTab, plan, belleOnline]);

  const [menuOpen, setMenuOpen] = useState(false);

  // Tweaks panel communication
  useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === '__activate_edit_mode')   setTweaksOpen(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', handler);
    if (window.innerWidth > 500) {
      window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    }
    return () => window.removeEventListener('message', handler);
  }, []);

  function applyTweak(key, val) {
    const next = { ...tweaks, [key]: val };
    setTweaks(next);
    if (key === 'role') setRole(val);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [key]: val } }, '*');
  }

  // Navigation
  // IA spec: exactly Home, Jobs, Belle, Schedule, More.
  // More is still a popup from the tab bar, but remains a routable fallback.
  const TAB_SCREENS = ['home', 'jobs', 'belle', 'schedule', 'more'];

  function navigate(screen, params) {
    setMenuOpen(false);
    if (screen === '__back') {
      setScreenStack(prev => prev.slice(0, -1));
      return;
    }
    const fromMenu = params?.__fromMenu;
    if (TAB_SCREENS.includes(screen)) {
      setActiveTab(screen);
      setScreenStack([]);
    } else if (fromMenu) {
      // Popup menu → treat as root: clear stack, render as overlay with no back
      setScreenStack([{ screen, params }]);
    } else {
      setScreenStack(prev => [...prev, { screen, params }]);
    }
  }

  function goBack() {
    setScreenStack(prev => prev.slice(0, -1));
  }

  // Determine current screen + "previous" for back-button label
  const currentOverlay = screenStack.length > 0 ? screenStack[screenStack.length - 1] : null;
  const prevScreenKey = screenStack.length > 1
    ? screenStack[screenStack.length - 2].screen
    : activeTab;
  const backLabel = window.screenLabel ? window.screenLabel(prevScreenKey) : 'Back';

  function renderTabContent() {
    if (currentOverlay) {
      const { screen, params } = currentOverlay;
      switch(screen) {
        // Core entities
        case 'jobs':              return <JobsScreen onNav={navigate} role={role} plan={plan}/>;
        case 'job-detail':        return <JobDetailScreen onNav={navigate} params={params} role={role} plan={plan}/>;
        case 'new-job':           return <NewJobScreen onNav={navigate}/>;
        case 'customers':         if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Customer management"/>;
        return <CustomersScreen onNav={navigate}/>;
        case 'customer-detail':   if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Customer management"/>;
        return <CustomerDetailScreen onNav={navigate} params={params}/>;
        case 'new-customer':      if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Customer management"/>;
        return <NewCustomerScreen onNav={navigate} params={params}/>;
        case 'edit-customer':     if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Customer management"/>;
        return <EditCustomerScreen onNav={navigate} params={params}/>;

        // Billing = unified estimates + invoices
        case 'billing':           if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Billing and payments"/>;
        return <BillingScreen onNav={navigate} params={params} plan={plan}/>;
        case 'estimate-detail':   if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Estimates"/>;
        return <EstimateDetailScreen onNav={navigate} params={params}/>;
        case 'invoice-detail':    if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Invoices"/>;
        return <InvoiceDetailScreen onNav={navigate} params={params}/>;
        case 'payment':           if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Payments"/>;
        return <InvoiceDetailScreen onNav={navigate} params={{invoice: {id:'INV-0111', client:'Ramos Residence', amount:'$320', status:'sent', date:'Today', job:'Drain Clog'}}} />;

        // Conversations = unified calls + messages
        case 'conversations':     return <ConversationsScreen onNav={navigate} role={role} plan={plan}/>;
        case 'conversation-detail': return <ConversationDetailScreen onNav={navigate} params={params}/>;
        case 'call-detail':       return <CallDetailScreen onNav={navigate} params={params}/>;

        // Premium operational surfaces. Standard users see cohesive locked pages;
        // technicians only see field-safe versions where allowed.
        case 'approvals':         if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Owner Approval Center"/>;
        return <ApprovalsScreen onNav={navigate} plan={plan} role={role}/>;
        case 'job-costing':       if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Job costing and margin"/>;
        return <JobCostingScreen onNav={navigate} params={params} plan={plan} role={role}/>;
        case 'handoff':           return <HandoffScreen onNav={navigate} params={params} plan={plan} role={role}/>;
        case 'escalation-rules':  if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Escalation rules"/>;
        return <EscalationRulesScreen onNav={navigate} plan={plan} role={role}/>;
        case 'inventory':         return <InventoryScreen onNav={navigate} params={params} plan={plan} role={role}/>;
        case 'tech-schedule':     return <TechScheduleScreen onNav={navigate} params={params}/>;
        case 'reports':           if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Reports"/>;
        return <ReportsScreen onNav={navigate} plan={plan} role={role}/>;
        case 'feature-detail':    return <FeatureDetailScreen onNav={navigate} params={params} plan={plan} role={role}/>;
        case 'customer-financing': if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Customer financing"/>;
        return <FeatureDetailScreen onNav={navigate} params={{feature:'customer-financing'}} plan={plan} role={role}/>;
        case 'custom-branding':   if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Custom branding"/>;
        return <FeatureDetailScreen onNav={navigate} params={{feature:'custom-branding'}} plan={plan} role={role}/>;
        case 'priority-support':  return <FeatureDetailScreen onNav={navigate} params={{feature:'priority-support'}} plan={plan} role={role}/>;

        // Settings hub (6 groups)
        case 'settings':                  return <SettingsScreen onNav={navigate} role={role}/>;
        case 'settings-account':          return <SettingsAccountScreen onNav={navigate}/>;
        case 'settings-company-group':    if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Company administration"/>;
        return <SettingsCompanyGroupScreen onNav={navigate}/>;
        case 'settings-billing-group':    if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Billing settings"/>;
        return <SettingsBillingGroupScreen onNav={navigate}/>;
        case 'settings-automation':       if (role === 'technician') return <SettingsBelleScreen onNav={navigate} plan={plan} role={role}/>;
        return <SettingsAutomationScreen onNav={navigate}/>;
        case 'settings-integrations-group': if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Integrations"/>;
        return <SettingsIntegrationsGroupScreen onNav={navigate}/>;
        case 'settings-help-group':       return <SettingsHelpGroupScreen onNav={navigate}/>;

        // Legacy settings sub-pages (still reachable from grouped pages or deep-links)
        case 'settings-profile':  return <SettingsProfileScreen onNav={navigate}/>;
        case 'settings-security': return <SettingsSecurityScreen onNav={navigate}/>;
        case 'settings-notifications': return <SettingsNotificationsScreen onNav={navigate}/>;
        case 'settings-company':  if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Company administration"/>;
        return <SettingsCompanyScreen onNav={navigate}/>;
        case 'settings-payments': if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Payment settings"/>;
        return <SettingsPaymentsScreen onNav={navigate}/>;
        case 'settings-billing':  if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Billing settings"/>;
        return <SettingsBillingScreen onNav={navigate}/>;
        case 'settings-pricebook': if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Price Book"/>;
        return <SettingsPriceBookScreen onNav={navigate}/>;
        case 'settings-belle':    return <SettingsBelleScreen onNav={navigate} plan={plan} role={role}/>;
        case 'settings-templates': if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Templates"/>;
        return <SettingsTemplatesScreen onNav={navigate}/>;
        case 'template-detail':   if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Templates"/>;
        return <SettingsTemplateDetailScreen onNav={navigate} params={params}/>;
        case 'settings-integrations': if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Integrations"/>;
        return <SettingsIntegrationsScreen onNav={navigate}/>;
        case 'settings-data':     if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Data export"/>;
        return <SettingsDataScreen onNav={navigate}/>;
        case 'settings-privacy':  return <SettingsPrivacyScreen onNav={navigate}/>;
        case 'settings-help':     return <SettingsHelpScreen onNav={navigate}/>;
        case 'settings-contact':  return <SettingsContactScreen onNav={navigate}/>;
        case 'settings-about':    return <SettingsAboutScreen onNav={navigate}/>;
        case 'settings-team':     if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Team administration"/>;
        return <SettingsTeamScreen onNav={navigate}/>;
        case 'team-member':       if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Team administration"/>;
        return <SettingsTeamMemberScreen onNav={navigate} params={params}/>;
        case 'plans':             if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Plan management"/>;
        return <PlansScreen onNav={navigate}/>;
        case 'billing-pdf':       if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Billing statements"/>;
        return <BillingPdfScreen onNav={navigate} params={params}/>;
        case 'pricebook-category': if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Price Book"/>;
        return <SettingsPriceBookCategoryScreen onNav={navigate} params={params}/>;
        case 'campaigns':          if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Customer campaigns"/>;
        return <CampaignsScreen onNav={navigate}/>;
        case 'campaign-detail':    if (role === 'technician') return <PermissionLimitedScreen onNav={navigate} title="Customer campaigns"/>;
        return <CampaignDetailScreen onNav={navigate} params={params}/>;

        default:                  return renderBaseTab();
      }
    }
    return renderBaseTab();
  }

  function renderBaseTab() {
    switch(activeTab) {
      case 'home':
        if (role === 'owner-solo') return <HomeSoloOwner onNav={navigate} plan={plan}/>;
        if (role === 'owner' || role === 'owner-team' || role === 'dispatcher') return <HomeTeamOwner onNav={navigate} plan={plan}/>;
        return <HomeTech onNav={navigate} plan={plan}/>;
      case 'jobs':      return <JobsScreen onNav={navigate} role={role} plan={plan}/>;
      case 'schedule':  return <ScheduleScreen onNav={navigate}/>;
      case 'belle':     return <BelleScreen onNav={navigate} plan={plan} role={role}/>;
      case 'more':      return <MoreScreen onNav={navigate} role={role} onRoleChange={r => { setRole(r); applyTweak('role', r); }} belleOnline={belleOnline} onToggleBelle={() => setBelleOnline(v => !v)}/>;
      default:          return <HomeTech onNav={navigate}/>;
    }
  }

  const showTabBar = true;
  const currentScreenKey = currentOverlay?.screen || activeTab;

  // Status-bar base height + optional banners stack
  const statusBarHeight = 54;
  const offlineBannerHeight = tweaks.showOfflineBanner ? 30 : 0;
  const belleBannerHeight = !belleOnline ? 48 : 0;
  const contentTop = statusBarHeight + offlineBannerHeight + belleBannerHeight;

  return (
    <BelleOnlineContext.Provider value={{ belleOnline, setBelleOnline }}>
    <div style={{width:'100%',height:'100%',position:'relative',overflow:'hidden',
      background:'#f7f7f8',fontFamily:"'Inter',-apple-system,'Helvetica Neue',sans-serif",
      WebkitFontSmoothing:'antialiased'}}>

      {/* Status bar — always dark */}
      <div style={{
        position:'absolute',top:0,left:0,right:0,height:54,zIndex:200,
        background:'rgba(15,23,42,0.98)',
        display:'flex',alignItems:'center',justifyContent:'space-between',
        padding:'8px 20px 0',
      }}>
        <div style={{position:'absolute',top:8,left:'50%',transform:'translateX(-50%)',
          width:120,height:32,borderRadius:20,background:'#000',zIndex:201}}/>
        <span style={{fontSize:16,fontWeight:600,color:'white',letterSpacing:'-0.01em',
          fontFamily:"-apple-system,'SF Pro',system-ui"}}>9:41</span>
        <div style={{display:'flex',gap:6,alignItems:'center'}}>
          <svg width="17" height="12" viewBox="0 0 17 12">
            <rect x="0" y="7" width="3" height="5" rx="0.5" fill="white"/>
            <rect x="4.5" y="4.5" width="3" height="7.5" rx="0.5" fill="white"/>
            <rect x="9" y="2" width="3" height="10" rx="0.5" fill="white"/>
            <rect x="13.5" y="0" width="3" height="12" rx="0.5" fill="white"/>
          </svg>
          <svg width="16" height="12" viewBox="0 0 16 12">
            <path d="M8 9.5C8.8 9.5 9.5 10.2 9.5 11s-.7 1.5-1.5 1.5S6.5 11.8 6.5 11s.7-1.5 1.5-1.5z" fill="white"/>
            <path d="M4.5 7C5.8 5.7 6.8 5 8 5s2.2.7 3.5 2" stroke="white" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
            <path d="M2 4C3.8 2.2 5.8 1 8 1s4.2 1.2 6 3" stroke="white" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
          </svg>
          <svg width="25" height="12" viewBox="0 0 25 12">
            <rect x="0.5" y="0.5" width="21" height="11" rx="3" stroke="white" strokeOpacity="0.35" fill="none"/>
            <rect x="2" y="2" width="17" height="8" rx="1.5" fill="white"/>
            <path d="M23 4v4c.8-.3 1.5-1.2 1.5-2s-.7-1.7-1.5-2z" fill="white" fillOpacity="0.4"/>
          </svg>
        </div>
      </div>

      {/* Offline banner (network) */}
      {tweaks.showOfflineBanner && (
        <div style={{position:'absolute',top:statusBarHeight,left:0,right:0,zIndex:199,
          background:'#1a1a1c',padding:'6px 16px',display:'flex',alignItems:'center',gap:8,height:offlineBannerHeight}}>
          <div style={{color:'#d97706',display:'flex',alignItems:'center'}}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M1.42 9A16 16 0 0122.58 9"/><path d="M5.5 12.7A10 10 0 0118.5 12.7"/><path d="M10 16.5a4 4 0 014 0"/><line x1="12" y1="20" x2="12.01" y2="20" strokeWidth="3"/><line x1="2" y1="2" x2="22" y2="22" strokeWidth="2"/></svg>
          </div>
          <div style={{fontSize:11.5,fontWeight:500,color:'white'}}>Offline — changes saved locally</div>
        </div>
      )}

      {/* Belle health banner (manual mode) */}
      {!belleOnline && (
        <div style={{position:'absolute',top: statusBarHeight + offlineBannerHeight,left:0,right:0,
          zIndex:198, height:belleBannerHeight}}>
          <BelleHealthBanner belleOnline={belleOnline}/>
        </div>
      )}

      {/* Main scroll content */}
      <div style={{
        position:'absolute',
        top: contentTop,
        bottom: showTabBar ? 83 : 0,
        left:0,right:0,
        overflowY:'auto',
        WebkitOverflowScrolling:'touch',
      }}>
        <NavContext.Provider value={{ goBack: screenStack.length >= 2 ? goBack : null, backLabel }}>
        {renderTabContent()}
        </NavContext.Provider>
      </div>

      {/* Tab bar */}
      {showTabBar && (
        <TabBar
          active={currentOverlay ? '' : activeTab}
          onTab={(id) => {
            // Spec: More tab opens the menu overlay
            if (id === 'more') { setMenuOpen(true); return; }
            setScreenStack([]);
            setActiveTab(id);
          }}
        />
      )}

      {/* Menu overlay */}
      <MenuOverlay
        open={menuOpen}
        onClose={() => setMenuOpen(false)}
        onNav={(screen, params) => {
          setMenuOpen(false);
          navigate(screen, { ...(params||{}), __fromMenu: true });
        }}
        role={role}
        onRoleChange={r => { setRole(r); applyTweak('role', r); }}
        plan={plan}
        onPlanChange={p => { setPlan(p); applyTweak('plan', p); }}
        belleOnline={belleOnline}
        onToggleBelle={() => setBelleOnline(v => !v)}
      />

      {/* Tweaks panel — hidden on small screens */}
      {tweaksOpen && window.innerWidth > 500 && (
        <div style={{position:'absolute',bottom:100,right:12,zIndex:300,
          background:'white',borderRadius:16,width:220,
          boxShadow:'0 8px 32px rgba(0,0,0,0.18)',border:'1px solid rgba(0,0,0,0.08)',
          overflow:'hidden'}}>
          <div style={{padding:'12px 16px 8px',background:'#f7f7f8',borderBottom:'0.5px solid rgba(0,0,0,0.08)'}}>
            <div style={{fontSize:13,fontWeight:700,color:'#111',letterSpacing:'-0.01em'}}>Tweaks</div>
          </div>
          <div style={{padding:'10px 16px 14px',display:'flex',flexDirection:'column',gap:14}}>
            {/* Plan */}
            <div>
              <div style={{fontSize:11,fontWeight:600,color:'rgba(0,0,0,0.4)',letterSpacing:'0.04em',
                textTransform:'uppercase',marginBottom:6}}>Plan</div>
              {['standard','premium'].map(p => (
                <div key={p} onClick={() => { setPlan(p); applyTweak('plan', p); }}
                  style={{display:'flex',alignItems:'center',gap:8,padding:'6px 0',cursor:'pointer'}}>
                  <div style={{width:16,height:16,borderRadius:'50%',
                    border:`2px solid ${plan===p ? '#0071e3' : 'rgba(0,0,0,0.2)'}`,
                    background: plan===p ? '#0071e3' : 'transparent',
                    display:'flex',alignItems:'center',justifyContent:'center'}}>
                    {plan===p && <div style={{width:6,height:6,borderRadius:'50%',background:'white'}}/>}
                  </div>
                  <span style={{fontSize:13,color:'#111',textTransform:'capitalize',
                    fontWeight: plan===p ? 600 : 400}}>{p}</span>
                </div>
              ))}
            </div>
            {/* Role */}
            <div>
              <div style={{fontSize:11,fontWeight:600,color:'rgba(0,0,0,0.4)',letterSpacing:'0.04em',
                textTransform:'uppercase',marginBottom:6}}>View As</div>
              {['technician','owner-solo','owner-team'].map(r => (
                <div key={r} onClick={() => applyTweak('role', r)}
                  style={{display:'flex',alignItems:'center',gap:8,padding:'6px 0',cursor:'pointer'}}>
                  <div style={{width:16,height:16,borderRadius:'50%',
                    border:`2px solid ${tweaks.role===r ? '#0071e3' : 'rgba(0,0,0,0.2)'}`,
                    background: tweaks.role===r ? '#0071e3' : 'transparent',
                    display:'flex',alignItems:'center',justifyContent:'center'}}>
                    {tweaks.role===r && <div style={{width:6,height:6,borderRadius:'50%',background:'white'}}/>}
                  </div>
                  <span style={{fontSize:13,color:'#111',fontWeight: tweaks.role===r?600:400}}>{r==='owner-solo'?'Solo Owner':r==='owner-team'?'Team Owner':'Technician'}</span>
                </div>
              ))}
            </div>
            {/* Belle online */}
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
              <span style={{fontSize:13,fontWeight:500,color:'#111'}}>Belle online</span>
              <div onClick={() => setBelleOnline(v => !v)}
                style={{width:42,height:24,borderRadius:12,cursor:'pointer',transition:'background 0.2s',
                  background: belleOnline ? '#34c759' : '#e2e2e6',
                  display:'flex',alignItems:'center',padding:'0 3px'}}>
                <div style={{width:18,height:18,borderRadius:'50%',background:'white',
                  transform: belleOnline ? 'translateX(18px)' : 'translateX(0)',
                  transition:'transform 0.2s',boxShadow:'0 1px 4px rgba(0,0,0,0.15)'}}/>
              </div>
            </div>
            {/* Offline mode */}
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
              <span style={{fontSize:13,fontWeight:500,color:'#111'}}>Offline mode</span>
              <div onClick={() => applyTweak('showOfflineBanner', !tweaks.showOfflineBanner)}
                style={{width:42,height:24,borderRadius:12,cursor:'pointer',transition:'background 0.2s',
                  background: tweaks.showOfflineBanner ? '#0071e3' : '#e2e2e6',
                  display:'flex',alignItems:'center',padding:'0 3px'}}>
                <div style={{width:18,height:18,borderRadius:'50%',background:'white',
                  transform: tweaks.showOfflineBanner ? 'translateX(18px)' : 'translateX(0)',
                  transition:'transform 0.2s',boxShadow:'0 1px 4px rgba(0,0,0,0.15)'}}/>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
    </BelleOnlineContext.Provider>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <SettingsProvider><App/></SettingsProvider>
);