import React, { useState } from "react";
import "@testing-library/jest-dom";
import { fireEvent, render, screen } from "@testing-library/react";

import { moveItem } from "./cvBuilder";
import { useDragReorder } from "./hooks/useDragReorder";

function EntryList({ section }: { section: string }) {
  const [items, setItems] = useState([`${section}1`, `${section}2`]);
  const drag = useDragReorder((from, to) => setItems(current => moveItem(current, from, to)));
  return <div>
    <output aria-label={`${section} item order`}>{items.join(",")}</output>
    {items.map((item, index) => <div key={item} data-testid={item} {...drag.getItemProps(index)}>
      {item}<input aria-label={`${item} title`} defaultValue={item} />
    </div>)}
  </div>;
}

function NestedLists({ onOuterEnd = () => {} }: { onOuterEnd?: React.DragEventHandler }) {
  const [sections, setSections] = useState(["A", "B"]);
  const drag = useDragReorder((from, to) => setSections(current => moveItem(current, from, to)));
  return <div onDragEnd={onOuterEnd}>
    <output aria-label="Section order">{sections.join(",")}</output>
    {sections.map((section, index) => <div key={section} data-testid={`section-${section}`} {...drag.getItemProps(index)}>
      <EntryList section={section} />
    </div>)}
  </div>;
}

function dataTransfer() {
  return { effectAllowed: "", dropEffect: "", setData: jest.fn() };
}

test("[P5-14 PRES-C07] nested item drag reorders only the owning item list", () => {
  render(<NestedLists />);
  const source = screen.getByTestId("A2");
  const target = screen.getByTestId("A1");
  const transfer = dataTransfer();
  fireEvent.dragStart(source, { dataTransfer: transfer });
  expect(transfer.setData).toHaveBeenCalledWith("text/plain", "1");
  fireEvent.dragOver(target, { dataTransfer: transfer });
  fireEvent.drop(target, { dataTransfer: transfer });
  fireEvent.dragEnd(source, { dataTransfer: transfer });
  expect(screen.getByLabelText("A item order")).toHaveTextContent("A2,A1");
  expect(screen.getByLabelText("B item order")).toHaveTextContent("B1,B2");
  expect(screen.getByLabelText("Section order")).toHaveTextContent("A,B");
});

test("[P5-14 PRES-C07] unsupported cross-section item drop cannot reorder sections", () => {
  render(<NestedLists />);
  const source = screen.getByTestId("A2");
  const target = screen.getByLabelText("B1 title");
  const transfer = dataTransfer();
  fireEvent.dragStart(source, { dataTransfer: transfer });
  fireEvent.dragOver(target, { dataTransfer: transfer });
  expect(fireEvent.drop(target, { dataTransfer: transfer })).toBe(false);
  fireEvent.dragEnd(source, { dataTransfer: transfer });
  expect(screen.getByLabelText("Section order")).toHaveTextContent("A,B");
  expect(screen.getByLabelText("A item order")).toHaveTextContent("A1,A2");
  expect(screen.getByLabelText("B item order")).toHaveTextContent("B1,B2");
});

test("[P5-14 PRES-C07] section drag over an inactive nested item reaches the section owner", () => {
  render(<NestedLists />);
  const source = screen.getByTestId("section-A");
  const target = screen.getByTestId("B1");
  const transfer = dataTransfer();
  fireEvent.dragStart(source, { dataTransfer: transfer });
  fireEvent.dragOver(target, { dataTransfer: transfer });
  fireEvent.drop(target, { dataTransfer: transfer });
  fireEvent.dragEnd(source, { dataTransfer: transfer });
  expect(screen.getByLabelText("Section order")).toHaveTextContent("B,A");
  expect(screen.getByLabelText("A item order")).toHaveTextContent("A1,A2");
  expect(screen.getByLabelText("B item order")).toHaveTextContent("B1,B2");
});

test("[P5-14 PRES-C07] source dragend retains ownership after drop resets state and clears a cancelled gesture", () => {
  const outerEnd = jest.fn();
  render(<NestedLists onOuterEnd={outerEnd} />);
  const source = screen.getByTestId("A2");
  const target = screen.getByTestId("A1");
  const transfer = dataTransfer();
  fireEvent.dragStart(source, { dataTransfer: transfer });
  fireEvent.dragOver(target, { dataTransfer: transfer });
  fireEvent.drop(target, { dataTransfer: transfer });
  fireEvent.dragEnd(source, { dataTransfer: transfer });
  expect(outerEnd).not.toHaveBeenCalled();

  fireEvent.dragStart(target, { dataTransfer: transfer });
  fireEvent.dragOver(source, { dataTransfer: transfer });
  fireEvent.dragEnd(target, { dataTransfer: transfer });
  expect(outerEnd).not.toHaveBeenCalled();
  fireEvent.drop(source, { dataTransfer: transfer });
  expect(screen.getByLabelText("A item order")).toHaveTextContent("A2,A1");

  fireEvent.dragStart(target, { dataTransfer: transfer });
  fireEvent.dragOver(source, { dataTransfer: transfer });
  fireEvent.drop(source, { dataTransfer: transfer });
  fireEvent.dragEnd(target, { dataTransfer: transfer });
  expect(screen.getByLabelText("A item order")).toHaveTextContent("A1,A2");
  expect(screen.getByLabelText("Section order")).toHaveTextContent("A,B");
  expect(outerEnd).not.toHaveBeenCalled();
});