import assert from 'node:assert/strict';
import fs from 'node:fs';
import path from 'node:path';
import test from 'node:test';

const root = path.resolve(import.meta.dirname, '../..');
const component = fs.readFileSync(path.join(root, 'src/web/components/ClientOverviewPage.jsx'), 'utf8');
const popup = fs.readFileSync(path.join(root, 'src/web/components/ConfirmationPopup.jsx'), 'utf8');
const styles = fs.readFileSync(path.join(root, 'src/web/styles.css'), 'utf8');

test('rule editor add latency stays constant and dirty exits are guarded', () => {
  const rowRule = /\.client-local-rule \{([\s\S]*?)\n\}/.exec(styles)?.[1] || '';
  assert.doesNotMatch(rowRule, /--rule-index|calc\(/);
  assert.match(component, /addEventListener\('beforeunload', warnBeforeUnload\)/);
  assert.match(component, /requestCloseLocalRules\(\)/);
  assert.match(component, /localRulesPendingRestart/);
  assert.match(component, /activeLocalRules/);
  assert.match(component, /localRulesRevision/);
  assert.match(component, /Не сохранено/);
  assert.match(component, /Ждёт перезапуска/);
  assert.match(component, /Перезапустить VPN/);
  assert.match(component, /client-deletable-row/);
  assert.match(component, /className="client-delete-strike"[\s\S]*onAnimationEnd/);
  assert.match(styles, /\.client-deletable-row\.is-removing > \.client-delete-strike[\s\S]*client-delete-strike/);
  assert.match(styles, /\.client-delete-strike::after[\s\S]*clip-path: polygon\(0 50%[\s\S]*100% 50%/);
  assert.match(styles, /\.client-delete-strike \{[\s\S]*z-index: 20[\s\S]*radial-gradient/);
  assert.match(styles, /@keyframes client-delete-strike[\s\S]*scaleX\(0\)[\s\S]*scaleX\(1\)/);
  assert.match(styles, /\.client-local-rule:has\(\.client-rule-type\.is-open\)[\s\S]*z-index: 5/);
});

test('critical confirmations share one accessible blocking popup', () => {
  assert.match(component, /id="discard-local-rules"/);
  assert.match(component, /id="delete-subscription"/);
  assert.doesNotMatch(component, /client-local-rules-discard|client-delete-confirmation/);
  assert.match(popup, /role="alertdialog"/);
  assert.match(popup, /aria-modal="true"/);
  assert.match(popup, /querySelectorAll\(FOCUSABLE\)/);
  assert.match(popup, /element\.inert = true/);
  assert.match(styles, /\.client-confirmation-popup\.is-open[\s\S]*backdrop-filter: blur\(18px\)/);
});