/**
 * @ai-summary Tests for CommunityStationCard component
 */

import { render, screen, fireEvent } from '@testing-library/react';
import { CommunityStationCard } from '../../components/CommunityStationCard';
import { CommunityStation } from '../../types/community-stations.types';

describe('CommunityStationCard', () => {
  const mockStation: CommunityStation = {
    id: '1',
    submittedBy: 'user@example.com',
    name: 'Shell Downtown',
    address: '123 Main St',
    city: 'Denver',
    state: 'CO',
    zipCode: '80202',
    latitude: 39.7392,
    longitude: -104.9903,
    brand: 'Shell',
    has93Octane: true,
    has93OctaneEthanolFree: false,
    price93: 3.599,
    notes: 'Good quality fuel',
    status: 'approved',
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  };

  it('should render station details', () => {
    render(<CommunityStationCard station={mockStation} />);

    expect(screen.getByText('Shell Downtown')).toBeInTheDocument();
    expect(screen.getByText('123 Main St')).toBeInTheDocument();
    expect(screen.getByText(/Denver, CO, 80202/)).toBeInTheDocument();
    expect(screen.getByText('Brand: Shell')).toBeInTheDocument();
  });

  it('should display 93 octane status', () => {
    render(<CommunityStationCard station={mockStation} />);

    expect(screen.getByText('93 Octane · w/ Ethanol')).toBeInTheDocument();
  });

  it('should display price when available', () => {
    render(<CommunityStationCard station={mockStation} />);

    expect(screen.getByText('$3.599/gal')).toBeInTheDocument();
  });

  it('should display status badge', () => {
    render(<CommunityStationCard station={mockStation} />);

    expect(screen.getByText('approved')).toBeInTheDocument();
  });

  it('should show withdraw button for user view', () => {
    render(
      <CommunityStationCard
        station={mockStation}
        isAdmin={false}
        onWithdraw={jest.fn()}
      />
    );

    expect(screen.getByRole('button')).toBeInTheDocument();
  });

  it('should show approve and reject buttons for admin', () => {
    const pendingStation = { ...mockStation, status: 'pending' as const };
    render(
      <CommunityStationCard
        station={pendingStation}
        isAdmin={true}
        onApprove={jest.fn()}
        onReject={jest.fn()}
      />
    );

    const buttons = screen.getAllByRole('button');
    expect(buttons.length).toBeGreaterThan(0);
  });

  it('should call onWithdraw when withdraw button is clicked', () => {
    const onWithdraw = jest.fn();
    render(
      <CommunityStationCard
        station={mockStation}
        isAdmin={false}
        onWithdraw={onWithdraw}
      />
    );

    const withdrawButton = screen.getByRole('button');
    fireEvent.click(withdrawButton);

    expect(onWithdraw).toHaveBeenCalledWith(mockStation.id);
  });

  it('should handle rejection with reason', async () => {
    const onReject = jest.fn();
    const pendingStation = { ...mockStation, status: 'pending' as const };

    render(
      <CommunityStationCard
        station={pendingStation}
        isAdmin={true}
        onReject={onReject}
      />
    );

    // This test would need more interaction handling
    // for the dialog that appears on reject
  });

  it('should work on mobile viewport', () => {
    render(<CommunityStationCard station={mockStation} />);

    expect(screen.getByText('Shell Downtown')).toBeInTheDocument();
    // Verify touch targets are at least 44px
    const buttons = screen.getAllByRole('button');
    buttons.forEach((button) => {
      expect(button).toHaveStyle({ minHeight: '44px', minWidth: '44px' });
    });
  });
});
