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';
import { formatLastSeen } from '../../src/web/utils/format.js';

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\)/);
  assert.match(panel, /<Tooltip>Изменить название<\/Tooltip>/);
  assert.match(panel, /<TextMorph from=\{seen\.label\} to=\{seen\.relative\} \/>/);
  assert.match(panel, /filter id="client-text-morph-goo"/);
  assert.match(panel, /client-device-addresses/);
  assert.doesNotMatch(panel, /точная MAC|частная MAC|<dt>Источник<\/dt>/);
  assert.match(panel, /aria-pressed=\{device\.pinned\}/);
  assert.match(panel, /maxLength="64"[\s\S]*autoFocus/);
  assert.match(styles, /\.client-devices \{\s*width: min\(560px, 100vw\)/);
  assert.match(styles, /\.client-device-last-seen:hover \.client-text-morph-value\.is-relative[\s\S]*opacity: 1/);
  assert.match(styles, /@media \(prefers-reduced-motion: reduce\)[\s\S]*\.client-text-morph-value/);
});

test('device last-seen copy is compact with precise accessible and relative forms', () => {
  const lastSeen = new Date(2026, 7, 7, 13, 15);
  const now = new Date(2026, 7, 7, 13, 27);
  assert.deepEqual(
    formatLastSeen(lastSeen.toISOString(), now),
    {
      label: 'Сегодня, 13:15',
      relative: '12 минут назад',
      tooltip: '7 августа 2026 г. в 13:15 (12 минут назад)',
    },
  );
});