import { test, expect } from '@playwright/test';

/**
 * M3 Create E2E (QUALITY-50): the Create flow screens render and the publish
 * control is reachable. Runs against the vite preview (webServer in
 * playwright.config). The backend is the local API; Woo is mocked at the
 * host level for the integration path (see backend/tests/test_integration_woo_mock.py).
 * This spec verifies the UI surface, not a live store (that is the UAT walk).
 */

test.describe('M3 Create flow', () => {
  test('renders all M3 dev screens', async ({ page }) => {
    await page.goto('/');
    // The M3 dev toggles are always present in the toolbar.
    const toggles = [
      'Settings (dev)',
      'Slabs (dev)',
      'Photos (dev)',
      'Review (dev)',
      'Publish (dev)',
      'Generate (dev)',
    ];
    for (const name of toggles) {
      await expect(page.getByRole('button', { name })).toBeVisible();
    }
  });

  test('Review screen loads the ready-state control', async ({ page }) => {
    await page.goto('/');
    await page.getByRole('button', { name: 'Review (dev)' }).click();
    await expect(page.getByRole('heading', { name: 'Review to Ready' })).toBeVisible();
    await expect(page.getByRole('button', { name: 'Review', exact: true })).toBeVisible();
  });

  test('Publish screen loads the publish control', async ({ page }) => {
    await page.goto('/');
    await page.getByRole('button', { name: 'Publish (dev)' }).click();
    await expect(page.getByRole('heading', { name: 'Publish to WooCommerce' })).toBeVisible();
    await expect(page.getByRole('button', { name: 'Publish', exact: true })).toBeVisible();
  });

  test('Generate control is visible only when enabled + reachable', async ({ page }) => {
    await page.goto('/');
    await page.getByRole('button', { name: 'Generate (dev)' }).click();
    await expect(page.getByRole('heading', { name: 'Generate text' })).toBeVisible();
    // With no inference configured, the control is disabled with a plain note.
    const note = page.locator('.note');
    const state = page.locator('.state');
    await expect(state).toContainText(/endpoint: (reachable|unreachable)/);
    const text = (await state.textContent()) ?? '';
    if (text.includes('unreachable')) {
      await expect(note).toBeVisible();
    }
  });
});