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

import { apiGet, fetchHealth } from '../lib/api';

import { useDocumentTitle } from '../lib/use-document-title';
/**
 * Public landing page (`/`). When a Site Admin has written landing content
 * (Admin → Settings → Landing page), it renders that — server-sanitized
 * HTML from the same Markdown pipeline as the legal pages. Otherwise it
 * shows the built-in welcome text and an instance liveness pill.
 */
export function HomePage(): React.JSX.Element {
  const { t } = useTranslation();
  useDocumentTitle(t('home.title'));
  const home = useQuery({
    queryKey: ['home-content'],
    queryFn: () => apiGet<HomeContentView>('/home/content'),
  });
  const health = useQuery({ queryKey: ['healthz'], queryFn: fetchHealth, retry: 1 });

  if (home.data?.configured) {
    // Server-rendered through the sanitizing editor pipeline — safe.
    return <article className="home-page" dangerouslySetInnerHTML={{ __html: home.data.html }} />;
  }

  return (
    <>
      <h1>{t('home.title')}</h1>
      <p>{t('home.intro')}</p>
      {health.isPending && <span className="status-pill">{t('home.api.checking')}</span>}
      {health.isSuccess && (
        <span className="status-pill status-pill--ok">
          {t('home.api.ok')} · {health.data.version}
        </span>
      )}
      {health.isError && (
        <span className="status-pill status-pill--error">{t('home.api.error')}</span>
      )}
    </>
  );
}