const fs = require('fs');
const path = require('path');
const {
  openStory,
  captureWithSensors,
  playwright,
  row,
} = require(process.env.HOME + '/astryx/probe-kit/lib.cjs');

const PORT = Number(process.env.SB_PORT || 6555);
const ROOT = process.env.BUILD_ROOT;
const SHA = process.env.BUILD_SHA;
const LABEL = process.env.BUILD_LABEL;
const SHOTS = process.env.SHOTS;

if (!ROOT || !SHA || !LABEL || !SHOTS) {
  throw new Error('BUILD_ROOT, BUILD_SHA, BUILD_LABEL, and SHOTS are required');
}
fs.mkdirSync(SHOTS, {recursive: true});

const STORY_BUSY = 'review-pr5555--busy-pair';
const STORY_COUNTS = 'review-pr5555--render-counts';
const STORY_THRESHOLD = 'review-pr5555--threshold-create';
const VIEWPORT = {width: 420, height: 430};
const GLOBALS = {
  astryxTheme: 'neutral',
  colorMode: 'light',
  direction: 'ltr',
};
const LONG_QUERY = 'abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJ';

async function open(story, {rtl = false, reducedMotion = false} = {}) {
  const globals = {...GLOBALS, ...(rtl ? {direction: 'rtl'} : {})};
  const opened = await openStory('chromium', story, {
    port: PORT,
    waitUntil: 'domcontentloaded',
    viewport: VIEWPORT,
    globals,
    ready: () =>
      document.querySelector('[data-review-root]') != null &&
      document.querySelectorAll('input[role="combobox"]').length >= 2,
  });
  if (reducedMotion) {
    await opened.page.emulateMedia({reducedMotion: 'reduce'});
  }
  return opened;
}

async function startBusy(page) {
  const tokenizerInput = page.locator(
    '[data-review-field="tokenizer"] input[role="combobox"]',
  );
  await tokenizerInput.fill(LONG_QUERY);

  const baseInput = page.locator(
    '[data-review-field="base"] input[role="combobox"]',
  );
  await baseInput.fill(LONG_QUERY);

  // Drive Typeahead last so its edit-mode input remains visible and focused in
  // the decisive frame instead of blur restoring the selected token.
  const typeaheadSection = page.locator('[data-review-field="typeahead"]');
  const typeaheadInput = typeaheadSection.locator('input[role="combobox"]');
  await typeaheadSection.locator('[data-testid="review-typeahead"]').click();
  await page.waitForFunction(() => {
    const input = document.querySelector(
      '[data-review-field="typeahead"] input[role="combobox"]',
    );
    return (
      input instanceof HTMLInputElement &&
      input.value === 'Apple' &&
      input.getBoundingClientRect().width > 100
    );
  });
  await typeaheadInput.fill(LONG_QUERY);

  await page.waitForFunction(
    () => Object.keys(window.__review5555?.pending ?? {}).length === 3,
  );
  await typeaheadInput.focus();
  await typeaheadInput.evaluate(input => {
    input.setSelectionRange(input.value.length, input.value.length);
  });
  await page.waitForTimeout(100);
}

async function semanticBusyState(page) {
  return page.evaluate(() => ({
    queries: [...document.querySelectorAll('input[role="combobox"]')].map(
      input => input.value,
    ),
    pendingSearches: Object.keys(window.__review5555?.pending ?? {}).sort(),
    focusedField:
      document.activeElement
        ?.closest('[data-review-field]')
        ?.getAttribute('data-review-field') ?? null,
  }));
}

function expectedFor(direction, state, reducedMotion = false) {
  return {
    globals: {...GLOBALS, direction},
    themeAttr: 'neutral',
    colorMode: 'light',
    direction,
    viewport: {...VIEWPORT, dpr: 1},
    media: {
      forcedColors: false,
      reducedMotion,
      coarsePointer: false,
      hover: true,
    },
    targetCount: 1,
    state,
    surfaceClass: 'light',
  };
}

