import { useLazyQuery } from "@apollo/client/react";
import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
import { Card, Form, Input, InputNumber, Select, Space, Switch } from "antd";
import { useEffect, useRef } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs-lines.queries";
import { selectAuthLevel, selectBodyshop } from "../../redux/user/user.selectors";
import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
import {
  default as DateTimePicker,
  default as FormDateTimePicker
} from "../form-date-time-picker/form-date-time-picker.component";
import JobSearchSelect from "../job-search-select/job-search-select.component";
import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";
import { CalculateAllocationsTotals } from "../labor-allocations-table/labor-allocations-table.utility";
import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
import TimeTicketList from "../time-ticket-list/time-ticket-list.component";
import JobEmployeeAssignmentsContainer from "./../job-employee-assignments/job-employee-assignments.container";
import { PayrollLaborAllocationsTable } from "../labor-allocations-table/labor-allocations-table.payroll.component.jsx";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  authLevel: selectAuthLevel
});
const mapDispatchToProps = () => ({});
export default connect(mapStateToProps, mapDispatchToProps)(TimeTicketModalComponent);

export function TimeTicketModalComponent({
  form,
  bodyshop,
  authLevel,
  employeeAutoCompleteOptions,
  disabled,
  employeeSelectDisabled,
  lineTicketRefreshKey,
  isOpen
}) {
  const { t } = useTranslation();

  const {
    treatments: { Enhanced_Payroll }
  } = useTreatmentsWithConfig({
    attributes: {},
    names: ["Enhanced_Payroll"],
    splitKey: bodyshop?.imexshopid
  });

  const [loadLineTicketData, { loading, data: lineTicketData, refetch }] = useLazyQuery(GET_LINE_TICKET_BY_PK, {
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only"
  });

  const watchedJobId = Form.useWatch("jobid", form);

  // Local mutable memory: dedupe jobid-driven fetches without re-rendering.
  const lastFetchedJobIdRef = useRef(null);

  // Reset + fetch when job changes (never during render)
  useEffect(() => {
    if (!isOpen) {
      lastFetchedJobIdRef.current = null;
      return;
    }

    if (!watchedJobId) {
      lastFetchedJobIdRef.current = null;
      return;
    }

    if (lastFetchedJobIdRef.current === watchedJobId) return;

    lastFetchedJobIdRef.current = watchedJobId;
    loadLineTicketData({ variables: { id: watchedJobId } });
  }, [isOpen, watchedJobId, loadLineTicketData]);

  // Force refresh (e.g., after Save / external refresh bump)
  useEffect(() => {
    if (!isOpen) return;
    if (!watchedJobId) return;
    if (lineTicketRefreshKey === 0) return;

    loadLineTicketData({ variables: { id: watchedJobId } });
  }, [lineTicketRefreshKey, isOpen, watchedJobId, loadLineTicketData]);

  const CostCenterSelect = ({ emps, value, ...props }) => (
    <Select
      value={value === "timetickets.labels.shift" ? t(value) : value}
      {...props}
      disabled={value === "timetickets.labels.shift" || disabled}
      options={
        emps &&
        emps.rates.map((item) => ({
          value: item.cost_center,
          label:
            item.cost_center === "timetickets.labels.shift"
              ? t(item.cost_center)
              : bodyshop.cdk_dealerid ||
                  bodyshop.pbs_serialnumber ||
                  bodyshop.rr_dealerid ||
                  Enhanced_Payroll.treatment === "on"
                ? t(`joblines.fields.lbr_types.${item.cost_center.toUpperCase()}`)
                : item.cost_center
        }))
      }
    />
  );

  const MemoInput = ({ value, ...props }) => (
    <Input value={value?.startsWith("timetickets.labels") ? t(value) : value} {...props} />
  );

  return (
    <div>
      <LayoutFormRow grow noDivider>
        <Form.Item shouldUpdate>
          {() => (
            <Form.Item
              name="jobid"
              label={t("timetickets.fields.ro_number")}
              rules={[
                {
                  required: form.getFieldValue("cost_center") !== "timetickets.labels.shift"
                }
              ]}
            >
              <JobSearchSelect
                convertedOnly={true}
                notExported={!bodyshop.tt_allow_post_to_invoiced}
                notInvoiced={!bodyshop.tt_allow_post_to_invoiced}
              />
            </Form.Item>
          )}
        </Form.Item>

        <Form.Item
          label={t("timetickets.fields.date")}
          name="date"
          rules={[
            {
              required: true
            }
          ]}
        >
          <DateTimePicker isDateOnly />
        </Form.Item>

        <Form.Item
          name="employeeid"
          label={t("timetickets.fields.employee")}
          rules={[
            {
              required: true
            }
          ]}
        >
          <EmployeeSearchSelect
            disabled={employeeSelectDisabled || disabled}
            options={employeeAutoCompleteOptions}
            onSelect={(value) => {
              const emps = employeeAutoCompleteOptions?.find((e) => e.id === value);
              form.setFieldsValue({ flat_rate: emps?.flat_rate });
            }}
          />
        </Form.Item>

        <Form.Item shouldUpdate={(prev, cur) => prev.employeeid !== cur.employeeid}>
          {() => {
            const employeeId = form.getFieldValue("employeeid");
            const emps = employeeAutoCompleteOptions?.find((e) => e.id === employeeId);

            return (
              <Form.Item
                name="cost_center"
                label={t("timetickets.fields.cost_center")}
                valuePropName="value"
                rules={[{ required: true }]}
              >
                <CostCenterSelect emps={emps} />
              </Form.Item>
            );
          }}
        </Form.Item>

        <Form.Item name="flat_rate" label={t("timetickets.fields.flat_rate")} valuePropName="checked" hidden>
          <Switch />
        </Form.Item>
      </LayoutFormRow>

      <LayoutFormRow>
        <Form.Item shouldUpdate>
          {() => (
            <Form.Item
              label={t("timetickets.fields.productivehrs")}
              name="productivehrs"
              rules={[
                ({ getFieldValue }) => ({
                  validator(rule, value) {
                    if (!bodyshop.tt_enforce_hours_for_tech_console) return Promise.resolve();
                    if (!value || getFieldValue("cost_center") === null || !lineTicketData) return Promise.resolve();

                    const totals = CalculateAllocationsTotals(
                      bodyshop,
                      lineTicketData.joblines,
                      lineTicketData.timetickets,
                      lineTicketData.jobs_by_pk.lbr_adjustments
                    );

                    const fieldTypeToCheck = bodyshopHasDmsKey(bodyshop) ? "mod_lbr_ty" : "cost_center";

                    const costCenterDiff =
                      Math.round(
                        (totals.find((total) => total[fieldTypeToCheck] === getFieldValue("cost_center"))?.difference ||
                          0) * 10
                      ) / 10;

                    if (value > costCenterDiff) {
                      return Promise.reject(t("timetickets.validation.hoursenteredmorethanavailable"));
                    }
                    return Promise.resolve();
                  }
                }),
                {
                  required: form.getFieldValue("cost_center") !== "timetickets.labels.shift"
                }
              ]}
            >
              <InputNumber precision={1} />
            </Form.Item>
          )}
        </Form.Item>

        <Form.Item
          dependencies={["productivehrs"]}
          label={t("timetickets.fields.actualhrs")}
          name="actualhrs"
          rules={[
            ({ getFieldValue }) => ({
              async validator(rule, value) {
                if (value) {
                  const prodHrs = getFieldValue("productivehrs");
                  if (prodHrs < 0 && value !== 0) {
                    return Promise.reject(t("timetickets.labels.zeroactualnegativeprod"));
                  }
                }
                return Promise.resolve();
              }
            })
          ]}
        >
          <InputNumber min={0} precision={1} />
        </Form.Item>

        <>
          <Form.Item label={t("timetickets.fields.clockon")} name="clockon">
            <FormDateTimePicker
              minuteStep={5}
              disabled={
                disabled ||
                !HasRbacAccess({
                  bodyshop,
                  authLevel,
                  action: "timetickets:shiftedit"
                })
              }
            />
          </Form.Item>

          <Form.Item
            label={t("timetickets.fields.clockoff")}
            name="clockoff"
            rules={[
              ({ getFieldValue }) => ({
                validator(rule, value) {
                  const clockon = getFieldValue("clockon");
                  if (!value) return Promise.resolve();
                  if (!clockon && value) return Promise.reject(t("timetickets.validation.clockoffwithoutclockon"));
                  if (value?.isSameOrAfter && !value.isSameOrAfter(clockon)) {
                    return Promise.reject(t("timetickets.validation.clockoffmustbeafterclockon"));
                  }
                  return Promise.resolve();
                }
              })
            ]}
          >
            <FormDateTimePicker
              minuteStep={5}
              disabled={
                disabled ||
                !HasRbacAccess({
                  bodyshop,
                  authLevel,
                  action: "timetickets:shiftedit"
                })
              }
            />
          </Form.Item>
        </>

        <Form.Item label={t("timetickets.fields.memo")} name="memo">
          <MemoInput />
        </Form.Item>

        <Form.Item shouldUpdate>
          {() => (
            <Form.Item
              name="ciecacode"
              label={t("timetickets.fields.ciecacode")}
              rules={[
                {
                  required: form.getFieldValue("cost_center") !== "timetickets.labels.shift"
                }
              ]}
            >
              <Input disabled />
            </Form.Item>
          )}
        </Form.Item>
      </LayoutFormRow>

      <LaborAllocationContainer
        jobid={watchedJobId || null}
        loading={loading}
        lineTicketData={lineTicketData}
        bodyshop={bodyshop}
        refetch={refetch}
      />
    </div>
  );
}

