import { describe, it, expect, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import OrderButton from './OrderButton';
import { useDesignStore } from '../store/designStore';
import type { Stone } from '../types';

const testStone: Stone = { id: 1, name: 'Akik', image: '/akik.jpg', active: true };

function resetStore() {
  useDesignStore.setState({
    jewelryType: 'bileklik',
    size: { label: 'M', circumferenceCm: 18 },
    stoneSizeMm: 8,
  });
  useDesignStore.getState().resetSlots();
}

describe('OrderButton', () => {
  beforeEach(resetStore);

  it('renders "Sipariş Oluştur" text', () => {
    render(<OrderButton />);
    expect(screen.getByText('Sipariş Oluştur')).toBeInTheDocument();
  });

  it('is disabled when no slots are filled', () => {
    render(<OrderButton />);
    const btn = screen.getByRole('button', { name: 'Sipariş Oluştur' });
    expect(btn).toBeDisabled();
  });

  it('is disabled when only some slots are filled', () => {
    useDesignStore.getState().placeStone(0, testStone);
    render(<OrderButton />);
    const btn = screen.getByRole('button', { name: 'Sipariş Oluştur' });
    expect(btn).toBeDisabled();
  });

  it('is enabled when all slots are filled', () => {
    const state = useDesignStore.getState();
    const filledSlots = state.slots.map((s) => ({
      ...s,
      stone: testStone,
    }));
    useDesignStore.setState({ slots: filledSlots });

    render(<OrderButton />);
    const btn = screen.getByRole('button', { name: 'Sipariş Oluştur' });
    expect(btn).not.toBeDisabled();
  });

  it('has visual distinction between disabled and enabled states', () => {
    // Disabled state
    const { unmount } = render(<OrderButton />);
    const disabledBtn = screen.getByRole('button', { name: 'Sipariş Oluştur' });
    expect(disabledBtn.className).toContain('cursor-not-allowed');
    unmount();

    // Enabled state
    const state = useDesignStore.getState();
    const filledSlots = state.slots.map((s) => ({
      ...s,
      stone: testStone,
    }));
    useDesignStore.setState({ slots: filledSlots });

    render(<OrderButton />);
    const enabledBtn = screen.getByRole('button', { name: 'Sipariş Oluştur' });
    expect(enabledBtn.className).toContain('bg-purple-500');
    expect(enabledBtn.className).toContain('cursor-pointer');
  });
});
