import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import WarehouseEntryModal from "./WarehouseEntryModal";
import type { WarehouseRecord } from "@/lib/api";

// Mock warehouse data
const mockWarehouses: WarehouseRecord[] = [
  {
    _id: "wh1",
    name: "AL-AIN MAZYAD",
    code: "AAM",
    aliases: [],
    active: true,
  },
  {
    _id: "wh2",
    name: "DIC 1",
    code: "DIC1",
    aliases: [],
    active: true,
  },
  {
    _id: "wh3",
    name: "DIC 3",
    code: "DIC3",
    aliases: [],
    active: true,
  },
];

// Mock sheet row data
const mockCurrentRow = {
  itemId: "item1",
  itemCode: "ITEM001",
  itemName: "Test Item",
  barcode: "123456",
  blend: "Blend A",
  grainType: "Rice",
  varietyType: "Basmati",
  processType: "Milled",
  coo: "IN",
  unit: "BAG/1x50kg",
  batchNumber: "BATCH-001",
  expiryDate: "2025-12-31",
  warehouseBags: { wh1: "10", wh2: "20", wh3: "" },
  totalMtOverride: "",
};

describe("WarehouseEntryModal - Task 1.3.1: Vertical Warehouse List", () => {
  it("renders all warehouses in a vertical list", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={null}
        onSave={onSave}
        onClose={onClose}
      />
    );

    // Verify all warehouse names are displayed
    expect(screen.getByText("AL-AIN MAZYAD")).toBeInTheDocument();
    expect(screen.getByText("DIC 1")).toBeInTheDocument();
    expect(screen.getByText("DIC 3")).toBeInTheDocument();
  });

  it("renders input fields for each warehouse", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={null}
        onSave={onSave}
        onClose={onClose}
      />
    );

    // Verify input fields exist for each warehouse
    const inputs = screen.getAllByRole("spinbutton");
    expect(inputs).toHaveLength(3);
  });

  it("displays warehouse names with proper labels", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={null}
        onSave={onSave}
        onClose={onClose}
      />
    );

    // Verify labels are associated with inputs
    const input1 = screen.getByLabelText("AL-AIN MAZYAD");
    const input2 = screen.getByLabelText("DIC 1");
    const input3 = screen.getByLabelText("DIC 3");

    expect(input1).toBeInTheDocument();
    expect(input2).toBeInTheDocument();
    expect(input3).toBeInTheDocument();
  });

  it("populates input fields with current row quantities", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={null}
        onSave={onSave}
        onClose={onClose}
      />
    );

    // Verify input values match current row data
    const input1 = screen.getByLabelText("AL-AIN MAZYAD") as HTMLInputElement;
    const input2 = screen.getByLabelText("DIC 1") as HTMLInputElement;
    const input3 = screen.getByLabelText("DIC 3") as HTMLInputElement;

    expect(input1.value).toBe("10");
    expect(input2.value).toBe("20");
    expect(input3.value).toBe("");
  });

  it("displays batch context in modal header", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={null}
        onSave={onSave}
        onClose={onClose}
      />
    );

    // Verify header shows item name and batch number
    expect(screen.getByText(/Test Item/)).toBeInTheDocument();
    expect(screen.getByText(/BATCH-001/)).toBeInTheDocument();
  });

  it("renders Save and Cancel buttons", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={null}
        onSave={onSave}
        onClose={onClose}
      />
    );

    // Verify action buttons exist
    expect(screen.getByRole("button", { name: /Save/i })).toBeInTheDocument();
    expect(screen.getByRole("button", { name: /Cancel/i })).toBeInTheDocument();
  });

  it("uses inline styles consistent with Stock In page", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    const { container } = render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={null}
        onSave={onSave}
        onClose={onClose}
      />
    );

    // Get first input field
    const input = screen.getByLabelText("AL-AIN MAZYAD") as HTMLInputElement;

    // Verify input styling matches the new premium design
    expect(input.style.padding).toBe("10px 14px");
    expect(input.style.borderRadius).toBe("8px");
    // Border color changes based on whether there's a value
    expect(input.style.background).toBe("rgb(255, 255, 255)");
    expect(input.style.fontSize).toBe("0.92rem");
  });

  it("connects inputs to inputRefs array for keyboard navigation", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={null}
        onSave={onSave}
        onClose={onClose}
      />
    );

    // Verify all inputs have proper IDs for ref connection
    const input1 = screen.getByLabelText("AL-AIN MAZYAD");
    const input2 = screen.getByLabelText("DIC 1");
    const input3 = screen.getByLabelText("DIC 3");

    expect(input1.id).toBe("warehouse-wh1");
    expect(input2.id).toBe("warehouse-wh2");
    expect(input3.id).toBe("warehouse-wh3");
  });

  it("displays warehouses with proper spacing", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={null}
        onSave={onSave}
        onClose={onClose}
      />
    );

    // Verify all warehouse inputs are rendered (which confirms spacing structure)
    const warehouseInputs = screen.getAllByRole("spinbutton");
    
    // Verify we have the expected number of warehouse inputs
    expect(warehouseInputs.length).toBe(3);
  });
});

