import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { describe, expect, it, vi } from 'vitest';

import { ChevronDown } from '../../icons/glyphs/chevron-down';
import { MagnifyingGlass } from '../../icons/glyphs/magnifying-glass';
import { Button } from '../button';
import { Field } from '../field';
import { Icon } from '../icon';
import { InputGroup } from '../input-group';
import { Combobox } from './combobox';

function FloatingCombobox(props?: { onValueChange?: (value: string | null) => void; anchor?: HTMLElement }) {
  return (
    <Combobox.Root onValueChange={props?.onValueChange}>
      <InputGroup.Root data-testid='fruit-group'>
        <Combobox.Input
          aria-label='Fruit'
          placeholder='Search fruit'
        />
        <InputGroup.End>
          <Combobox.Trigger
            aria-label='Toggle fruit options'
            render={<Button />}
          >
            <Icon
              glyph={ChevronDown}
              size='sm'
            />
          </Combobox.Trigger>
        </InputGroup.End>
      </InputGroup.Root>
      <Combobox.Popup anchor={props?.anchor}>
        <Combobox.Option
          value='apple'
          label='Apple'
        >
          Apple
          <Combobox.OptionIndicator data-testid='apple-check' />
        </Combobox.Option>
        <Combobox.Option
          value='banana'
          label='Banana'
        >
          Banana
          <Combobox.OptionIndicator data-testid='banana-check' />
        </Combobox.Option>
      </Combobox.Popup>
    </Combobox.Root>
  );
}

