function dismissModals() {
  cy.get('body').then($body => {
    if ($body.find('.login-overlay').length) {
      cy.get('.login-overlay').click('topLeft')
    }
    if ($body.find('.dialog-overlay').length) {
      cy.get('.dialog-btn-primary').click()
    }
  })
}

describe('Recipe Detail', () => {
  beforeEach(() => {
    cy.visit('/')
    cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
    dismissModals()
  })

  it('opens detail panel when clicking a recipe card', () => {
    cy.get('.recipe-card').first().click()
    dismissModals()
    cy.get('.detail-overlay').should('exist')
  })

  it('shows recipe name in detail view', () => {
    cy.get('.recipe-card').first().click()
    dismissModals()
    cy.get('.detail-overlay').should('exist')
  })

  it('shows ingredient info with drops', () => {
    cy.get('.recipe-card').first().click()
    dismissModals()
    cy.contains('滴').should('exist')
  })

  it('shows cost with ¥ symbol', () => {
    cy.get('.recipe-card').first().click()
    dismissModals()
    cy.contains('¥').should('exist')
  })

  it('closes detail panel when clicking close button', () => {
    cy.get('.recipe-card').first().click()
    dismissModals()
    cy.get('.detail-overlay').should('exist')
    cy.get('.detail-close-btn').first().click({ force: true })
    cy.get('.recipe-card').should('be.visible')
  })

  it('shows action buttons in detail', () => {
    cy.get('.recipe-card').first().click()
    dismissModals()
    cy.get('.detail-overlay button').should('have.length.gte', 1)
  })

  it('shows favorite star on recipe cards', () => {
    cy.get('.fav-btn').first().should('exist')
  })
})

describe('Recipe Detail - Card View', () => {
  beforeEach(() => {
    cy.visit('/')
    cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
    dismissModals()
    cy.get('.recipe-card').first().click()
    dismissModals()
  })

  it('shows export card with doTERRA branding', () => {
    cy.get('.export-card').should('exist')
    cy.contains('doTERRA').should('exist')
  })

  it('shows language toggle', () => {
    cy.contains('中文').should('exist')
    cy.contains('English').should('exist')
  })
})