import { test, expect } from './fixtures';

const suffix = () => `p${Date.now().toString(36)}${Math.random().toString(36).slice(2, 7)}`;

async function createItem(page: import('@playwright/test').Page, name: string, price: string) {
  const created = await page.request.post('/api/admin/items', {
    multipart: { name, description: 'A preview subject', price, category_id: '', tags: '[]' }
  });
  expect(created.ok()).toBeTruthy();
  const id = (await created.json()).id as number;
  // New items are pending. Published here so the card renders the same states
  // a customer would see; the pending case is covered in the pending spec.
  const published = await page.request.post(`/api/admin/items/${id}/mark-available`);
  expect(published.ok()).toBeTruthy();
  return id;
}

test.describe('Admin item preview', () => {
  test('opens the storefront card from the item name', async ({ page }) => {
    const name = `Preview ${suffix()}`;
    await createItem(page, name, '42');

    await page.goto('/admin');
    await page.getByRole('button', { name }).click();

    const drawer = page.getByRole('dialog', { name: `Preview: ${name}` });
    await expect(drawer).toBeVisible();

    // The card itself, not just an empty panel: the storefront renders the
    // price formatted from cents, so this only passes if ItemCard rendered.
    await expect(drawer.getByText('$42.00')).toBeVisible();
  });

  // The claim the preview has to make: it looks live, and it is not. The
  // buttons must keep their normal appearance rather than being disabled,
  // because showing a customer's view is the entire purpose of the panel.
  test('shows the Add to Cart button in its normal enabled state', async ({ page }) => {
    const name = `Preview ${suffix()}`;
    await createItem(page, name, '15');

    await page.goto('/admin');
    await page.getByRole('button', { name }).click();

    const drawer = page.getByRole('dialog', { name: `Preview: ${name}` });
    const addToCart = drawer.getByRole('button', { name: 'Add to Cart' });

    await expect(addToCart).toBeVisible();
    await expect(addToCart).toBeEnabled();
  });

  // The assertion that matters, and the one a reviewer cannot make by looking
  // at the screen. Signed out, a real Add to Cart opens the sign-in prompt
  // before it can add anything — so if that modal never appears, the handler
  // short-circuited before reaching any of its real work.
  test('does not act when the preview card is clicked', async ({ page }) => {
    const name = `Preview ${suffix()}`;
    await createItem(page, name, '99');

    await page.goto('/admin');
    await page.getByRole('button', { name }).click();

    const drawer = page.getByRole('dialog', { name: `Preview: ${name}` });
    await drawer.getByRole('button', { name: 'Add to Cart' }).click();

    // Nothing succeeded and nothing prompted.
    await expect(page.getByText('Added to cart')).toHaveCount(0);
    await expect(page.getByRole('dialog', { name: /sign in/i })).toHaveCount(0);

    // And the drawer is still simply sitting there, unchanged.
    await expect(drawer).toBeVisible();
    await expect(drawer.getByRole('button', { name: 'Add to Cart' })).toBeEnabled();
  });

  // The storefront card must stay live where it is actually used, or this
  // change would have quietly broken buying things.
  test('leaves the real storefront card working', async ({ page }) => {
    const name = `Live ${suffix()}`;
    await createItem(page, name, '20');

    await page.goto('/');
    const card = page.locator('.ant-card').filter({ hasText: name });
    await expect(card).toBeVisible();

    await card.getByRole('button', { name: 'Add to Cart' }).click();

    // Signed out, the real card prompts for sign-in — proof the handler ran.
    await expect(page.getByRole('dialog')).toBeVisible();
  });
});