describe("WarehouseEntryModal - Task 3.1: Copy from Previous Batch", () => {
  const mockPreviousRow = {
    ...mockCurrentRow,
    itemId: "item0",
    batchNumber: "BATCH-000",
    warehouseBags: { wh1: "5", wh2: "15", wh3: "25" },
  totalMtOverride: "",
  };

  it("renders Copy from Previous button in header", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={mockPreviousRow}
        onSave={onSave}
        onClose={onClose}
      />
    );

    // Verify Copy from Previous button exists
    const copyButton = screen.getByRole("button", { name: /Copy from Previous/i });
    expect(copyButton).toBeInTheDocument();
  });

  it("displays Copy from Previous button with icon", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={mockPreviousRow}
        onSave={onSave}
        onClose={onClose}
      />
    );

    // Verify button contains clipboard icon (now SVG instead of emoji)
    const copyButton = screen.getByRole("button", { name: /Copy from Previous/i });
    expect(copyButton).toBeInTheDocument();
  });

  it("enables Copy from Previous button when previousRow exists", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={mockPreviousRow}
        onSave={onSave}
        onClose={onClose}
      />
    );

    const copyButton = screen.getByRole("button", { name: /Copy from Previous/i }) as HTMLButtonElement;
    expect(copyButton.disabled).toBe(false);
    expect(copyButton.style.cursor).toBe("pointer");
    // Opacity is not explicitly set in the new design when enabled
  });

  it("disables Copy from Previous button when previousRow is null", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={null}
        onSave={onSave}
        onClose={onClose}
      />
    );

    const copyButton = screen.getByRole("button", { name: /Copy from Previous/i }) as HTMLButtonElement;
    expect(copyButton.disabled).toBe(true);
    expect(copyButton.style.cursor).toBe("not-allowed");
    // Opacity is not explicitly set in the new design when disabled
  });

  it("displays appropriate title attribute for Copy from Previous button", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={mockPreviousRow}
        onSave={onSave}
        onClose={onClose}
      />
    );

    const copyButton = screen.getByRole("button", { name: /Copy from Previous/i });
    expect(copyButton.title).toBe("Copy quantities from previous batch");
  });

  it("displays appropriate title when previousRow is null", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={null}
        onSave={onSave}
        onClose={onClose}
      />
    );

    const copyButton = screen.getByRole("button", { name: /Copy from Previous/i });
    expect(copyButton.title).toBe("No previous batch available");
  });

  it("styles Copy from Previous button consistently with design", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={mockPreviousRow}
        onSave={onSave}
        onClose={onClose}
      />
    );

    const copyButton = screen.getByRole("button", { name: /Copy from Previous/i }) as HTMLButtonElement;
    
    // Updated styling for premium design
    expect(copyButton.style.padding).toBe("9px 15px");
    expect(copyButton.style.borderRadius).toBe("8px");
    expect(copyButton.style.border).toBe("medium"); // border: "none" renders as "medium"
    expect(copyButton.style.fontSize).toBe("0.84rem");
    expect(copyButton.style.fontWeight).toBe("600");
  });
});

