import React from 'react'
import { hydrateRoot } from 'react-dom/client'
import { renderToString } from 'react-dom/server'
import { afterEach, describe, expect, it, vi } from 'vitest'

vi.mock('../../artwork/ArtworkGallery', () => ({
  default: () => <div data-testid="mock-artwork-gallery" />,
}))

import TabArtworks from './TabArtworks'

describe('TabArtworks SSR hydration formatting', () => {
  afterEach(() => {
    vi.restoreAllMocks()
  })

  it('hydrates formatted artwork statistics without recoverable mismatches', async () => {
    vi.stubGlobal('fetch', vi.fn(async () => ({ ok: false })))
    const props = {
      artworks: [],
      featuredArtworks: [{
        id: 1,
        name: 'Featured artwork',
        views: 9529106,
        likes: 1216,
        downloads: 12,
      }],
      username: 'alice',
      galleryUrl: '/@alice/artworks',
    }
    const container = document.createElement('div')
    container.innerHTML = renderToString(<TabArtworks {...props} />)
    document.body.appendChild(container)
    const recoverableErrors = []

    hydrateRoot(container, <TabArtworks {...props} />, {
      onRecoverableError: (error) => recoverableErrors.push(error),
    })

    await new Promise((resolve) => setTimeout(resolve, 0))

    expect(recoverableErrors).toHaveLength(0)
    expect(container.textContent).toContain('9,529,106')
    expect(container.textContent).toContain('1,216')
  })
})