describe('Mosaic Combobox', () => {
  it.each([undefined, 'ghost', 'default'] as const)('supports the %s variant outside a group', variant => {
    render(
      <Combobox.Root>
        <Combobox.Input
          aria-label='Fruit'
          variant={variant}
        />
      </Combobox.Root>,
    );
    expect(screen.getByRole('combobox')).toHaveAttribute('data-variant', variant ?? 'default');
  });

  it('respects an explicit default variant inside a group', () => {
    render(
      <Combobox.Root>
        <InputGroup.Root>
          <Combobox.Input
            aria-label='Fruit'
            variant='default'
          />
        </InputGroup.Root>
      </Combobox.Root>,
    );
    expect(screen.getByRole('combobox')).toHaveAttribute('data-variant', 'default');
  });

  it('removes the check and selection when the input is cleared', async () => {
    const user = userEvent.setup();
    const onValueChange = vi.fn();
    render(<FloatingCombobox onValueChange={onValueChange} />);
    await user.click(screen.getByRole('button', { name: 'Toggle fruit options' }));
    await user.click(screen.getByRole('option', { name: 'Apple' }));
    await user.clear(screen.getByRole('combobox'));
    expect(onValueChange).toHaveBeenLastCalledWith(null);
    expect(screen.queryByTestId('apple-check')).not.toBeInTheDocument();
    expect(screen.getByRole('option', { name: 'Apple' })).toHaveAttribute('aria-selected', 'false');
    await user.keyboard('{Escape}');
    expect(screen.getByRole('combobox')).toHaveValue('');
  });
  it('keeps the check on the selection while another option is highlighted', async () => {
    const user = userEvent.setup();
    render(<FloatingCombobox />);
    const trigger = screen.getByRole('button', { name: 'Toggle fruit options' });
    await user.click(trigger);
    expect(screen.queryByTestId('apple-check')).not.toBeInTheDocument();
    await user.click(screen.getByRole('option', { name: 'Apple' }));
    await user.click(trigger);
    await user.hover(screen.getByRole('option', { name: 'Banana' }));
    expect(screen.getByTestId('apple-check')).toBeVisible();
    expect(screen.getByTestId('apple-check')).toHaveAttribute('aria-hidden', 'true');
    expect(screen.queryByTestId('banana-check')).not.toBeInTheDocument();
    expect(screen.getByRole('option', { name: 'Apple' })).toHaveAttribute('aria-selected', 'true');
    await user.click(screen.getByRole('option', { name: 'Banana' }));
    await user.click(trigger);
    expect(screen.getByTestId('banana-check')).toBeVisible();
    expect(screen.queryByTestId('apple-check')).not.toBeInTheDocument();
  });
  it('positions the popup against the full input group', async () => {
    const user = userEvent.setup();
    render(<FloatingCombobox />);
    const measureGroup = vi.spyOn(screen.getByTestId('fruit-group'), 'getBoundingClientRect');

    await user.click(screen.getByRole('button', { name: 'Toggle fruit options' }));

    await waitFor(() => expect(measureGroup).toHaveBeenCalled());
    expect(screen.getByRole('combobox', { name: 'Fruit' })).toHaveFocus();
  });

  it('opens its options from a composed trigger', async () => {
    const user = userEvent.setup();
    render(<FloatingCombobox />);

    const input = screen.getByRole('combobox', { name: 'Fruit' });
    const trigger = screen.getByRole('button', { name: 'Toggle fruit options' });
    expect(trigger).toHaveClass('cl-button', 'cl-combobox-trigger');
    expect(trigger).toHaveAttribute('data-size', 'sm');
    expect(trigger).toHaveAttribute('data-variant', 'ghost');
    expect(trigger).toHaveAttribute('data-color', 'neutral');

    await user.click(trigger);

    expect(screen.getByRole('listbox')).toBeInTheDocument();
    expect(trigger).toHaveAttribute('data-open', '');
    expect(input).toHaveFocus();
  });

  it('allows an explicit anchor to override the input group', async () => {
    const user = userEvent.setup();
    const anchor = document.createElement('div');
    const measureAnchor = vi.spyOn(anchor, 'getBoundingClientRect');
    render(<FloatingCombobox anchor={anchor} />);
    const measureGroup = vi.spyOn(screen.getByTestId('fruit-group'), 'getBoundingClientRect');

    await user.click(screen.getByRole('button', { name: 'Toggle fruit options' }));

    await waitFor(() => expect(measureAnchor).toHaveBeenCalled());
    expect(measureGroup).not.toHaveBeenCalled();
  });

  it('anchors to the input without a group and opens with the keyboard', async () => {
    const user = userEvent.setup();
    render(
      <Combobox.Root>
        <Combobox.Input aria-label='Fruit' />
        <Combobox.Popup>
          <Combobox.Option value='apple'>Apple</Combobox.Option>
        </Combobox.Popup>
      </Combobox.Root>,
    );
    const input = screen.getByRole('combobox', { name: 'Fruit' });
    const measureInput = vi.spyOn(input, 'getBoundingClientRect');

    await user.tab();
    await user.keyboard('{ArrowDown}');

    await waitFor(() => expect(measureInput).toHaveBeenCalled());
    expect(screen.getByRole('listbox')).toBeInTheDocument();
    expect(input).toHaveFocus();
  });

  it('renders a field-aware, sized input', () => {
    render(
      <Field.Root
        required
        invalid
      >
        <Field.Label>Fruit</Field.Label>
        <Combobox.Root>
          <Combobox.Input size='lg' />
          <Combobox.Popup>
            <Combobox.Option value='apple'>Apple</Combobox.Option>
          </Combobox.Popup>
        </Combobox.Root>
        <Field.Error>Choose a fruit</Field.Error>
      </Field.Root>,
    );

    const input = screen.getByRole('combobox', { name: 'Fruit' });
    expect(input).toHaveClass('cl-input', 'cl-combobox-input');
    expect(input).toHaveAttribute('data-size', 'lg');
    expect(input).toBeRequired();
    expect(input).toHaveAttribute('aria-invalid', 'true');
    expect(input).toHaveAccessibleDescription('Choose a fruit');
  });

  it('opens a floating popup when the user types', async () => {
    const user = userEvent.setup();
    render(<FloatingCombobox />);

    await user.type(screen.getByRole('combobox', { name: 'Fruit' }), 'a');

    const listbox = screen.getByRole('listbox');
    const popup = listbox.querySelector('.cl-combobox-popup');
    const viewport = popup?.querySelector('.cl-combobox-viewport');
    expect(listbox).toHaveClass('cl-combobox-positioner');
    expect(popup).toBeInTheDocument();
    expect(viewport).toBeInTheDocument();
    expect(screen.getByRole('option', { name: 'Apple' }).closest('.cl-combobox-viewport')).toBe(viewport);
  });

  it('opens its options when the input is clicked', async () => {
    const user = userEvent.setup();
    render(<FloatingCombobox />);

    await user.click(screen.getByRole('combobox', { name: 'Fruit' }));

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

  it('selects an option and restores its label to the input', async () => {
    const onValueChange = vi.fn();
    const user = userEvent.setup();
    render(<FloatingCombobox onValueChange={onValueChange} />);

    const input = screen.getByRole('combobox', { name: 'Fruit' });
    await user.type(input, 'b');
    await user.click(screen.getByRole('option', { name: 'Banana' }));

    expect(onValueChange).toHaveBeenCalledWith('banana');
    expect(input).toHaveValue('Banana');
    expect(input).toHaveFocus();
  });

  it('supports keyboard selection', async () => {
    const onValueChange = vi.fn();
    const user = userEvent.setup();
    render(<FloatingCombobox onValueChange={onValueChange} />);

    const input = screen.getByRole('combobox', { name: 'Fruit' });
    await user.type(input, 'a');
    await user.keyboard('{Enter}');

    expect(onValueChange).toHaveBeenCalledWith('apple');
  });

  it('discards search text on dismiss without changing the selected value', async () => {
    const user = userEvent.setup();
    const onValueChange = vi.fn();
    render(<FloatingCombobox onValueChange={onValueChange} />);
    const input = screen.getByRole('combobox', { name: 'Fruit' });
    await user.type(input, 'a');
    await user.keyboard('{Enter}');
    await user.type(input, ' not a fruit');
    await user.keyboard('{Escape}');

    expect(input).toHaveValue('Apple');
    expect(onValueChange).toHaveBeenCalledExactlyOnceWith('apple');
  });

  it('keeps the selected label while reopening the unfiltered collection', async () => {
    const user = userEvent.setup();
    render(
      <Combobox.Root>
        <Combobox.Input aria-label='Fruit' />
        <Combobox.Trigger aria-label='Show fruits' />
        <Combobox.Popup>
          <Combobox.Collection
            items={['Apple', 'Banana']}
            itemToStringLabel={item => item}
            empty={<Combobox.Empty>No matches</Combobox.Empty>}
          >
            {item => (
              <Combobox.Option
                key={item}
                value={item}
              >
                {item}
              </Combobox.Option>
            )}
          </Combobox.Collection>
        </Combobox.Popup>
      </Combobox.Root>,
    );
    const input = screen.getByRole('combobox');
    await user.type(input, 'Ban');
    expect(screen.getAllByRole('option')).toHaveLength(1);
    await user.click(screen.getByRole('option', { name: 'Banana' }));
    await user.click(screen.getByRole('button', { name: 'Show fruits' }));
    expect(input).toHaveValue('Banana');
    expect(screen.getAllByRole('option')).toHaveLength(2);
    await user.type(input, 'unknown');
    expect(screen.getByText('No matches')).toBeInTheDocument();
    await user.keyboard('{Escape}');
    expect(input).toHaveValue('Banana');
  });

  it('styles disabled options and prevents their selection', async () => {
    const onValueChange = vi.fn();
    const user = userEvent.setup();
    render(
      <Combobox.Root
        open
        onValueChange={onValueChange}
      >
        <Combobox.Input aria-label='Fruit' />
        <Combobox.Popup>
          <Combobox.Option
            value='apple'
            disabled
          >
            Apple
          </Combobox.Option>
        </Combobox.Popup>
      </Combobox.Root>,
    );

    const option = screen.getByRole('option', { name: 'Apple' });
    expect(option).toHaveClass('cl-combobox-option');
    expect(option).toHaveAttribute('aria-disabled', 'true');
    await user.click(option);
    expect(onValueChange).not.toHaveBeenCalled();
  });

  it('defaults to the ghost Input variant inside an input group', () => {
    render(
      <Combobox.Root open>
        <InputGroup.Root size='lg'>
          <InputGroup.Start>
            <Icon glyph={MagnifyingGlass} />
          </InputGroup.Start>
          <Combobox.Input
            aria-label='Search countries'
            placeholder='Search country or code'
          />
        </InputGroup.Root>
        <Combobox.List>
          <Combobox.Option value='us'>United States</Combobox.Option>
        </Combobox.List>
      </Combobox.Root>,
    );

    expect(screen.getByRole('combobox', { name: 'Search countries' })).toHaveClass('cl-input', 'cl-combobox-input');
    expect(screen.getByRole('combobox', { name: 'Search countries' })).toHaveAttribute('data-size', 'lg');
    expect(screen.getByRole('combobox', { name: 'Search countries' })).toHaveAttribute('data-variant', 'ghost');
    expect(screen.getByRole('listbox')).toHaveClass('cl-combobox-list');
    expect(screen.getByRole('option', { name: 'United States' })).toHaveClass('cl-combobox-option');
  });

  it('renders a reusable empty state', () => {
    render(<Combobox.Empty>No matches</Combobox.Empty>);

    expect(screen.getByText('No matches')).toHaveClass('cl-combobox-empty');
  });

  function ClearableCombobox(props?: { onValueChange?: (value: string | null) => void }) {
    return (
      <Combobox.Root
        defaultValue='apple'
        defaultInputValue='Apple'
        onValueChange={props?.onValueChange}
      >
        <InputGroup.Root>
          <Combobox.Input aria-label='Fruit' />
          <InputGroup.End>
            <Combobox.Clear />
            <Combobox.Trigger aria-label='Toggle fruit options' />
          </InputGroup.End>
        </InputGroup.Root>
        <Combobox.Popup>
          <Combobox.Option
            value='apple'
            label='Apple'
          >
            Apple
          </Combobox.Option>
        </Combobox.Popup>
      </Combobox.Root>
    );
  }

  it('clears the input and selection from the Clear button and keeps focus on the input', async () => {
    const user = userEvent.setup();
    const onValueChange = vi.fn();
    render(<ClearableCombobox onValueChange={onValueChange} />);

    await user.click(screen.getByRole('button', { name: 'Clear' }));

    expect(onValueChange).toHaveBeenCalledWith(null);
    expect(screen.getByRole('combobox', { name: 'Fruit' })).toHaveValue('');
    expect(screen.getByRole('combobox', { name: 'Fruit' })).toHaveFocus();
  });

  it('renders Clear only while there is an input value or a selection', async () => {
    const user = userEvent.setup();
    render(
      <Combobox.Root>
        <InputGroup.Root>
          <Combobox.Input aria-label='Fruit' />
          <InputGroup.End>
            <Combobox.Clear />
          </InputGroup.End>
        </InputGroup.Root>
      </Combobox.Root>,
    );

    expect(screen.queryByRole('button', { name: 'Clear' })).not.toBeInTheDocument();
    await user.type(screen.getByRole('combobox', { name: 'Fruit' }), 'a');
    expect(screen.getByRole('button', { name: 'Clear' })).toBeInTheDocument();
  });

  it('keeps the trigger toggling the list with its own name while there is text', async () => {
    const user = userEvent.setup();
    render(<ClearableCombobox />);

    const trigger = screen.getByRole('button', { name: 'Toggle fruit options' });
    expect(trigger).toHaveAttribute('aria-expanded', 'false');

    await user.click(trigger);
    expect(trigger).toHaveAttribute('aria-expanded', 'true');

    await user.click(trigger);
    expect(trigger).toHaveAttribute('aria-expanded', 'false');
  });
});