// @vitest-environment happy-dom
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'

import GalleryGrid from '../../src/components/gallery/GalleryGrid.vue'
import { useGalleryStore } from '../../src/stores/gallery.js'
import { freshPinia } from '../support/mountComponent.js'

const GIStub = { name: 'GalleryItem', props: ['image'], template: '<div class="gi" />' }

function mountGrid(pinia) {
  return mount(GalleryGrid, {
    global: {
      plugins: [pinia],
      stubs: { GalleryItem: GIStub, RouterLink: { template: '<a><slot /></a>' } },
    },
  })
}

describe('GalleryGrid', () => {
  it('renders a flat ranked list when there are no date groups (similar mode)', () => {
    const pinia = freshPinia()
    const store = useGalleryStore()
    // similar-mode shape: images present, date_groups empty, no cursor.
    store.images = [
      { id: 1, thumbnail_url: '/a' },
      { id: 2, thumbnail_url: '/b' },
      { id: 3, thumbnail_url: '/c' },
    ]
    store.dateGroups = []
    const w = mountGrid(pinia)
    expect(w.findAll('.gi').length).toBe(3)
  })

  it('renders grouped by date when date groups are present', () => {
    const pinia = freshPinia()
    const store = useGalleryStore()
    store.images = [
      { id: 1, thumbnail_url: '/a' },
      { id: 2, thumbnail_url: '/b' },
    ]
    store.dateGroups = [{ year: 2026, month: 6, image_ids: [1, 2] }]
    const w = mountGrid(pinia)
    expect(w.find('.fc-gallery-grid__date-header').exists()).toBe(true)
    expect(w.findAll('.gi').length).toBe(2)
  })
})