import { renderHook } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { useSlideOverMediaState } from "@/app/(protected)/workorders/_components/detail/use-slide-over-media-state";
import type { WorkOrderBoardDetail } from "@/domain/work-orders/types/work-order-board-detail";
import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";

function baseInfo(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
  return {
    id: 100,
    woNumber: "100",
    site: "SITE",
    type: "Emergency",
    dispatcherId: "d1",
    dispatcherName: "Alex",
    scheduledOn: "2026-07-16",
    completedDate: "",
    targetWeek: "",
    dayGroup: "2026-07-16",
    dayLabel: "Thu",
    location: "Main",
    locationId: 5,
    pm: "",
    serviceNotes: "",
    extraServices: [],
    vendorId: "v1",
    company: "Acme",
    tech: "Sam",
    techPhone: "",
    apptStart: "",
    apptEnd: "",
    apptTime: "",
    status: "Incomplete",
    docStatus: "",
    pocName: "",
    pocPhone: "",
    pocNotes: "",
    dueDate: "",
    rescheduleCount: 0,
    carriedOver: 0,
    originalWeek: "",
    originalDate: "",
    isPastDue: false,
    scheduleWeekOnly: false,
    mediaCount: 0,
    title: "",
    priority: "",
    primaryDispatchId: null,
    rowVersion: "1",
    dispatchRowVersion: "",
    flagColor: null,
    ...overrides,
  };
}

function detailWithMedia(
  media: WorkOrderBoardDetail["media"],
  infoOverrides: Partial<WorkOrderTableRow> = {},
): WorkOrderBoardDetail {
  return {
    info: baseInfo(infoOverrides),
    completion: {
      docStatus: "",
      template: null,
      signOffName: "",
      signOffAttachment: "",
      signOffSignature: "",
      dispatchSignoffs: [],
    },
    comments: [],
    audit: [],
    media,
  };
}

function idleMutation() {
  return {
    mutate: vi.fn(),
    mutateAsync: vi.fn().mockResolvedValue({}),
    isPending: false,
  } as never;
}

describe("useSlideOverMediaState completion filter", () => {
  it("keeps Before/After/Completion after refetch mapped purpose (not file category)", () => {
    const detail = detailWithMedia([
      {
        id: "1",
        category: "Before",
        url: "https://cdn.example.com/before.jpg",
        fileName: "before.jpg",
        uploadedAt: "2026-07-15T18:00:00.0000000Z",
        isLegacy: false,
      },
      {
        id: "2",
        category: "After",
        url: "https://cdn.example.com/after.jpg",
        fileName: "after.jpg",
        uploadedAt: "2026-07-15T18:00:00.0000000Z",
        isLegacy: false,
      },
      {
        id: "3",
        category: "Completion",
        url: "https://cdn.example.com/completion.pdf",
        fileName: "completion.pdf",
        uploadedAt: "2026-07-15T18:00:00.0000000Z",
        isLegacy: false,
      },
      {
        id: "4",
        category: "Extra",
        url: "https://cdn.example.com/extra.pdf",
        fileName: "extra.pdf",
        uploadedAt: "2026-07-15T18:00:00.0000000Z",
        isLegacy: false,
      },
    ]);

    const { result } = renderHook(() =>
      useSlideOverMediaState({
        detailForRow: detail,
        uploadMediaMutation: idleMutation(),
        deleteMediaMutation: idleMutation(),
        categorizeMediaMutation: idleMutation(),
      }),
    );

    expect(result.current.completionMedia.map((item) => item.purpose)).toEqual([
      "Before",
      "After",
      "Completion",
    ]);
    expect(
      result.current.completionMedia.every((item) =>
        ["Photo", "Video", "Report", "Other"].includes(item.category),
      ),
    ).toBe(true);
    expect(result.current.extrasUploads).toHaveLength(1);
    expect(result.current.extrasUploads[0]?.purpose).toBe("Extra");
  });
});