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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "role": "technician",
  "plan": "pro",
  "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);

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

  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
  function navigate(screen, params) {
    setMenuOpen(false);
    if (screen === '__back') {
      setScreenStack(prev => prev.slice(0, -1));
      return;
    }
    const fromMenu = params?.__fromMenu;
    if (['home','jobs','schedule','belle','more','reports','messages','invoices','estimates'].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) {
        case 'job-detail':        return <JobDetailScreen onNav={navigate} params={params}/>;
        case 'new-job':           return <NewJobScreen onNav={navigate}/>;
        case 'invoice-detail':    return <InvoiceDetailScreen onNav={navigate} params={params}/>;
        case 'customer-detail':   return <CustomerDetailScreen onNav={navigate} params={params}/>;
        case 'customers':         return <CustomersScreen onNav={navigate}/>;
        case 'team':              return <TeamScreen onNav={navigate}/>;
        case 'notifications':     return <NotificationsScreen onNav={navigate}/>;
        case 'payment':           return <InvoiceDetailScreen onNav={navigate} params={{invoice: {id:'INV-0111', client:'Ramos Residence', amount:'$320', status:'unpaid', date:'Today', job:'Drain Clog'}}} />;
        case 'estimates':         return <EstimatesScreen onNav={navigate}/>;
        case 'estimate-detail':   return <EstimateDetailScreen onNav={navigate} params={params}/>;
        case 'messages':          return <MessagesScreen onNav={navigate}/>;
        case 'calls':             return <CallsScreen onNav={navigate}/>;
        case 'reports':           return <ReportsScreen onNav={navigate}/>;
        case 'dispatch':          return <DispatchScreen onNav={navigate}/>;
        case 'follow-ups':        return <FollowUpsScreen onNav={navigate}/>;
        case 'settings':          return <SettingsScreen onNav={navigate}/>;
        case 'settings-profile':  return <SettingsProfileScreen onNav={navigate}/>;
        case 'settings-security': return <SettingsSecurityScreen onNav={navigate}/>;
        case 'settings-notifications': return <SettingsNotificationsScreen onNav={navigate}/>;
        case 'settings-company':  return <SettingsCompanyScreen onNav={navigate}/>;
        case 'settings-payments': return <SettingsPaymentsScreen onNav={navigate}/>;
        case 'settings-billing':  return <SettingsBillingScreen onNav={navigate}/>;
        case 'settings-pricebook': return <SettingsPriceBookScreen onNav={navigate}/>;
        case 'settings-belle':    return <SettingsBelleScreen onNav={navigate}/>;
        case 'settings-templates': return <SettingsTemplatesScreen onNav={navigate}/>;
        case 'settings-integrations': return <SettingsIntegrationsScreen onNav={navigate}/>;
        case 'settings-data':     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':     return <SettingsTeamScreen onNav={navigate}/>;
        case 'team-member':       return <SettingsTeamMemberScreen onNav={navigate} params={params}/>;
        case 'payments':          return <PaymentsScreen onNav={navigate}/>;
        case 'campaigns':         return <CampaignsScreen onNav={navigate}/>;
        case 'campaign-detail':   return <CampaignDetailScreen onNav={navigate} params={params}/>;
        case 'plans':             return <PlansScreen onNav={navigate}/>;
        case 'billing-pdf':       return <BillingPdfScreen onNav={navigate} params={params}/>;
        default:                  return renderBaseTab();
      }
    }
    return renderBaseTab();
  }

  function renderBaseTab() {
    switch(activeTab) {
      case 'home':
        return role === 'owner' || role === 'dispatcher'
          ? <HomeOwner onNav={navigate}/>
          : <HomeTech onNav={navigate} plan={plan}/>;
      case 'jobs':      return <JobsScreen onNav={navigate}/>;
      case 'reports':   return <ReportsScreen onNav={navigate}/>;
      case 'belle':     return <BelleScreen onNav={navigate}/>;
      case 'more':      return <MoreScreen onNav={navigate} role={role} onRoleChange={r => { setRole(r); applyTweak('role', r); }}/>;
      case 'messages':  return <MessagesScreen onNav={navigate}/>;
      case 'invoices':  return <InvoicesScreen onNav={navigate}/>;
      case 'estimates': return <EstimatesScreen onNav={navigate}/>;
      case 'schedule':  return <ScheduleScreen onNav={navigate}/>;
      case 'dispatch':  return <DispatchScreen onNav={navigate}/>;
      default:          return <HomeTech onNav={navigate}/>;
    }
  }

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

  return (
    <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 */}
      {tweaks.showOfflineBanner && (
        <div style={{position:'absolute',top:50,left:0,right:0,zIndex:199,
          background:'#1a1a1c',padding:'8px 16px',display:'flex',alignItems:'center',gap:8}}>
          <div style={{color:'#d97706',display:'flex',alignItems:'center'}}>
            <svg width="16" height="16" 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:12,fontWeight:500,color:'white'}}>Offline — changes saved locally</div>
        </div>
      )}

      {/* Main scroll content */}
      <div style={{
        position:'absolute',
        top: tweaks.showOfflineBanner ? 84 : 54,
        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) => {
            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}
      />

      {/* 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>
              {['solo','pro','enterprise','enterprise+'].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','dispatcher'].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',textTransform:'capitalize',fontWeight: tweaks.role===r?600:400}}>{r}</span>
                </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>
  );
}

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