import fs from 'node:fs';
import path from 'node:path';

import { describe, expect, it } from 'vitest';

function readIndexCss() {
  return fs.readFileSync(path.resolve(process.cwd(), 'src/index.css'), 'utf8');
}

function getCssBlock(source: string, selector: string) {
  const selectorIndex = source.indexOf(selector);
  expect(selectorIndex, `${selector} should exist in src/index.css`).toBeGreaterThanOrEqual(0);

  const openBraceIndex = source.indexOf('{', selectorIndex);
  expect(openBraceIndex, `${selector} should open a CSS block`).toBeGreaterThanOrEqual(0);

  let depth = 0;
  for (let index = openBraceIndex; index < source.length; index += 1) {
    const char = source[index];
    if (char === '{') {
      depth += 1;
    } else if (char === '}') {
      depth -= 1;
      if (depth === 0) {
        return source.slice(openBraceIndex + 1, index);
      }
    }
  }

  throw new Error(`${selector} block is not closed`);
}

describe('index stylesheet unread dots', () => {
  it('uses warm brown tokens for draft unread markers instead of red literals', () => {
    const css = readIndexCss();

    expect(css).toContain('--platform-unread-dot-fill: #8b5a3d;');
    expect(css).toContain('--platform-unread-dot-glow: rgba(139, 90, 61, 0.34);');
    expect(css).toContain('--platform-unread-dot-fill: #d6a27c;');
    expect(css).toContain('--platform-unread-dot-glow: rgba(214, 162, 124, 0.24);');

    for (const selector of [
      '.creation-work-card__unread-dot',
      '.platform-nav-unread-dot',
    ]) {
      const block = getCssBlock(css, selector);

      expect(block).toContain('background: var(--platform-unread-dot-fill);');
      expect(block).toContain('var(--platform-unread-dot-glow)');
      expect(block).not.toContain('#b64a35');
      expect(block).not.toContain('rgba(239, 68, 68');
    }
  });
});