import assert from 'node:assert/strict'
import { readFileSync } from 'node:fs'
import { dirname, resolve } from 'node:path'
import { fileURLToPath } from 'node:url'
import { describe, it } from 'node:test'

// A message row is a two-column grid: the disc, then everything the person wrote. The disc spans both
// rows of column 1, so ANY block the row renders without a `grid-column` auto-places into that column
// — and column 1 is an `auto` track, so it silently grows to the width of whatever landed there and
// shoves the message off to the right. Every such block therefore has to say column 2, and this is
// where that is checked, because it is a layout bug no unit test can see and a screenshot shows only
// once somebody happens to open the card.

const src = resolve(dirname(fileURLToPath(import.meta.url)), '..', 'src')
const read = (name) => readFileSync(resolve(src, name), 'utf8')

describe('the thread row grid', () => {
  const css = read('app.css')

  it('is the two-column shape the rules below assume', () => {
    assert.match(css, /\.msg \{[^}]*grid-template-columns: auto 1fr/)
    assert.match(css, /\.msg \.disc \{[^}]*grid-row: span 2/)
  })

  it('places everything a row can open in the message column', () => {
    // The two the row draws itself…
    assert.match(css, /\.msg-acts \{[^}]*grid-column: 2/)
    assert.match(css, /\.msg \.pending, \.msg-acts \+ \.pending \{[^}]*grid-column: 2/)
    // …and the card it mounts, whose root belongs to another component and so cannot place itself.
    assert.match(css, /\.msg \.newreq \{[^}]*grid-column: 2/)
    assert.match(read('lib/components/AskAnswer.svelte'), /<div class="newreq"/)
    assert.match(read('lib/components/Thread.svelte'), /<AskAnswer /)
  })

  it('keeps community comment prose beside its resolved guest disc', () => {
    const community = read('lib/components/Community.svelte')
    assert.match(community, /<Disc actor=\{guest\} \/>/)
    assert.match(community, /<div class="mh">\s*<b>\{guest\.name\}<\/b>/)
    assert.doesNotMatch(css, /\.community \.guest \{[^}]*grid-template-columns: 1fr/)
    assert.match(css, /\.community \.guest \.mb \{[^}]*grid-column: 2/)
  })
})