describe('Recipe Search', () => {
  beforeEach(() => {
    cy.visit('/')
    // Wait for recipes to load
    cy.get('.recipe-card, .empty-state', { timeout: 10000 }).should('exist')
  })

  it('displays recipe cards in the grid', () => {
    cy.get('.recipe-card').should('have.length.gte', 1)
  })

  it('each recipe card shows name and oils', () => {
    cy.get('.recipe-card').first().within(() => {
      cy.get('.recipe-card-name').should('not.be.empty')
      cy.get('.recipe-card-oils').should('not.be.empty')
    })
  })

  it('filters recipes by search input', () => {
    cy.get('.recipe-card').then($cards => {
      const initialCount = $cards.length
      cy.get('input[placeholder*="搜索"]').type('薰衣草')
      // Should filter, possibly fewer results
      cy.wait(500)
      cy.get('.recipe-card').should('have.length.lte', initialCount)
    })
  })

  it('clears search and restores all recipes', () => {
    cy.get('input[placeholder*="搜索"]').type('薰衣草')
    cy.wait(500)
    cy.get('.recipe-card').then($filtered => {
      const filteredCount = $filtered.length
      cy.get('input[placeholder*="搜索"]').clear()
      cy.wait(500)
      cy.get('.recipe-card').should('have.length.gte', filteredCount)
    })
  })

  it('opens recipe detail when clicking a card', () => {
    cy.get('.recipe-card').first().click()
    // Should show detail overlay or panel
    cy.get('[class*="overlay"], [class*="detail"]', { timeout: 5000 }).should('be.visible')
  })
})