import { useEffect, useState, ReactNode } from "react";
import { View, ActivityIndicator } from "react-native";
import { Redirect } from "expo-router";
import { useAuthStore } from "../stores";
import { useThemeStore } from "../stores/ThemeStore";
import { useEventsStore } from "../stores/EventsStore";
import { useCaldavConfigStore } from "../stores/CaldavConfigStore";
import { EventService } from "../services";
import { CaldavConfigService } from "../services/CaldavConfigService";

type AuthGuardProps = {
  children: ReactNode;
};

/**
 * Preloads app data (events + CalDAV config) into stores.
 * Called before the loading spinner is dismissed so screens have data immediately.
 */
export const preloadAppData = async () => {
  const now = new Date();
  const firstOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
  const dayOfWeek = firstOfMonth.getDay();
  const daysFromPrevMonth = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
  const startDate = new Date(
    now.getFullYear(),
    now.getMonth(),
    1 - daysFromPrevMonth,
  );
  const endDate = new Date(startDate);
  endDate.setDate(startDate.getDate() + 41);
  endDate.setHours(23, 59, 59);

  const [eventsResult, configResult] = await Promise.allSettled([
    EventService.getByDateRange(startDate, endDate),
    CaldavConfigService.getConfig(),
  ]);

  if (eventsResult.status === "fulfilled") {
    useEventsStore.getState().setEvents(eventsResult.value);
  }
  if (configResult.status === "fulfilled") {
    useCaldavConfigStore.getState().setConfig(configResult.value);
  }
};

/**
 * Wraps content that requires authentication.
 * - Loads stored user on mount
 * - Preloads app data (events, CalDAV config) before dismissing spinner
 * - Shows loading indicator while checking auth state
 * - Redirects to login if not authenticated
 * - Renders children if authenticated
 */
export const AuthGuard = ({ children }: AuthGuardProps) => {
  const { theme } = useThemeStore();
  const { isAuthenticated, isLoading, loadStoredUser } = useAuthStore();
  const [dataReady, setDataReady] = useState(false);

  useEffect(() => {
    const init = async () => {
      await loadStoredUser();
      if (!useAuthStore.getState().isAuthenticated) return;
      await preloadAppData();
      setDataReady(true);
    };
    init();
  }, [loadStoredUser]);

  if (isLoading || (isAuthenticated && !dataReady)) {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center",
          backgroundColor: theme.primeBg,
        }}
      >
        <ActivityIndicator size="large" color={theme.chatBot} />
      </View>
    );
  }

  if (!isAuthenticated) {
    return <Redirect href="/login" />;
  }

  return <>{children}</>;
};