fotospiel-app/resources/js/admin/onboarding/store.tsx

import React from 'react';
import { fetchOnboardingStatus, trackOnboarding } from '../api';

export type OnboardingProgress = {
  welcomeSeen: boolean;
  packageSelected: boolean;
  eventCreated: boolean;
  lastStep?: string | null;
  adminAppOpenedAt?: string | null;
  selectedPackage?: {
    id: number;
    name: string;
    priceText?: string | null;
    isSubscription?: boolean;
  } | null;
};

type OnboardingUpdate = Partial<OnboardingProgress> & {
  serverStep?: string;
  meta?: Record<string, unknown>;
};

type OnboardingContextValue = {
  progress: OnboardingProgress;
  setProgress: (updater: (prev: OnboardingProgress) => OnboardingProgress) => void;
  markStep: (step: OnboardingUpdate) => void;
  reset: () => void;
};

const DEFAULT_PROGRESS: OnboardingProgress = {
  welcomeSeen: false,
  packageSelected: false,
  eventCreated: false,
  lastStep: null,
  adminAppOpenedAt: null,
  selectedPackage: null,
};

const STORAGE_KEY = 'tenant-admin:onboarding-progress';

const OnboardingProgressContext = React.createContext<OnboardingContextValue | undefined>(undefined);

function readStoredProgress(): OnboardingProgress {
  if (typeof window === 'undefined') {
    return DEFAULT_PROGRESS;
  }
  try {
    const raw = window.localStorage.getItem(STORAGE_KEY);
    if (!raw) {
      return DEFAULT_PROGRESS;
    }
    const parsed = JSON.parse(raw) as Partial<OnboardingProgress>;
    return {
      ...DEFAULT_PROGRESS,
      ...parsed,
    };
  } catch (error) {
    console.warn('[OnboardingProgress] Failed to parse stored value', error);
    return DEFAULT_PROGRESS;
  }
}

function writeStoredProgress(progress: OnboardingProgress) {
  if (typeof window === 'undefined') {
    return;
  }
  try {
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(progress));
  } catch (error) {
    console.warn('[OnboardingProgress] Failed to persist value', error);
  }
}

export function OnboardingProgressProvider({ children }: { children: React.ReactNode }) {
  const [progress, setProgressState] = React.useState<OnboardingProgress>(() => readStoredProgress());
  const [synced, setSynced] = React.useState(false);

  React.useEffect(() => {
    if (synced) {
      return;
    }

    fetchOnboardingStatus().then((status) => {
      if (!status) {
        setSynced(true);
        return;
      }

      setProgressState((prev) => {
        const next: OnboardingProgress = {
          ...prev,
          adminAppOpenedAt: status.steps.admin_app_opened_at ?? prev.adminAppOpenedAt ?? null,
          eventCreated: Boolean(status.steps.event_created ?? prev.eventCreated),
          packageSelected: Boolean(status.steps.selected_packages ?? prev.packageSelected),
        };

        writeStoredProgress(next);

        return next;
      });

      if (!status.steps.admin_app_opened_at) {
        const timestamp = new Date().toISOString();
        trackOnboarding('admin_app_opened').catch(() => {});
        setProgressState((prev) => {
          const next = { ...prev, adminAppOpenedAt: timestamp };
          writeStoredProgress(next);
          return next;
        });
      }

      setSynced(true);
    });
  }, [synced]);

  const setProgress = React.useCallback((updater: (prev: OnboardingProgress) => OnboardingProgress) => {
    setProgressState((prev) => {
      const next = updater(prev);
      writeStoredProgress(next);
      return next;
    });
  }, []);

  const markStep = React.useCallback((step: OnboardingUpdate) => {
    const { serverStep, meta, ...rest } = step;

    setProgress((prev) => ({
      ...prev,
      ...rest,
      lastStep: typeof rest.lastStep === 'undefined' ? prev.lastStep : rest.lastStep,
    }));

    if (serverStep) {
      trackOnboarding(serverStep, meta).catch(() => {});
    }
  }, [setProgress]);

  const reset = React.useCallback(() => {
    setProgress(() => DEFAULT_PROGRESS);
  }, [setProgress]);

  const value = React.useMemo<OnboardingContextValue>(() => ({
    progress,
    setProgress,
    markStep,
    reset,
  }), [progress, setProgress, markStep, reset]);

  return (
    <OnboardingProgressContext.Provider value={value}>
      {children}
    </OnboardingProgressContext.Provider>
  );
}

export function useOnboardingProgress() {
  const context = React.useContext(OnboardingProgressContext);
  if (!context) {
    throw new Error('useOnboardingProgress must be used within OnboardingProgressProvider');
  }
  return context;
}