TasGrid/src/App.tsx

import { type Component, createSignal, onMount, onCleanup, createMemo, lazy, Suspense, Show } from 'solid-js';
import { Layout } from './components/Layout';
import { EmbedLayout } from './components/EmbedLayout';
import { EmbedAuthWrapper } from './components/EmbedAuthWrapper';
import { CriticalView } from './views/CriticalView';
import { AuthCallback } from './components/Auth';
import { pb } from './lib/pocketbase';
import { initStore } from './store';

// const CriticalView = lazy(() => import('./views/CriticalView').then(m => ({ default: m.CriticalView })));
const UrgencyView = lazy(() => import('./views/UrgencyView').then(m => ({ default: m.UrgencyView })));
const PriorityView = lazy(() => import('./views/PriorityView').then(m => ({ default: m.PriorityView })));
const MatrixView = lazy(() => import('./views/MatrixView').then(m => ({ default: m.MatrixView })));
const SettingsView = lazy(() => import('./views/SettingsView').then(m => ({ default: m.SettingsView })));
const SnowballView = lazy(() => import('./views/SnowballView').then(m => ({ default: m.SnowballView })));
const DigInView = lazy(() => import('./views/DigInView').then(m => ({ default: m.DigInView })));
const ProgressView = lazy(() => import('./views/ProgressView').then(m => ({ default: m.ProgressView })));
const HelpView = lazy(() => import('./views/HelpView').then(m => ({ default: m.HelpView })));
const NotepadView = lazy(() => import('./views/NotepadView').then(m => ({ default: m.NotepadView })));
const QuickEntryForm = lazy(() => import('./components/QuickEntryForm').then(m => ({ default: m.QuickEntryForm })));

const App: Component = () => {
  // Basic routing state
  const [currentView, setCurrentView] = createSignal("critical");
  const [isAuthenticated, setIsAuthenticated] = createSignal(pb.authStore.isValid);
  const [location, setLocation] = createSignal(window.location.href);

  onMount(() => {
    const handleLocChange = () => setLocation(window.location.href);
    window.addEventListener('popstate', handleLocChange);
    window.addEventListener('hashchange', handleLocChange);

    let isFirstRun = true;
    const removeListener = pb.authStore.onChange((token) => {
      console.log('[DEBUG] pb.authStore.onChange fired, token present:', !!token);
      const wasAuthenticated = isAuthenticated();
      setIsAuthenticated(!!token);

      if (token && (isFirstRun || !wasAuthenticated)) {
        initStore();
      }
      isFirstRun = false;
    }, true);

    onCleanup(() => {
      removeListener();
      window.removeEventListener('popstate', handleLocChange);
      window.removeEventListener('hashchange', handleLocChange);
    });

    // Background preload of other views when idle
    const idleCallback = (window as any).requestIdleCallback || ((cb: any) => setTimeout(cb, 1000));
    idleCallback(() => {
      // CriticalView is now static
      import('./views/UrgencyView');
      import('./views/PriorityView');
      import('./views/MatrixView');
      import('./views/SettingsView');
      import('./views/SnowballView');
      import('./views/DigInView');
      import('./views/ProgressView');
      import('./views/HelpView');

      // Remove splash screen after high priority work is done
      const splash = document.getElementById('splash');
      if (splash) {
        splash.style.opacity = '0';
        setTimeout(() => splash.remove(), 500);
      }
    });
  });

  // Determine if we are in an embed route (check both path and hash for compatibility)
  const isEmbed = () => {
    const loc = location(); // Reactive dependency
    const url = new URL(loc);
    const path = url.pathname;
    const hash = url.hash;
    const res = path.startsWith('/embed/') || hash.startsWith('#/embed/');
    console.log('[DEBUG] isEmbed check:', { res, path, hash, href: loc });
    return res;
  };

  const getEmbedView = () => {
    const loc = location(); // Reactive dependency
    const url = new URL(loc);
    const fullPath = url.pathname + url.hash;
    let view = null;
    if (fullPath.includes('/notes')) view = 'embed_notes';
    else if (fullPath.includes('/quick-add')) view = 'embed_quick_add';
    console.log('[DEBUG] getEmbedView detected:', view, 'Full URL context:', fullPath);
    return view;
  };

  return (
    <Show
      when={isEmbed()}
      fallback={
        <Show when={isAuthenticated()} fallback={<AuthCallback onSuccess={() => { }} />}>
          <Layout currentView={currentView()} setView={setCurrentView}>
            <Suspense fallback={<div class="flex items-center justify-center h-full"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div></div>}>
              <Show when={currentView() === "critical"}><CriticalView /></Show>
              <Show when={currentView() === "urgency"}><UrgencyView /></Show>
              <Show when={currentView() === "priority"}><PriorityView /></Show>
              <Show when={currentView() === "matrix"}><MatrixView /></Show>
              <Show when={currentView() === "snowball"}><SnowballView /></Show>
              <Show when={currentView() === "dig_in"}><DigInView /></Show>
              <Show when={currentView() === "progress"}><ProgressView /></Show>
              <Show when={currentView() === "settings"}><SettingsView setView={setCurrentView} /></Show>
              <Show when={currentView() === "help"}><HelpView onBack={() => setCurrentView("settings")} /></Show>
            </Suspense>
          </Layout>
        </Show>
      }
    >
      <EmbedAuthWrapper>
        <EmbedLayout>
          <Suspense fallback={<div class="flex items-center justify-center h-full"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div></div>}>
            <Show when={getEmbedView() === 'embed_notes'}>
              {(() => {
                const noteIdFromUrl = createMemo(() => {
                  const urlObj = new URL(location());
                  let noteId = new URLSearchParams(urlObj.search).get('noteId');
                  // Production likely uses hash routing, so check hash for query params too
                  if (!noteId && urlObj.hash.includes('?')) {
                    const hashQueryString = urlObj.hash.substring(urlObj.hash.indexOf('?'));
                    noteId = new URLSearchParams(hashQueryString).get('noteId');
                  }
                  return noteId;
                });
                console.log('[DEBUG App] Rendering embed/notes context. noteId trace:', noteIdFromUrl());
                return <NotepadView selectedNoteId={noteIdFromUrl()} setSelectedNoteId={() => { }} hideNavigation={!!noteIdFromUrl()} />;
              })()}
            </Show>
            <Show when={getEmbedView() === 'embed_quick_add'}>
              <QuickEntryForm autoFocus={true} />
            </Show>
          </Suspense>
        </EmbedLayout>
      </EmbedAuthWrapper>
    </Show>
  );
};

export default App;