/**
 * useElements Hook
 *
 * Computed hook for accessing all elements from page analyses.
 * Elements are derived from analyses data (not a separate API endpoint).
 *
 * @layer Presentation
 */

import { useMemo } from 'react';
import type { PageElement } from '@/domain/entities/PageAnalysis';
import { usePageAnalyses } from './usePageAnalyses';

/**
 * useElements Hook Options
 */
export interface UseElementsOptions {
  /**
   * Tenant ID to fetch elements for
   */
  tenantId?: string;

  /**
   * Maximum number of analyses to load
   * @default 100
   */
  limit?: number;
}

/**
 * useElements Hook Return Type
 */
export interface UseElementsReturn {
  /**
   * All elements from analyses (flattened)
   */
  elements: PageElement[];

  /**
   * Elements grouped by type
   */
  elementsByType: Record<string, PageElement[]>;

  /**
   * Total element count
   */
  totalElements: number;

  /**
   * Loading state
   */
  isLoading: boolean;

  /**
   * Error state
   */
  error: Error | null;
}

/**
 * Get all elements from page analyses
 *
 * Elements are extracted from PageAnalysis entities.
 * This hook provides a flattened view of all elements across analyses.
 *
 * @param options - Query options
 * @returns Elements with loading/error states
 *
 * @example
 * ```tsx
 * function ElementsChart() {
 *   const { elementsByType, totalElements, isLoading } = useElements({
 *     tenantId: 'tenant-123',
 *   });
 *
 *   if (isLoading) return <Spinner />;
 *
 *   return (
 *     <div>
 *       <h3>Total Elements: {totalElements}</h3>
 *       <ul>
 *         {Object.entries(elementsByType).map(([type, elements]) => (
 *           <li key={type}>{type}: {elements.length}</li>
 *         ))}
 *       </ul>
 *     </div>
 *   );
 * }
 * ```
 */
export function useElements(options: UseElementsOptions = {}): UseElementsReturn {
  const { tenantId, limit = 100 } = options;

  // Fetch analyses (elements are part of analyses)
  const { analyses, isLoading, error } = usePageAnalyses({
    tenantId,
    limit,
  });

  // Extract and flatten all elements from analyses
  const elements = useMemo(() => {
    return analyses.flatMap((analysis) => analysis.elements);
  }, [analyses]);

  // Group elements by type
  const elementsByType = useMemo(() => {
    const grouped: Record<string, PageElement[]> = {};

    elements.forEach((element) => {
      const type = element.type;
      if (!grouped[type]) {
        grouped[type] = [];
      }
      grouped[type].push(element);
    });

    return grouped;
  }, [elements]);

  return {
    elements,
    elementsByType,
    totalElements: elements.length,
    isLoading,
    error,
  };
}