"use client";

import { useEffect } from "react";

import {
  AppBottomNav,
  FavoriteEntryButton,
  MobileShell,
} from "@/app/_components/core";
import { buildGlobalPageUrl } from "@/router/global-route-context";
import { ROUTES } from "@/router/routes";
import { useAppNavigator } from "@/router/use-app-navigator";
import {
  useActiveCharacter,
  useActiveCharacterRoutes,
} from "@/providers/character-provider";
import { useAuthState } from "@/stores/auth/auth-context";
import { pwaUtil } from "@/utils/pwa";

import {
  SplashBackground,
  SplashButton,
  SplashContent,
  SplashLatestMessage,
  SplashLogo,
} from "./components";
import { useSplashLatestMessage } from "./hooks/use-splash-latest-message";
import styles from "./components/splash-screen.module.css";

export function SplashScreen() {
  const navigator = useAppNavigator();
  const character = useActiveCharacter();
  const characterRoutes = useActiveCharacterRoutes();
  const authState = useAuthState();
  const latestMessage = useSplashLatestMessage({
    characterId: character.id,
    hasInitialized: authState.hasInitialized,
    isAuthLoading: authState.isLoading,
    loginStatus: authState.loginStatus,
  });

  const handleStartChat = () => {
    navigator.openChat({ replace: true });
  };

  const handleOpenPrivateZone = () => {
    navigator.push(characterRoutes.privateZone, { scroll: false });
  };

  const handleOpenSplash = () => {
    navigator.push(characterRoutes.splash, { scroll: false });
  };

  const handleOpenMenu = () => {
    navigator.push(
      buildGlobalPageUrl(ROUTES.profile, characterRoutes.chat),
      { scroll: false },
    );
  };

  useEffect(() => {
    pwaUtil.prepareInstallPrompt();
  }, []);

  const hasLatestMessage =
    latestMessage.isLoading || Boolean(latestMessage.message);

  return (
    <MobileShell background="var(--color-splash-background)">
      <div className={styles.wrapper}>
        <SplashBackground
          src={character.assets.splashCover ?? character.assets.cover}
          objectPosition={character.id === "maya-tan" ? "52% center" : undefined}
        />
        <div className={styles.imageScrim} aria-hidden="true" />
        <div className={styles.favoriteAction}>
          <FavoriteEntryButton
            characterSlug={character.slug}
            tone="dark"
          />
        </div>
        <div className={styles.content}>
          <SplashLogo />
          <div className={styles.spacer} />
          <div className={styles.bottomStack}>
            {hasLatestMessage ? (
              <SplashLatestMessage
                message={latestMessage.message}
                characterName={character.shortName}
                avatarUrl={character.assets.avatar}
                isLoading={latestMessage.isLoading}
                onOpenChat={handleStartChat}
              />
            ) : null}
            <SplashContent characterName={character.shortName} />
            <SplashButton onStartChat={handleStartChat} />
          </div>
        </div>
        <AppBottomNav
          activeItem="chat"
          privateZoneLabel="Private Zone"
          onChatClick={handleOpenSplash}
          onPrivateZoneClick={handleOpenPrivateZone}
          onMenuClick={handleOpenMenu}
        />
      </div>
    </MobileShell>
  );
}
