import React from 'react';
import { render, screen } from '@testing-library/react';
import { ThemeProvider } from 'styled-components';
import { I18nextProvider } from 'react-i18next';
import { describe, it, expect } from 'vitest';
import '@testing-library/jest-dom';
import { SlaSummary } from '@/features/tickets/components/SlaSummary';
import type { TicketSlaTracking } from '@/features/tickets/types/sla.types';
import i18n from '@/locales/i18n';
import { LocaleProvider } from '@/app/providers/LocaleProvider';
import { lightTheme } from '@/styles/theme';

const mockSla: TicketSlaTracking = {
  id: 'sla-1',
  ticket_id: 'ticket-1',
  sla_status: 'warning',
  sla_status_label: 'Warning',
  sla_status_color: '#F59E0B',
  response: {
    due_at: '2026-05-19T10:00:00Z',
    completed_at: null,
    breached: false,
    time_remaining_minutes: 120,
    percentage_elapsed: 75,
    is_warning: true,
    is_breached: false,
  },
  resolution: {
    due_at: '2026-05-20T10:00:00Z',
    completed_at: null,
    breached: false,
    time_remaining_minutes: 240,
    percentage_elapsed: 50,
    is_warning: false,
    is_breached: false,
  },
  is_paused: false,
  paused_at: null,
  paused_duration_minutes: 0,
  created_at: '2026-05-18T10:00:00Z',
  updated_at: '2026-05-18T10:00:00Z',
};

function renderSla() {
  return render(
    <ThemeProvider theme={lightTheme}>
      <I18nextProvider i18n={i18n}>
        <LocaleProvider>
          <SlaSummary sla={mockSla} />
        </LocaleProvider>
      </I18nextProvider>
    </ThemeProvider>,
  );
}

describe('SlaSummary', () => {
  it('renders real SLA status label from API', () => {
    renderSla();

    expect(screen.getByText('Warning')).toBeInTheDocument();
    expect(screen.getByText(/response due/i)).toBeInTheDocument();
    expect(screen.getByText('2h')).toBeInTheDocument();
  });
});