pn-new-crm/src/hooks/use-dashboard-widgets.ts

'use client';

import { useMemo, useSyncExternalStore } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';

import { apiFetch } from '@/lib/api/client';
import { DASHBOARD_WIDGETS, type DashboardWidget } from '@/components/dashboard/widget-registry';
import { useDashboardIntegrations } from '@/hooks/use-dashboard-integrations';

interface PreferencesResponse {
  data?: {
    dashboardWidgets?: Record<string, boolean>;
    /**
     * Ordered widget ids for the desktop (xl, >= 1280px) split layout.
     * When present, visible widgets are sorted by this order first;
     * unlisted widgets fall through to the registry's declared order.
     */
    dashboardWidgetOrder?: string[];
    /**
     * Ordered widget ids for the stacked layout (< 1280px). Falls back
     * to `dashboardWidgetOrder` then registry order when unset.
     */
    dashboardWidgetOrderMobile?: string[];
    // Other fields exist (timezone, locale, …) but we don't need them
    // here - the typed access is intentionally narrow.
  };
}

interface UseDashboardWidgetsOptions {
  /** SSR-prefetched visibility map. When provided, seeds the react-query
   *  cache so the first render uses the rep's saved layout - no reflow when
   *  the client fetch resolves. Pass `null` (not `undefined`) when the
   *  caller has confirmed there is no stored preference so we don't keep
   *  showing the loading layout. */
  initialVisibility?: Record<string, boolean> | null;
}

// xl breakpoint matches Tailwind's `xl:` modifier and the dashboard
// shell's actual layout-flip point (charts | rails side-by-side at
// >= 1280, stacked below). Reading from `useSyncExternalStore` keeps
// renders pure so the React Compiler can lift the call.
const XL_QUERY = '(min-width: 1280px)';
function subscribeXl(callback: () => void): () => void {
  if (typeof window === 'undefined') return () => {};
  const mq = window.matchMedia(XL_QUERY);
  mq.addEventListener('change', callback);
  return () => mq.removeEventListener('change', callback);
}
function getXlSnapshot(): boolean {
  return window.matchMedia(XL_QUERY).matches;
}
function getXlServerSnapshot(): boolean {
  return true;
}
function useIsXlLayout(): boolean {
  return useSyncExternalStore(subscribeXl, getXlSnapshot, getXlServerSnapshot);
}

/**
 * Returns the dashboard widget list filtered by the user's visibility
 * preferences and exposes a toggle. Single source of truth for "what's
 * showing on the dashboard right now" - used by both `DashboardShell`
 * and the settings UI.
 *
 * Stored shape: `preferences.dashboardWidgets: { [widgetId]: boolean }`.
 * Missing keys fall back to the registry's `defaultVisible`, so a newly
 * added widget surfaces for everyone without a migration.
 */
