import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { DraftContent } from './DraftContent';
import type { Draft } from '@/lib/db/draft-service';

describe('DraftContent', () => {
  const mockDraft: Draft = {
    id: 1,
    sessionId: 'session-1',
    title: 'My Test Draft',
    content: 'This is a test draft with **bold** and *italic* text.\n\n## Section 2\n\nSome content here.',
    tags: ['testing', 'draft'],
    createdAt: Date.now(),
    status: 'draft',
  };

  it('renders draft title correctly', () => {
    render(<DraftContent draft={mockDraft} />);
    // Title is rendered in the h2 with class draft-title
    const titleElement = document.querySelector('.draft-title');
    expect(titleElement).toBeInTheDocument();
    expect(titleElement?.textContent).toBe('My Test Draft');
  });

  it('renders draft content as Markdown', () => {
    render(<DraftContent draft={mockDraft} />);
    // Use a function matcher for text that might be split across elements
    expect(screen.getByText((content, element) => {
      return content.includes('test draft');
    })).toBeInTheDocument();
    expect(screen.getByText('bold')).toBeInTheDocument();
    expect(screen.getByText('italic')).toBeInTheDocument();
  });

  it('renders headings correctly', () => {
    render(<DraftContent draft={mockDraft} />);
    expect(screen.getByText('Section 2')).toBeInTheDocument();
  });

  it('renders tags when present', () => {
    render(<DraftContent draft={mockDraft} />);
    expect(screen.getByText('#testing')).toBeInTheDocument();
    expect(screen.getByText('#draft')).toBeInTheDocument();
  });

  it('does not render tags section when tags array is empty', () => {
    const draftWithoutTags: Draft = {
      ...mockDraft,
      tags: [],
    };

    const { container } = render(<DraftContent draft={draftWithoutTags} />);
    expect(container.querySelector('.tag-chip')).not.toBeInTheDocument();
  });

  it('handles code blocks correctly', () => {
    const draftWithCode: Draft = {
      ...mockDraft,
      content: '```typescript\nconst x = 1;\n```',
    };

    render(<DraftContent draft={draftWithCode} />);
    // Code blocks get syntax highlighted, so the text is split
    // Just check that the pre element exists
    const preElement = document.querySelector('pre');
    expect(preElement).toBeInTheDocument();
    expect(preElement?.textContent).toContain('const');
    expect(preElement?.textContent).toContain('x =');
    expect(preElement?.textContent).toContain('1');
  });

  it('handles lists correctly', () => {
    const draftWithList: Draft = {
      ...mockDraft,
      content: '- Item 1\n- Item 2\n- Item 3',
    };

    render(<DraftContent draft={draftWithList} />);
    expect(screen.getByText('Item 1')).toBeInTheDocument();
    expect(screen.getByText('Item 2')).toBeInTheDocument();
    expect(screen.getByText('Item 3')).toBeInTheDocument();
  });

  it('handles links correctly', () => {
    const draftWithLink: Draft = {
      ...mockDraft,
      content: '[Link text](https://example.com)',
    };

    render(<DraftContent draft={draftWithLink} />);
    const link = screen.getByText('Link text');
    expect(link).toBeInTheDocument();
    expect(link).toHaveAttribute('href', 'https://example.com');
  });
});
