describe('Oil Reference Page', () => {
  beforeEach(() => {
    cy.visit('/oils')
    cy.get('.oil-card, .oils-grid', { timeout: 10000 }).should('exist')
  })

  it('displays oil grid with items', () => {
    cy.contains('精油价目').should('be.visible')
    cy.get('.oil-card').should('have.length.gte', 10)
  })

  it('shows oil name and price on each chip', () => {
    cy.get('.oil-card').first().should('contain', '¥')
  })

  it('filters oils by search', () => {
    cy.get('.oil-card').then($chips => {
      const initial = $chips.length
      cy.get('input[placeholder*="搜索精油"]').type('薰衣草')
      cy.wait(300)
      cy.get('.oil-card').should('have.length.lt', initial)
    })
  })

  it('toggles between bottle and drop price view', () => {
    cy.get('.oil-card').first().invoke('text').then(textBefore => {
      cy.contains('滴价').click()
      cy.wait(300)
      cy.get('.oil-card').first().invoke('text').should('not.eq', textBefore)
    })
  })
})