import { render, screen, fireEvent, cleanup } from '@testing-library/react'
import { NextIntlClientProvider } from 'next-intl'
import { describe, expect, test, beforeEach } from 'vitest'
import BuilderClientPage from './BuilderClientPage'
import messages from '../messages/en.json'

function Wrapper({ children }: { children: React.ReactNode }) {
  return (
    <NextIntlClientProvider messages={messages} locale="en">
      {children}
    </NextIntlClientProvider>
  )
}

describe('BuilderClientPage - preview viewport persistence & placeholders', () => {
  beforeEach(() => {
    localStorage.clear()
    cleanup()
  })

  test('persists viewport selection in localStorage', () => {
    render(
      <Wrapper>
        <BuilderClientPage />
      </Wrapper>
    )

    const container = screen.getByTestId('preview-container')
    expect(container).toHaveClass('w-[768px]')

    fireEvent.click(screen.getByRole('button', { name: /Mobile/i }))
    expect(container).toHaveClass('w-[375px]')

    // remount
    cleanup()
    render(
      <Wrapper>
        <BuilderClientPage />
      </Wrapper>
    )

    const container2 = screen.getByTestId('preview-container')
    expect(container2).toHaveClass('w-[375px]')
  })

  test('inspector inputs have helpful placeholders', () => {
    render(
      <Wrapper>
        <BuilderClientPage />
      </Wrapper>
    )

    expect(screen.getByLabelText('SEO Title')).toHaveAttribute('placeholder')
    expect(screen.getByLabelText('SEO Description')).toHaveAttribute('placeholder')
    expect(screen.getByLabelText('OG Image URL')).toHaveAttribute('placeholder')
    expect(screen.getByLabelText('GA4 Measurement ID')).toHaveAttribute('placeholder')
    expect(screen.getByLabelText('Meta Pixel ID')).toHaveAttribute('placeholder')
  })
})