import type { TranslationKeys } from 'i18n';
import type { InterpolationParams } from 'i18n';
import { useCallback } from 'react';
import { useTranslation as useTranslationBase } from 'i18n';
import type en from '../locales/en-GB.json';
import type uiEn from '@/components/locales/en-GB.json';

type AppTranslationKey = TranslationKeys<typeof en>;
type UiTranslationKey = TranslationKeys<typeof uiEn>;

/**
 * `t` for this workspace's own catalog, `tUi` for the shared-component one.
 *
 * Both are here rather than in two imports because "Cancel", "Close" and "Search" recur across the
 * shell and genuinely belong to `ui.*` — phase 1 put them there so phases 2 and 3 could reach for them
 * instead of inventing a second key for the same word. Anything feature-specific stays in `app.*`:
 * per D6 a `ui.*` key may not name a feature.
 *
 * Both are memoized. An unstable `t` is unusable in a dependency array, and this repo has already lost
 * days to exactly that shape — see platform/CLAUDE.md on `useClient()` and the Jellyfin player.
 */
export const useTranslation = () => {
  const { t: baseT, locale } = useTranslationBase();

  const t = useCallback((key: AppTranslationKey, params?: InterpolationParams) => baseT(`app.${key}`, params), [baseT]);

  const tUi = useCallback((key: UiTranslationKey, params?: InterpolationParams) => baseT(`ui.${key}`, params), [baseT]);

  return { t, tUi, locale };
};

export type { AppTranslationKey };