export function LaborAllocationContainer({
  jobid,
  loading,
  lineTicketData,
  hideTimeTickets = false,
  bodyshop,
  refetch
}) {
  const { t } = useTranslation();
  const {
    treatments: { Enhanced_Payroll }
  } = useTreatmentsWithConfig({
    attributes: {},
    names: ["Enhanced_Payroll"],
    splitKey: bodyshop?.imexshopid
  });

  if (loading) return <LoadingSkeleton />;
  if (!lineTicketData) return null;
  if (!jobid) return null;

  return (
    <Space orientation="vertical" style={{ width: "100%" }}>
      <Card style={{ height: "100%" }} title={t("jobs.labels.employeeassignments")}>
        <JobEmployeeAssignmentsContainer job={lineTicketData.jobs_by_pk} />
      </Card>

      {Enhanced_Payroll.treatment === "on" ? (
        <PayrollLaborAllocationsTable
          jobId={jobid}
          joblines={lineTicketData.joblines}
          timetickets={lineTicketData.timetickets}
          adjustments={lineTicketData.jobs_by_pk.lbr_adjustments}
          refetch={refetch}
          bodyshop={bodyshop}
        />
      ) : (
        <LaborAllocationsTable
          jobId={jobid}
          joblines={lineTicketData.joblines}
          timetickets={lineTicketData.timetickets}
          adjustments={lineTicketData.jobs_by_pk.lbr_adjustments}
        />
      )}

      {!hideTimeTickets && (
        <TimeTicketList loading={loading} timetickets={jobid ? lineTicketData.timetickets : []} techConsole />
      )}
    </Space>
  );
}