describe('Music (音乐打卡)', () => {
  beforeEach(() => {
    cy.visit('/music', {
      onBeforeLoad(win) {
        win.localStorage.setItem('sp_login_expires', String(Date.now() + 86400000))
      }
    })
    cy.get('header').should('be.visible')
  })

  it('shows music page with today date', () => {
    cy.get('.section-header').should('contain', '今日练习')
    cy.get('.date-label').should('not.be.empty')
  })

  it('shows practice items section', () => {
    cy.contains('练习项目').should('be.visible')
  })

  it('adds a music item to pool', () => {
    cy.get('.add-row input').type('尤克里里')
    cy.get('.add-row .btn-accent').click()
    cy.get('.pool-item').should('contain', '尤克里里')
  })

  it('adds item to monthly plan', () => {
    cy.get('.add-row input').type('钢琴')
    cy.get('.add-row .btn-accent').click()
    cy.get('.pool-item').contains('钢琴').click()
    cy.get('.checkin-item').should('contain', '钢琴')
  })

  it('checks in a music practice', () => {
    cy.get('.add-row input').type('吉他')
    cy.get('.add-row .btn-accent').click()
    cy.get('.pool-item').contains('吉他').click()
    cy.get('.checkin-item').contains('吉他').click()
    cy.get('.checkin-item').contains('吉他').should('have.class', 'checked')
  })

  it('unchecks a music practice', () => {
    cy.get('.add-row input').type('架子鼓')
    cy.get('.add-row .btn-accent').click()
    cy.get('.pool-item').contains('架子鼓').click()
    cy.get('.checkin-item').contains('架子鼓').click()
    cy.get('.checkin-item').contains('架子鼓').should('have.class', 'checked')
    cy.get('.checkin-item').contains('架子鼓').click()
    cy.get('.checkin-item').contains('架子鼓').should('not.have.class', 'checked')
  })

  it('deletes a music item', () => {
    cy.get('.add-row input').type('待删除乐器')
    cy.get('.add-row .btn-accent').click()
    cy.get('.pool-item').contains('待删除乐器').parent().find('.remove-btn').click()
    cy.get('.pool-item').should('not.contain', '待删除乐器')
  })

  it('empty state shows hint', () => {
    cy.get('.music-layout').should('be.visible')
  })
})