import { type Component, createSignal, Show, onMount, onCleanup, lazy, Suspense } from 'solid-js';
import { Layout } from './components/Layout';
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 App: Component = () => {
  // Basic routing state
  const [currentView, setCurrentView] = createSignal("critical");
  const [isAuthenticated, setIsAuthenticated] = createSignal(pb.authStore.isValid);

  onMount(() => {
    const removeListener = pb.authStore.onChange((token) => {
      setIsAuthenticated(!!token);
      if (token) {
        initStore();
      }
    }, true);

    onCleanup(() => removeListener());

    // 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');

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

  return (
    <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() === "settings"}><SettingsView /></Show>
        </Suspense>
      </Layout>
    </Show>
  );
};

export default App;