import { test, expect } from '../../fixtures/multi-client';
import { RegisterPage } from '../../pages/register.page';
import { ServerSearchPage } from '../../pages/server-search.page';
import { ChatMessagesPage, type ChatDropFilePayload } from '../../pages/chat-messages.page';

test.describe('Multi-image gallery grouping', () => {
  test.describe.configure({ timeout: 180_000 });

  test('groups three images in one message bubble with a visible grid', async ({ createClient }) => {
    const suffix = uniqueName('gallery');
    const client = await createClient();
    const registerPage = new RegisterPage(client.page);
    const search = new ServerSearchPage(client.page);
    const messages = new ChatMessagesPage(client.page);
    const serverName = `Gallery Group ${suffix}`;
    const imageNames = [
      `${suffix}-one.svg`,
      `${suffix}-two.svg`,
      `${suffix}-three.svg`
    ];
    const images = imageNames.map((name) => createSvgFilePayload(name));

    await registerPage.goto();
    await registerPage.register(`gallery_${suffix}`, 'Gallery User', 'TestPass123!');
    await expect(client.page).toHaveURL(/\/dashboard/, { timeout: 15_000 });

    await search.createServer(serverName, { description: 'Multi-image gallery regression server' });
    await expect(client.page).toHaveURL(/\/room\//, { timeout: 15_000 });
    await messages.waitForReady();

    await messages.attachFiles(images);
    await messages.sendPendingAttachments();

    for (const imageName of imageNames) {
      await messages.expectMessageImageLoaded(imageName);
    }

    const messageId = await messages.getMessageIdContainingImage(imageNames[0]);

    expect(messageId).toBeTruthy();

    const bubble = client.page.locator(`[data-message-id="${messageId}"]`);

    await expect(bubble.locator('img[alt$=".svg"]')).toHaveCount(3, { timeout: 20_000 });
    await expect(bubble.locator('.chat-image-grid')).toBeVisible({ timeout: 20_000 });
  });
});

function uniqueName(prefix: string): string {
  return `${prefix}-${Date.now()}-${Math.floor(Math.random() * 10_000)}`;
}

function createSvgFilePayload(name: string): ChatDropFilePayload {
  const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><rect width="32" height="32" fill="#4A217A"/></svg>';

  return {
    name,
    mimeType: 'image/svg+xml',
    base64: Buffer.from(svg, 'utf8').toString('base64')
  };
}