import { readFileSync } from 'node:fs';

const template = readFileSync(new URL('./chat-message-item.component.html', import.meta.url), 'utf8');

describe('ChatMessageItemComponent template', () => {
  it('keeps system messages in a centered pill without full-row card styling', () => {
    const systemMessageIndex = template.indexOf('data-testid="chat-system-message"');
    const systemWrapperBlock = template.slice(Math.max(0, systemMessageIndex - 220), systemMessageIndex);
    const messageRowBlock = template.match(/appThemeNode="chatMessageBubble"[\s\S]*?class="([^"]+)"/);
    const systemMessageBlock = template.match(/data-testid="chat-system-message"[\s\S]*?class="([^"]+)"/);

    expect(systemMessageIndex).toBeGreaterThan(-1);
    expect(systemWrapperBlock).not.toContain('appThemeNode="chatMessageBubble"');
    expect(systemWrapperBlock).not.toContain('[attr.data-message-id]');
    expect(systemWrapperBlock).toContain('justify-center');
    expect(messageRowBlock?.[1]).toBeDefined();
    expect(messageRowBlock?.[1]).toMatch(/\brounded-lg\b/);
    expect(messageRowBlock?.[1]).toMatch(/\bhover:bg-secondary\/30\b/);
    expect(systemMessageBlock?.[1]).toBeDefined();
    expect(systemMessageBlock?.[1]).toMatch(/\brounded-full\b/);
    expect(systemMessageBlock?.[1]).toMatch(/\bborder\b/);
    expect(systemMessageBlock?.[1]).toMatch(/\bbg-secondary\/45\b/);
  });
});
