/**
 * @pulse-libs/core — Component Tests (clean suite)
 * @vitest-environment jsdom
 *
 * Acessa elementos exclusivamente via render().container.querySelector/querySelectorAll
 * para evitar conflitos com o accessibility tree vazio do jsdom.
 */
import { vi, beforeEach } from 'vitest';
import { render, fireEvent } from '@testing-library/react';
import {
  Button, Input, Alert, Card, CardHeader, CardTitle, CardBody,
} from '../src/components/index';

// ─ mocks globais ────────────────────────────────────────────────
beforeEach(() => {});
Object.defineProperty(global, 'matchMedia', {
  value: vi.fn().mockReturnValue({
    matches: false, media: '',
    addEventListener: vi.fn(), removeEventListener: vi.fn(),
  }),
  configurable: true,
});

// ═══════════════════════════════════════════════════════════════
//  Button
// ═══════════════════════════════════════════════════════════════
describe('Button', () => {
  it('renderiza <button> e está habilitado', () => {
    const b = render(<Button>Clique</Button>).container.querySelector('button')!;
    expect(b.textContent).toBe('Clique');
    expect(b.disabled).toBe(false);
  });

  it('é <button type="button"> por default', () => {
    expect(render(<Button />).container.querySelector('button')!.tagName.toLowerCase()).toBe('button');
  });

  it('variant primary → bg-indigo-600', () => {
    expect(render(<Button />).container.querySelector('button')!.classList.contains('bg-indigo-600')).toBe(true);
  });

  it('variant danger → bg-red-600', () => {
    expect(render(<Button variant="danger" />).container.querySelector('button')!.classList.contains('bg-red-600')).toBe(true);
  });

  it('variant secondary → border + bg-white', () => {
    const b = render(<Button variant="secondary" />).container.querySelector('button')!;
    expect(b.classList.contains('border')).toBe(true);
    expect(b.classList.contains('bg-white')).toBe(true);
  });

  it('variant ghost → text-gray-600 + hover sem bg', () => {
    const b = render(<Button variant="ghost" />).container.querySelector('button')!;
    expect(b.classList.contains('text-gray-600')).toBe(true);
    expect(b.classList.contains('hover:bg-gray-100')).toBe(true);
  });

  it('variant success → bg-emerald-600', () => {
    expect(render(<Button variant="success" />).container.querySelector('button')!.classList.contains('bg-emerald-600')).toBe(true);
  });

  it('size sm → px-2.5 py-1 text-xs', () => {
    const cls = render(<Button size="sm" />).container.querySelector('button')!.className;
    expect(cls).toContain('px-2.5');
    expect(cls).toContain('py-1');
    expect(cls).toContain('text-xs');
  });

  it('size md → px-4 py-2 text-sm', () => {
    const cls = render(<Button />).container.querySelector('button')!.className;
    expect(cls).toContain('px-4');
    expect(cls).toContain('py-2');
    expect(cls).toContain('text-sm');
  });

  it('size lg → px-6 py-3 text-base', () => {
    const cls = render(<Button size="lg" />).container.querySelector('button')!.className;
    expect(cls).toContain('px-6');
    expect(cls).toContain('py-3');
    expect(cls).toContain('text-base');
  });

  it('disabled → HTMLButtonElement.disabled = true', () => {
    expect(render(<Button disabled />).container.querySelector('button')!.disabled).toBe(true);
  });

  it('loading → disabled + SVG spinner', () => {
    const { container } = render(<Button loading />);
    const b = container.querySelector('button')!;
    expect(b.disabled).toBe(true);
    expect(container.querySelector('svg.animate-spin')).toBeTruthy();
  });

  it('leftIcon renderizado', () => {
    const { container } = render(<Button leftIcon={<span data-testid="li">←</span>} />);
    expect(container.querySelector('#li') || container.querySelector('[data-testid="li"]')).toBeTruthy();
  });

  it('rightIcon ausente durante loading', () => {
    const ri = render(
      <Button loading rightIcon={<span data-testid="ri">→</span>} />
    ).container.querySelector('[data-testid="ri"]');
    expect(ri).toBeNull();
  });

  it('rightIcon visível quando loading=false', () => {
    const ri = render(
      <Button rightIcon={<span data-testid="ri">→</span>} onClick={() => {}} />
    ).container.querySelector('[data-testid="ri"]');
    expect(ri).toBeTruthy();
  });

  it('chama onClick ao clicar', () => {
    const fn = vi.fn();
    render(<Button onClick={fn}>Click</Button>);
    fireEvent.click(render(<Button onClick={fn}>Click</Button>).container.querySelector('button')!);
    expect(fn).toHaveBeenCalledTimes(1);
  });

  it('NÃO chama onClick quando disabled', () => {
    const fn = vi.fn();
    const b = render(<Button disabled onClick={fn} />).container.querySelector('button')!;
    fireEvent.click(b); // <-- chama diretamente no botão
    expect(fn).not.toHaveBeenCalled();
  });

  it('NÃO chama onClick quando loading', () => {
    const fn = vi.fn();
    const b = render(<Button loading onClick={fn} />).container.querySelector('button')!;
    fireEvent.click(b);
    expect(fn).not.toHaveBeenCalled();
  });

  it('mescla className custom', () => {
    expect(
      render(<Button className="min-w-[200px]" />).container.querySelector('button')!.classList.contains('min-w-[200px]')
    ).toBe(true);
  });

  it('propaga aria-label e data-*', () => {
    const b = render(<Button aria-label="Salvar" data-action="salvar" />).container.querySelector('button')!;
    expect(b.getAttribute('aria-label')).toBe('Salvar');
    expect(b.getAttribute('data-action')).toBe('salvar');
  });
});

