import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { ReviewCard } from '../review-card';
import type { Review } from '@alqove/api-client';

const baseReview: Review = {
  id: 'rev-1',
  order_item_id: 'oi-1',
  order_id: 'ord-1',
  store_id: 's-1',
  reviewer_user_id: 'u-1',
  rating: 5,
  rating_item_as_described: 5,
  rating_shipping_speed: 5,
  rating_communication: 5,
  rating_packaging: 5,
  title: 'Loved it',
  body: 'A wonderful purchase that I would happily recommend.',
  state: 'visible',
  edited_at: null,
  hidden_by_admin_id: null,
  hidden_at: null,
  hide_reason: null,
  is_editable: true,
  photos: [],
  created_at: '2026-05-01T10:00:00Z',
  updated_at: '2026-05-01T10:00:00Z',
};

describe('ReviewCard reportStatus pill', () => {
  it('renders no pill when reportStatus is absent or count=0', () => {
    // No prop at all (public + buyer surfaces) — never renders the pill.
    const { rerender } = render(
      <ReviewCard review={baseReview} buyerName="Buyer" />,
    );
    expect(screen.queryByTestId('review-report-pill')).not.toBeInTheDocument();

    // Seller surface with a zero-count rollup — still no pill.
    rerender(
      <ReviewCard
        review={baseReview}
        buyerName="Buyer"
        reportStatus={{ count: 0, latest_outcome: null, latest_state: null }}
      />,
    );
    expect(screen.queryByTestId('review-report-pill')).not.toBeInTheDocument();
  });

  it('renders grey "Reported, under review" pill when state=open', () => {
    render(
      <ReviewCard
        review={baseReview}
        buyerName="Buyer"
        reportStatus={{ count: 1, latest_outcome: null, latest_state: 'open' }}
      />,
    );
    const pill = screen.getByTestId('review-report-pill');
    expect(pill).toBeInTheDocument();
    expect(pill).toHaveTextContent(/Reported, under review/i);
    expect(pill).toHaveAttribute('data-state', 'open');
    expect(pill.className).toMatch(/bg-slate-100/);
    expect(pill.className).toMatch(/text-slate-600/);
  });

  it('renders amber "Reported, kept" pill when state=resolved + outcome=keep', () => {
    render(
      <ReviewCard
        review={baseReview}
        buyerName="Buyer"
        reportStatus={{ count: 2, latest_outcome: 'keep', latest_state: 'resolved' }}
      />,
    );
    const pill = screen.getByTestId('review-report-pill');
    expect(pill).toBeInTheDocument();
    expect(pill).toHaveTextContent(/Reported, kept/i);
    expect(pill).toHaveAttribute('data-outcome', 'keep');
    expect(pill.className).toMatch(/bg-amber-100/);
    expect(pill.className).toMatch(/text-amber-800/);
  });

  it('renders red "Reported, hidden" pill when state=resolved + outcome=hide', () => {
    render(
      <ReviewCard
        review={baseReview}
        buyerName="Buyer"
        reportStatus={{ count: 3, latest_outcome: 'hide', latest_state: 'resolved' }}
      />,
    );
    const pill = screen.getByTestId('review-report-pill');
    expect(pill).toBeInTheDocument();
    expect(pill).toHaveTextContent(/Reported, hidden/i);
    expect(pill).toHaveAttribute('data-outcome', 'hide');
    expect(pill.className).toMatch(/bg-red-100/);
    expect(pill.className).toMatch(/text-red-700/);
  });
});