import fs from 'node:fs';
import path from 'node:path';
import { describe, expect, it } from 'vitest';

function readResourceCss(): string {
  return fs.readFileSync(
    path.join(process.cwd(), 'desktop/src/react/components/chat/ChatResourceCard.module.css'),
    'utf8',
  );
}

function cssRule(css: string, selector: string): string {
  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  return css.match(new RegExp(`${escaped}\\s*\\{(?<body>[^}]*)\\}`))?.groups?.body || '';
}

describe('ChatResourceCard layout', () => {
  it('owns the shared chat resource-card width and clipping contract', () => {
    const css = readResourceCss();
    const card = cssRule(css, '.card');
    const title = cssRule(css, '.title');
    const subtitle = cssRule(css, '.subtitle');
    const actions = cssRule(css, '.actions');

    expect(card).toMatch(/--chat-resource-card-width:\s*348px/);
    expect(card).toMatch(/width:\s*var\(--chat-resource-card-width\)/);
    expect(card).toMatch(/max-width:\s*100%/);
    expect(title).toMatch(/text-overflow:\s*ellipsis/);
    expect(subtitle).toMatch(/text-overflow:\s*ellipsis/);
    expect(actions).toMatch(/max-width:\s*36%/);
  });

  it('keeps resource icons bare instead of adding an inner gray tile', () => {
    const css = readResourceCss();
    const icon = cssRule(css, '.icon');

    expect(icon).not.toMatch(/background:/);
    expect(icon).toMatch(/width:\s*32px/);
    expect(icon).toMatch(/height:\s*32px/);
  });
});
