import React from 'react';
import { render, screen } from '@testing-library/react';
import { ThemeProvider } from 'styled-components';
import { MemoryRouter } from 'react-router-dom';
import { describe, it, expect } from 'vitest';
import '@testing-library/jest-dom';
import { ProjectCard } from '@/features/projects/components/ProjectCard';
import type { ProjectSummary } from '@/features/projects/types/project.types';
import { lightTheme } from '@/styles/theme';

const project: ProjectSummary = {
  id: 'p1',
  company_id: 'c1',
  department_id: 'd1',
  department: { id: 'd1', name: 'Support', code: 'SUP' },
  owner_user_id: 'u1',
  owner: { id: 'u1', name: 'Head', email: 'head@test.com' },
  name: 'Alpha',
  key: 'ALPHA',
  description: null,
  status: 'active',
  start_date: null,
  due_date: '2026-12-31',
  completed_at: null,
  color: null,
  completion_percentage: 55,
  health_level: 'healthy',
  is_overdue: false,
  created_at: '2026-01-01',
  updated_at: '2026-01-02',
};

describe('ProjectCard', () => {
  it('renders project summary fields', () => {
    render(
      <ThemeProvider theme={lightTheme}>
        <MemoryRouter>
          <ProjectCard project={project} />
        </MemoryRouter>
      </ThemeProvider>,
    );

    expect(screen.getByText('Alpha')).toBeInTheDocument();
    expect(screen.getByText('ALPHA')).toBeInTheDocument();
    expect(screen.getByText(/55%/)).toBeInTheDocument();
    expect(screen.getByText('active')).toBeInTheDocument();
    expect(screen.queryByText('Healthy')).not.toBeInTheDocument();
  });
});