// ═══════════════════════════════════════════════════════════════
//  Input
// ═══════════════════════════════════════════════════════════════
describe('Input', () => {
  it('renderiza <input> quando placeholder dado', () => {
    expect(render(<Input placeholder="x" />).container.querySelector('input')).toBeTruthy();
  });

  it('renderiza <label> quando label é fornecido', () => {
    const c = render(<Input label="Nome" />).container;
    expect(c.querySelector('label')).toBeTruthy();
    expect(c.textContent).toContain('Nome');
  });

  it('label conectado ao input via htmlFor = id gerado do label', () => {
    const c = render(<Input label="Senha" />).container;
    const lbl = c.querySelector('label') as HTMLLabelElement;
    const inp = c.querySelector('input') as HTMLInputElement;
    expect(inp.id).toBe(lbl.htmlFor);
  });

  it('renderiza hint quando fornecido sem erro', () => {
    expect(render(<Input hint="dica" />).container.textContent).toContain('dica');
  });

  it('erro SHOW, hint HIDE quando ambos fornecidos', () => {
    const c = render(<Input error="err" hint="dica" />).container;
    expect(c.textContent).toContain('err');
    const spans = c.querySelectorAll('span');
    const temDica = Array.from(spans).some((s) => s.textContent === 'dica');
    expect(temDica).toBe(false);
  });

  it('span vazio quando nenhum hint nem erro', () => {
    expect(render(<Input />).container.querySelectorAll('span').length).toBe(0);
  });

  it('id explícito não é sobrescrito pelo label', () => {
    const inp = render(<Input id="custom" label="X" />).container.querySelector('input') as HTMLInputElement;
    expect(inp.id).toBe('custom');
  });

  it('type atributo passado para <input>', () => {
    expect(render(<Input type="tel" />).container.querySelector('input')!.getAttribute('type')).toBe('tel');
  });

  it('aciona onChange', () => {
    const fn = vi.fn();
    const inp = render(<Input onChange={fn} />).container.querySelector('input')!;
    Object.defineProperty(inp, 'value', { writable: true, value: 'abc' }); // <-- jsdom não altera value naturalmente
    fireEvent.change(inp);
    expect(fn).toHaveBeenCalledTimes(1);
  });

  it('aciona onFocus e onBlur', () => {
    const fFn = vi.fn(), bFn = vi.fn();
    const inp = render(<Input onFocus={fFn} onBlur={bFn} />).container.querySelector('input')!;
    fireEvent.focus(inp);
    fireEvent.blur(inp);
    expect(fFn).toHaveBeenCalledTimes(1);
    expect(bFn).toHaveBeenCalledTimes(1);
  });

  it('mescla className custom', () => {
    expect(
      render(<Input className="text-xs" />).container.querySelector('input')!.classList.contains('text-xs')
    ).toBe(true);
  });

  it('erro aplica border-red-500 + focus:ring-red-500', () => {
    const inp = render(<Input error="x" />).container.querySelector('input')!;
    expect(inp.classList.contains('border-red-500')).toBe(true);
    expect(inp.classList.contains('focus:ring-red-500')).toBe(true);
  });
});

// ═══════════════════════════════════════════════════════════════
//  Alert
// ═══════════════════════════════════════════════════════════════
describe('Alert', () => {
  it('renderiza children no DOM', () => {
    expect(render(<Alert>Msg</Alert>).container.textContent).toContain('Msg');
  });

  it('renderiza titulo + children', () => {
    const c = render(<Alert title="T">B</Alert>).container;
    expect(c.textContent).toContain('T');
    expect(c.textContent).toContain('B');
  });

  function alertDiv(): HTMLElement {
    return render(<Alert />).container.firstChild as HTMLElement;
  }

  it('variant info (default) → bg-blue-50 border-blue-200 text-blue-800', () => {
    const cls = alertDiv().className;
    expect(cls).toContain('bg-blue-50');
    expect(cls).toContain('border-blue-200');
    expect(cls).toContain('text-blue-800');
  });

  it('variant success → verde', () => {
    const cls = render(<Alert variant="success" />).container.firstChild!.className;
    expect(cls).toContain('bg-emerald-50');
    expect(cls).toContain('border-emerald-200');
  });

  it('variant warning → amarelo', () => {
    expect(render(<Alert variant="warning" />).container.firstChild!.className).toContain('bg-amber-50');
  });

  it('variant error → vermelho', () => {
    expect(render(<Alert variant="error" />).container.firstChild!.className).toContain('bg-red-50');
  });

  it('botão × aparece quando onClose fornecido', () => {
    // O botão close é um <button> filho direto do alert
    const btns = render(<Alert onClose={() => {}} />).container.querySelectorAll('button');
    expect(btns.length).toBeGreaterThan(0);
  });

  it('chama onClose ao clicar o botão ×', () => {
    const fn = vi.fn();
    const btns = render(<Alert onClose={fn} />).container.querySelectorAll('button');
    fireEvent.click(btns[0]);
    expect(fn).toHaveBeenCalledTimes(1);
  });

  it('NÃO mostra botão × quando onClose ausente', () => {
    expect(render(<Alert />).container.querySelectorAll('button').length).toBe(0);
  });

  it('emoji de variante aparece no DOM', () => {
    expect(render(<Alert variant="error" />).container.textContent).toContain('❌');
    expect(render(<Alert variant="success" />).container.textContent).toContain('✅');
    expect(render(<Alert variant="warning" />).container.textContent).toContain('⚠️');
    expect(render(<Alert variant="info" />).container.textContent).toContain('ℹ️');
  });
});

