import { CustomFontView, FontCatalogEntry, customFontEntries } from '@dorfteich/shared';
import { useQuery } from '@tanstack/react-query';
import { useMemo } from 'react';

import { useAuth } from '../auth/auth-context';
import { apiGet } from '../lib/api';

export const CUSTOM_FONTS_KEY = ['fonts', 'custom'];

/**
 * The instance's operator-uploaded font families (issues #303/#304).
 *
 * Every font-aware surface needs them: the pickers offer them, the licence
 * page attributes them, `fontStack` needs them to NAME the family instead of
 * falling through to the system stack, and `CustomFontFaces` turns them into
 * `@font-face` rules. One query key, so they are fetched once per session and
 * shared.
 *
 * Only fetched while signed in — the endpoint requires a session, and asking
 * on the login screen would produce a 401 for nothing.
 */
export function useCustomFonts(): CustomFontView[] {
  const { user } = useAuth();
  const query = useQuery({
    queryKey: CUSTOM_FONTS_KEY,
    queryFn: () => apiGet<CustomFontView[]>('/fonts/custom'),
    enabled: Boolean(user),
    // Uploading a font is a rare Site-Admin act; the manager invalidates the
    // key itself, so a long life here costs nothing.
    staleTime: 5 * 60 * 1000,
  });
  return query.data ?? [];
}

/** The same families in the shape `fontEntry`/`fontStack` accept. */
export function useCustomFontEntries(): FontCatalogEntry[] {
  const fonts = useCustomFonts();
  return useMemo(() => customFontEntries(fonts), [fonts]);
}