import { readFileSync } from 'node:fs'
import { dirname, join, resolve } from 'node:path'
import { fileURLToPath } from 'node:url'
import { describe, expect, it } from 'vitest'

// SDK control refresh phase 1 (2c, 5a, 5d): CSS-only cards, locked by value.
const componentsDir = resolve(dirname(fileURLToPath(import.meta.url)), '../../styles/components')
const css = (name: string) => readFileSync(join(componentsDir, name), 'utf-8')

describe('menus and app shell styles', () => {
  it('should fill completed StepWizard connectors with the primary hue (2c)', () => {
    expect(css('step-wizard.css')).toMatch(/\.mint-wizard__step-connector--completed\s*\{[^}]*background-color:\s*var\(--color-primary\);/)
  })

  it('should draw the StepWizard connector 1px tall (2c)', () => {
    expect(css('step-wizard.css')).toMatch(/\.mint-wizard__step-connector\s*\{[^}]*height:\s*1px;/)
  })

  // Phase 3: the nav renders BaseButton (Finish = primary, see StepWizard.test.ts), so no private button rules remain.
  it('should leave StepWizard nav buttons to BaseButton (2c)', () => {
    expect(css('step-wizard.css')).not.toMatch(/\.mint-wizard__nav-btn/)
  })

  it('should pad the top bar to the 1.2 height (62px)', () => {
    expect(css('app-top-bar.css')).toMatch(/\.mint-topbar\s*\{[^}]*padding:\s*0\.75rem 1rem;/)
  })

  // 28px items + 3px track padding + 1px border on each side = the 36px top-bar control height.
  it('should size pill nav items so the track matches the 36px top-bar controls', () => {
    expect(css('app-pill-nav.css')).toMatch(/\.mint-pill-nav__item\s*\{[^}]*height:\s*1\.75rem;/)
  })

  it('should size the page selector trigger to the 36px identity tile', () => {
    expect(css('app-page-selector.css')).toMatch(/\.mint-page-selector__trigger\s*\{[^}]*height:\s*2\.25rem;/)
  })

  // Shrinking the tile beside the identity also shrank structured icons inside their solid chip, drawing a ring.
  it('should keep the plugin tile beside the static plugin identity (5a)', () => {
    expect(css('app-top-bar.css')).not.toMatch(/:has\(\+ \.mint-topbar__plugin-identity\)/)
  })

  // A slotted 36px logo shrank to 32px wide but kept its height, drawing a 32x36 tile.
  it('should fit slotted identity content inside the identity tile (5a)', () => {
    expect(css('app-top-bar.css')).toMatch(/\.mint-topbar__identity > \*\s*\{[^}]*max-width:\s*100%;[^}]*max-height:\s*100%;/)
  })

  // 15px x 1.15 + 12px x 1.2 = 31.7px, so the title group fits the 32px control row.
  it('should fit the top-bar title and subtitle inside the control row (5a)', () => {
    expect(css('app-top-bar.css')).toMatch(/\.mint-topbar-title\s*\{[^}]*line-height:\s*1\.15;/)
  })

  it('should size the top-bar experiment trigger to the 32px control height (5a)', () => {
    expect(css('experiment-popover.css')).toMatch(/\.mint-experiment-popover__trigger\s*\{[^}]*height:\s*var\(--form-height-sm\);/)
  })

  it('should size the top-bar experiment save trigger to the 32px control height (5a)', () => {
    expect(css('experiment-popover.css')).toMatch(/\.mint-experiment-popover__save-trigger\s*\{[^}]*height:\s*var\(--form-height-sm\);/)
  })

  it('should give settings number rows a 120px control (5d)', () => {
    expect(css('settings-modal.css')).toMatch(/> \.mint-number-input\s*\{\s*width:\s*7\.5rem;/)
  })

  it('should give settings select rows a 220px control (5d)', () => {
    expect(css('settings-modal.css')).toMatch(/> \.mint-select\s*\{\s*width:\s*13\.75rem;/)
  })

  it('should keep full-width menu items inside the popover when rendered as <a> or <li> (2d)', () => {
    expect(css('popover.css')).toMatch(/\.mint-menu-item\s*\{[^}]*box-sizing:\s*border-box;/)
  })

  it('should size the popover border-box so trigger-width panels do not overhang (2d)', () => {
    expect(css('popover.css')).toMatch(/\.mint-popover\s*\{[^}]*box-sizing:\s*border-box;/)
  })
})