import { describe, it, expect } from 'vitest'
import { artifactKindOf, artifactSrcDoc, extractArtifacts, ARTIFACT_SANDBOX } from './artifacts'

const HTML = '<!doctype html>\n<html><head><title>Hello page</title></head><body><h1>Hi</h1></body></html>'

describe('artifactKindOf', () => {
  it('recognises html and svg fences, and untagged fences by their first tag', () => {
    expect(artifactKindOf('html', '<div>x</div>')).toBe('html')
    expect(artifactKindOf('HTML', '<p>x</p>')).toBe('html')
    expect(artifactKindOf('svg', '<svg></svg>')).toBe('svg')
    expect(artifactKindOf('', HTML)).toBe('html')
    expect(artifactKindOf('xml', '<svg xmlns="http://www.w3.org/2000/svg"></svg>')).toBe('svg')
    expect(artifactKindOf('html', '<svg></svg>')).toBe('svg')
  })
  it('leaves ordinary code alone', () => {
    expect(artifactKindOf('js', 'console.log(1)')).toBeNull()
    expect(artifactKindOf('python', 'print(1)')).toBeNull()
    expect(artifactKindOf('', 'const x = 1')).toBeNull()
    expect(artifactKindOf('jsx', '<div/>')).toBeNull()
  })
})

describe('extractArtifacts', () => {
  it('finds runnable fences in document order with titles and stable ids', () => {
    const md = `Here you go:\n\n\`\`\`html\n${HTML}\n\`\`\`\n\nAnd a script:\n\n\`\`\`js\nalert(1)\n\`\`\`\n\n\`\`\`svg\n<svg xmlns="http://www.w3.org/2000/svg"><circle r="4"/></svg>\n\`\`\`\n`
    const found = extractArtifacts(md, 3)
    expect(found.map(a => [a.id, a.kind, a.title, a.filename])).toEqual([
      ['3:1', 'html', 'Hello page', 'artifact-1.html'],
      ['3:3', 'svg', null, 'artifact-3.svg'],
    ])
    expect(found[0].code).toBe(HTML)
  })

  it('accepts tilde fences and indented fences, and ignores an unterminated one while streaming', () => {
    expect(extractArtifacts('~~~html\n<p>a</p>\n~~~')).toHaveLength(1)
    expect(extractArtifacts('  ```html\n  <p>a</p>\n  ```')).toHaveLength(1)
    expect(extractArtifacts('```html\n<p>still typing')).toHaveLength(0)
  })

  it('does not treat a fence inside inline text as a block', () => {
    expect(extractArtifacts('Use ```html``` fences.')).toHaveLength(0)
  })
})

describe('artifactSrcDoc', () => {
  it('passes html through and wraps svg in a centring page', () => {
    const [html] = extractArtifacts(`\`\`\`html\n${HTML}\n\`\`\``)
    expect(artifactSrcDoc(html)).toBe(HTML)
    const [svg] = extractArtifacts('```svg\n<svg xmlns="http://www.w3.org/2000/svg"></svg>\n```')
    const doc = artifactSrcDoc(svg)
    expect(doc.startsWith('<!doctype html>')).toBe(true)
    expect(doc).toContain('<svg xmlns="http://www.w3.org/2000/svg"></svg>')
  })
})

describe('sandbox', () => {
  it('never grants the preview the dashboard origin', () => {
    expect(ARTIFACT_SANDBOX).toContain('allow-scripts')
    expect(ARTIFACT_SANDBOX).not.toContain('allow-same-origin')
    expect(ARTIFACT_SANDBOX).not.toContain('allow-top-navigation')
  })
})