/**
 * Regression for the review's CR1: the LightboxModal posted comments to
 * `/upload/{id}/comment` (singular) while the only route is `/comments` (plural),
 * so every comment submitted through the UI 404'd and was silently lost. The
 * earlier "comment → SSE" spec passed by posting via a fetch helper, bypassing
 * the component — a false green. This drives the real component end-to-end.
 */
import { test, expect } from '../../fixtures/test';
import { seedUpload } from '../../helpers/seed';

const BASE = process.env.E2E_FRONTEND_URL ?? 'http://localhost:3101';

test.describe('Comments — UI round-trip (CR1)', () => {
  test('a comment typed in the lightbox persists to the backend', async ({
    page,
    guest,
    signIn,
  }) => {
    const author = await guest('CommentAuthor');
    const commenter = await guest('Commenter');
    const uploadId = await seedUpload(author.jwt, { caption: 'Comment target' });

    await signIn(page, commenter);
    await page.goto('/feed');

    // Open the lightbox. Only one upload exists, so the first open-button is it.
    const imageButton = page.getByRole('button', { name: 'Bild vergrößern' }).first();
    await expect(imageButton).toBeVisible({ timeout: 15_000 });
    await imageButton.click();

    const lightbox = page.locator('[role="dialog"][aria-labelledby="lightbox-title"]');
    await expect(lightbox).toBeVisible();

    const text = `Wunderschönes Foto ${Date.now()}`;
    await lightbox.getByPlaceholder(/kommentar/i).fill(text);
    await lightbox.getByRole('button', { name: /senden/i }).click();

    // The component appends the comment only on a 2xx — with the old singular path
    // it threw and nothing appeared. Assert it's visible in the panel...
    await expect(lightbox.getByText(text)).toBeVisible();

    // ...and that it actually persisted server-side (the crux CR1 broke).
    await expect
      .poll(async () => {
        const res = await fetch(`${BASE}/api/v1/upload/${uploadId}/comments`, {
          headers: { Authorization: `Bearer ${commenter.jwt}` },
        });
        const body = await res.json();
        return Array.isArray(body) && body.some((c: { body: string }) => c.body === text);
      })
      .toBe(true);
  });
});