import { mount } from '@vue/test-utils'
import { h } from 'vue'
import { describe, expect, it, vi } from 'vitest'
import BioTemplateExperimentWorkspaceView from '../../components/BioTemplateExperimentWorkspaceView.vue'
import {
  createPlateMapTemplate,
  createWellPlateScreenCollection,
} from '../../templates'

describe('BioTemplateExperimentWorkspaceView', () => {
  it('renders load/save/reset controls and a template preview', async () => {
    const wrapper = mount(BioTemplateExperimentWorkspaceView, {
      props: {
        target: createPlateMapTemplate(),
        label: 'Plate Map',
        hasExperiment: true,
        currentExperimentId: 7,
      },
      global: {
        stubs: {
          PlateEditor: true,
          WellPlate: true,
        },
      },
    })

    expect(wrapper.text()).toContain('Plate Map template data saves')
    expect(wrapper.text()).toContain('experiment: 7')
    expect(wrapper.find('.mint-bio-template-renderer').exists()).toBe(true)

    const buttons = wrapper.findAll('button')
    await buttons[0].trigger('click')
    await buttons[1].trigger('click')
    await buttons[2].trigger('click')

    expect(wrapper.emitted('load')).toHaveLength(1)
    expect(wrapper.emitted('reset')).toHaveLength(1)
    expect(wrapper.emitted('save')).toHaveLength(1)
  })

  it('renders collection summaries and disables experiment actions without an experiment', () => {
    const wrapper = mount(BioTemplateExperimentWorkspaceView, {
      props: {
        target: createWellPlateScreenCollection(),
        label: 'Wellplate Screen',
        kind: 'collection',
        showTemplateSummary: true,
        hasExperiment: false,
      },
      global: {
        stubs: {
          DataFrame: true,
          DoseCalculator: true,
          PlateEditor: true,
          SampleSelector: true,
          WellPlate: true,
        },
      },
    })

    expect(wrapper.text()).toContain('Wellplate Screen saves the full template collection')
    expect(wrapper.text()).toContain('plate-map')
    expect(wrapper.text()).toContain('dose-response')
    expect(wrapper.findAll('button')[0].attributes('disabled')).toBeDefined()
    expect(wrapper.findAll('button')[2].attributes('disabled')).toBeDefined()
  })

  it('uses grouped status and actions when provided', async () => {
    const load = vi.fn()
    const reset = vi.fn()
    const save = vi.fn()
    const lastLoadedAt = new Date('2026-01-02T03:04:05Z')
    const wrapper = mount(BioTemplateExperimentWorkspaceView, {
      props: {
        target: createPlateMapTemplate(),
        label: 'Plate Map',
        status: {
          loading: false,
          saving: false,
          error: 'Template request failed.',
          hasExperiment: true,
          currentExperimentId: 23,
          lastLoadedAt,
          lastSavedAt: null,
        },
        actions: { load, reset, save },
      },
      global: {
        stubs: {
          PlateEditor: true,
          WellPlate: true,
        },
      },
    })

    expect(wrapper.text()).toContain('Template request failed.')
    expect(wrapper.text()).toContain('experiment: 23')

    const buttons = wrapper.findAll('button')
    expect(buttons[0].attributes('disabled')).toBeUndefined()
    await buttons[0].trigger('click')
    await buttons[1].trigger('click')
    await buttons[2].trigger('click')

    expect(load).toHaveBeenCalledTimes(1)
    expect(reset).toHaveBeenCalledTimes(1)
    expect(save).toHaveBeenCalledTimes(1)
    expect(wrapper.emitted('load')).toBeUndefined()
    expect(wrapper.emitted('reset')).toBeUndefined()
    expect(wrapper.emitted('save')).toBeUndefined()
  })

  it('exposes target component props to the default slot', () => {
    const wrapper = mount(BioTemplateExperimentWorkspaceView, {
      props: {
        target: createWellPlateScreenCollection(),
        label: 'Wellplate Screen',
        kind: 'collection',
      },
      slots: {
        default: ({ bindings, componentBindingsById, componentPropsById, getComponentProps }) => h(
          'pre',
          { class: 'component-props' },
          JSON.stringify({
            doseMode: componentPropsById['dose-response:DoseCalculator'].mode,
            bindingComponent: componentBindingsById['dose-response:DoseCalculator'].component,
            bindingMode: componentBindingsById['dose-response:DoseCalculator'].props.mode,
            bindingDoseMode: bindings.componentPropsById['dose-response:DoseCalculator'].mode,
            nestedBindingMode: bindings.componentBindingsById['dose-response:DoseCalculator'].props.mode,
            hasPlateWells: Boolean(componentPropsById['plate-map:WellPlate'].wells),
            doseModeFromGetter: getComponentProps('DoseCalculator')?.mode,
            bindingDoseModeFromGetter: bindings.getComponentProps('DoseCalculator')?.mode,
          }),
        ),
      },
      global: {
        stubs: {
          DataFrame: true,
          DoseCalculator: true,
          PlateEditor: true,
          SampleSelector: true,
          WellPlate: true,
        },
      },
    })

    expect(JSON.parse(wrapper.find('.component-props').text())).toEqual({
      doseMode: 'serial',
      bindingComponent: 'DoseCalculator',
      bindingMode: 'serial',
      bindingDoseMode: 'serial',
      nestedBindingMode: 'serial',
      hasPlateWells: true,
      doseModeFromGetter: 'serial',
      bindingDoseModeFromGetter: 'serial',
    })
    expect(wrapper.find('.mint-bio-template-renderer').exists()).toBe(false)
  })
})