import { render, screen } from '@testing-library/react';
import { ProjectMetadata } from './ProjectMetadata';

const DEFAULT_PROPS = {
  year: '2024',
  role: 'Frontend Engineer',
  stack: ['React', 'TypeScript', 'Tailwind'],
};

describe('ProjectMetadata', () => {
  describe('rendering', () => {
    it('renders the year value', () => {
      render(<ProjectMetadata {...DEFAULT_PROPS} />);
      expect(screen.getByText('2024')).toBeInTheDocument();
    });

    it('renders the YEAR label', () => {
      render(<ProjectMetadata {...DEFAULT_PROPS} />);
      expect(screen.getByText('YEAR')).toBeInTheDocument();
    });

    it('renders the role value', () => {
      render(<ProjectMetadata {...DEFAULT_PROPS} />);
      expect(screen.getByText('Frontend Engineer')).toBeInTheDocument();
    });

    it('renders the ROLE label', () => {
      render(<ProjectMetadata {...DEFAULT_PROPS} />);
      expect(screen.getByText('ROLE')).toBeInTheDocument();
    });

    it('renders the STACK label', () => {
      render(<ProjectMetadata {...DEFAULT_PROPS} />);
      expect(screen.getByText('STACK')).toBeInTheDocument();
    });

    it('renders each stack technology', () => {
      render(<ProjectMetadata {...DEFAULT_PROPS} />);
      expect(screen.getByText('React')).toBeInTheDocument();
      expect(screen.getByText('TypeScript')).toBeInTheDocument();
      expect(screen.getByText('Tailwind')).toBeInTheDocument();
    });
  });

  describe('structure', () => {
    it('outer div has space-y-6', () => {
      const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
      expect(container.firstChild).toHaveClass('space-y-6');
    });

    it('year section has no brutal-border-top (first section)', () => {
      const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
      const sections = container.firstChild?.childNodes as NodeListOf<Element>;
      expect(sections[0]).not.toHaveClass('brutal-border-top');
    });

    it('role section has brutal-border-top and pt-6', () => {
      const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
      const sections = container.firstChild?.childNodes as NodeListOf<Element>;
      expect(sections[1]).toHaveClass('brutal-border-top', 'pt-6');
    });

    it('stack section has brutal-border-top and pt-6', () => {
      const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
      const sections = container.firstChild?.childNodes as NodeListOf<Element>;
      expect(sections[2]).toHaveClass('brutal-border-top', 'pt-6');
    });

    it('label has text-xs uppercase tracking-wider opacity-60', () => {
      render(<ProjectMetadata {...DEFAULT_PROPS} />);
      const yearLabel = screen.getByText('YEAR');
      expect(yearLabel).toHaveClass('text-xs', 'uppercase', 'tracking-wider', 'opacity-60');
    });

    it('year value has text-base font-bold', () => {
      render(<ProjectMetadata {...DEFAULT_PROPS} />);
      const yearValue = screen.getByText('2024');
      expect(yearValue).toHaveClass('text-base', 'font-bold');
    });

    it('each stack tech is rendered as a <p> with text-sm', () => {
      render(<ProjectMetadata {...DEFAULT_PROPS} />);
      const techEl = screen.getByText('React');
      expect(techEl.tagName).toBe('P');
      expect(techEl).toHaveClass('text-sm');
    });
  });

  describe('className passthrough', () => {
    it('merges custom className onto outer div', () => {
      const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} className="my-custom" />);
      expect(container.firstChild).toHaveClass('my-custom');
    });
  });
});