import { render, fireEvent, screen, within } from '@testing-library/svelte';
import { describe, it, expect, vi, test } from 'vitest';
import * as nav from '$app/navigation';
import TatortListPage from '$root/routes/(token-based)/list/[vorgang]/+page.svelte';
import { baseData } from '../fixtures';
import { tick } from 'svelte';
import { API_ROUTES } from '../../src/routes';

vi.spyOn(nav, 'invalidateAll').mockResolvedValue();
global.fetch = vi.fn().mockResolvedValue({ ok: true });


describe('Seite: Vorgangsansicht', () => {
  test.todo('Share Link disabled wenn Liste leer');
  describe('Szenario: Admin + Liste gefüllt - Funktionalität', () => {
    test.todo('Share Link Link generierung richtig');

    it('führt PUT-Request aus und aktualisiert UI nach onSave', async () => {
      const data = structuredClone(baseData);
      const oldName = data.crimesList[0].name;
      const newName = 'Fall-C';

      render(TatortListPage, { props: { data } });
      const listItem = screen.getAllByTestId('test-list-item')[0];
      expect(listItem).toHaveTextContent(oldName);

      await fireEvent.click(within(listItem).getByTestId('edit-button'));
      const input = within(listItem).getByTestId('test-input');
      await fireEvent.input(input, { target: { value: newName } });

      await fireEvent.click(within(listItem).getByTestId('commit-button'));
      await tick();

      expect(global.fetch).toHaveBeenCalledWith(
        `/api/list/${data.vorgang.vorgangToken}/${oldName}`,
        expect.objectContaining({
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            vorgangToken: data.vorgang.vorgangToken,
            oldName,
            newName
          })
        })
      );

      expect(nav.invalidateAll).toHaveBeenCalled();
      expect(within(listItem).getByText(newName)).toBeInTheDocument();
    });

    it('führt DELETE-Request aus und entfernt Element aus UI', async () => {
      const testData = structuredClone(baseData);
      const oldName = testData.crimesList[0].name;
      const vorgang = testData.vorgang;

      render(TatortListPage, { props: { data: testData } });
      const initialItems = screen.getAllByTestId('test-list-item');
      expect(initialItems).toHaveLength(testData.crimesList.length);

      const listItem = screen.getAllByTestId('test-list-item')[0];
      expect(listItem).toHaveTextContent(oldName);
      const del = within(listItem).getByTestId('delete-button');
      expect(del).toBeInTheDocument()
      await fireEvent.click(within(listItem).getByTestId('delete-button'));
      await tick();

      let expectedPath = API_ROUTES.CRIME(vorgang.vorgangToken, oldName)
      expect(global.fetch).toHaveBeenCalledWith(
        expectedPath,
        expect.objectContaining({
         method: 'DELETE',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           vorgangToken: testData.vorgang.vorgangToken,
           tatort: oldName
         })
        })
      );
      expect(nav.invalidateAll).toHaveBeenCalled();
      const updatedItems = screen.queryAllByTestId('test-list-item');
      expect(updatedItems).toHaveLength(testData.crimesList.length - 1);
      expect(screen.queryByText(oldName)).toBeNull();
    });
  });
});