import { render, screen, waitFor } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { vi, describe, it, expect } from 'vitest';
import type { OrderDetail } from '@alqove/api-client';
import { ShippingPanel } from '../shipping-panel';

vi.mock('@/lib/api', () => ({
  api: {
    stores: {
      parcelPresets: {
        list: vi.fn().mockResolvedValue({
          data: [{
            id: 'p1',
            name: 'Small box',
            is_default: true,
            weight_oz: 8,
            length_in: 6,
            width_in: 4,
            height_in: 2,
          }],
        }),
      },
    },
    orders: {
      previewLabel: vi.fn().mockResolvedValue({
        data: [{
          id: 'r1',
          carrier: 'USPS',
          service: 'Priority',
          amount_cents: 899,
          estimated_days: 3,
        }],
      }),
      buyLabel: vi.fn(),
    },
  },
}));

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

const base: OrderDetail = {
  id: 'o1',
  store: { id: 's1', name: 'S' },
  subtotal: 2000,
  shipping_cost: 500,
  status: 'pending',
  items: [{
    id: 'i1',
    item_id: 'x',
    title_snapshot: 't',
    price_snapshot: 2000,
    image_url_snapshot: null,
  }],
  created_at: '2026-04-22T00:00:00Z',
};

describe('ShippingPanel', () => {
  it('shows tracking + re-print when shipped', () => {
    const order: OrderDetail = {
      ...base,
      status: 'shipped',
      carrier: 'USPS',
      service: 'Priority',
      tracking_number: '9400...',
      tracking_url: 'http://x',
      shipping_label_url: 'http://pdf',
    };
    render(wrap(<ShippingPanel storeId="s1" order={order} />));
    expect(screen.getByText(/Shipped via USPS Priority/)).toBeInTheDocument();
    expect(screen.getByText(/Re-print label/)).toBeInTheDocument();
  });

  it('renders preset + rate + Buy label for pending orders', async () => {
    render(wrap(<ShippingPanel storeId="s1" order={base} />));
    await waitFor(() =>
      expect(screen.getByText(/USPS Priority — \$8\.99/)).toBeInTheDocument(),
    );
    expect(screen.getByRole('button', { name: /Buy label/ })).toBeInTheDocument();
  });

  it('shows a cancelled state message', () => {
    const order: OrderDetail = { ...base, status: 'cancelled' };
    render(wrap(<ShippingPanel storeId="s1" order={order} />));
    expect(screen.getByText(/cancelled — no label required/)).toBeInTheDocument();
  });
});