import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { vi, describe, it, expect, beforeEach } from 'vitest';
import { ItemForm } from '../item-form';
import { useAuthStore } from '@/stores/auth';
import type { AuthUser } from '@alqove/types';

vi.mock('next/navigation', () => ({
  useRouter: () => ({ push: vi.fn(), replace: vi.fn() }),
}));

const getMock = vi.fn();
const publishMock = vi.fn();
vi.mock('@/lib/api', () => ({
  api: {
    items: {
      get: (...a: unknown[]) => getMock(...a),
      publish: (...a: unknown[]) => publishMock(...a),
      update: vi.fn(),
      remove: vi.fn(),
      relist: vi.fn(),
      create: vi.fn(),
      uploadImages: vi.fn(),
      removeImage: vi.fn(),
    },
    categories: { list: vi.fn().mockResolvedValue({ data: [] }) },
  },
}));

function wrap(node: React.ReactNode) {
  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  return <QueryClientProvider client={qc}>{node}</QueryClientProvider>;
}

describe('ItemForm', () => {
  beforeEach(() => {
    useAuthStore.getState().setAuth({ id: 'user' } as AuthUser, 'token');
    useAuthStore.setState({ selectedStoreId: 's1', memberships: [{ id: 'm', store_id: 's1', role: 'owner', capabilities: ['store.admin'], is_exempt: false }] });
    getMock.mockReset();
    publishMock.mockReset();
  });

  it('disables Publish when required fields are missing', async () => {
    getMock.mockResolvedValue({
      data: {
        id: 'i1',
        title: 'Has title but nothing else',
        description: null,
        category: null,
        brand: null,
        size: null,
        condition: 'GUC',
        colors: [],
        price: 0,
        status: 'draft',
        images: [],
      },
    });
    render(wrap(<ItemForm storeId="s1" itemId="i1" />));
    await waitFor(() => expect(screen.getByText('Edit item')).toBeInTheDocument());
    await waitFor(() => {
      const publishBtn = screen.getByRole('button', { name: /Publish/ });
      expect(publishBtn).toBeDisabled();
    });
  });

  it('enables Publish when all requirements met', async () => {
    getMock.mockResolvedValue({
      data: {
        id: 'i1',
        title: 'A nice jacket',
        description: 'cozy',
        category: { id: 3, name: 'Jackets' },
        brand: 'b',
        size: 'M',
        condition: 'GUC',
        colors: ['blue'],
        price: 2500,
        status: 'draft',
        images: [{ id: 1, url: 'u', thumb_url: 't', order_column: 1 }],
      },
    });
    publishMock.mockResolvedValue({ data: {} });
    render(wrap(<ItemForm storeId="s1" itemId="i1" />));
    await waitFor(() => expect(screen.getByDisplayValue('A nice jacket')).toBeInTheDocument());
    const publishBtn = screen.getByRole('button', { name: /Publish/ });
    expect(publishBtn).toBeEnabled();
    fireEvent.click(publishBtn);
    await waitFor(() => expect(publishMock).toHaveBeenCalledWith('s1', 'i1'));
  });
});