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

function makePage(overrides: Partial<Page> = {}): Page {
  const base: Page = {
    title: 'Edge',
    locale: 'en',
    theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
    sections: [
      { type: 'features', props: { items: ['One', '   ', '   ', 'Two'] } },
      { type: 'benefits', props: { items: ['A', '   ', '   ', 'B'] } },
      { type: 'faq', props: { items: [
        { q: '  ', a: '   ' },
        { q: 'Valid Q', a: '   ' },
        { q: 'Another', a: 'Answer' },
      ] } },
      { type: 'testimonials', props: { items: [
        { author: '  ', quote: '   ' },
        { author: 'Jane', quote: '  Great product   ' },
      ] } },
    ] as Page['sections'],
    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
    analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
    seo: { title: 't', description: 'd' },
  }
  return pageSchema.parse({ ...base, ...overrides })
}

describe('Exporter - sections edge cases', () => {
  it('filters out whitespace-only items and keeps valid ones', () => {
    const out = exportPage(makePage())
    const html = out.html

    // features: only One, Two
    expect(html).toContain('<li class="feature-item">One</li>')
    expect(html).toContain('<li class="feature-item">Two</li>')
    expect(html).not.toMatch(/<li class="feature-item"><\/li>/)

    // benefits: only A, B
    expect(html).toContain('<li class="benefit-item">A</li>')
    expect(html).toContain('<li class="benefit-item">B</li>')

    // faq: drop fully empty, keep items even if answer empty when question is valid
    expect(html).toContain('<h3 class="faq-q">Valid Q</h3>')
    // testimonials: drop fully empty, keep trimmed quote
    expect(html).toContain('<blockquote>“Great product”</blockquote>')
  })

  it('adds word-break tokens to avoid overflow for long words', () => {
    const out = exportPage(makePage())
    const css = out.css
    expect(css).toMatch(/\.feature-item\{[\s\S]*(?:word-break:break-word|overflow-wrap:anywhere)/i)
    expect(css).toMatch(/\.benefit-item\{[\s\S]*(?:word-break:break-word|overflow-wrap:anywhere)/i)
    expect(css).toMatch(/\.testimonial blockquote\{[\s\S]*(?:word-break:break-word|overflow-wrap:anywhere)/i)
  })
})