import assert from 'node:assert/strict';
import fs from 'node:fs';
import path from 'node:path';
import test from 'node:test';
import { fileURLToPath } from 'node:url';

const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..');
const overview = fs.readFileSync(path.join(root, 'src/web/components/ClientOverviewPage.jsx'), 'utf8');
const panel = fs.readFileSync(path.join(root, 'src/web/components/DevicesPanel.jsx'), 'utf8');
const styles = fs.readFileSync(path.join(root, 'src/web/styles.css'), 'utf8');

test('Gateway device inventory uses the existing accessible responsive drawer', () => {
  assert.match(overview, /isGateway && <button[\s\S]*client-devices-toggle/);
  assert.match(panel, /api\.devices\.list\(\)/);
  assert.match(panel, /api\.devices\.update\(device\.id, patch, snapshot\.revision\)/);
  for (const field of ['IP', 'MAC', 'Интерфейс', 'Последний раз', 'Источник']) {
    assert.match(panel, new RegExp(field));
  }
  assert.match(panel, /aria-pressed=\{device\.pinned\}/);
  assert.match(panel, /maxLength="64" autoFocus/);
  assert.match(styles, /\.client-devices \{\s*width: min\(560px, 100vw\)/);
  assert.match(styles, /@media \(max-width: 560px\)[\s\S]*\.client-device-meta \{\s*grid-template-columns: 1fr/);
  assert.match(styles, /@media \(prefers-reduced-motion: reduce\)[\s\S]*\.client-device-pin/);
});