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

// ── Pieces editor (custom piece CRUD via the UI) E2E ──────────────────────────
//
// REQUIRES `npm run test:e2e` + a running server (ui/playwright.config.ts boots
// the real orchestrator with auth OFF → synthetic 'local' user). This does NOT
// run in the sandbox — there is no live server here.
//
// The Pieces page (page=pieces) is NOT auth-gated (NAV_ITEMS: pieces
// requiresAuth:false). The published-tested `splitPieces` lib covers the
// custom/default split; this proves the actual editor wiring that has no e2e:
// create a custom piece from the sidebar, then edit + save it through the editor.
//
// Selector grounding (read from the real components):
//   - PiecesPage.tsx: the "+" button next to the "Custom Pieces" section opens an
//     inline input with placeholder="piece-name"; Enter creates the piece via
//     POST /api/pieces and selects it.
//   - PieceEditor.tsx: a Visual/YAML mode toggle ("Visual" / "YAML" literal
//     buttons), a <textarea> for the YAML, and a footer "Save" button (enabled
//     only when dirty). These are English literals, not i18n keys.
// Backend state is verified through GET /api/pieces?source=custom — the same
// endpoint the page reads.

// With auth disabled the /api/auth/me probe 404s on purpose; the pieces page
// reads /api/pieces (200). Personal-space probes may 404 on an empty tree.
const BENIGN_PATHS = new Set([
  '/api/auth/me',
  '/api/users/me/orgs',
  '/api/mcp/connections',
  '/api/mcp/servers',
  '/api/mcp/user-servers',
  '/api/ssh/connections',
]);
const BENIGN_ASSET = /\.(ico|png|svg|map|webmanifest|json)$/i;

function trackFatalErrors(page: Page): string[] {
  const fatalErrors: string[] = [];
  page.on('pageerror', (err) => fatalErrors.push(`pageerror: ${err.message}`));
  page.on('response', (res) => {
    if (res.status() >= 400) {
      const { pathname } = new URL(res.url());
      if (!BENIGN_ASSET.test(pathname) && !BENIGN_PATHS.has(pathname)) {
        fatalErrors.push(`HTTP ${res.status()} ${res.url()}`);
      }
    }
  });
  return fatalErrors;
}

// Unique name per run so reruns against the same throwaway DB never collide.
const pieceName = `e2e-custom-${Date.now()}`;

test('create a custom piece from the sidebar, then edit + save it via the editor', async ({ page }) => {
  const fatalErrors = trackFatalErrors(page);

  await page.goto('/ui?page=pieces');
  await expect(page).toHaveURL(/[?&]page=pieces(&|$)/);

  // The "Custom Pieces" section + its "+" create affordance render. The "+" is
  // the only button in that section header (title=newPieceTitle).
  await expect(page.getByText('Custom Pieces', { exact: true })).toBeVisible({ timeout: 15_000 });
  const createToggle = page.locator('button[title]').filter({ hasText: '+' }).first();
  await createToggle.click();

  // The inline name input appears (placeholder="piece-name"); type the name and
  // submit with Enter → POST /api/pieces, then the new piece is selected.
  const nameInput = page.getByPlaceholder('piece-name');
  await expect(nameInput).toBeVisible();
  await nameInput.fill(pieceName);
  await nameInput.press('Enter');

  // The new custom piece appears in the sidebar list AND is auto-selected, so
  // its name also shows in the editor header (PieceEditor.tsx's <h2>) —
  // scope to the sidebar row button to avoid a strict-mode double match.
  await expect(page.getByRole('button', { name: pieceName })).toBeVisible({ timeout: 15_000 });

  // It was persisted as a custom piece (the endpoint the page reads returns
  // { pieces: [...] } with custom:true on user pieces).
  await expect
    .poll(async () => {
      const res = await page.request.get('/api/pieces');
      if (!res.ok()) return [];
      const data = (await res.json()) as { pieces?: Array<{ name: string; custom?: boolean }> };
      return (data.pieces ?? []).filter((p) => p.custom).map((p) => p.name);
    }, { timeout: 15_000 })
    .toContain(pieceName);

  // Edit the piece through the YAML editor. Switch to YAML mode, set a new
  // description, and Save (footer button is enabled only once dirty).
  await page.getByRole('button', { name: 'YAML' }).click();
  const yaml = page.locator('textarea').first();
  await expect(yaml).toBeVisible({ timeout: 15_000 });
  // Terminal moves go through the `complete` tool, not rules[].next (which
  // only accepts other movement names / WAIT_SUBTASKS — see
  // docs/movement-control-flow-tools.md). Tool/edit access is a workspace tool
  // policy setting now, not a piece field (allowed_tools/edit are removed).
  const edited = [
    `name: ${pieceName}`,
    'description: edited by e2e',
    'max_movements: 25',
    'initial_movement: execute',
    'movements:',
    '  - name: execute',
    '    persona: worker',
    "    instruction: 'do the thing'",
    '    default_next: COMPLETE',
    '    rules: []',
    '',
  ].join('\n');
  await yaml.fill(edited);

  const saveBtn = page.getByRole('button', { name: 'Save' });
  await expect(saveBtn).toBeEnabled({ timeout: 15_000 });
  await saveBtn.click();

  // The save persists to PUT /api/pieces/:name — verify the new description via
  // the single-piece read endpoint (source=user-custom; response = { piece }).
  await expect
    .poll(async () => {
      const res = await page.request.get(`/api/pieces/${encodeURIComponent(pieceName)}?source=user-custom`);
      if (!res.ok()) return '';
      const data = (await res.json()) as { piece?: { description?: string } };
      return data.piece?.description ?? '';
    }, { timeout: 15_000 })
    .toContain('edited by e2e');

  expect(fatalErrors, `fatal errors:\n${fatalErrors.join('\n')}`).toEqual([]);
});

// Negative/visibility: built-in pieces are never deletable, by anyone
// (PieceEditor.tsx: Delete is gated on effectiveSource !== 'builtin', with no
// admin exception). The readonly badge/footer gate, by contrast, is
// `!isAdmin && (builtin || global-custom)` — and with auth disabled the E2E
// synthetic user is always admin (App.tsx: isAdmin = auth.mode ===
// 'authenticated' ? user.role === 'admin' : true), so admins CAN edit
// (Save) built-in pieces here; only non-admins get the true read-only view.
// 'chat' is a built-in piece always present.
test('a built-in piece opens editable for admin (no Delete, Save appears once dirty)', async ({ page }) => {
  const fatalErrors = trackFatalErrors(page);

  await page.goto('/ui?page=pieces');
  await expect(page.getByText('Default Pieces', { exact: false })).toBeVisible({ timeout: 15_000 });

  // Open the built-in 'chat' piece from the Default Pieces section.
  await page.getByRole('button', { name: /chat/i }).first().click();

  // No readonly badge (this session is admin) and no Delete (built-ins are
  // never deletable), but the editable footer with Save is present.
  const saveBtn = page.getByRole('button', { name: 'Save' });
  await expect(saveBtn).toBeVisible({ timeout: 15_000 });
  await expect(page.getByText(/read-?only/i)).toHaveCount(0);
  await expect(page.getByRole('button', { name: 'Delete' })).toHaveCount(0);
  await expect(saveBtn).toBeDisabled();

  expect(fatalErrors, `fatal errors:\n${fatalErrors.join('\n')}`).toEqual([]);
});