import { render, screen } from '@testing-library/react';
import * as React from 'react';
import { describe, expect, it, vi } from 'vitest';
import { ParkCard } from '../park-card';

vi.mock('@/i18n/navigation', () => ({
  Link: ({
    children,
    href,
    ...rest
  }: React.PropsWithChildren<{ href: string } & Record<string, unknown>>) => (
    <a href={href} {...rest}>
      {children}
    </a>
  ),
}));

const basePark = {
  id: 'p1',
  name: 'KCN Tân Thuận',
  nameEn: 'Tan Thuan IP',
  slug: 'kcn-tan-thuan',
  developer: 'IPC Corp',
  status: 'OPERATIONAL' as const,
  province: 'TP.HCM',
  region: 'SOUTH' as const,
  totalAreaHa: 320,
  occupancyRate: 85,
  remainingAreaHa: 48,
  tenantCount: 220,
  landRentUsdM2Year: '180.5',
  rbfRentUsdM2Month: '5.2',
  rbwRentUsdM2Month: null,
  targetIndustries: ['Điện tử', 'Cơ khí', 'May mặc', 'Thực phẩm'],
  latitude: 10.7,
  longitude: 106.7,
};

describe('ParkCard', () => {
  it('renders park name, English name, developer and location', () => {
    render(<ParkCard park={basePark} />);
    expect(screen.getByText('KCN Tân Thuận')).toBeInTheDocument();
    expect(screen.getByText('Tan Thuan IP')).toBeInTheDocument();
    expect(screen.getByText('IPC Corp')).toBeInTheDocument();
    expect(screen.getByText(/TP\.HCM/)).toBeInTheDocument();
  });

  it('links to park detail page by slug', () => {
    const { container } = render(<ParkCard park={basePark} />);
    const link = container.querySelector('a');
    expect(link?.getAttribute('href')).toBe('/khu-cong-nghiep/kcn-tan-thuan');
  });

  it('renders status label from PARK_STATUS_LABELS', () => {
    render(<ParkCard park={basePark} />);
    expect(screen.getByText('Đang hoạt động')).toBeInTheDocument();
  });

  it('applies amber occupancy color for 70–89%', () => {
    render(<ParkCard park={basePark} />);
    const pct = screen.getByText('85%');
    expect(pct.className).toContain('text-amber-600');
  });

  it('applies red occupancy color for >= 90%', () => {
    render(<ParkCard park={{ ...basePark, occupancyRate: 95 }} />);
    const pct = screen.getByText('95%');
    expect(pct.className).toContain('text-red-600');
  });

  it('renders rent info when landRentUsdM2Year present', () => {
    render(<ParkCard park={basePark} />);
    expect(screen.getByText(/\$180\.5\/m²\/năm/)).toBeInTheDocument();
    expect(screen.getByText(/\$5\.2\/m²\/th/)).toBeInTheDocument();
  });

  it('limits visible industry badges to 3 and shows +N overflow', () => {
    render(<ParkCard park={basePark} />);
    expect(screen.getByText('Điện tử')).toBeInTheDocument();
    expect(screen.getByText('Cơ khí')).toBeInTheDocument();
    expect(screen.getByText('May mặc')).toBeInTheDocument();
    expect(screen.queryByText('Thực phẩm')).toBeNull();
    expect(screen.getByText('+1')).toBeInTheDocument();
  });
});