import React from 'react'
import { afterEach, describe, expect, it, vi } from 'vitest'
import { cleanup, render, screen } from '@testing-library/react'
import GroupShow from '../GroupShow'

let pageMock = { props: {} }

vi.mock('@inertiajs/react', () => ({
  usePage: () => pageMock,
}))

vi.mock('../../../components/seo/SeoHead', () => ({
  default: () => null,
}))

vi.mock('../../../hooks/useWebShare', () => ({
  default: () => ({ share: vi.fn() }),
}))

describe('GroupShow public page', () => {
  afterEach(() => {
    cleanup()
    vi.clearAllMocks()
  })

  it('renders the public group hero, tabs, and grouped members', () => {
    pageMock = {
      props: {
        section: 'members',
        group: {
          id: 1,
          name: 'Warp Collective',
          headline: 'Retro visual lab',
          visibility: 'public',
          status: 'active',
          counts: { artworks: 4, collections: 2, members: 4, followers: 10 },
          urls: { public: '/groups/warp-collective', follow: '/groups/warp-collective/follow', unfollow: '/groups/warp-collective/follow' },
          viewer: { is_following: false },
        },
        featuredArtworks: [],
        artworks: [],
        featuredCollections: [],
        collections: [],
        leadership: [],
        members: [
          { id: 1, role: 'owner', role_label: 'owner', user: { name: 'Owner', username: 'owner', profile_url: '/@owner', avatar_url: null } },
          { id: 2, role: 'admin', role_label: 'admin', user: { name: 'Admin', username: 'admin', profile_url: '/@admin', avatar_url: null } },
          { id: 3, role: 'editor', role_label: 'editor', user: { name: 'Editor', username: 'editor', profile_url: '/@editor', avatar_url: null } },
          { id: 4, role: 'contributor', role_label: 'contributor', user: { name: 'Contributor', username: 'contributor', profile_url: '/@contributor', avatar_url: null } },
        ],
      },
    }

    render(<GroupShow />)

    expect(screen.getByRole('heading', { name: /warp collective/i })).not.toBeNull()
    expect(screen.getByRole('link', { name: 'overview' })).not.toBeNull()
    expect(screen.getByRole('link', { name: 'artworks' })).not.toBeNull()
    expect(screen.getByRole('link', { name: 'collections' })).not.toBeNull()
    expect(screen.getByRole('link', { name: 'members' })).not.toBeNull()
    expect(screen.getByRole('link', { name: 'about' })).not.toBeNull()
    expect(screen.getByRole('heading', { name: 'Owner' })).not.toBeNull()
    expect(screen.getByRole('heading', { name: 'Admins' })).not.toBeNull()
    expect(screen.getByRole('heading', { name: 'Editors' })).not.toBeNull()
    expect(screen.getByRole('heading', { name: 'Contributors' })).not.toBeNull()
  })
})