async function geometry(page) {
  return page.evaluate(() => {
    const overlap = (a, b) => {
      if (!a || !b) return null;
      const x = Math.max(0, Math.min(a.right, b.right) - Math.max(a.left, b.left));
      const y = Math.max(0, Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top));
      return {width: x, height: y, area: x * y};
    };
    const rect = el => (el ? el.getBoundingClientRect().toJSON() : null);
    const one = name => {
      const section = document.querySelector(`[data-review-field="${name}"]`);
      const input = section?.querySelector('input[role="combobox"]');
      const statuses = [...(section?.querySelectorAll('[role="status"]') ?? [])];
      const status = statuses.find(element => {
        const box = element.getBoundingClientRect();
        return box.width >= 8 && box.height >= 8;
      });
      const clear = [...(section?.querySelectorAll('button') ?? [])].find(button =>
        /clear/i.test(button.getAttribute('aria-label') ?? ''),
      );
      const endContent = section?.querySelector('[data-testid="selected-count"]');
      const inputRect = rect(input);
      const statusRect = rect(status);
      const clearRect = rect(clear);
      return {
        input: inputRect,
        inputScrollWidth: input?.scrollWidth ?? null,
        inputClientWidth: input?.clientWidth ?? null,
        inputScrollLeft: input?.scrollLeft ?? null,
        ariaBusy: input?.getAttribute('aria-busy') ?? null,
        status: statusRect,
        statusName: status?.getAttribute('aria-label') ?? null,
        statusClass: status?.className ?? null,
        clear: clearRect,
        endContent: rect(endContent),
        statusClearOverlap: overlap(statusRect, clearRect),
        inputStatusOverlap: overlap(inputRect, statusRect),
        inputClearOverlap: overlap(inputRect, clearRect),
        focused: document.activeElement === input,
      };
    };
    return {
      typeahead: one('typeahead'),
      tokenizer: one('tokenizer'),
      base: one('base'),
      runningAnimations: document.getAnimations().filter(a => a.playState === 'running').length,
      visibleStatusCount: [...document.querySelectorAll('[role="status"]')].filter(element => {
        const box = element.getBoundingClientRect();
        return box.width >= 8 && box.height >= 8;
      }).length,
      commits: window.__review5555?.commits ?? {},
    };
  });
}

async function captureBusy() {
  const {browser, page, sensorErrors} = await open(STORY_BUSY);
  await startBusy(page);
  const state = await semanticBusyState(page);
  const output = path.join(SHOTS, `${LABEL}__busy-narrow.png`);
  await captureWithSensors(page, output, {
    label: `${LABEL} busy narrow`,
    buildRoot: ROOT,
    expectedSha: SHA,
    story: STORY_BUSY,
    target: '[data-review-root="busy-pair"]',
    surface: '[data-review-root="busy-pair"]',
    expected: expectedFor('ltr', state),
    readState: semanticBusyState,
    sensorErrors,
    screenshot: {fullPage: true},
  });
  const aria = await page.locator('[data-review-root="busy-pair"]').ariaSnapshot();
  const metrics = await geometry(page);
  fs.writeFileSync(
    path.join(SHOTS, `${LABEL}__busy-narrow.metrics.json`),
    `${JSON.stringify({state, metrics, aria}, null, 2)}\n`,
  );
  row(`${LABEL} busy`, {
    statuses: metrics.visibleStatusCount,
    animations: metrics.runningAnimations,
    typeaheadStatusClearOverlap: metrics.typeahead.statusClearOverlap?.area,
    tokenizerStatusClearOverlap: metrics.tokenizer.statusClearOverlap?.area,
    directBaseStatus: metrics.base.status != null,
  });
  await browser.close();
}

async function captureSettledControl() {
  const {browser, page, sensorErrors} = await open(STORY_BUSY);
  await startBusy(page);
  await page.evaluate(() => window.__review5555?.settleAll());
  await page.waitForFunction(
    () =>
      document.querySelectorAll('input[role="combobox"][aria-busy="true"]').length === 0,
  );
  const typeaheadInput = page.locator(
    '[data-review-field="typeahead"] input[role="combobox"]',
  );
  await typeaheadInput.focus();
  const state = await page.evaluate(() => ({
    queries: [...document.querySelectorAll('input[role="combobox"]')].map(
      input => input.value,
    ),
    pendingSearches: Object.keys(window.__review5555?.pending ?? {}).sort(),
    focusedField:
      document.activeElement
        ?.closest('[data-review-field]')
        ?.getAttribute('data-review-field') ?? null,
  }));
  const output = path.join(SHOTS, `${LABEL}__settled-control.png`);
  await captureWithSensors(page, output, {
    label: `${LABEL} settled control`,
    buildRoot: ROOT,
    expectedSha: SHA,
    story: STORY_BUSY,
    target: '[data-review-root="busy-pair"]',
    surface: '[data-review-root="busy-pair"]',
    expected: expectedFor('ltr', state),
    readState: async p =>
      p.evaluate(() => ({
        queries: [...document.querySelectorAll('input[role="combobox"]')].map(
          input => input.value,
        ),
        pendingSearches: Object.keys(window.__review5555?.pending ?? {}).sort(),
        focusedField:
          document.activeElement
            ?.closest('[data-review-field]')
            ?.getAttribute('data-review-field') ?? null,
      })),
    sensorErrors,
    screenshot: {fullPage: true},
  });
  await browser.close();
}

