import React from 'react';
import { render, screen } from '@testing-library/react-native';
import { RunnerRow } from '../RunnerRow';

const mockRunner = {
  id: 'runner-1',
  number: 3,
  name: 'Fast Galloper',
  rider: 'J. McDonald',
  trainer: 'C. Waller',
  weight: 58,
  barrier: 5,
  form: '1-2-1-3',
  win_probability: 32.5,
  place_probability: 68.7,
  badges: ['Favourite', 'Top Weight'],
};

const mockRunnerNoRider = {
  id: 'runner-2',
  number: 7,
  name: 'Speedy Dog',
  rider: '',
  trainer: 'K. Smith',
  weight: undefined,
  barrier: 2,
  form: '2-1-3-2',
  win_probability: 18.0,
  place_probability: 45.2,
  badges: [],
};

describe('RunnerRow', () => {
  it('renders the runner name', () => {
    render(<RunnerRow runner={mockRunner} />);
    expect(screen.getByText('Fast Galloper')).toBeTruthy();
  });

  it('renders the runner number', () => {
    render(<RunnerRow runner={mockRunner} />);
    expect(screen.getByText('3')).toBeTruthy();
  });

  it('renders rider and trainer information when showDetails is true', () => {
    render(<RunnerRow runner={mockRunner} showDetails={true} />);
    expect(screen.getByText(/J\. McDonald/)).toBeTruthy();
    expect(screen.getByText(/C\. Waller/)).toBeTruthy();
  });

  it('does not render rider/trainer when showDetails is false', () => {
    render(<RunnerRow runner={mockRunner} showDetails={false} />);
    expect(screen.queryByText(/J\. McDonald/)).toBeNull();
    expect(screen.queryByText(/C\. Waller/)).toBeNull();
  });

  it('renders win probability with one decimal place', () => {
    render(<RunnerRow runner={mockRunner} />);
    // win_probability 32.5 -> toFixed(1) = "32.5"
    expect(screen.getByText('32.5%')).toBeTruthy();
  });

  it('renders place probability with one decimal place', () => {
    render(<RunnerRow runner={mockRunner} />);
    // place_probability 68.7 -> toFixed(1) = "68.7"
    expect(screen.getByText('68.7%')).toBeTruthy();
  });

  it('renders badges', () => {
    render(<RunnerRow runner={mockRunner} />);
    expect(screen.getByText('Favourite')).toBeTruthy();
    expect(screen.getByText('Top Weight')).toBeTruthy();
  });

  it('handles runner with no rider and no badges', () => {
    render(<RunnerRow runner={mockRunnerNoRider} />);
    expect(screen.getByText('Speedy Dog')).toBeTruthy();
    expect(screen.getByText('7')).toBeTruthy();
    // Should only show trainer since no rider
    expect(screen.getByText(/K\. Smith/)).toBeTruthy();
  });

  it('renders rider without redundant bullet when trainer is empty', () => {
    const runnerWithoutTrainer = {
      ...mockRunner,
      rider: 'J. McDonald',
      trainer: '',
    };
    render(<RunnerRow runner={runnerWithoutTrainer} />);
    expect(screen.getByText(/J\. McDonald/)).toBeTruthy();
  });

  it('renders win probability rounded to 1 decimal place', () => {
    const lowProbRunner = { ...mockRunner, win_probability: 5.7 };
    render(<RunnerRow runner={lowProbRunner} />);
    expect(screen.getByText('5.7%')).toBeTruthy();
  });

  it('renders "0.0%" for both win and place when probability is zero', () => {
    const zeroProbRunner = { ...mockRunner, win_probability: 0, place_probability: 0 };
    render(<RunnerRow runner={zeroProbRunner} />);
    const zeroPercentages = screen.getAllByText('0.0%');
    expect(zeroPercentages.length).toBe(2); // one for Win, one for Place
  });

  // ── New: Form dots ──────────────────────────────────────────────

  it('renders form trend dots for valid form string', () => {
    render(<RunnerRow runner={mockRunner} />);
    // Form "1-2-1-3" should show 4 dots and the form text
    expect(screen.getByText('(1-2-1-3)')).toBeTruthy();
    expect(screen.getByText(/Form:/)).toBeTruthy();
  });

  it('renders form text with the original form string', () => {
    const runner = { ...mockRunner, form: '1-2-3-5' };
    render(<RunnerRow runner={runner} />);
    expect(screen.getByText('(1-2-3-5)')).toBeTruthy();
  });

  it('does not render form dots for empty form string', () => {
    const runner = { ...mockRunner, form: '' };
    render(<RunnerRow runner={runner} />);
    expect(screen.queryByText(/Form:/)).toBeNull();
  });

  // ── New: Barrier indicator ──────────────────────────────────────

  it('shows "Good" barrier indicator for barrier 1-3', () => {
    const runner = { ...mockRunner, barrier: 2 };
    render(<RunnerRow runner={runner} />);
    expect(screen.getByText(/Good/)).toBeTruthy();
    expect(screen.getByText(/\(2\)/)).toBeTruthy();
  });

  it('shows "Neutral" barrier indicator for barrier 4-6', () => {
    const runner = { ...mockRunner, barrier: 5 };
    render(<RunnerRow runner={runner} />);
    expect(screen.getByText(/Neutral/)).toBeTruthy();
    expect(screen.getByText(/\(5\)/)).toBeTruthy();
  });

  it('shows "Wide" barrier indicator for barrier 7+', () => {
    const runner = { ...mockRunner, barrier: 8 };
    render(<RunnerRow runner={runner} />);
    expect(screen.getByText(/Wide/)).toBeTruthy();
    expect(screen.getByText(/\(8\)/)).toBeTruthy();
  });

  // ── New: Win/Place labels ───────────────────────────────────────

  it('renders "Win" and "Place" labels next to probability bars', () => {
    render(<RunnerRow runner={mockRunner} />);
    expect(screen.getByText('Win')).toBeTruthy();
    expect(screen.getByText('Place')).toBeTruthy();
  });

  it('renders barrier info label', () => {
    render(<RunnerRow runner={mockRunner} />);
    expect(screen.getByText(/Barrier:/)).toBeTruthy();
  });
});