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 page = fs.readFileSync(path.join(root, 'src/web/components/ClientOverviewPage.tsx'), 'utf8');
const feature = fs.readFileSync(path.join(root, 'src/web/features/activity-journal/ActivityJournalFeature.tsx'), 'utf8');
const styles = fs.readFileSync(path.join(root, 'src/web/styles/features/activity-journal.css'), 'utf8');
const model = fs.readFileSync(path.join(root, 'src/web/features/activity-journal/activityJournalModel.ts'), 'utf8');

test('journal is the last Gateway-only drawer and refreshes whenever it opens', () => {
  assert.match(page, /<RoutingToggle[\s\S]*\{isGateway && <ActivityJournalToggle/);
  assert.match(page, /DRAWER_ORDER = \[[^\]]*'journal'\]/);
  assert.match(feature, /if \(feature\.isOpen\) void load\(null, status !== 'idle'\)/);
  assert.match(feature, /assertActivityJournalPage\(await loadPage\(cursor\)\)/);
});

test('journal presents a semantic responsive timeline with stable states', () => {
  assert.match(feature, /Важные события хранятся 30 дней/);
  assert.match(feature, /Сегодня[\s\S]*Вчера/);
  assert.match(feature, /Обновить журнал/);
  assert.match(feature, /Показать ещё/);
  assert.match(feature, /Журнал временно недоступен[\s\S]*Повторить/);
  assert.match(styles, /\.client-journal-skeleton/);
  assert.match(feature, /compactActivityJournalEvents\(events\)/);
  assert.match(model, /Подписки обновлялись без ошибок/);
  assert.match(feature, /<ol>[\s\S]*<li[\s\S]*<time dateTime=\{event\.occurredAt\}/);
  assert.match(feature, /data-event-type=\{event\.type\}[\s\S]*data-severity=\{event\.severity\}[\s\S]*data-target-role=/);

  const rowRule = styles.match(/\.client-journal-groups li \{[^}]*\}/)?.[0] || '';
  const lineRule = styles.match(/\.client-journal-groups ol::before \{[^}]*\}/)?.[0] || '';
  const dotRule = styles.match(/\.client-journal-event::before \{[^}]*\}/)?.[0] || '';
  assert.match(rowRule, /min-height: 58px/);
  assert.match(rowRule, /grid-template-columns: 52px minmax\(0, 1fr\)/);
  assert.doesNotMatch(rowRule, /border-top/);
  assert.match(lineRule, /width: 1px/);
  assert.match(lineRule, /inset: 0 auto 0 -8px/);
  assert.match(lineRule, /background: color-mix\(in oklch, var\(--client-border\) 48%, transparent\)/);
  assert.doesNotMatch(lineRule, /--client-journal-tone|animation|transition/);
  assert.match(dotRule, /width: 8px/);
  assert.match(dotRule, /height: 8px/);
  assert.match(dotRule, /border-radius: 50%/);
  assert.match(dotRule, /inset: 15px auto auto -11\.5px/);
  assert.match(dotRule, /background: var\(--client-journal-tone\)/);
  assert.doesNotMatch(dotRule, /animation|transition/);

  assert.match(styles, /\.client-journal-event \.client-journal-time span \{ color: var\(--client-journal-tone\); \}/);
  assert.match(styles, /\[data-event-type='failover\.primary_recovered'\][\s\S]*--client-journal-tone: var\(--harbor-connect\)/);
  assert.match(styles, /\[data-event-type='failover\.reserve_recovered'\][\s\S]*--client-journal-tone: var\(--harbor-gateway\)/);
  assert.match(styles, /\[data-severity='warning'\] \{ --client-journal-tone: oklch\(0\.68 0\.14 72\); \}/);
  assert.match(styles, /\[data-severity='error'\] \{ --client-journal-tone: oklch\(0\.68 0\.15 28\); \}/);
  assert.match(styles, /@media \(max-width: 560px\) \{[\s\S]*?\.client-journal-groups li \{[^}]*grid-template-columns: 1fr;[^}]*\}[\s\S]*?\.client-journal-time \{[^}]*display: flex;/);
  assert.match(styles, /@media \(prefers-reduced-motion: reduce\) \{[^}]*animation: none;/);
});