import { fixture, html, assert } from '@open-wc/testing'
import '../../../src/md/dialog/ui-confirm-dialog.js'
import type UiConfirmDialog from '../../../src/md/dialog/internals/ConfirmDialog.js'

describe('UiConfirmDialog', () => {
  async function basicFixture(): Promise<UiConfirmDialog> {
    return fixture(html`<ui-confirm-dialog></ui-confirm-dialog>`)
  }

  async function customLabelsFixture(): Promise<UiConfirmDialog> {
    return fixture(html`<ui-confirm-dialog confirmLabel="Delete" dismissLabel="Keep"></ui-confirm-dialog>`)
  }

  async function withContentFixture(): Promise<UiConfirmDialog> {
    return fixture(html`
      <ui-confirm-dialog>
        <span slot="title">Confirm Action</span>
        <p>Are you sure you want to proceed?</p>
      </ui-confirm-dialog>
    `)
  }

  async function destructiveFixture(): Promise<UiConfirmDialog> {
    return fixture(html`<ui-confirm-dialog destructive></ui-confirm-dialog>`)
  }

  it('renders with default labels', async () => {
    const element = await basicFixture()
    assert.equal(element.confirmLabel, 'Confirm')
    assert.equal(element.dismissLabel, 'Cancel')
  })

  it('renders with custom labels', async () => {
    const element = await customLabelsFixture()
    assert.equal(element.confirmLabel, 'Delete')
    assert.equal(element.dismissLabel, 'Keep')
  })

  it('is modal by default', async () => {
    const element = await basicFixture()
    assert.isTrue(element.modal)
  })

  it('renders buttons with correct values', async () => {
    const element = await basicFixture()
    await element.updateComplete

    const dismissButton = element.shadowRoot!.querySelector('ui-button[value="dismiss"]')
    const confirmButton = element.shadowRoot!.querySelector('ui-button[value="confirm"]')

    assert.ok(dismissButton, 'has dismiss button')
    assert.ok(confirmButton, 'has confirm button')
    assert.equal(dismissButton!.textContent!.trim(), 'Cancel')
    assert.equal(confirmButton!.textContent!.trim(), 'Confirm')
  })

  it('renders title slot', async () => {
    const element = await withContentFixture()
    await element.updateComplete

    const titleSlot = element.shadowRoot!.querySelector('slot[name="title"]')
    assert.ok(titleSlot, 'has title slot')
  })

  it('renders body slot', async () => {
    const element = await withContentFixture()
    await element.updateComplete

    const bodySlot = element.shadowRoot!.querySelector('slot:not([name])')
    assert.ok(bodySlot, 'has body slot')
  })

  it('uses filled button for confirm action', async () => {
    const element = await basicFixture()
    await element.updateComplete

    const confirmButton = element.shadowRoot!.querySelector('ui-button[value="confirm"]')
    assert.equal(confirmButton!.getAttribute('color'), 'filled')
  })

  it('uses text button for dismiss action', async () => {
    const element = await basicFixture()
    await element.updateComplete

    const dismissButton = element.shadowRoot!.querySelector('ui-button[value="dismiss"]')
    assert.equal(dismissButton!.getAttribute('color'), 'text')
  })

  it('renders as destructive dialog', async () => {
    const element = await destructiveFixture()
    await element.updateComplete

    const confirmButton = element.shadowRoot!.querySelector('ui-button[value="confirm"]')
    assert.ok(confirmButton?.classList.contains('destructive'), 'confirm button has destructive class')
  })

  it('renders confirm button with destructive styling', async () => {
    const element = await destructiveFixture()
    await element.updateComplete

    const confirmButton = element.shadowRoot!.querySelector('ui-button[value="confirm"]')
    assert.equal(confirmButton!.getAttribute('color'), 'filled')
    assert.ok(confirmButton!.classList.contains('destructive'), 'has destructive class for styling')
  })

  it('is not destructive by default', async () => {
    const element = await basicFixture()
    assert.isFalse(element.destructive)
  })

  it('can be set to destructive', async () => {
    const element = await destructiveFixture()
    assert.isTrue(element.destructive)
  })

  it('applies destructive class to confirm button when destructive is true', async () => {
    const element = await destructiveFixture()
    await element.updateComplete

    const confirmButton = element.shadowRoot!.querySelector('ui-button[value="confirm"]')
    assert.isTrue(confirmButton!.classList.contains('destructive'))
  })

  it('does not apply destructive class when destructive is false', async () => {
    const element = await basicFixture()
    await element.updateComplete

    const confirmButton = element.shadowRoot!.querySelector('ui-button[value="confirm"]')
    assert.isFalse(confirmButton!.classList.contains('destructive'))
  })
})
