import { describe, it, expect, beforeEach } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import TypeSelector from './TypeSelector';
import SizeSelector from './SizeSelector';
import StoneSizeSelector from './StoneSizeSelector';
import SettingsPanel from './SettingsPanel';
import { useDesignStore } from '../store/designStore';

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

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

  it('renders three type buttons', () => {
    render(<TypeSelector />);
    expect(screen.getByText('Bileklik')).toBeInTheDocument();
    expect(screen.getByText('Kolye')).toBeInTheDocument();
    expect(screen.getByText('Tesbih')).toBeInTheDocument();
  });

  it('highlights the currently selected type', () => {
    render(<TypeSelector />);
    const bileklikBtn = screen.getByText('Bileklik');
    expect(bileklikBtn.className).toContain('bg-purple-500');
    expect(screen.getByText('Kolye').className).not.toContain('bg-purple-500');
  });

  it('calls setJewelryType on click', () => {
    render(<TypeSelector />);
    fireEvent.click(screen.getByText('Kolye'));
    expect(useDesignStore.getState().jewelryType).toBe('kolye');
  });
});

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

  it('renders three size options', () => {
    render(<SizeSelector />);
    expect(screen.getByText('S (16cm)')).toBeInTheDocument();
    expect(screen.getByText('M (18cm)')).toBeInTheDocument();
    expect(screen.getByText('L (20cm)')).toBeInTheDocument();
  });

  it('highlights the currently selected size', () => {
    render(<SizeSelector />);
    const mBtn = screen.getByText('M (18cm)');
    expect(mBtn.className).toContain('bg-purple-500');
  });

  it('calls setSize on click', () => {
    render(<SizeSelector />);
    fireEvent.click(screen.getByText('L (20cm)'));
    const state = useDesignStore.getState();
    expect(state.size.label).toBe('L');
    expect(state.size.circumferenceCm).toBe(20);
  });
});

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

  it('renders two stone size options', () => {
    render(<StoneSizeSelector />);
    expect(screen.getByText('8mm')).toBeInTheDocument();
    expect(screen.getByText('6mm')).toBeInTheDocument();
  });

  it('highlights the currently selected stone size', () => {
    render(<StoneSizeSelector />);
    const btn8 = screen.getByText('8mm');
    expect(btn8.className).toContain('bg-purple-500');
  });

  it('calls setStoneSizeMm on click', () => {
    render(<StoneSizeSelector />);
    fireEvent.click(screen.getByText('6mm'));
    expect(useDesignStore.getState().stoneSizeMm).toBe(6);
  });
});

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

  it('renders section headings', () => {
    render(<SettingsPanel />);
    expect(screen.getByText('Tasarım Türü')).toBeInTheDocument();
    expect(screen.getByText('Takı Ölçüsü')).toBeInTheDocument();
    expect(screen.getByText('Taş Boyutu')).toBeInTheDocument();
  });

  it('renders all child selectors', () => {
    render(<SettingsPanel />);
    // TypeSelector buttons
    expect(screen.getByText('Bileklik')).toBeInTheDocument();
    // SizeSelector buttons
    expect(screen.getByText('S (16cm)')).toBeInTheDocument();
    // StoneSizeSelector buttons
    expect(screen.getByText('8mm')).toBeInTheDocument();
  });

  it('changing type resets slots via store', () => {
    // Place a stone first
    const stone = { id: 1, name: 'Akik', image: '/akik.jpg', active: true };
    useDesignStore.getState().placeStone(0, stone);
    expect(useDesignStore.getState().slots[0].stone).not.toBeNull();

    render(<SettingsPanel />);
    fireEvent.click(screen.getByText('Kolye'));

    // After type change, slots should be reset (all null)
    const slots = useDesignStore.getState().slots;
    expect(slots.every((s) => s.stone === null)).toBe(true);
  });

  it('changing size recalculates slot count', () => {
    render(<SettingsPanel />);
    const countBefore = useDesignStore.getState().slotCount;
    fireEvent.click(screen.getByText('S (16cm)'));
    const countAfter = useDesignStore.getState().slotCount;
    expect(countAfter).not.toBe(countBefore);
  });

  it('changing stone size recalculates slot count', () => {
    render(<SettingsPanel />);
    const countBefore = useDesignStore.getState().slotCount;
    fireEvent.click(screen.getByText('6mm'));
    const countAfter = useDesignStore.getState().slotCount;
    expect(countAfter).not.toBe(countBefore);
  });
});
