/**
 * HistoryCard Component Tests
 * Story 3.1: Testing history card display
 */

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

// Mock date utility
vi.mock('@/lib/utils/date', () => ({
  formatRelativeDate: vi.fn((timestamp: number) => 'Today')
}));

const mockDraft: Draft = {
  id: 1,
  sessionId: 'test-session',
  title: 'Test Draft Title',
  content: 'This is a test draft content that is longer than 100 characters to test the preview functionality.',
  tags: ['react', 'testing'],
  createdAt: Date.now(),
  completedAt: Date.now(),
  status: 'completed'
};

describe('HistoryCard', () => {
  it('renders draft title', () => {
    const onClick = vi.fn();
    render(<HistoryCard draft={mockDraft} onClick={onClick} />);

    expect(screen.getByText('Test Draft Title')).toBeInTheDocument();
  });

  it('renders relative date', () => {
    const onClick = vi.fn();
    render(<HistoryCard draft={mockDraft} onClick={onClick} />);

    expect(screen.getByText('Today')).toBeInTheDocument();
  });

  it('renders tags', () => {
    const onClick = vi.fn();
    render(<HistoryCard draft={mockDraft} onClick={onClick} />);

    expect(screen.getByText('#react')).toBeInTheDocument();
    expect(screen.getByText('#testing')).toBeInTheDocument();
  });

  it('renders content preview truncated to 100 chars', () => {
    const onClick = vi.fn();
    render(<HistoryCard draft={mockDraft} onClick={onClick} />);

    const previewText = screen.getByText(/This is a test draft/);
    expect(previewText).toBeInTheDocument();
    // Note: If content is exactly 100 chars, no "..." is added
    const contentLength = mockDraft.content.length;
    if (contentLength > 100) {
      expect(previewText.textContent).toContain('...');
    }
  });

  it('calls onClick when clicked', () => {
    const onClick = vi.fn();
    render(<HistoryCard draft={mockDraft} onClick={onClick} />);

    const button = screen.getByRole('button', { name: /View post: Test Draft Title/ });
    button.click();

    expect(onClick).toHaveBeenCalledWith(mockDraft);
  });

  it('handles draft without tags', () => {
    const onClick = vi.fn();
    const draftWithoutTags: Draft = {
      ...mockDraft,
      tags: []
    };

    render(<HistoryCard draft={draftWithoutTags} onClick={onClick} />);

    expect(screen.queryByText('#react')).not.toBeInTheDocument();
    expect(screen.queryByText('#testing')).not.toBeInTheDocument();
  });

  it('handles short content (no truncation)', () => {
    const onClick = vi.fn();
    const shortDraft: Draft = {
      ...mockDraft,
      content: 'Short content'
    };

    render(<HistoryCard draft={shortDraft} onClick={onClick} />);

    const previewText = screen.getByText(/Short content/);
    expect(previewText.textContent).not.toContain('...');
  });

  it('has correct accessibility attributes', () => {
    const onClick = vi.fn();
    render(<HistoryCard draft={mockDraft} onClick={onClick} />);

    const button = screen.getByRole('button', { name: /View post: Test Draft Title/ });
    expect(button).toHaveAttribute('type', 'button');
  });

  it('handles draft without completedAt (uses createdAt)', () => {
    const onClick = vi.fn();
    const draftWithoutCompletedAt: Draft = {
      ...mockDraft,
      completedAt: undefined
    };

    render(<HistoryCard draft={draftWithoutCompletedAt} onClick={onClick} />);

    // Should still render with createdAt
    expect(screen.getByText('Today')).toBeInTheDocument();
  });
});
