import React from 'react';
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ThemeProvider } from 'styled-components';
import { MemoryRouter } from 'react-router-dom';
import { I18nextProvider } from 'react-i18next';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import '@testing-library/jest-dom';
import CreateTicketPage from '@/features/tickets/pages/CreateTicketPage';
import * as ticketService from '@/features/tickets/services/ticketService';
import * as departmentSupportService from '@/features/tickets/services/departmentSupportService';
import type { TicketSummary } from '@/features/tickets/types/ticket.types';
import i18n from '@/locales/i18n';
import { LocaleProvider } from '@/app/providers/LocaleProvider';
import { lightTheme } from '@/styles/theme';
import { useAuthStore } from '@/features/auth/store/authStore';

vi.mock('@/features/tickets/services/ticketService');
vi.mock('@/features/tickets/services/departmentSupportService');

const mockNavigate = vi.fn();
vi.mock('react-router-dom', async () => {
  const actual = await vi.importActual<typeof import('react-router-dom')>('react-router-dom');
  return {
    ...actual,
    useNavigate: () => mockNavigate,
  };
});

vi.mock('@/shared/components/layout/AppLayout', () => ({
  AppLayout: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
}));

const mockTicket: TicketSummary = {
  id: 'new-ticket-id',
  ticket_number: 'TKT-200',
  subject: 'New issue',
  description: 'Detailed description here',
  department: { id: 'dept-1', name: 'IT', code: 'IT' },
  requester: { id: 'u1', name: 'Jane', email: 'jane@test.com' },
  status: {
    id: 'st-1',
    name_en: 'Open',
    name_ar: 'مفتوح',
    color: '#f00',
    is_closed: false,
  },
  priority: {
    id: 'pr-1',
    name_en: 'Normal',
    name_ar: 'عادي',
    color: '#0f0',
    sort_order: 2,
  },
  first_response_at: null,
  resolved_at: null,
  closed_at: null,
  created_at: '2026-05-18T10:00:00Z',
  updated_at: '2026-05-18T10:00:00Z',
  age_in_days: 0,
  is_assigned: false,
  is_open: true,
};

function renderCreatePage() {
  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  return render(
    <QueryClientProvider client={client}>
      <ThemeProvider theme={lightTheme}>
        <I18nextProvider i18n={i18n}>
          <LocaleProvider>
            <MemoryRouter>
              <CreateTicketPage />
            </MemoryRouter>
          </LocaleProvider>
        </I18nextProvider>
      </ThemeProvider>
    </QueryClientProvider>,
  );
}

describe('CreateTicketPage', () => {
  beforeEach(() => {
    vi.clearAllMocks();
    useAuthStore.setState({
      user: {
        id: 'u1',
        name: 'Jane',
        email: 'jane@test.com',
        locale: 'en',
        company_id: 'co-1',
        company: {
          id: 'co-1',
          name: 'ACME',
          domain: 'acme.test',
          is_active: true,
          created_at: '',
          updated_at: '',
        },
        departments: [
          {
            id: 'dept-1',
            company_id: 'co-1',
            name: 'IT',
            is_active: true,
            created_at: '',
            updated_at: '',
          },
        ],
        roles: [],
        permissions: [],
        is_active: true,
        created_at: '',
        updated_at: '',
      },
      token: 'token',
      isAuthenticated: true,
      isLoading: false,
    });

    vi.mocked(departmentSupportService.fetchDepartmentAssignableUsers).mockResolvedValue([]);

    vi.mocked(departmentSupportService.fetchTicketFormOptions).mockResolvedValue({
      categories: [
        {
          id: 'cat-1',
          name_en: 'Hardware',
          name_ar: 'أجهزة',
          subcategories: [{ id: 'sub-1', name_en: 'Laptop', name_ar: 'حاسوب' }],
        },
      ],
      statuses: [
        {
          id: 'st-1',
          name_en: 'Open',
          name_ar: 'مفتوح',
          color: '#f00',
          is_closed: false,
          sort_order: 1,
        },
      ],
      priorities: [
        {
          id: 'pr-1',
          name_en: 'Normal',
          name_ar: 'عادي',
          color: '#0f0',
          sort_order: 1,
        },
      ],
    });
  });

  it('renders create ticket form', async () => {
    renderCreatePage();

    await waitFor(
      () => {
        expect(screen.getByText('Subject')).toBeInTheDocument();
      },
      { timeout: 3000 },
    );

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

  it('redirects to ticket detail after successful create', async () => {
    vi.mocked(ticketService.createTicket).mockResolvedValue(mockTicket);

    renderCreatePage();

    await waitFor(() => {
      expect(screen.getByText('Subject')).toBeInTheDocument();
    });

    const [subjectInput, descriptionInput] = screen.getAllByRole('textbox');
    fireEvent.change(subjectInput, {
      target: { value: 'New issue' },
    });
    fireEvent.change(descriptionInput, {
      target: { value: 'Detailed description here' },
    });

    fireEvent.click(screen.getByRole('button', { name: /create ticket/i }));

    await waitFor(() => {
      expect(ticketService.createTicket).toHaveBeenCalled();
      expect(mockNavigate).toHaveBeenCalledWith('/tickets/new-ticket-id');
    });
  });
});