import { render, screen } from "@testing-library/react";
import { Form } from "antd";
import { describe, expect, it, vi } from "vitest";
import { TimeTicketTaskModalComponent } from "./time-ticket-task-modal.component.jsx";

vi.mock("react-i18next", () => ({
  useTranslation: () => ({
    t: (key, values = {}) => {
      const translations = {
        "timetickets.fields.ro_number": "RO Number",
        "timetickets.labels.task": "Task",
        "bodyshop.fields.md_tasks_presets.percent": "Percent",
        "bodyshop.fields.md_tasks_presets.hourstype": "Labor Types",
        "bodyshop.fields.md_tasks_presets.nextstatus": "Next Status",
        "timetickets.labels.claimtaskpreview": "Claim Task Preview",
        "timetickets.fields.employee": "Employee",
        "timetickets.fields.cost_center": "Cost Center",
        "timetickets.fields.ciecacode": "Labor Type",
        "timetickets.fields.productivehrs": "Hours",
        "timetickets.fields.payout_method": "Payout Method",
        "timetickets.fields.rate": "Rate",
        "timetickets.fields.amount": "Amount",
        "timetickets.labels.payout_methods.commission": "Commission",
        "timetickets.labels.payout_methods.hourly": "Hourly",
        "timetickets.labels.payrollclaimedtasks": "Payroll claimed tasks are ready.",
        "tt_approvals.labels.approval_queue_in_use": "Approval queue is enabled."
      };

      if (key === "timetickets.validation.unassignedlines") {
        return `${values.unassignedHours} hours remain unassigned.`;
      }

      return translations[key] || key;
    }
  })
}));

vi.mock("../form-items-formatted/read-only-form-item.component", () => ({
  default: ({ value }) => <span>{value}</span>
}));

vi.mock("../job-search-select/job-search-select.component", () => ({
  default: () => <div>Job Search</div>
}));

function TestHarness({ unassignedHours = 0 }) {
  const [form] = Form.useForm();

  return (
    <Form
      form={form}
      initialValues={{
        task: "Body Prep",
        timetickets: [
          {
            employeeid: "emp-1",
            cost_center: "Body",
            ciecacode: "LAA",
            productivehrs: 2,
            rate: 40,
            payoutamount: 80,
            payout_context: {
              payout_method: "commission"
            }
          },
          {
            employeeid: "emp-2",
            cost_center: "Refinish",
            ciecacode: "LAB",
            productivehrs: 1,
            rate: 28,
            payoutamount: 28,
            payout_context: {
              payout_method: "hourly"
            }
          }
        ]
      }}
    >
      <TimeTicketTaskModalComponent
        bodyshop={{
          md_tasks_presets: {
            presets: [
              {
                name: "Body Prep",
                percent: 50,
                hourstype: ["LAA", "LAB"],
                nextstatus: "In Progress"
              }
            ]
          }
        }}
        form={form}
        loading={false}
        completedTasks={[]}
        unassignedHours={unassignedHours}
      />
    </Form>
  );
}

describe("TimeTicketTaskModalComponent", () => {
  it("shows preview payout methods for both commission and hourly tickets", () => {
    render(<TestHarness />);

    expect(screen.getByText("Claim Task Preview")).toBeInTheDocument();
    expect(screen.getByText("Commission")).toBeInTheDocument();
    expect(screen.getByText("Hourly")).toBeInTheDocument();
    expect(screen.getByText("Payroll claimed tasks are ready.")).toBeInTheDocument();
  });

  it("shows the unassigned-hours alert when payroll assignments are incomplete", () => {
    render(<TestHarness unassignedHours={1.25} />);

    expect(screen.getByText("1.25 hours remain unassigned.")).toBeInTheDocument();
  });
});