/* @vitest-environment jsdom */

import { render, screen } from '@testing-library/react';
import { expect, test } from 'vitest';

import { PlatformInfoBlock } from './PlatformInfoBlock';

test('renders platform info block label and value chrome', () => {
  render(<PlatformInfoBlock label="来源">拼图草稿</PlatformInfoBlock>);

  const label = screen.getByText('来源');
  const value = screen.getByText('拼图草稿');
  const block = label.closest('div')?.parentElement;

  expect(block?.className).toContain('bg-white/72');
  expect(block?.className).toContain('rounded-[1rem]');
  expect(value.className).toContain('font-semibold');
  expect(value.className).toContain('leading-5');
});

test('supports multiline value layout and class overrides', () => {
  render(
    <PlatformInfoBlock
      label="错误"
      multiline
      className="custom-block"
      labelClassName="custom-label"
      valueClassName="custom-value"
    >
      第一行{'\n'}第二行
    </PlatformInfoBlock>,
  );

  const value = screen.getByText(/第一行/u);
  const block = value.closest('div')?.parentElement;

  expect(block?.className).toContain('custom-block');
  expect(screen.getByText('错误').className).toContain('custom-label');
  expect(value.className).toContain('whitespace-pre-wrap');
  expect(value.className).toContain('leading-6');
  expect(value.className).toContain('custom-value');
});

test('supports plain multiline value without a visible label', () => {
  render(
    <PlatformInfoBlock multiline className="rounded-[1.25rem]">
      分享正文
    </PlatformInfoBlock>,
  );

  const value = screen.getByText('分享正文');
  const block = value.closest('div')?.parentElement;

  expect(block?.className).toContain('bg-white/72');
  expect(block?.className).toContain('rounded-[1.25rem]');
  expect(value.className.split(/\s+/u)).not.toContain('mt-1');
  expect(value.className).toContain('whitespace-pre-wrap');
});

test('supports compact row variant for dense preview metadata', () => {
  render(
    <PlatformInfoBlock label="场景" variant="compactRow">
      霓虹公园擂台
    </PlatformInfoBlock>,
  );

  const label = screen.getByText('场景');
  const value = screen.getByText('霓虹公园擂台');
  const block = label.closest('div')?.parentElement;

  expect(block?.className).toContain('bg-white/74');
  expect(block?.className).toContain('rounded-[0.85rem]');
  expect(block?.className).toContain('sm:px-3');
  expect(label.className).toContain('text-[var(--platform-text-muted)]');
  expect(value.className).toContain('text-right');
  expect(value.className).toContain('font-black');
  expect(value.className.split(/\s+/u)).not.toContain('mt-1');
});