import { render, screen, fireEvent } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { vi, describe, it, expect, beforeEach } from 'vitest';
import { ReportReviewButton } from '../report-review-button';
import { useAuthStore } from '@/stores/auth';

vi.mock('@/lib/api', () => ({
  api: {
    reviewReports: {
      report: vi.fn(),
    },
  },
}));

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

function setUser(user: { id: string } | null) {
  useAuthStore.setState({
    user: user
      ? ({
          id: user.id,
          email: 'a@b.com',
          name: 'Tester',
          avatar: null,
          roles: [],
          store_id: null,
          created_at: '2026-01-01T00:00:00Z',
        } as unknown as ReturnType<typeof useAuthStore.getState>['user'])
      : null,
    isLoading: false,
  });
}

describe('ReportReviewButton', () => {
  beforeEach(() => {
    setUser({ id: 'viewer-1' });
  });

  it('renders the Report button for a logged-in viewer on a visible review', () => {
    render(wrap(<ReportReviewButton reviewId="rev-1" reviewState="visible" />));
    expect(
      screen.getByRole('button', { name: /Report/i }),
    ).toBeInTheDocument();
  });

  it('renders nothing when the viewer is logged out', () => {
    setUser(null);
    const { container } = render(
      wrap(<ReportReviewButton reviewId="rev-1" reviewState="visible" />),
    );
    expect(container.firstChild).toBeNull();
  });

  it('renders nothing when the review state is hidden', () => {
    const { container } = render(
      wrap(<ReportReviewButton reviewId="rev-1" reviewState="hidden" />),
    );
    expect(container.firstChild).toBeNull();
  });

  it("renders nothing when viewer is the review's author", () => {
    const { container } = render(
      wrap(
        <ReportReviewButton
          reviewId="rev-1"
          reviewState="visible"
          reviewerUserId="viewer-1"
        />,
      ),
    );
    expect(container.firstChild).toBeNull();
  });

  it('opens the report dialog when clicked', () => {
    render(wrap(<ReportReviewButton reviewId="rev-1" reviewState="visible" />));
    fireEvent.click(screen.getByRole('button', { name: /Report/i }));
    expect(
      screen.getByRole('dialog', { name: /Report this review/i }),
    ).toBeInTheDocument();
  });
});