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

function makePage(): Page {
  return pageSchema.parse({
    title: 'CSS Tokens Expand',
    locale: 'en',
    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
    sections: [],
    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
    seo: { title: 'SEO', description: 'Desc' },
  })
}

describe('Exporter CSS tokens - expanded regression', () => {
  it('includes root var, skip-link base/focus, focus outline, reduced-motion, body font', () => {
    const out = exportPage(makePage())
    const css = out.css

    // :root primary color var
    expect(css).toMatch(/:root\{\s*--primary:\s*#0ea5e9\s*;\s*\}/)

    // body font family includes configured font first
    expect(css).toMatch(/body\{[^}]*font-family:\s*Inter,\s*system-ui[\s\S]*\}/)

    // skip-link base and focus tokens
    expect(css).toMatch(/a\.skip-link\{[\s\S]*left:-9999px[\s\S]*\}/)
    expect(css).toMatch(/a\.skip-link:focus\{[\s\S]*left:1rem[\s\S]*background:[^;]+;[\s\S]*\}/)

    // focus-visible/outline tokens (any focusable)
    expect(css).toMatch(/button:focus, a:focus, input:focus, select:focus, textarea:focus\{[\s\S]*outline:\s*3px solid\s*#2563eb[\s\S]*outline-offset:\s*2px[\s\S]*\}/)

    // reduced-motion detailed rule
    expect(css).toMatch(/@media \(prefers-reduced-motion: reduce\)\{\s*\*\{\s*transition:\s*none !important;\s*animation:\s*none !important\s*\}\s*\}/)
  })
})