import { describe, it } from 'node:test';
import { strict as assert } from 'node:assert';
import { readFileSync } from 'node:fs';
import { resolve } from 'node:path';

const componentPath = resolve('src/components/ArticleCard.astro');

function readComponent() {
  return readFileSync(componentPath, 'utf-8');
}

describe('ArticleCard component', () => {
  it('should exist at src/components/ArticleCard.astro', () => {
    const content = readComponent();
    assert.ok(content.length > 0, 'Component file should not be empty');
  });

  // --- Props ---
  describe('Props interface', () => {
    it('should define title as string', () => {
      const content = readComponent();
      assert.match(content, /title:\s*string/, 'should have title: string prop');
    });

    it('should define date as Date', () => {
      const content = readComponent();
      assert.match(content, /date:\s*Date/, 'should have date: Date prop');
    });

    it('should define type as string', () => {
      const content = readComponent();
      assert.match(content, /type:\s*string/, 'should have type: string prop');
    });

    it('should define summary as optional string', () => {
      const content = readComponent();
      assert.match(content, /summary\?:\s*string/, 'should have summary?: string prop');
    });

    it('should define slug as string', () => {
      const content = readComponent();
      assert.match(content, /slug:\s*string/, 'should have slug: string prop');
    });

    it('should define readingTime as optional number', () => {
      const content = readComponent();
      assert.match(content, /readingTime\?:\s*number/, 'should have readingTime?: number prop');
    });
  });

  // --- BASE_URL ---
  describe('BASE_URL usage', () => {
    it('should read BASE_URL from import.meta.env', () => {
      const content = readComponent();
      assert.match(content, /import\.meta\.env\.BASE_URL/, 'should read BASE_URL');
    });
  });

  // --- Date formatting ---
  describe('Date formatting', () => {
    it('should format date with toLocaleDateString en-US', () => {
      const content = readComponent();
      assert.match(content, /toLocaleDateString\s*\(\s*'en-US'/, 'should use en-US locale');
    });

    it('should use numeric year/month/day options', () => {
      const content = readComponent();
      assert.match(content, /year:\s*'numeric'/, 'should have year: numeric');
      assert.match(content, /month:\s*'numeric'/, 'should have month: numeric');
      assert.match(content, /day:\s*'numeric'/, 'should have day: numeric');
    });

    it('should generate ISO date string', () => {
      const content = readComponent();
      assert.match(content, /toISOString/, 'should generate ISO date for datetime attr');
    });
  });

  // --- HTML structure ---
  describe('HTML structure', () => {
    it('should have article element with class card and aria-label', () => {
      const content = readComponent();
      assert.match(content, /<article\s+class="card"/, 'should have <article class="card">');
      assert.match(content, /aria-label=/, 'should have aria-label on article');
    });

    it('should have aria-label combining type and title', () => {
      const content = readComponent();
      assert.match(content, /aria-label=\{`\$\{type\}:\s*\$\{title\}`\}/, 'aria-label should be {type}: {title}');
    });

    it('should have anchor with card-link class wrapping content', () => {
      const content = readComponent();
      assert.match(content, /<a\s+href=/, 'should have anchor element');
      assert.match(content, /class="card-link"/, 'anchor should have card-link class');
    });

    it('should link to base + posts/slug/', () => {
      const content = readComponent();
      assert.match(content, /posts\/.*slug/, 'link should point to posts/{slug}');
    });

    it('should have badge-row div with badge span', () => {
      const content = readComponent();
      assert.match(content, /class="badge-row"/, 'should have badge-row class');
      assert.match(content, /class="badge"/, 'should have badge class');
    });

    it('should conditionally render reading time', () => {
      const content = readComponent();
      assert.match(content, /readingTime/, 'should reference readingTime');
      assert.match(content, /class="reading-time"/, 'should have reading-time class');
    });

    it('should have h2 with title class', () => {
      const content = readComponent();
      assert.match(content, /<h2\s+class="title"/, 'should have <h2 class="title">');
    });

    it('should conditionally render summary paragraph', () => {
      const content = readComponent();
      assert.match(content, /summary/, 'should reference summary');
      assert.match(content, /<p\s+class="summary"/, 'should have <p class="summary">');
    });

    it('should have time element with datetime attribute', () => {
      const content = readComponent();
      assert.match(content, /<time\s+datetime=/, 'should have <time datetime=...>');
    });
  });

  // --- Styles ---
  describe('Styles', () => {
    it('should have .card with prose max-width', () => {
      const content = readComponent();
      assert.match(content, /\.card\s*\{/, 'should have .card selector');
      assert.match(content, /--width-prose/, 'should use --width-prose for max-width');
    });

    it('should style .card-link with card bg, border, rounded-lg, shadow-sm, padding', () => {
      const content = readComponent();
      assert.match(content, /\.card-link\s*\{/, 'should have .card-link selector');
      assert.match(content, /--surface-card/, 'should use --surface-card bg');
      assert.match(content, /--border-subtle/, 'should use --border-subtle border');
      assert.match(content, /--rounded-lg/, 'should use --rounded-lg radius');
      assert.match(content, /--shadow-sm/, 'should use --shadow-sm shadow');
      assert.match(content, /--space-3/, 'should use --space-3 padding');
    });

    it('should have .card-link block display, no underline, inherit color, fast transition', () => {
      const content = readComponent();
      assert.match(content, /display:\s*block/, 'should be display block');
      assert.match(content, /text-decoration:\s*none/, 'should have no text-decoration');
      assert.match(content, /color:\s*inherit/, 'should inherit color');
      assert.match(content, /--duration-fast/, 'should use --duration-fast transition');
    });

    it('should have hover state with shadow-md and no underline', () => {
      const content = readComponent();
      assert.match(content, /\.card-link:hover/, 'should have .card-link:hover');
      assert.match(content, /--shadow-md/, 'should use --shadow-md on hover');
    });

    it('should change title color on hover to accent-primary', () => {
      const content = readComponent();
      assert.match(content, /\.card-link:hover\s+\.title/, 'should have .card-link:hover .title');
    });

    it('should have active state with shadow-sm and translateY(1px)', () => {
      const content = readComponent();
      assert.match(content, /\.card-link:active/, 'should have .card-link:active');
      assert.match(content, /translateY\(1px\)/, 'should translateY(1px) on active');
    });

    it('should have focus-visible with focus-ring outline', () => {
      const content = readComponent();
      assert.match(content, /\.card-link:focus-visible/, 'should have .card-link:focus-visible');
      assert.match(content, /--focus-ring/, 'should use --focus-ring for outline');
    });

    it('should style .badge with structure font, type-xs, weight 600, accent-primary, uppercase, 0.05em tracking', () => {
      const content = readComponent();
      assert.match(content, /\.badge\s*\{/, 'should have .badge selector');
    });

    it('should style .reading-time with structure font, type-xs, weight 400, tertiary', () => {
      const content = readComponent();
      assert.match(content, /\.reading-time\s*\{/, 'should have .reading-time selector');
      assert.match(content, /--text-tertiary/, 'reading-time should use --text-tertiary');
    });

    it('should style .title with structure font, type-xl, weight 600, primary, leading-snug, space-1 bottom, fast color transition', () => {
      const content = readComponent();
      assert.match(content, /\.title\s*\{/, 'should have .title selector');
      assert.match(content, /--font-structure/, 'title should use --font-structure');
      assert.match(content, /--type-xl/, 'title should use --type-xl');
      assert.match(content, /--leading-snug/, 'title should use --leading-snug');
    });

    it('should style .summary with prose font, type-base, weight 400, secondary, leading-prose, space-2 bottom', () => {
      const content = readComponent();
      assert.match(content, /\.summary\s*\{/, 'should have .summary selector');
      assert.match(content, /--font-prose/, 'summary should use --font-prose');
      assert.match(content, /--text-secondary/, 'summary should use --text-secondary');
      assert.match(content, /--leading-prose/, 'summary should use --leading-prose');
    });

    it('should style time with structure font, type-sm, weight 400, tertiary', () => {
      const content = readComponent();
      assert.match(content, /--type-sm/, 'time should use --type-sm');
    });
  });
});