import type { BacklinkView } from '@dorfteich/shared';
import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';

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

/**
 * "Linked from" panel below a page in read mode (issue #48): the pages that
 * wikilink here, each with a short snippet, from the server-maintained index
 * (#47). Collapsible; hidden entirely when nothing links here so it adds no
 * noise. Backlinks are already permission-filtered by the api.
 */
export function BacklinksPanel({
  pageId,
  pondSlug,
}: {
  pageId: string;
  pondSlug: string;
}): React.JSX.Element | null {
  const { t } = useTranslation('links');
  const backlinks = useQuery({
    queryKey: ['backlinks', pageId],
    queryFn: () => apiGet<BacklinkView[]>(`/pages/${pageId}/backlinks`),
  });

  // Nothing to show until loaded; stay invisible when there are no backlinks.
  if (!backlinks.data || backlinks.data.length === 0) return null;

  return (
    <details className="backlinks" open>
      <summary>{t('backlinks.toggle', { count: backlinks.data.length })}</summary>
      <ul className="backlinks__list">
        {backlinks.data.map((link) => (
          <li key={link.pageId} className="backlinks__item">
            <Link to={`/p/${pondSlug}/${link.slug}`} className="backlinks__link">
              {link.title}
            </Link>
            {link.snippet && <p className="backlinks__snippet">{link.snippet}</p>}
          </li>
        ))}
      </ul>
    </details>
  );
}