"use client";

import { useEffect } from "react";
import { hydrateProjectsFromServer, scheduleProjectsSync } from "@/lib/client/projects-sync";
import { useProjectsHydrated } from "@/hooks/use-projects-hydrated";
import { useAuthStore } from "@/store/auth-store";
import { useProjectsStore } from "@/store/projects-store";

/** Sync projects with server on login and after local mutations. */
export function ProjectsSync() {
  const authHydrated = useAuthStore((s) => s.hydrated);
  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
  const projectsHydrated = useProjectsHydrated();

  useEffect(() => {
    if (!authHydrated || !projectsHydrated || !isAuthenticated) return;
    void hydrateProjectsFromServer();
  }, [authHydrated, projectsHydrated, isAuthenticated]);

  useEffect(() => {
    if (!isAuthenticated) return;

    return useProjectsStore.subscribe((state, prev) => {
      if (!state._hasHydrated) return;
      if (
        state.projects !== prev.projects ||
        state.activeProjectId !== prev.activeProjectId ||
        state.dataByProjectId !== prev.dataByProjectId
      ) {
        scheduleProjectsSync();
      }
    });
  }, [isAuthenticated]);

  return null;
}