import type { PageView, PondView } from '@dorfteich/shared';
import { useQuery } from '@tanstack/react-query';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate, useParams } from 'react-router-dom';

import { FormError } from '../components/forms';
import { apiGet } from '../lib/api';

/**
 * Landing route for a pond without a page open yet (`/p/:pondSlug`, e.g.
 * from the pond switcher). Redirects to the first page per the pond's sort
 * mode once loaded; an empty pond shows a hint pointing at the sidebar's
 * "new page" button instead (issue #26).
 */
export function PondHomePage(): React.JSX.Element {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const { pondSlug = '' } = useParams<{ pondSlug: string }>();

  const pond = useQuery({
    queryKey: ['pond', pondSlug],
    queryFn: () => apiGet<PondView>(`/ponds/${pondSlug}`),
  });
  const pages = useQuery({
    queryKey: ['pages', pond.data?.id, pond.data?.settings.sidebarSort],
    queryFn: () => apiGet<PageView[]>(`/ponds/${pond.data!.id}/pages`),
    enabled: Boolean(pond.data),
  });

  useEffect(() => {
    if (pages.data && pages.data.length > 0) {
      navigate(`/p/${pondSlug}/${pages.data[0]!.slug}`, { replace: true });
    }
  }, [pages.data, pondSlug, navigate]);

  if (pond.error || pages.error) return <FormError error={pond.error ?? pages.error} />;
  if (!pond.data || !pages.data || pages.data.length > 0) return <></>;

  return (
    <div className="pond-home">
      <h1>{pond.data.name}</h1>
      <p>{t('pondHome.empty')}</p>
    </div>
  );
}