thrilltrack-explorer/src/hooks/homepage/useHomepageRecentChanges.ts

/**
 * Homepage Recent Changes Hook
 * 
 * Fetches recent entity changes (parks, rides, companies) for homepage display.
 * Uses optimized RPC function for single-query fetch of all data.
 * 
 * Features:
 * - Fetches up to 24 recent changes
 * - Includes entity details, change metadata, and user info
 * - Single database query via RPC
 * - 5 minute cache for homepage performance
 * - Performance monitoring
 * 
 * @param enabled - Whether the query should run (default: true)
 * @returns Array of recent changes with full entity context
 * 
 * @example
 * ```tsx
 * const { data: changes, isLoading } = useHomepageRecentChanges();
 * 
 * changes?.forEach(change => {
 *   console.log(`${change.name} was ${change.changeType} by ${change.changedBy?.username}`);
 * });
 * ```
 */

import { useQuery, UseQueryResult } from '@tanstack/react-query';
import { supabase } from '@/integrations/supabase/client';
import { queryKeys } from '@/lib/queryKeys';

interface RecentChange {
  id: string;
  name: string;
  type: 'park' | 'ride' | 'company';
  slug: string;
  parkSlug?: string;
  imageUrl?: string;
  changeType: string;
  changedAt: string;
  changedBy?: {
    username: string;
    avatarUrl?: string;
  };
  changeReason?: string;
}

export function useHomepageRecentChanges(
  enabled = true
): UseQueryResult<RecentChange[]> {
  return useQuery({
    queryKey: queryKeys.homepage.recentChanges(),
    queryFn: async () => {
      const startTime = performance.now();
      
      // Use the new database function to get all changes in a single query
      const { data, error } = await supabase.rpc('get_recent_changes', { limit_count: 24 });
      
      if (error) throw error;
      
      // Transform the database response to match our interface
      const result: RecentChange[] = (data || []).map((item: any) => ({
        id: item.entity_id,
        name: item.entity_name,
        type: item.entity_type as 'park' | 'ride' | 'company',
        slug: item.entity_slug,
        parkSlug: item.park_slug || undefined,
        imageUrl: item.image_url || undefined,
        changeType: item.change_type,
        changedAt: item.changed_at,
        changedBy: item.changed_by_username ? {
          username: item.changed_by_username,
          avatarUrl: item.changed_by_avatar || undefined
        } : undefined,
        changeReason: item.change_reason || undefined
      }));

      // Performance monitoring (dev only)
      if (import.meta.env.DEV) {
        const duration = performance.now() - startTime;
        if (duration > 500) {
          console.warn(`⚠️ Slow query: useHomepageRecentChanges took ${duration.toFixed(0)}ms`, { changeCount: result.length });
        }
      }

      return result;
    },
    enabled,
    staleTime: 5 * 60 * 1000,
    gcTime: 15 * 60 * 1000,
    refetchOnWindowFocus: false,
  });
}