'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// packages/ui/src/crud/components/EntityRecommendations.tsx
/**
 * @fileoverview Reusable recommendations section for related entities
 * @description Fetches and displays related entity cards in a grid.
 * Caller defines "related by what" via queryOptions.
 *
 * @version 0.0.1
 * @since 0.0.15
 * @author AMBROISE PARK Consulting
 */
import { Card, Section, Skeleton, Stack } from '@donotdev/components';
import { useTranslation, useBreakpoint } from '@donotdev/core';
import { isCrudModuleAvailable, useCrudCardList } from '../crudImports';
import { CrudCard } from './CrudCardLink';
/**
 * Displays a grid of related entity cards.
 * Uses useCrudCardList (listCard schema) so cards render identically to EntityCardList.
 *
 * **Title resolution (i18n):**
 * 1. `title` prop — if provided, used as-is (pre-translated string)
 * 2. `recommendations.title` in entity namespace — consumer override
 * 3. `recommendations.title` in `crud` namespace — framework default ("You may also like")
 *
 * Consumers override by adding to their entity translation file:
 * ```json
 * { "recommendations": { "title": "Similar Apartments" } }
 * ```
 *
 * @example
 * ```tsx
 * // Auto-translated title (entity namespace → crud fallback)
 * <EntityRecommendations
 *   entity={apartmentEntity}
 *   queryOptions={{
 *     where: [
 *       { field: 'district_code', operator: 'eq', value: current.district_code },
 *       { field: 'id', operator: 'neq', value: current.id },
 *     ],
 *     limit: 3,
 *   }}
 * />
 *
 * // Explicit title override
 * <EntityRecommendations
 *   entity={apartmentEntity}
 *   title="Nearby Apartments"
 *   queryOptions={...}
 * />
 * ```
 *
 * @version 0.0.3
 * @since 0.0.15
 * @author AMBROISE PARK Consulting
 */
export function EntityRecommendations({ entity, queryOptions, title, basePath, cols = [1, 1, 3, 3], className, }) {
    // Safe guard: isCrudModuleAvailable is a module-level constant (immutable after load).
    // eslint-disable-next-line react-hooks/rules-of-hooks
    if (!isCrudModuleAvailable)
        return null;
    const { t } = useTranslation([entity.namespace, 'crud']);
    const { items, loading } = useCrudCardList(entity, {
        queryOptions,
    });
    if (!loading && items.length === 0) {
        return null;
    }
    const resolvedBasePath = basePath ?? `/${entity.collection}`;
    const resolvedTitle = title ?? t('recommendations.title', { defaultValue: 'You may also like' });
    // Breakpoint-aware skeleton count: 3 rows at current breakpoint
    const bp = useBreakpoint('current');
    const bpIndex = {
        mobile: 0,
        tablet: 1,
        laptop: 2,
        desktop: 3,
    };
    const currentCols = (Array.isArray(cols)
        ? cols[bpIndex[bp] ?? 3]
        : typeof cols === 'number'
            ? cols
            : 3) ?? 1;
    const skeletonCount = (typeof currentCols === 'number' ? currentCols : 3) * 3;
    return (_jsx(Section, { title: resolvedTitle, gridCols: cols, className: className, children: loading
            ? Array.from({ length: skeletonCount }, (_, i) => (_jsx(Card, { title: _jsx(Skeleton, { width: "60%" }), subtitle: _jsx(Skeleton, { width: "40%" }), content: _jsxs(Stack, { direction: "column", gap: "tight", children: [_jsx(Skeleton, { width: "80%" }), _jsx(Skeleton, { width: "50%" })] }), elevated: true }, i)))
            : items.map((item) => (_jsx(CrudCard, { item: item, entity: entity, detailHref: `${resolvedBasePath}/${item.id}` }, item.id))) }));
}