async function exerciseBusyInteraction({rtl = false, reducedMotion = false} = {}) {
  const {browser, page} = await open(STORY_BUSY, {rtl, reducedMotion});
  await startBusy(page);
  const typeaheadInput = page.locator(
    '[data-review-field="typeahead"] input[role="combobox"]',
  );
  await typeaheadInput.press('ArrowDown');
  await typeaheadInput.press('Escape');
  const beforeClear = await geometry(page);
  await page
    .locator('[data-review-field="typeahead"] button[aria-label*="Clear"]')
    .click();
  const afterClear = await page.evaluate(() => ({
    focusRole: document.activeElement?.getAttribute('role') ?? null,
    clearButtons: [...document.querySelectorAll('button')].filter(button =>
      /clear/i.test(button.getAttribute('aria-label') ?? ''),
    ).length,
  }));
  const durations = await page.evaluate(() =>
    [...document.querySelectorAll('[role="status"] svg')].map(
      svg => getComputedStyle(svg).animationDuration,
    ),
  );
  const result = {rtl, reducedMotion, beforeClear, afterClear, durations};
  fs.writeFileSync(
    path.join(
      SHOTS,
      `${LABEL}__interaction-${rtl ? 'rtl' : 'ltr'}-${reducedMotion ? 'reduce' : 'motion'}.json`,
    ),
    `${JSON.stringify(result, null, 2)}\n`,
  );
  row(`${LABEL} ${rtl ? 'rtl' : 'ltr'} ${reducedMotion ? 'reduce' : 'motion'}`, {
    focusedAfterClear: afterClear.focusRole,
    typeaheadOverlap: beforeClear.typeahead.statusClearOverlap?.area,
    tokenizerOverlap: beforeClear.tokenizer.statusClearOverlap?.area,
    durations: durations.join(','),
  });
  await browser.close();
}

