// @vitest-environment jsdom
import 'fake-indexeddb/auto';
import type { ReactNode } from 'react';
import { afterEach, beforeEach, expect, it, vi } from 'vitest';
import { cleanup, fireEvent, render, waitFor, screen } from '@testing-library/react';
import { App } from './App';
import { setConsent } from './storage';
import { clearTryOns } from './demo/tryOnStore';

const { sharePanel, tryOnSync, fetchImageAsBase64 } = vi.hoisted(() => ({
  sharePanel: vi.fn(),
  tryOnSync: vi.fn(),
  fetchImageAsBase64: vi.fn(),
}));
vi.mock('./api', () => ({
  VirtualTryOnAPI: vi.fn(() => ({ tryOnSync })),
  QuotaExhaustedError: class extends Error {},
  VisitorRateLimitedError: class extends Error {},
}));
vi.mock('./imageUtils', () => ({
  fetchImageAsBase64,
  compressGarmentImage: async (image: string) => image,
  UndecodableImageError: class extends Error {},
}));
vi.mock('./components/Modal', () => ({
  Modal: ({ isOpen, children }: { isOpen: boolean; children: ReactNode }) => isOpen ? <div>{children}</div> : null,
}));
vi.mock('./components/SharePanel', () => ({
  SharePanel: (props: unknown) => { sharePanel(props); return null; },
}));

beforeEach(async () => {
  await clearTryOns();
  localStorage.clear();
  vi.clearAllMocks();
  tryOnSync.mockResolvedValue({ image: 'RESULT', cached: false });
  fetchImageAsBase64.mockResolvedValue('data:image/png;base64,SELECTED_GARMENT');
  vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: true }));
});
afterEach(() => {
  cleanup();
  document.body.innerHTML = '';
  vi.unstubAllGlobals();
});

it.each([false, true])('uses the generated look garment for the share thumbnail (demo=%s)', async demo => {
  localStorage.setItem('aisthetix-avatar', JSON.stringify({ imageData: 'data:image/png;base64,AVATAR', createdAt: new Date().toISOString() }));
  setConsent();
  const trigger = document.createElement('button');
  trigger.id = 'aisthetix-tryon-trigger';
  document.body.appendChild(trigger);
  render(<App config={{
    apiBaseUrl: 'https://brain.test/tryon', publishableKey: 'pk_fixture',
    productId: '42', productImage: 'https://shop.test/parent.png',
    productTitle: 'Shirt', siteName: 'Store', locale: 'en', demo,
  }} />);
  fireEvent(document, new CustomEvent('aisthetix:variation-changed', {
    detail: { variationId: '7', productImage: 'https://shop.test/selected.png' },
  }));
  fireEvent.click(trigger);
  fireEvent.click(screen.getByRole('button', {name: 'Use This Photo'}));
  await waitFor(() => expect(sharePanel).toHaveBeenCalled());
  expect(fetchImageAsBase64).toHaveBeenCalledWith('https://shop.test/selected.png');
  expect(sharePanel).toHaveBeenLastCalledWith(expect.objectContaining({
    productImage: 'data:image/png;base64,SELECTED_GARMENT', variantId: '7',
  }));
});