import { RouterProvider, createBrowserRouter, redirect } from 'react-router-dom';

import { AuthCreateScreen } from '@app/auth/create';
import { CreateStep1Screen } from '@app/auth/create/step-1';
import { CreateStep2Screen } from '@app/auth/create/step-2';
import { CreateStep3Screen } from '@app/auth/create/step-3';
import { AuthImportScreen } from '@app/auth/import';
import { ImportStep1Screen } from '@app/auth/import/step-1';
import { ImportStep2Screen } from '@app/auth/import/step-2';
import { ImportStep3Screen } from '@app/auth/import/step-3';
import { MigrateScreen } from '@app/auth/migrate';
import { OnboardingScreen } from '@app/auth/onboarding';
import { ResetScreen } from '@app/auth/reset';
import { UnlockScreen } from '@app/auth/unlock';
import { WelcomeScreen } from '@app/auth/welcome';
import { ChatScreen } from '@app/chats';
import { ErrorScreen } from '@app/error';
import { EventScreen } from '@app/events';
import { AccountSettingsScreen } from '@app/settings/account';
import { GeneralSettingsScreen } from '@app/settings/general';
import { ShortcutsSettingsScreen } from '@app/settings/shortcuts';
import { SpaceScreen } from '@app/space';
import { SplashScreen } from '@app/splash';
import { TrendingScreen } from '@app/trending';
import { UserScreen } from '@app/users';

import { getActiveAccount } from '@libs/storage';

import { AppLayout } from '@shared/appLayout';
import { AuthLayout } from '@shared/authLayout';
import { LoaderIcon } from '@shared/icons';
import { SettingsLayout } from '@shared/settingsLayout';

import './index.css';

const appLoader = async () => {
  const account = await getActiveAccount();
  const stronghold = sessionStorage.getItem('stronghold');
  const privkey = JSON.parse(stronghold).state.privkey || null;

  if (!account) {
    return redirect('/auth/welcome');
  }

  if (account && account.privkey.length > 35) {
    return redirect('/auth/migrate');
  }

  if (account && !privkey) {
    return redirect('/auth/unlock');
  }

  return null;
};

const router = createBrowserRouter([
  {
    path: '/',
    element: <AppLayout />,
    errorElement: <ErrorScreen />,
    loader: appLoader,
    children: [
      { path: '', element: <SpaceScreen /> },
      { path: 'trending', element: <TrendingScreen /> },
      { path: 'events/:id', element: <EventScreen /> },
      { path: 'users/:pubkey', element: <UserScreen /> },
      { path: 'chats/:pubkey', element: <ChatScreen /> },
    ],
  },
  {
    path: '/splashscreen',
    element: <SplashScreen />,
    errorElement: <ErrorScreen />,
  },
  {
    path: '/auth',
    element: <AuthLayout />,
    children: [
      { path: 'welcome', element: <WelcomeScreen /> },
      { path: 'onboarding', element: <OnboardingScreen /> },
      {
        path: 'import',
        element: <AuthImportScreen />,
        children: [
          { path: '', element: <ImportStep1Screen /> },
          { path: 'step-2', element: <ImportStep2Screen /> },
          { path: 'step-3', element: <ImportStep3Screen /> },
        ],
      },
      {
        path: 'create',
        element: <AuthCreateScreen />,
        children: [
          { path: '', element: <CreateStep1Screen /> },
          { path: 'step-2', element: <CreateStep2Screen /> },
          { path: 'step-3', element: <CreateStep3Screen /> },
        ],
      },
      { path: 'unlock', element: <UnlockScreen /> },
      { path: 'migrate', element: <MigrateScreen /> },
      { path: 'reset', element: <ResetScreen /> },
    ],
  },
  {
    path: '/settings',
    element: <SettingsLayout />,
    children: [
      { path: 'general', element: <GeneralSettingsScreen /> },
      { path: 'shortcuts', element: <ShortcutsSettingsScreen /> },
      { path: 'account', element: <AccountSettingsScreen /> },
    ],
  },
]);

export default function App() {
  return (
    <RouterProvider
      router={router}
      fallbackElement={
        <div className="flex h-full w-full items-center justify-center bg-black/90">
          <LoaderIcon className="h-6 w-6 animate-spin text-white" />
        </div>
      }
      future={{ v7_startTransition: true }}
    />
  );
}