async function thresholdCreate() {
  const {browser, page} = await open(STORY_THRESHOLD);
  const typeahead = page.locator(
    '[data-review-field="threshold-typeahead"] input[role="combobox"]',
  );
  await typeahead.fill('ap');
  const below = await page.evaluate(() => ({
    calls: window.__review5555?.calls['threshold-typeahead'] ?? 0,
    busy: document
      .querySelector('[data-review-field="threshold-typeahead"] input')
      ?.getAttribute('aria-busy') ?? null,
    status: document.querySelector(
      '[data-review-field="threshold-typeahead"] [role="status"]',
    ) != null,
    expanded: document
      .querySelector('[data-review-field="threshold-typeahead"] input')
      ?.getAttribute('aria-expanded') ?? null,
  }));
  await typeahead.fill('app');
  await page.waitForFunction(
    () => window.__review5555?.calls['threshold-typeahead'] === 1,
  );
  const atThreshold = await page.evaluate(() => ({
    calls: window.__review5555?.calls['threshold-typeahead'] ?? 0,
    busy: document
      .querySelector('[data-review-field="threshold-typeahead"] input')
      ?.getAttribute('aria-busy') ?? null,
    status: document.querySelector(
      '[data-review-field="threshold-typeahead"] [role="status"]',
    ) != null,
  }));
  await typeahead.fill('ap');
  await page.waitForTimeout(50);
  const backspaced = await page.evaluate(() => ({
    busy: document
      .querySelector('[data-review-field="threshold-typeahead"] input')
      ?.getAttribute('aria-busy') ?? null,
    status: document.querySelector(
      '[data-review-field="threshold-typeahead"] [role="status"]',
    ) != null,
    expanded: document
      .querySelector('[data-review-field="threshold-typeahead"] input')
      ?.getAttribute('aria-expanded') ?? null,
  }));

  const tokenizer = page.locator(
    '[data-review-field="threshold-tokenizer"] input[role="combobox"]',
  );
  await tokenizer.fill('QA');
  await page.waitForSelector('text=Create "QA"');
  const createBefore = await page.evaluate(() => ({
    calls: window.__review5555?.calls['threshold-tokenizer'] ?? 0,
    busy: document
      .querySelector('[data-review-field="threshold-tokenizer"] input')
      ?.getAttribute('aria-busy') ?? null,
    status: document.querySelector(
      '[data-review-field="threshold-tokenizer"] [role="status"]',
    ) != null,
    createVisible: [...document.querySelectorAll('[role="option"]')].some(el =>
      el.innerText.includes('Create "QA"'),
    ),
  }));
  await tokenizer.press('Enter');
  await page.waitForFunction(() => document.body.innerText.includes('QA'));
  const createAfter = await page.evaluate(() => ({
    calls: window.__review5555?.calls['threshold-tokenizer'] ?? 0,
    inputValue: document.querySelector(
      '[data-review-field="threshold-tokenizer"] input',
    )?.value,
    tokenVisible:
      document
        .querySelector('[data-review-field="threshold-tokenizer"]')
        ?.innerText.includes('QA') ?? false,
  }));

  const result = {below, atThreshold, backspaced, createBefore, createAfter};
  fs.writeFileSync(
    path.join(SHOTS, `${LABEL}__threshold-create.json`),
    `${JSON.stringify(result, null, 2)}\n`,
  );
  row(`${LABEL} threshold`, {
    belowCalls: below.calls,
    atCalls: atThreshold.calls,
    backspaceBusy: backspaced.busy,
    createCalls: createBefore.calls,
    createVisible: createBefore.createVisible,
    tokenVisible: createAfter.tokenVisible,
  });
  await browser.close();
}

async function renderCounts() {
  const result = {};
  for (const field of ['typeahead', 'tokenizer']) {
    const {browser, page} = await open(STORY_COUNTS);
    const key = `count-${field}`;
    await page.evaluate(() => window.__review5555?.resetCommits());
    const input = page.locator(
      `[data-review-field="count-${field}"] input[role="combobox"]`,
    );
    await input.fill('app');
    await page.waitForFunction(
      keyArg => window.__review5555?.pending[keyArg] != null,
      key,
    );
    await page.waitForTimeout(100);
    const started = await page.evaluate(
      () => ({...(window.__review5555?.commits ?? {})}),
    );
    await page.evaluate(keyArg => {
      const state = window.__review5555;
      const resolve = state?.pending[keyArg];
      if (state != null) {
        delete state.pending[keyArg];
      }
      resolve?.();
    }, key);
    await page.waitForFunction(
      fieldArg => {
        const section = document.querySelector(
          `[data-review-field="count-${fieldArg}"]`,
        );
        return [...(section?.querySelectorAll('[role="status"]') ?? [])].every(
          element => {
            const box = element.getBoundingClientRect();
            return box.width < 8 || box.height < 8;
          },
        );
      },
      field,
    );
    await page.waitForTimeout(100);
    const settled = await page.evaluate(
      () => ({...(window.__review5555?.commits ?? {})}),
    );
    result[field] = {
      startCommits: started[field] ?? 0,
      settleCommits: (settled[field] ?? 0) - (started[field] ?? 0),
      totalCommits: settled[field] ?? 0,
    };
    await browser.close();
  }
  fs.writeFileSync(
    path.join(SHOTS, `${LABEL}__render-counts.json`),
    `${JSON.stringify(result, null, 2)}\n`,
  );
  row(`${LABEL} renders`, {
    typeahead: `${result.typeahead.startCommits}+${result.typeahead.settleCommits}`,
    tokenizer: `${result.tokenizer.startCommits}+${result.tokenizer.settleCommits}`,
  });
}

(async () => {
  await captureBusy();
  if (LABEL === 'head') {
    await captureSettledControl();
  }
  await exerciseBusyInteraction();
  await exerciseBusyInteraction({rtl: true});
  await exerciseBusyInteraction({reducedMotion: true});
  await renderCounts();
  await thresholdCreate();
})();