describe('Responsive Layout', () => {
  beforeEach(() => {
    cy.visit('/', {
      onBeforeLoad(win) {
        win.localStorage.setItem('sp_login_expires', String(Date.now() + 86400000))
      }
    })
    cy.get('header').should('be.visible')
  })

  it('mobile viewport (375px) renders correctly', () => {
    cy.viewport(375, 812)
    cy.get('header').should('be.visible')
    cy.get('.tab-btn').should('be.visible')
    cy.get('.tab-btn').first().should('be.visible')
  })

  it('tablet viewport (768px) renders correctly', () => {
    cy.viewport(768, 1024)
    cy.get('header').should('be.visible')
    cy.get('main').should('be.visible')
  })

  it('desktop viewport (1280px) renders correctly', () => {
    cy.viewport(1280, 800)
    cy.get('header').should('be.visible')
    cy.get('main').should('be.visible')
  })

  it('mobile: tabs are scrollable', () => {
    cy.viewport(375, 812)
    cy.get('.tabs').should('have.css', 'overflow-x', 'auto')
  })

  it('mobile: quadrant grid stacks vertically', () => {
    cy.viewport(375, 812)
    cy.get('.tab-btn').contains('待办').click()
    cy.get('.quadrant-grid').should('be.visible')
  })

  it('mobile: schedule layout stacks vertically', () => {
    cy.viewport(375, 812)
    cy.get('.tab-btn').contains('日程').click()
    cy.get('.planning-layout').should('be.visible')
  })

  it('wide viewport (1920px) renders correctly', () => {
    cy.viewport(1920, 1080)
    cy.get('header').should('be.visible')
    cy.get('main').should('be.visible')
  })
})