describe("WarehouseEntryModal - Task 3.2: Apply to All Warehouses", () => {
  it("renders Apply to All button in header", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={null}
        onSave={onSave}
        onClose={onClose}
      />
    );

    // Verify Apply to All button exists
    const applyButton = screen.getByRole("button", { name: /Apply to All/i });
    expect(applyButton).toBeInTheDocument();
  });

  it("displays Apply to All button with icon", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={null}
        onSave={onSave}
        onClose={onClose}
      />
    );

    // Verify button contains down arrow icon (now SVG instead of emoji)
    const applyButton = screen.getByRole("button", { name: /Apply to All/i });
    expect(applyButton).toBeInTheDocument();
  });

  it("enables Apply to All button regardless of previousRow", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={null}
        onSave={onSave}
        onClose={onClose}
      />
    );

    const applyButton = screen.getByRole("button", { name: /Apply to All/i }) as HTMLButtonElement;
    expect(applyButton.disabled).toBe(false);
    expect(applyButton.style.cursor).toBe("pointer");
  });

  it("displays appropriate title attribute for Apply to All button", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={null}
        onSave={onSave}
        onClose={onClose}
      />
    );

    const applyButton = screen.getByRole("button", { name: /Apply to All/i });
    expect(applyButton.title).toBe("Apply one value to all warehouses");
  });

  it("styles Apply to All button consistently with design", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={null}
        onSave={onSave}
        onClose={onClose}
      />
    );

    const applyButton = screen.getByRole("button", { name: /Apply to All/i }) as HTMLButtonElement;
    
    // Updated styling for premium design
    expect(applyButton.style.padding).toBe("9px 15px");
    expect(applyButton.style.borderRadius).toBe("8px");
    expect(applyButton.style.border).toBe("medium"); // border: "none" renders as "medium"
    expect(applyButton.style.fontSize).toBe("0.84rem");
    expect(applyButton.style.fontWeight).toBe("600");
  });

  it("positions action buttons in a flex row with proper gap", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    const { container } = render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={null}
        onSave={onSave}
        onClose={onClose}
      />
    );

    // Find the action buttons container
    const copyButton = screen.getByRole("button", { name: /Copy from Previous/i });
    const buttonContainer = copyButton.parentElement as HTMLElement;
    
    expect(buttonContainer.style.display).toBe("flex");
    expect(buttonContainer.style.gap).toBe("10px"); // Updated gap in premium design
    expect(buttonContainer.style.flexWrap).toBe("wrap");
  });
});

describe("WarehouseEntryModal - Visual Feedback", () => {
  it("does not show feedback message initially", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={null}
        onSave={onSave}
        onClose={onClose}
      />
    );

    // Verify no feedback message is displayed initially
    const feedbackMessages = screen.queryByText(/Copied from previous batch/i);
    expect(feedbackMessages).not.toBeInTheDocument();
  });

  it("positions action buttons in header section", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={null}
        onSave={onSave}
        onClose={onClose}
      />
    );

    // Verify buttons are rendered in the modal
    const copyButton = screen.getByRole("button", { name: /Copy from Previous/i });
    const applyButton = screen.getByRole("button", { name: /Apply to All/i });

    // Both buttons should be present in the document
    expect(copyButton).toBeInTheDocument();
    expect(applyButton).toBeInTheDocument();
  });

  it("maintains proper spacing between header elements", () => {
    const onSave = vi.fn();
    const onClose = vi.fn();

    render(
      <WarehouseEntryModal
        warehouses={mockWarehouses}
        currentRow={mockCurrentRow}
        previousRow={null}
        onSave={onSave}
        onClose={onClose}
      />
    );

    // Verify header title exists (updated text in premium design)
    const title = screen.getByText("Warehouse Quantities");
    expect(title).toBeInTheDocument();

    // Verify batch context exists
    const batchContext = screen.getByText(/Test Item/);
    expect(batchContext).toBeInTheDocument();

    // Verify action buttons exist
    const copyButton = screen.getByRole("button", { name: /Copy from Previous/i });
    const applyButton = screen.getByRole("button", { name: /Apply to All/i });
    
    expect(copyButton).toBeInTheDocument();
    expect(applyButton).toBeInTheDocument();
  });
});