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

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

interface PublicPageContent {
  pondName: string;
  pondSlug: string;
  title: string;
  slug: string;
  html: string;
  updatedAt: string;
}

/**
 * Read-only public page view (issue #56): renders a page that a `public` grant
 * opens to anonymous visitors, from the server-derived HTML — deliberately
 * WITHOUT importing the collaborative editor, so anonymous readers never load
 * the editor bundle. A non-public page 404s (the api hides its existence).
 */
export function PublicPageView(): React.JSX.Element {
  const { t } = useTranslation('public');
  const { pondSlug = '', pageSlug = '' } = useParams<{ pondSlug: string; pageSlug: string }>();

  const query = useQuery({
    queryKey: ['public-page', pondSlug, pageSlug],
    queryFn: () => apiGet<PublicPageContent>(`/public/${pondSlug}/${pageSlug}/content`),
    enabled: Boolean(pondSlug && pageSlug),
    retry: false,
  });

  if (query.error instanceof ApiError && query.error.status === 404) return <NotFoundPage />;
  if (query.isLoading || !query.data) return <div aria-busy="true" />;

  const page = query.data;
  return (
    <article className="public-page">
      <p className="public-page__badge">{t('readOnlyBadge')}</p>
      <p className="public-page__pond">{page.pondName}</p>
      <h1 className="public-page__title">{page.title}</h1>
      {/* The HTML comes from the server's content cache (issue #24), derived
          from the sanitized editor schema — safe to render. */}
      <div className="public-page__body" dangerouslySetInnerHTML={{ __html: page.html }} />
    </article>
  );
}