import { useQuery } from '@tanstack/react-query';
import { LegalPageView, isLegalKind } from '@dorfteich/shared';
import { useTranslation } from 'react-i18next';
import { Link, useParams } from 'react-router-dom';

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

import { useDocumentTitle } from '../lib/use-document-title';
/**
 * Public legal page (issue #82): imprint or privacy policy, reachable
 * without a session. The HTML comes from the api's sanitizing Markdown
 * pipeline (like #56's public view) — safe to render. An unconfigured page
 * shows a notice instead of silently missing, and Site Admins additionally
 * get a warning banner pointing at the settings (AC).
 */
export function LegalPage(): React.JSX.Element {
  const { t } = useTranslation('legal');
  const { user } = useAuth();
  const { kind = '' } = useParams<{ kind: string }>();
  useDocumentTitle(t(`title.${kind}`));

  const query = useQuery({
    queryKey: ['legal', kind],
    queryFn: () => apiGet<LegalPageView>(`/legal/${kind}/content`),
    enabled: isLegalKind(kind),
  });

  if (!isLegalKind(kind)) return <NotFoundPage />;
  if (!query.data) return <div aria-busy="true" />;

  return (
    <article className="legal-page">
      <h1>{t(`title.${kind}`)}</h1>
      {!query.data.configured && user?.isSiteAdmin && (
        <p className="form-banner form-banner--error" role="alert">
          {t('adminWarning')} <Link to="/admin">{t('adminWarningLink')}</Link>
        </p>
      )}
      {query.data.configured ? (
        // Server-rendered through the sanitizing editor pipeline — safe.
        <div className="legal-page__body" dangerouslySetInnerHTML={{ __html: query.data.html }} />
      ) : (
        <p className="legal-page__placeholder">{t('notConfigured')}</p>
      )}
    </article>
  );
}