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

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

  it('shows recipe name in detail view', () => {
    cy.get('.recipe-card').first().invoke('text').then(cardText => {
      cy.get('.recipe-card').first().click()
      cy.wait(500)
      cy.get('.detail-overlay').should('be.visible')
    })
  })

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

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

  it('closes detail panel when clicking close button', () => {
    cy.get('.recipe-card').first().click()
    cy.get('.detail-overlay').should('be.visible')
    cy.get('button').contains(/✕|关闭/).first().click()
    cy.get('.recipe-card').should('be.visible')
  })

  it('shows action buttons in detail', () => {
    cy.get('.recipe-card').first().click()
    cy.wait(500)
    cy.get('[class*="detail"] button').should('have.length.gte', 1)
  })

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

describe('Recipe Detail - Editor (Admin)', () => {
  const ADMIN_TOKEN = 'c86ae7afbe10fabe3c1d5e1a7fee74feaadfd5dc7be2ab62'

  beforeEach(() => {
    cy.visit('/', {
      onBeforeLoad(win) {
        win.localStorage.setItem('oil_auth_token', ADMIN_TOKEN)
      }
    })
    cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
  })

  it('shows editable ingredients table in editor tab', () => {
    cy.get('.recipe-card').first().click()
    cy.get('.detail-overlay', { timeout: 5000 }).should('be.visible')
    cy.get('.detail-overlay').then($el => {
      if ($el.find(':contains("编辑")').filter('button').length) {
        cy.contains('编辑').click()
        cy.get('.editor-select, .editor-drops').should('exist')
      } else {
        cy.log('Edit button not available (not admin) — skipping')
      }
    })
  })

  it('shows add ingredient button in editor tab', () => {
    cy.get('.recipe-card').first().click()
    cy.get('.detail-overlay', { timeout: 5000 }).should('be.visible')
    cy.get('.detail-overlay').then($el => {
      if ($el.find(':contains("编辑")').filter('button').length) {
        cy.contains('编辑').click()
        cy.contains('添加精油').should('exist')
      } else {
        cy.log('Edit button not available (not admin) — skipping')
      }
    })
  })

  it('shows save image button', () => {
    cy.get('.recipe-card').first().click()
    cy.get('.detail-overlay', { timeout: 5000 }).should('be.visible')
    cy.contains('保存图片').should('exist')
  })
})