export function useDashboardWidgets(options: UseDashboardWidgetsOptions = {}) {
  const queryClient = useQueryClient();
  const integrations = useDashboardIntegrations();
  const isXl = useIsXlLayout();

  const { data, isLoading } = useQuery<PreferencesResponse>({
    queryKey: ['me', 'preferences', 'dashboard-widgets'],
    queryFn: () => apiFetch<PreferencesResponse>('/api/v1/users/me/preferences'),
    staleTime: 60_000,
    initialData:
      options.initialVisibility !== undefined
        ? ({ data: { dashboardWidgets: options.initialVisibility ?? {} } } as PreferencesResponse)
        : undefined,
  });

  // The registry is the universe of declared widgets. `availableWidgets`
  // is the universe filtered down to what actually CAN render right now
  // (i.e. its required integration is connected). The picker iterates
  // this list, and the visible-widgets render path filters off the same
  // list so flipping on a widget whose service isn't wired up does
  // nothing silently - the toggle simply isn't shown.
  const availableWidgets: DashboardWidget[] = useMemo(
    () => DASHBOARD_WIDGETS.filter((w) => !w.requires || integrations.available[w.requires]),
    [integrations],
  );

  const visibility: Record<string, boolean> = useMemo(() => {
    const stored = data?.data?.dashboardWidgets ?? {};
    const merged: Record<string, boolean> = {};
    for (const w of availableWidgets) {
      merged[w.id] = stored[w.id] ?? w.defaultVisible;
    }
    return merged;
  }, [data, availableWidgets]);

  // Order map: widgetId → rank. Unlisted widgets get +Infinity so they
  // fall after the explicitly-ordered ones in stable registry order.
  // The active list is the viewport-matched one; the stacked layout
  // (< xl) falls back to the desktop order when the rep hasn't yet
  // customized mobile, so a partially-configured user sees consistent
  // ordering across devices instead of an unstyled jumble.
  const orderRank: Record<string, number> = useMemo(() => {
    const desktopOrder = data?.data?.dashboardWidgetOrder ?? [];
    const mobileOrder = data?.data?.dashboardWidgetOrderMobile;
    const order = isXl ? desktopOrder : (mobileOrder ?? desktopOrder);
    const map: Record<string, number> = {};
    order.forEach((id, idx) => {
      map[id] = idx;
    });
    return map;
  }, [data, isXl]);

  const visibleWidgets: DashboardWidget[] = useMemo(() => {
    const visible = availableWidgets.filter((w) => visibility[w.id]);
    return visible.sort((a, b) => {
      const ra = orderRank[a.id] ?? Number.POSITIVE_INFINITY;
      const rb = orderRank[b.id] ?? Number.POSITIVE_INFINITY;
      if (ra !== rb) return ra - rb;
      // Tie-break by registry index so the original order surfaces for
      // widgets the rep hasn't explicitly placed.
      return availableWidgets.indexOf(a) - availableWidgets.indexOf(b);
    });
  }, [availableWidgets, visibility, orderRank]);

  /**
   * Persists a single widget's visibility. Optimistically updates the
   * cache so the dashboard reflows instantly; the server PATCH races in
   * the background. On failure the cache invalidates and re-reads the
   * authoritative value.
   */
  const mutation = useMutation({
    mutationFn: async (next: Record<string, boolean>) =>
      apiFetch<PreferencesResponse>('/api/v1/users/me/preferences', {
        method: 'PATCH',
        body: { dashboardWidgets: next },
      }),
    onMutate: async (next) => {
      await queryClient.cancelQueries({ queryKey: ['me', 'preferences', 'dashboard-widgets'] });
      const previous = queryClient.getQueryData<PreferencesResponse>([
        'me',
        'preferences',
        'dashboard-widgets',
      ]);
      queryClient.setQueryData<PreferencesResponse>(
        ['me', 'preferences', 'dashboard-widgets'],
        (old) => ({
          data: { ...(old?.data ?? {}), dashboardWidgets: next },
        }),
      );
      return { previous };
    },
    onError: (_err, _next, ctx) => {
      if (ctx?.previous) {
        queryClient.setQueryData(['me', 'preferences', 'dashboard-widgets'], ctx.previous);
      }
    },
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['me', 'preferences', 'dashboard-widgets'] });
    },
  });

  function setVisible(id: string, visible: boolean) {
    mutation.mutate({ ...visibility, [id]: visible });
  }

  function setAll(visible: boolean) {
    const next: Record<string, boolean> = {};
    for (const w of availableWidgets) next[w.id] = visible;
    mutation.mutate(next);
  }

  /**
   * Restores each widget's visibility to its registry `defaultVisible`.
   * Different from `setAll(true)` - it keeps the "off by default" widgets
   * (KPI tiles, Berth Status donut, Source Conversion, Hot Deals) off so
   * reps end up with the original out-of-the-box dashboard. Scoped to
   * `availableWidgets` so disconnected integrations don't sneak in.
   */
  function resetToDefaults() {
    const next: Record<string, boolean> = {};
    for (const w of availableWidgets) next[w.id] = w.defaultVisible;
    mutation.mutate(next);
  }

  // Persist the order list. Optimistic so the dashboard reflows on
  // drop; the PATCH races behind. Falls back to invalidating on error.
  // The mutation accepts a `{ scope }` so it writes to the right field
  // (xl → dashboardWidgetOrder, stacked → dashboardWidgetOrderMobile).
  const orderMutation = useMutation({
    mutationFn: async ({
      nextOrder,
      scope,
    }: {
      nextOrder: string[];
      scope: 'desktop' | 'mobile';
    }) =>
      apiFetch<PreferencesResponse>('/api/v1/users/me/preferences', {
        method: 'PATCH',
        body:
          scope === 'desktop'
            ? { dashboardWidgetOrder: nextOrder }
            : { dashboardWidgetOrderMobile: nextOrder },
      }),
    onMutate: async ({ nextOrder, scope }) => {
      await queryClient.cancelQueries({ queryKey: ['me', 'preferences', 'dashboard-widgets'] });
      const previous = queryClient.getQueryData<PreferencesResponse>([
        'me',
        'preferences',
        'dashboard-widgets',
      ]);
      queryClient.setQueryData<PreferencesResponse>(
        ['me', 'preferences', 'dashboard-widgets'],
        (old) => ({
          data: {
            ...(old?.data ?? {}),
            ...(scope === 'desktop'
              ? { dashboardWidgetOrder: nextOrder }
              : { dashboardWidgetOrderMobile: nextOrder }),
          },
        }),
      );
      return { previous };
    },
    onError: (_err, _next, ctx) => {
      if (ctx?.previous) {
        queryClient.setQueryData(['me', 'preferences', 'dashboard-widgets'], ctx.previous);
      }
    },
    onSettled: () => {
      void queryClient.invalidateQueries({ queryKey: ['me', 'preferences', 'dashboard-widgets'] });
    },
  });

  /**
   * Persist a new visible-widget order to the field that matches the
   * current viewport - desktop (xl+) gets one order, the stacked layout
   * gets its own. The hook decides the scope based on `useIsXlLayout()`
   * so callers (the modal) don't need to repeat the breakpoint logic.
   */
  function setOrder(nextOrder: string[]) {
    orderMutation.mutate({ nextOrder, scope: isXl ? 'desktop' : 'mobile' });
  }

  return {
    isLoading,
    /**
     * Widgets that can render right now (registry minus those whose
     * required integration isn't connected). Use this for the picker
     * AND for the dashboard render - both surfaces stay in sync.
     */
    allWidgets: availableWidgets,
    /** Visible widgets, sorted by the rep's order for the active
     *  layout tier (desktop vs stacked) then by registry index. */
    visibleWidgets,
    /** True when the dashboard's xl two-column layout is active. Lets
     *  callers (the customize modal) tailor copy and split into region-
     *  scoped sortables vs a single flat list. */
    isXlLayout: isXl,
    /** Map of widgetId → visible. Use for switch state binding. */
    visibility,
    /** Current rank per widget id (for SortableContext keying). */
    orderRank,
    setVisible,
    setAll,
    setOrder,
    resetToDefaults,
    isSaving: mutation.isPending || orderMutation.isPending,
  };
}