// @vitest-environment jsdom

import { mount } from '@vue/test-utils';
import { describe, expect, it } from 'vitest';
import CardRenderer from '../../src/cards/CardRenderer.vue';

describe('CardRenderer', () => {
  it('renders department card by cardKey', () => {
    const wrapper = mount(CardRenderer, {
      props: {
        card: {
          cardInstanceId: 'card_department',
          cardKey: 'department-selection',
          status: 'active',
          cardData: { departments: [{ departmentId: 'neurology', name: '神经内科', reason: '头痛伴恶心' }] },
          actions: [{ actionName: 'select_department', label: '选择科室' }]
        }
      }
    });

    expect(wrapper.text()).toContain('推荐科室');
    expect(wrapper.text()).toContain('神经内科');
  });

  it('renders doctor selection card', () => {
    const wrapper = mount(CardRenderer, {
      props: {
        card: {
          cardInstanceId: 'card_doctor',
          cardKey: 'doctor-selection',
          status: 'active',
          cardData: { doctors: [{ doctorId: 'DOC001', name: '李明', title: '主任医师', specialty: '头痛', room: '302' }] },
          actions: [{ actionName: 'select_doctor', label: '选择医生' }]
        }
      }
    });

    expect(wrapper.text()).toContain('选择医生');
    expect(wrapper.text()).toContain('李明');
    expect(wrapper.text()).toContain('主任医师');
  });

  it('renders time slot selection card', () => {
    const wrapper = mount(CardRenderer, {
      props: {
        card: {
          cardInstanceId: 'card_slot',
          cardKey: 'time-slot-selection',
          status: 'active',
          cardData: { slots: [{ slotId: 's1', timePeriod: '明天 09:30-09:45', remaining: 3 }] },
          actions: [{ actionName: 'select_time_slot', label: '选择时间' }]
        }
      }
    });

    expect(wrapper.text()).toContain('选择时间');
    expect(wrapper.text()).toContain('明天 09:30-09:45');
  });

  it('renders confirm appointment card', () => {
    const wrapper = mount(CardRenderer, {
      props: {
        card: {
          cardInstanceId: 'card_confirm',
          cardKey: 'confirm-appointment',
          status: 'active',
          cardData: { summary: { departmentName: '神经内科', doctorName: '李明', visitTime: '明天 09:30', amount: 25 } },
          actions: [{ actionName: 'confirm_appointment', label: '确认挂号', requiredConfirm: true }]
        }
      }
    });

    expect(wrapper.text()).toContain('确认挂号信息');
    expect(wrapper.text()).toContain('神经内科');
    expect(wrapper.text()).toContain('25 元');
  });

  it('renders payment QR card with mock label', () => {
    const wrapper = mount(CardRenderer, {
      props: {
        card: {
          cardInstanceId: 'card_payment',
          cardKey: 'payment-qrcode',
          status: 'active',
          cardData: { orderId: 'PAY001', amount: 25, qrContent: 'demo-payment://test', mock: true },
          actions: [{ actionName: 'mock_payment_paid', label: '模拟支付完成', requiredConfirm: true }]
        }
      }
    });

    expect(wrapper.text()).toContain('联调演示 / Mock 支付');
    expect(wrapper.text()).toContain('模拟支付完成');
  });

  it('renders appointment success card with mock label', () => {
    const wrapper = mount(CardRenderer, {
      props: {
        card: {
          cardInstanceId: 'card_success',
          cardKey: 'appointment-success',
          status: 'completed',
          cardData: { appointmentNo: 'A023', departmentName: '神经内科', doctorName: '李明', visitTime: '明天 09:30', room: '302', mock: true },
          actions: []
        }
      }
    });

    expect(wrapper.text()).toContain('挂号成功');
    expect(wrapper.text()).toContain('A023');
    expect(wrapper.text()).toContain('联调演示');
  });

  it('renders error card for unknown card key', () => {
    const wrapper = mount(CardRenderer, {
      props: {
        card: {
          cardInstanceId: 'card_unknown',
          cardKey: 'unknown-type',
          status: 'active',
          cardData: {},
          actions: []
        }
      }
    });

    expect(wrapper.text()).toContain('暂不支持的卡片类型');
  });

  it('emits action event when card button is clicked', async () => {
    const wrapper = mount(CardRenderer, {
      props: {
        card: {
          cardInstanceId: 'card_department',
          cardKey: 'department-selection',
          status: 'active',
          cardData: { departments: [{ departmentId: 'neurology', name: '神经内科', reason: '头痛伴恶心' }] },
          actions: [{ actionName: 'select_department', label: '选择科室' }]
        }
      }
    });

    await wrapper.find('button').trigger('click');
    expect(wrapper.emitted('action')).toBeTruthy();
    expect(wrapper.emitted('action')![0]).toEqual(['select_department']);
  });
});