import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import SectionCard from '../../components/SectionCard.vue'

describe('SectionCard', () => {
  describe('basic rendering', () => {
    it('should render container, header, and title when given the required title prop', () => {
      const wrapper = mount(SectionCard, {
        props: { title: 'Experiments' },
      })
      expect(wrapper.find('.mint-section-card').exists()).toBe(true)
      expect(wrapper.find('.mint-section-card__header').exists()).toBe(true)
      expect(wrapper.find('.mint-section-card__title').text()).toBe('Experiments')
    })

    it('should render default slot content in the body', () => {
      const wrapper = mount(SectionCard, {
        props: { title: 'Experiments' },
        slots: { default: '<p class="body-probe">rows</p>' },
      })
      expect(wrapper.find('.mint-section-card__body .body-probe').exists()).toBe(true)
    })
  })

  describe('count meta', () => {
    it('should render the count in the header when provided', () => {
      const wrapper = mount(SectionCard, {
        props: { title: 'Plugins', count: '10 enabled' },
      })
      expect(wrapper.find('.mint-section-card__count').text()).toBe('10 enabled')
    })

    it('should not render a count element when count is omitted', () => {
      const wrapper = mount(SectionCard, {
        props: { title: 'Plugins' },
      })
      expect(wrapper.find('.mint-section-card__count').exists()).toBe(false)
    })

    it('should accept a numeric count', () => {
      const wrapper = mount(SectionCard, {
        props: { title: 'Artifacts', count: 4 },
      })
      expect(wrapper.find('.mint-section-card__count').text()).toBe('4')
    })
  })

  describe('title style variants', () => {
    it('should apply the uppercase modifier when uppercase is true', () => {
      const wrapper = mount(SectionCard, {
        props: { title: 'Experiments', uppercase: true },
      })
      expect(wrapper.find('.mint-section-card__title--uppercase').exists()).toBe(true)
    })

    it('should not apply the uppercase modifier by default', () => {
      const wrapper = mount(SectionCard, {
        props: { title: 'Design data' },
      })
      expect(wrapper.find('.mint-section-card__title--uppercase').exists()).toBe(false)
    })
  })

  describe('icon chip', () => {
    it('should render an icon chip with an SVG path when icon is provided', () => {
      const wrapper = mount(SectionCard, {
        props: { title: 'Experiments', icon: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7' },
      })
      expect(wrapper.find('.mint-section-card__icon-chip').exists()).toBe(true)
      expect(wrapper.find('.mint-section-card__icon-chip path').exists()).toBe(true)
    })

    it('should render one path per entry when icon is an array of paths', () => {
      const wrapper = mount(SectionCard, {
        props: { title: 'Experiments', icon: ['M4 7v10', 'M4 7c0 2.21'] },
      })
      expect(wrapper.findAll('.mint-section-card__icon-chip path')).toHaveLength(2)
    })

    it('should not render an icon chip when icon is omitted', () => {
      const wrapper = mount(SectionCard, {
        props: { title: 'Experiments' },
      })
      expect(wrapper.find('.mint-section-card__icon-chip').exists()).toBe(false)
    })

    it('should apply the accent modifier class matching the accent prop', () => {
      const wrapper = mount(SectionCard, {
        props: { title: 'Projects', icon: 'M3 7v10', accent: 'project' },
      })
      expect(wrapper.find('.mint-section-card__icon-chip--project').exists()).toBe(true)
    })

    it('should default to the primary accent when accent is omitted', () => {
      const wrapper = mount(SectionCard, {
        props: { title: 'Projects', icon: 'M3 7v10' },
      })
      expect(wrapper.find('.mint-section-card__icon-chip--primary').exists()).toBe(true)
    })
  })

  describe('header divider', () => {
    it('should use the strong divider by default', () => {
      const wrapper = mount(SectionCard, {
        props: { title: 'Experiments' },
      })
      expect(wrapper.find('.mint-section-card__header--divider-light').exists()).toBe(false)
    })

    it('should apply the light divider modifier when divider is light', () => {
      const wrapper = mount(SectionCard, {
        props: { title: 'Design data', divider: 'light' },
      })
      expect(wrapper.find('.mint-section-card__header--divider-light').exists()).toBe(true)
    })
  })

  describe('fill mode', () => {
    it('should not stretch by default', () => {
      const wrapper = mount(SectionCard, {
        props: { title: 'Experiments' },
      })
      expect(wrapper.find('.mint-section-card--fill').exists()).toBe(false)
    })

    it('should apply the fill modifier when fill is true', () => {
      const wrapper = mount(SectionCard, {
        props: { title: 'Experiments', fill: true },
      })
      expect(wrapper.find('.mint-section-card--fill').exists()).toBe(true)
    })

    it('should render the toolbar slot outside the scrolling body', () => {
      const wrapper = mount(SectionCard, {
        props: { title: 'Experiments', fill: true },
        slots: { toolbar: '<div class="toolbar-probe">chips</div>', default: '<p>rows</p>' },
      })
      expect(wrapper.find('.mint-section-card__toolbar .toolbar-probe').exists()).toBe(true)
      expect(wrapper.find('.mint-section-card__body .toolbar-probe').exists()).toBe(false)
    })

    it('should not render a toolbar region when the slot is unused', () => {
      const wrapper = mount(SectionCard, {
        props: { title: 'Experiments' },
      })
      expect(wrapper.find('.mint-section-card__toolbar').exists()).toBe(false)
    })

    it('should keep the header, body and footer structure when filling', () => {
      const wrapper = mount(SectionCard, {
        props: { title: 'Experiments', fill: true },
        slots: { default: '<p>rows</p>', footer: '<span>1 / 3</span>' },
      })
      expect(wrapper.find('.mint-section-card__header').exists()).toBe(true)
      expect(wrapper.find('.mint-section-card__body').exists()).toBe(true)
      expect(wrapper.find('.mint-section-card__footer').exists()).toBe(true)
    })
  })

  describe('slots', () => {
    it('should render the actions slot at the end of the header', () => {
      const wrapper = mount(SectionCard, {
        props: { title: 'Experiments' },
        slots: { actions: '<a class="actions-probe" href="#">All →</a>' },
      })
      expect(wrapper.find('.mint-section-card__header .actions-probe').exists()).toBe(true)
    })

    it('should render the footer strip only when the footer slot is provided', () => {
      const withFooter = mount(SectionCard, {
        props: { title: 'Experiments' },
        slots: { footer: '<span class="footer-probe">Showing 1–18 of 42</span>' },
      })
      const withoutFooter = mount(SectionCard, {
        props: { title: 'Experiments' },
      })
      expect(withFooter.find('.mint-section-card__footer .footer-probe').exists()).toBe(true)
      expect(withoutFooter.find('.mint-section-card__footer').exists()).toBe(false)
    })
  })
})