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

describe('Notification action buttons (type-driven color, 2026-06-12 two-axis model)', () => {
  it('dialog (green types) renders green filling Confirm', () => {
    const wrapper = mount(Notification, { props: { form: 'dialog', type: 'warning' } })
    const confirm = wrapper.find('.notif__actions .btn--fill-green')

    expect(confirm.exists()).toBe(true)
    expect(confirm.attributes('data-figma-style')).toBe('filling')
    expect(confirm.attributes('data-figma-color')).toBe('green')
    expect(confirm.attributes('data-figma-size')).toBe('M')
    expect(confirm.text()).toContain('Confirm')
  })

  it('dialog/default renders green filling Confirm (neutral)', () => {
    const wrapper = mount(Notification, { props: { form: 'dialog', type: 'default' } })
    expect(wrapper.find('.notif__actions .btn--fill-green').exists()).toBe(true)
    expect(wrapper.find('.notif__actions .btn--fill-red').exists()).toBe(false)
  })

  it('Confirm/OK is red only for error / danger types', () => {
    for (const type of ['error', 'danger'] as const) {
      const wrapper = mount(Notification, { props: { form: 'dialog', type } })
      const confirm = wrapper.find('.notif__actions .btn--fill-red')
      expect(confirm.exists(), `dialog/${type} → red`).toBe(true)
      expect(confirm.attributes('data-figma-color')).toBe('red')
    }
    // alert error → red OK
    const alertErr = mount(Notification, { props: { form: 'alert', type: 'error' } })
    expect(alertErr.find('.notif__actions .btn--fill-red').exists()).toBe(true)
  })

  it('pop confirm: default = green, danger = red', () => {
    const def = mount(Notification, { props: { form: 'pop confirm', type: 'default' } })
    expect(def.find('.notif__actions .btn--fill-green').exists()).toBe(true)

    const danger = mount(Notification, { props: { form: 'pop confirm', type: 'danger' } })
    const confirm = danger.find('.notif__actions .btn--fill-red')
    expect(confirm.exists()).toBe(true)
    expect(confirm.attributes('data-figma-style')).toBe('filling')
    expect(confirm.attributes('data-figma-color')).toBe('red')
  })

  it('renders cancel as canonical ghost gray Button for dialog/pop confirm', () => {
    const wrapper = mount(Notification, { props: { form: 'dialog', type: 'warning' } })
    const cancel = wrapper.find('.notif__actions .btn--ghost-gray')

    expect(cancel.exists()).toBe(true)
    expect(cancel.attributes('data-figma-style')).toBe('ghost')
    expect(cancel.attributes('data-figma-color')).toBe('gray 1')
    expect(cancel.attributes('data-figma-size')).toBe('M')
    expect(cancel.text()).toContain('Cancel')
  })

  it('alert renders a single green OK button (no Cancel)', () => {
    const wrapper = mount(Notification, { props: { form: 'alert', type: 'info' } })
    const buttons = wrapper.findAll('.notif__actions .btn')

    expect(buttons).toHaveLength(1)
    const ok = wrapper.find('.notif__actions .btn--fill-green')
    expect(ok.exists()).toBe(true)
    expect(ok.text()).toContain('OK')
    expect(wrapper.find('.notif__actions .btn--ghost-gray').exists()).toBe(false)
  })

  it('slide renders no action buttons (passive toast)', () => {
    const wrapper = mount(Notification, { props: { form: 'slide', type: 'info' } })
    expect(wrapper.find('.notif__actions').exists()).toBe(false)
  })

  it('emits cancel and confirm through canonical Button clicks (dialog)', async () => {
    const wrapper = mount(Notification, { props: { form: 'dialog', type: 'warning' } })

    await wrapper.find('.notif__actions .btn--ghost-gray').trigger('click')
    await wrapper.find('.notif__actions .btn--fill-green').trigger('click')

    expect(wrapper.emitted('cancel')).toHaveLength(1)
    expect(wrapper.emitted('confirm')).toHaveLength(1)
  })

  it('alert OK click emits confirm', async () => {
    const wrapper = mount(Notification, { props: { form: 'alert', type: 'success' } })

    await wrapper.find('.notif__actions .btn--fill-green').trigger('click')
    expect(wrapper.emitted('confirm')).toHaveLength(1)
  })

  it('keeps close as the native icon-only button and emits close', async () => {
    const wrapper = mount(Notification, { props: { form: 'dialog', type: 'warning' } })
    const close = wrapper.find('button[aria-label="Close"]')

    expect(close.exists()).toBe(true)
    expect(close.classes()).toContain('notif__close')
    expect(close.classes()).not.toContain('btn')

    await close.trigger('click')
    expect(wrapper.emitted('close')).toHaveLength(1)
  })

  it('hides close when closable is false', () => {
    const wrapper = mount(Notification, { props: { form: 'slide', type: 'info', closable: false } })
    expect(wrapper.find('button[aria-label="Close"]').exists()).toBe(false)
  })
})