/** @vitest-environment jsdom */
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { render, screen, cleanup, fireEvent } from '@testing-library/react';
import { DemoResultView } from './DemoResultView';
import { en } from '../i18n/en';
import { it as italian } from '../i18n/it';

const sharePanel = vi.hoisted(() => vi.fn());
vi.mock('../components/SharePanel', () => ({
  SharePanel: (props: unknown) => { sharePanel(props); return <section aria-label="Share your look">Share your look</section>; },
}));

const RESULT = 'data:image/png;base64,RESULT';
const PHOTO = 'data:image/png;base64,SHOPPER';
const GARMENT = 'data:image/png;base64,GARMENT';

type Props = React.ComponentProps<typeof DemoResultView>;

function renderResult(overrides: Partial<Props> = {}) {
  const props: Props = {
    resultImage: RESULT,
    originalPhotoImage: PHOTO,
    originalClothingImage: GARMENT,
    productTitle: 'Amalfi Linen Dress',
    productUrl: 'https://shop.test/product/amalfi-linen-dress',
    productId: '42',
    variantId: '7',
    onShareIntent: vi.fn(),
    onTryAnother: vi.fn(),
    onClose: vi.fn(),
    t: en.result,
    ...overrides,
  };
  return { props, ...render(<DemoResultView {...props} />) };
}

beforeEach(() => vi.clearAllMocks());

afterEach(() => {
  cleanup();
});

describe('shared result comparison in the demo', () => {
  it.each([en, italian])('opens the localized shopper Before/After slider', (t) => {
    renderResult({ t: t.result });
    expect(screen.getByRole('slider', { name: t.result.beforeAfterSlider }).getAttribute('value')).toBe('50');
    expect(screen.getByRole('img', { name: t.result.beforePhoto }).getAttribute('src')).toBe(PHOTO);
    expect(screen.getByRole('img', { name: t.result.afterTryOn }).getAttribute('src')).toBe(RESULT);
  });

  it('compares the inference garment and result, then restores the shopper split', () => {
    renderResult();
    fireEvent.change(screen.getByRole('slider'), { target: { value: '73' } });
    fireEvent.click(screen.getByRole('button', { name: en.result.toggleCompare }));
    expect(screen.queryByRole('slider')).toBeNull();
    expect(screen.getByRole('img', { name: en.result.compareOriginal }).getAttribute('src')).toBe(GARMENT);
    expect(screen.getByRole('img', { name: en.result.compareTryOn }).getAttribute('src')).toBe(RESULT);
    fireEvent.click(screen.getByRole('button', { name: en.result.toggleResult }));
    expect(screen.getByRole('slider').getAttribute('value')).toBe('73');
  });

  it('shows the result alone without a shopper photo, retaining garment comparison', () => {
    renderResult({ originalPhotoImage: undefined });
    expect(screen.queryByRole('slider')).toBeNull();
    expect(screen.getByRole('img', { name: en.result.toggleResult }).getAttribute('src')).toBe(RESULT);
    fireEvent.click(screen.getByRole('button', { name: en.result.toggleCompare }));
    expect(screen.getByRole('img', { name: en.result.compareOriginal }).getAttribute('src')).toBe(GARMENT);
  });

  it('keeps the shopper slider available without a garment', () => {
    renderResult({ originalClothingImage: undefined });
    expect(screen.queryByRole('button', { name: en.result.toggleCompare })).toBeNull();
    expect(screen.getByRole('slider')).toBeTruthy();
  });
});

describe('sharing the result', () => {
  it('always includes the branded Share your look panel', () => {
    renderResult();
    expect(screen.getByRole('region', { name: 'Share your look' })).toBeDefined();
  });
});

describe('the way onward', () => {
  it('offers a different photo and a way back to the store', () => {
    const { props } = renderResult();

    fireEvent.click(screen.getByText(en.result.tryDifferent));
    expect(props.onTryAnother).toHaveBeenCalledTimes(1);

    fireEvent.click(screen.getByText(en.result.continueShopping));
    expect(props.onClose).toHaveBeenCalledTimes(1);
  });

  it('names what was tried on', () => {
    renderResult();
    expect(screen.getByText(en.result.tryingOn('Amalfi Linen Dress'))).toBeTruthy();
  });
});

it('passes the decoded brand and product image to the shared card', () => {
  renderResult({ brandName: "Tom & Jerry's", productImage: GARMENT });
  expect(sharePanel).toHaveBeenCalledWith(expect.objectContaining({ brandName: "Tom & Jerry's", productImage: GARMENT, productName: 'Amalfi Linen Dress' }));
});