/* @vitest-environment jsdom */

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

import { PlatformActionButton } from './PlatformActionButton';

test('renders platform primary action button by default', () => {
  render(<PlatformActionButton>确认</PlatformActionButton>);

  const button = screen.getByRole('button', { name: '确认' });

  expect(button.className).toContain('platform-button');
  expect(button.className).toContain('platform-button--primary');
  expect(button.className).toContain('rounded-2xl');
  expect(button.className).toContain('disabled:cursor-not-allowed');
});

test('supports profile primary button surface', () => {
  render(
    <PlatformActionButton surface="profile" fullWidth size="md">
      兑换
    </PlatformActionButton>,
  );

  const button = screen.getByRole('button', { name: '兑换' });

  expect(button.className).toContain('platform-primary-button');
  expect(button.className).toContain('w-full');
  expect(button.className).toContain('py-3');
});

test('supports secondary and pill variants', () => {
  render(
    <PlatformActionButton tone="secondary" shape="pill" size="xs" align="start">
      重新加载
    </PlatformActionButton>,
  );

  const button = screen.getByRole('button', { name: '重新加载' });

  expect(button.className).toContain('platform-button--secondary');
  expect(button.className).toContain('rounded-full');
  expect(button.className).toContain('text-xs');
  expect(button.className).toContain('justify-start');
  expect(button.className).toContain('text-left');
});

test('supports label child chrome for file upload controls', () => {
  render(
    <PlatformActionButton asChild="label" tone="secondary" htmlFor="upload">
      上传
    </PlatformActionButton>,
  );

  const label = screen.getByText('上传');

  expect(label.tagName).toBe('LABEL');
  expect(label.getAttribute('for')).toBe('upload');
  expect(label.className).toContain('platform-button--secondary');
});

test('supports editor dark action surface', () => {
  render(
    <PlatformActionButton surface="editorDark" tone="warning" size="xxs">
      确认前往
    </PlatformActionButton>,
  );

  const button = screen.getByRole('button', { name: '确认前往' });

  expect(button.className).toContain('platform-action-button--editor-dark');
  expect(button.className).toContain('border-amber-300/30');
  expect(button.className).toContain('bg-amber-500/20');
  expect(button.className).toContain('text-[10px]');
});

test('supports accent action tone', () => {
  render(
    <PlatformActionButton surface="editorDark" tone="accent" size="lg" fullWidth>
      生成
    </PlatformActionButton>,
  );

  const button = screen.getByRole('button', { name: '生成' });

  expect(button.className).toContain('platform-action-button--accent');
  expect(button.className).toContain('bg-amber-200');
  expect(button.className).toContain('text-slate-950');
  expect(button.className).toContain('h-12');
  expect(button.className).toContain('w-full');
});

test('supports accent soft action tone', () => {
  render(
    <PlatformActionButton
      tone="accentSoft"
      className="[--platform-action-accent:var(--platform-work-like-accent,#c7653d)]"
    >
      点赞
    </PlatformActionButton>,
  );

  const button = screen.getByRole('button', { name: '点赞' });

  expect(button.className).toContain('platform-action-button--accent-soft');
  expect(button.className).toContain('[color:var(--platform-action-accent,#c7653d)]');
  expect(button.className).toContain(
    '[--platform-action-accent:var(--platform-work-like-accent,#c7653d)]',
  );
});