import { describe, it, expect, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import { MemoryRouter, Route, Routes } from 'react-router-dom';
import DesignEditor from './DesignEditor';
import { useDesignStore } from '../store/designStore';

function renderEditor(type: string) {
  return render(
    <MemoryRouter initialEntries={[`/editor/${type}`]}>
      <Routes>
        <Route path="/editor/:type" element={<DesignEditor />} />
      </Routes>
    </MemoryRouter>,
  );
}

describe('DesignEditor', () => {
  beforeEach(() => {
    useDesignStore.setState({ jewelryType: 'bileklik' });
  });

  it('renders three panels', () => {
    renderEditor('bileklik');
    expect(screen.getByText('Taş Kataloğu')).toBeInTheDocument();
    expect(screen.getByLabelText('Yakınlaştır')).toBeInTheDocument();
    expect(screen.getByText('Ayarlar & Sepet')).toBeInTheDocument();
  });

  it('sets jewelryType from URL param on mount', () => {
    renderEditor('kolye');
    expect(useDesignStore.getState().jewelryType).toBe('kolye');
  });

  it('sets jewelryType to tesbih from URL param', () => {
    renderEditor('tesbih');
    expect(useDesignStore.getState().jewelryType).toBe('tesbih');
  });

  it('does not change jewelryType for invalid URL param', () => {
    renderEditor('invalid');
    expect(useDesignStore.getState().jewelryType).toBe('bileklik');
  });

  it('renders with responsive layout classes', () => {
    const { container } = renderEditor('bileklik');
    const wrapper = container.querySelector('.flex');
    expect(wrapper?.className).toContain('flex-col');
    expect(wrapper?.className).toContain('md:flex-row');
  });
});

describe('DesignEditor — DndContext integration', () => {
  beforeEach(() => {
    useDesignStore.getState().setJewelryType('bileklik');
    useDesignStore.getState().resetSlots();
  });

  it('does not show capacity warning when slots are not full', () => {
    renderEditor('bileklik');
    expect(screen.queryByText(/kapasite doldu/i)).not.toBeInTheDocument();
  });

  it('shows capacity warning when all slots are filled', () => {
    const state = useDesignStore.getState();
    const filledSlots = state.slots.map((s) => ({
      ...s,
      stone: { id: 1, name: 'Test', image: '/test.jpg', active: true },
    }));
    useDesignStore.setState({ slots: filledSlots });

    renderEditor('bileklik');
    expect(screen.getByText(/kapasite doldu/i)).toBeInTheDocument();
  });

  it('wraps content in DndContext (droppable slots are rendered)', () => {
    renderEditor('bileklik');
    const slots = useDesignStore.getState().slots;
    // BeadSlotView components should be rendered inside DndContext
    expect(slots.length).toBeGreaterThan(0);
  });
});