// ═══════════════════════════════════════════════════════════════
//  Card
// ═══════════════════════════════════════════════════════════════
describe('Card', () => {
  it('renderiza div.rounde-xl', () => {
    const el = render(<Card>X</Card>).container.firstChild as HTMLElement;
    expect(el.classList.contains('rounded-xl')).toBe(true);
    expect(el.textContent).toContain('X');
  });

  it('classes base completas', () => {
    const cls = render(<Card />).container.firstChild!.className;
    ['rounded-xl', 'border', 'border-gray-200', 'bg-white', 'shadow-sm'].forEach((c) => {
      expect(cls).toContain(c);
    });
  });

  it('mescla className custom', () => {
    expect(
      render(<Card className="mc" />).container.firstChild!.className
    ).toContain('mc');
  });

  it('aceita id + onClick', () => {
    const fn = vi.fn();
    const el = render(<Card id="c1" onClick={fn}>C</Card>).container.querySelector('#c1')!;
    expect(el).toBeTruthy();
    fireEvent.click(el);
    expect(fn).toHaveBeenCalled();
  });

  it('aninhamento sem perda', () => {
    const c = render(
      <Card>
        <CardHeader><CardTitle>T</CardTitle></CardHeader>
        <CardBody>B</CardBody>
      </Card>
    ).container;
    expect(c.textContent).toContain('T');
    expect(c.textContent).toContain('B');
  });
});

describe('CardHeader', () => {
  it('estilos px-5 py-4 border-b border-gray-100', () => {
    const cls = render(<CardHeader>H</CardHeader>).container.firstChild!.className;
    ['px-5', 'py-4', 'border-b', 'border-gray-100'].forEach((c) => {
      expect(cls).toContain(c);
    });
  });
});

describe('CardTitle', () => {
  it('renderiza como <h3>', () => {
    expect(render(<CardTitle>T</CardTitle>).container.querySelector('h3')).toBeTruthy();
  });

  it('texto igual ao passado', () => {
    expect(render(<CardTitle>Título</CardTitle>).container.querySelector('h3')!.textContent).toBe('Título');
  });

  it('estilos do título', () => {
    const cls = render(<CardTitle>T</CardTitle>).container.querySelector('h3')!.className;
    expect(cls).toContain('font-semibold');
    expect(cls).toContain('text-gray-900');
    expect(cls).toContain('text-base');
  });
});

describe('CardBody', () => {
  it('renderiza children', () => {
    expect(render(<CardBody>B</CardBody>).container.textContent).toContain('B');
  });

  it('estilos px-5 py-4', () => {
    const cls = render(<CardBody>B</CardBody>).container.querySelector('div')!.className;
    expect(cls).toContain('px-5');
    expect(cls).toContain('py-4');
  });

  it('mescla className custom', () => {
    expect(
      render(<CardBody className="bs" />).container.querySelector('div')!.className
    ).toContain('bs');
  });
});

describe('Card — stress composição', () => {
  it('Header + Title + Body na mesma árvore', () => {
    const c = render(
      <Card>
        <CardHeader><CardTitle>Título</CardTitle></CardHeader>
        <CardBody>Corpo</CardBody>
      </Card>
    ).container;
    expect(c.querySelector('.shadow-sm')).toBeTruthy();
    expect(c.textContent).toContain('Título');
    expect(c.textContent).toContain('Corpo');
  });

  it('100 linhas estrutura se mantém', () => {
    const lines = Array.from({ length: 100 }, (_, i) => `linha ${i + 1}`).join('\n');
    const c = render(
      <Card>
        <CardBody style={{ overflow: 'auto' }}>{lines}</CardBody>
      </Card>
    ).container;
    expect(c.querySelector('.shadow-sm')).toBeTruthy();
    expect(c.querySelector('.border')).toBeTruthy();
    expect(c.textContent).toContain('linha 1');
    expect(c.textContent).toContain('linha 100');
  });
});