// ============================================================
// ShieldTech Secret Weapon — App router
// ============================================================

const { useState, useEffect } = React;

const SCREENS_WITH_NAV = ['today', 'tasks', 'assistant', 'pipeline', 'settings'];

function getResponsiveMode() {
  if (typeof window === 'undefined') return 'desktop';
  const ua = window.navigator?.userAgent || '';
  const platform = window.navigator?.platform || '';
  const maxTouchPoints = window.navigator?.maxTouchPoints || 0;
  const isIpad = /iPad/i.test(ua) || (platform === 'MacIntel' && maxTouchPoints > 1);
  const isPhone = /iPhone|iPod|Windows Phone/i.test(ua) || /Android/i.test(ua) && /Mobile/i.test(ua);
  return isPhone && !isIpad ? 'mobile' : 'desktop';
}

function App() {
  const [mode, setMode] = useState(getResponsiveMode);
  const [route, setRoute] = useState(() => localStorage.getItem('stw:route') || 'login');
  const [taskIndex, setTaskIndex] = useState(0);
  const [dataVersion, setDataVersion] = useState(0);
  const [apiError, setApiError] = useState('');

  useEffect(() => { localStorage.setItem('stw:route', route); }, [route]);
  useEffect(() => {
    localStorage.removeItem('stw:mode');
    const syncMode = () => setMode(getResponsiveMode());
    window.addEventListener('resize', syncMode);
    window.addEventListener('orientationchange', syncMode);
    return () => {
      window.removeEventListener('resize', syncMode);
      window.removeEventListener('orientationchange', syncMode);
    };
  }, []);
  useEffect(() => {
    const onData = () => setDataVersion(v => v + 1);
    const onError = e => setApiError(e.detail?.message || 'Backend action failed.');
    const onAuthRequired = e => {
      setRoute('login');
      setApiError(e.detail?.message || 'Sign in required before opening ShieldTech data.');
    };
    window.addEventListener('stw:data-changed', onData);
    window.addEventListener('stw:api-error', onError);
    window.addEventListener('stw:auth-required', onAuthRequired);
    window.ShieldTechApi?.hydrateGlobals?.().catch(error => setApiError(error.message));
    return () => {
      window.removeEventListener('stw:data-changed', onData);
      window.removeEventListener('stw:api-error', onError);
      window.removeEventListener('stw:auth-required', onAuthRequired);
    };
  }, []);

  const goto = (r, idx) => {
    if (typeof idx === 'number') setTaskIndex(idx);
    setRoute(r);
  };

  // Map nav tab clicks to routes
  const navActive = ({
    today: 'today', task: 'tasks', tasks: 'tasks', bids: 'bids',
    assistant: 'assistant', pipeline: 'pipeline', settings: 'settings',
  })[route] || route;
  const navChange = id => {
    if (id === 'tasks') setRoute('task');
    else setRoute(id);
  };

  const showNav = mode === 'mobile' && route !== 'login' && route !== 'outcome' && route !== 'debrief';

  return (
    <div style={{
      minHeight: '100vh',
      background: `radial-gradient(circle at 80% -10%, rgba(0,163,255,0.10), transparent 35%), radial-gradient(circle at 10% 90%, rgba(168,85,247,0.07), transparent 30%), #05070A`,
      display: 'flex', flexDirection: 'column',
    }}>
      {apiError && (
        <button onClick={() => setApiError('')} type="button" style={{
          position: 'fixed', top: 'calc(env(safe-area-inset-top) + 12px)', left: '50%', transform: 'translateX(-50%)', zIndex: 120,
          maxWidth: 520, width: 'calc(100% - 32px)', padding: '10px 12px', borderRadius: 12,
          background: '#1A1306', color: '#FDE68A', border: '1px solid #92400E',
          font: '600 12px/16px Inter, system-ui, sans-serif', textAlign: 'left', cursor: 'pointer',
        }}>{apiError}</button>
      )}

      <div style={{ flex: 1, display: 'flex', justifyContent: mode === 'mobile' ? 'stretch' : 'center', alignItems: 'stretch', padding: 0 }}>
        {mode === 'mobile' ? (
          <div style={{ position: 'relative', width: '100%', minHeight: '100vh', background: '#05070A', overflow: 'hidden' }}>
            <div style={{
              position: 'absolute', inset: 0, overflowY: 'auto', overflowX: 'hidden',
              paddingTop: 'calc(env(safe-area-inset-top) + 8px)',
              paddingBottom: 'calc(env(safe-area-inset-bottom) + 88px)',
            }}>
              <MobileBody key={dataVersion} route={route} goto={goto} taskIndex={taskIndex} setTaskIndex={setTaskIndex}/>
            </div>
            {showNav && <BottomNav active={navActive} onChange={navChange}/>}
          </div>
        ) : (
          <DesktopShell route={route === 'login' ? 'today' : route === 'outcome' || route === 'debrief' ? 'task' : route}
            setRoute={setRoute} taskIndex={taskIndex} setTaskIndex={setTaskIndex}/>
        )}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Mobile body — route table
// ─────────────────────────────────────────────────────────────
function MobileBody({ route, goto, taskIndex, setTaskIndex }) {
  if (route === 'login') return <ScreenLogin onSignIn={() => goto('today')}/>;
  if (route === 'today') return <ScreenToday goto={goto}/>;
  if (route === 'task') return <ScreenTask goto={goto} taskIndex={taskIndex} setTaskIndex={setTaskIndex}/>;
  if (route === 'outcome') return <ScreenOutcome goto={goto} taskIndex={taskIndex}/>;
  if (route === 'debrief') return <ScreenDebrief goto={goto} taskIndex={taskIndex}/>;
  if (route === 'assistant') return <ScreenAssistant goto={goto}/>;
  if (route === 'pipeline') return <ScreenPipeline goto={goto}/>;
  if (route === 'followups') return <ScreenFollowups goto={goto}/>;
  if (route === 'approvals') return <ScreenApprovals goto={goto}/>;
  if (route === 'bids') return <ScreenBids goto={goto}/>;
  if (route === 'contractors') return <ScreenContractors goto={goto}/>;
  if (route === 'vendors') return <ScreenVendors goto={goto}/>;
  if (route === 'integrations') return <ScreenIntegrations goto={goto}/>;
  if (route === 'eod') return <ScreenEod goto={goto}/>;
  if (route === 'settings') return <ScreenSettings goto={goto}/>;
  if (route === 'diagnostics') return <ScreenDiagnostics goto={goto}/>;
  return <ScreenToday goto={goto}/>;
}

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