import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';

import { fetchOAuthProviders } from '@/api/oauth';
import { Card } from '@/components/ui/primitives';

/**
 * Вход через внешние провайдеры (Фаза 7). Раздел только показывает, какие
 * провайдеры включены на инстансе: привязка происходит при входе по
 * подтверждённому email, а отвязка — действие оператора/администратора.
 */
export function LinkedAccountsSection() {
  const { t } = useTranslation();
  const providers = useQuery({
    queryKey: ['auth', 'oauth', 'providers'],
    queryFn: ({ signal }) => fetchOAuthProviders(signal),
    staleTime: 5 * 60 * 1000,
  });
  const enabled = providers.data?.providers ?? [];

  return (
    <Card>
      <h2 className="text-lg font-semibold">{t('settings.security.oauthTitle')}</h2>
      <p className="mt-1 text-sm text-fg-muted">{t('settings.security.oauthDescription')}</p>

      {enabled.length === 0 ? (
        <p className="mt-3 text-sm text-fg-muted" data-testid="oauth-none">
          {t('settings.security.oauthDisabled')}
        </p>
      ) : (
        <ul className="mt-3 flex flex-col gap-2" data-testid="oauth-providers">
          {enabled.map((provider) => (
            <li
              key={provider.id}
              className="flex items-center justify-between rounded-[var(--radius-md)] border border-border/60 bg-surface-2/60 p-3 text-sm"
            >
              <span>{provider.name}</span>
              <span className="text-xs text-fg-muted">
                {t('settings.security.oauthLinkedByEmail')}
              </span>
            </li>
          ))}
        </ul>
      )}
    </Card>
  );
}