import { describe, it, expect } from 'vitest'
import { exportPage } from '@/lib/exporter/html'
import type { ExportOptions } from '@/lib/exporter/html'
import type { Page } from '@/lib/schema/page'

const basePage: Page = {
  title: 'Img Matrix',
  locale: 'en',
  theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
  sections: [
    { type: 'hero', props: { heading: 'Hero', subheading: '', imageUrl: 'https://example.com/hero.jpg' } },
  ],
  form: {
    actionUrl: '',
    fields: [],
    spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
  },
  analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
  seo: { title: 'T', description: 'D' },
}

describe('image responsive options - matrix', () => {
  it('applies loading and decoding attributes from options', () => {
    const opts: ExportOptions = { imageLoading: 'eager', imageDecoding: 'sync' }
    const { html } = exportPage(basePage, opts)
    expect(html).toMatch(/<img[^>]*loading="eager"/)
    expect(html).toMatch(/<img[^>]*decoding="sync"/)
  })

  it('sets fetchpriority="low" when specified', () => {
    const opts: ExportOptions = { imageFetchPriority: 'low' }
    const { html } = exportPage(basePage, opts)
    expect(html).toMatch(/<img[^>]*fetchpriority="low"/)
  })

  it('prefers preset sizes over auto default when both provided (no explicit sizes)', () => {
    const opts: ExportOptions = {
      imageSrcset: 'https://example.com/hero.jpg 1x, https://example.com/hero@2x.jpg 2x',
      imageAutoSizes: true,
      imageSizesPreset: 'mobile-first',
    }
    const { html } = exportPage(basePage, opts)
    // preset should win over default auto sizes
    expect(html).toMatch(/<img[^>]*sizes="\(max-width: 640px\) 100vw, 800px"/)
  })
})