describe('media page sets', () => {
  it('fetches and renders seeded set cards', () => {
    cy.visit('/media')

    cy.get('header.site-header').within(() => {
      cy.contains('Torah Media').should('be.visible')
      cy.contains('About').should('be.visible')
      cy.contains('Contact').should('be.visible')
      cy.contains('Donate').should('be.visible')
    })
    cy.contains('h1', 'Torah Media').should('be.visible')
    cy.get('[data-cy="media-set-grid"]').should('be.visible')
    cy.get('[data-cy="media-set-card"]', { timeout: 10000 })
      .should('have.length', 2)

    cy.contains('[data-cy="media-set-card"]', 'Baderech HaAvodah')
      .as('baderechCard')
      .should('have.attr', 'href', '/element/1')
      .within(() => {
        cy.get('img[data-cy="media-set-icon"]')
          .should('be.visible')
          .and('have.attr', 'src')
          .and('include', '/assets/baderech-haavodah-icon.png')
        cy.contains('h2', 'Baderech HaAvodah').should('be.visible')
        cy.contains('a structured path for inner and outer growth')
          .should('be.visible')
      })

    cy.contains('[data-cy="media-set-card"]', 'Daily Learning')
      .as('dailyLearningCard')
      .should('match', 'article')
      .and('not.have.attr', 'href')

    cy.get('@dailyLearningCard')
      .within(() => {
        cy.contains('h2', 'Daily Learning').should('be.visible')
        cy.contains('Daily learning for steady growth').should('be.visible')
      })

    cy.get('@baderechCard').click()
    cy.location('pathname').should('eq', '/element/1')
    cy.get('[data-cy="element-page"]').should('be.visible')
    cy.contains('h1', 'Baderech HaAvodah').should('be.visible')
    cy.get('[data-cy="child-element-list"]').should('be.visible')
    cy.contains('[data-cy="child-element-link"]', 'Avodah Foundations')
      .should('have.attr', 'href', '/element/2')
    cy.contains('[data-cy="child-element-link"]', 'Daily Practice')
      .should('have.attr', 'href', '/element/3')

    cy.contains('[data-cy="child-element-link"]', 'Avodah Foundations')
      .click()
    cy.location('pathname').should('eq', '/element/2')
    cy.contains('h1', 'Avodah Foundations').should('be.visible')
  })
})