import { beforeEach, describe, expect, it, vi } from 'vitest';

vi.mock('../../../../shared/state', async () => {
  const navigate = vi.fn();
  const setState = vi.fn();
  const sendMessage = vi.fn();
  const getState = vi.fn(() => ({
    view: 'add', entries: [], selectedId: null, selectedItem: null, selectedIndex: 0,
    searchQuery: '', activeGroup: null, error: null, loading: false,
    capturedTabId: null, capturedUrl: '', newType: 'card',
  }));
  const escapeHtml = (s: string) => s
    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  return { navigate, setState, sendMessage, getState, escapeHtml, popOutToTab: vi.fn(), isInTab: vi.fn(() => false), openVaultTab: vi.fn() };
});

import { renderForm } from '../card';
import { sendMessage } from '../../../../shared/state';

describe('Card save shape', () => {
  beforeEach(() => {
    document.body.innerHTML = '<div id="app"></div>';
    vi.mocked(sendMessage).mockReset();
    vi.mocked(sendMessage).mockResolvedValue({ ok: true, data: { id: 'fakeid0000000000', items: [] } });
  });

  it('builds an Item with expiry as { month, year } and kind from select', async () => {
    const app = document.getElementById('app')!;
    renderForm(app, 'add', null);

    (document.getElementById('f-title') as HTMLInputElement).value = 'Amex Gold';
    (document.getElementById('f-number') as HTMLInputElement).value = '378282246310005';
    (document.getElementById('f-holder') as HTMLInputElement).value = 'AARON LEE';
    (document.getElementById('f-expiry-month') as HTMLSelectElement).value = '08';
    (document.getElementById('f-expiry-year') as HTMLSelectElement).value = '2029';
    (document.getElementById('f-cvv') as HTMLInputElement).value = '1234';
    (document.getElementById('f-pin') as HTMLInputElement).value = '5678';
    (document.getElementById('f-kind') as HTMLSelectElement).value = 'credit';

    document.getElementById('save-btn')!.click();
    await new Promise(r => setTimeout(r, 5));

    const calls = vi.mocked(sendMessage).mock.calls;
    const addCall = calls.find(([msg]) => (msg as { type: string }).type === 'add_item');
    const msg = addCall![0] as { type: 'add_item'; item: any };
    expect(msg.item.type).toBe('card');
    expect(msg.item.core).toMatchObject({
      type: 'card',
      number: '378282246310005',
      holder: 'AARON LEE',
      expiry: { month: 8, year: 2029 },
      cvv: '1234',
      pin: '5678',
      kind: 'credit',
    });
  });

  it('omits expiry entirely when month or year is empty', async () => {
    const app = document.getElementById('app')!;
    renderForm(app, 'add', null);

    (document.getElementById('f-title') as HTMLInputElement).value = 'Loyalty card';
    (document.getElementById('f-kind') as HTMLSelectElement).value = 'loyalty';
    // expiry-month + expiry-year left empty.

    document.getElementById('save-btn')!.click();
    await new Promise(r => setTimeout(r, 5));

    const calls = vi.mocked(sendMessage).mock.calls;
    const addCall = calls.find(([msg]) => (msg as { type: string }).type === 'add_item');
    const msg = addCall![0] as { type: 'add_item'; item: any };
    expect(msg.item.core.expiry).toBeUndefined();
    expect(msg.item.core.kind).toBe('loyalty');
  });
});
