import { DeleteFilled, DownOutlined, ReloadOutlined } from "@ant-design/icons";
import {
  Button,
  Card,
  Col,
  Divider,
  Dropdown,
  Form,
  Input,
  InputNumber,
  Row,
  Select,
  Space,
  Statistic,
  Switch,
  Tooltip,
  Typography
} from "antd";
import Dinero from "dinero.js";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { determineDmsType } from "../../utils/determineDMSType";
import { selectBodyshop } from "../../redux/user/user.selectors";
import i18n from "../../translations/i18n";
import dayjs from "../../utils/day";
import DmsCdkMakes from "../dms-cdk-makes/dms-cdk-makes.component";
import DmsCdkMakesRefetch from "../dms-cdk-makes/dms-cdk-makes.refetch.component";
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import { useSocket } from "../../contexts/SocketIO/useSocket";
import { useSplitTreatments } from "@splitsoftware/splitio-react";
import { useEffect, useMemo, useState } from "react";

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

export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
  const {
    treatments: { Fortellis }
  } = useSplitTreatments({
    attributes: {},
    names: ["Fortellis"],
    splitKey: bodyshop.imexshopid
  });

  const [form] = Form.useForm();
  const { t } = useTranslation();
  const { socket: wsssocket } = useSocket();

  // Figure out DMS once and reuse
  const dms = useMemo(() => determineDmsType(bodyshop), [bodyshop]);

  // ---------------- RR Advisors (unchanged behavior) ----------------
  const [advisors, setAdvisors] = useState([]);
  const [advLoading, setAdvLoading] = useState(false);

  // Normalize advisor fields coming from various shapes
  const getAdvisorNumber = (a) => a?.advisorId;
  const getAdvisorLabel = (a) => `${a?.firstName || ""} ${a?.lastName || ""}`.trim();

  const fetchRrAdvisors = (refresh = false) => {
    if (!wsssocket) return;
    setAdvLoading(true);

    // Listen for the server's broadcast
    const onResult = (payload) => {
      try {
        const list = payload?.result ?? payload ?? [];
        setAdvisors(Array.isArray(list) ? list : []);
      } finally {
        setAdvLoading(false);
        wsssocket.off("rr-get-advisors:result", onResult);
      }
    };

    wsssocket.once("rr-get-advisors:result", onResult);

    // Emit with refresh flag: server will bypass/rebuild cache when true
    wsssocket.emit("rr-get-advisors", { departmentType: "B", refresh }, (ack) => {
      if (ack?.ok) {
        const list = ack.result ?? [];
        setAdvisors(Array.isArray(list) ? list : []);
      } else if (ack) {
        // Preserve original logging semantics
        console.error("Something went wrong fetching DMS Advisors");
      }
      setAdvLoading(false);
      wsssocket.off("rr-get-advisors:result", onResult);
    });
  };

  useEffect(() => {
    if (dms === "rr") fetchRrAdvisors(false);
  }, [dms, bodyshop?.id]);

  // ---------------- Payers helpers (non-RR) ----------------
  const handlePayerSelect = (value, index) => {
    form.setFieldsValue({
      payers: (form.getFieldValue("payers") || []).map((payer, mapIndex) => {
        if (index !== mapIndex) return payer;
        const cdkPayer =
          bodyshop.cdk_configuration.payers && bodyshop.cdk_configuration.payers.find((i) => i.name === value);
        if (!cdkPayer) return payer;

        return {
          ...cdkPayer,
          dms_acctnumber: cdkPayer.dms_acctnumber,
          controlnumber: job?.[cdkPayer.control_type]
        };
      })
    });
  };

  // ---------------- Submit (RR precedence preserved) ----------------
  const handleFinish = (values) => {
    // RR takes precedence regardless of Fortellis split
    if (dms === "rr") {
      // values will include advisorNo (and makeOverride if provided)
      wsssocket.emit("rr-export-job", {
        bodyshopId: bodyshop?.id,
        jobId: job.id,
        job,
        txEnvelope: values
      });
    } else if (Fortellis.treatment === "on") {
      // Fallback to existing Fortellis behavior
      wsssocket.emit("fortellis-export-job", {
        jobid: job.id,
        txEnvelope: { ...values, SubscriptionID: bodyshop.cdk_dealerid }
      });
    } else {
      // CDK/PBS/etc.
      socket.emit(`${dms}-export-job`, { jobid: job.id, txEnvelope: values });
    }

    // Scroll logs into view (original behavior)
    logsRef?.current?.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <Card title={t("jobs.labels.dms.postingform")}>
      <Form
        form={form}
        layout="vertical"
        onFinish={handleFinish}
        style={{ width: "100%" }}
        initialValues={{
          story: `${t("jobs.labels.dms.defaultstory", {
            ro_number: job.ro_number,
            ownr_nm: `${job.ownr_fn || ""} ${job.ownr_ln || ""} ${job.ownr_co_nm || ""}`.trim(),
            ins_co_nm: job.ins_co_nm || "N/A",
            clm_po: `${job.clm_no ? `${job.clm_no} ` : ""}${job.po_number || ""}`
          }).trim()}.${
            job.area_of_damage?.impact1
              ? " " +
                t("jobs.labels.dms.damageto", {
                  area_of_damage: (job.area_of_damage && job.area_of_damage.impact1.padStart(2, "0")) || "UNKNOWN"
                })
              : ""
          }`.slice(0, 239),
          inservicedate: dayjs(
            `${
              (job.v_model_yr &&
                (job.v_model_yr < 100
                  ? job.v_model_yr >= (dayjs().year() + 1) % 100
                    ? 1900 + parseInt(job.v_model_yr, 10)
                    : 2000 + parseInt(job.v_model_yr, 10)
                  : job.v_model_yr)) ||
              2019
            }-01-01`
          )
        }}
      >
        {/* TOP ROW — bottom-aligned so the Refresh button sits flush */}
        <Row gutter={[16, 12]} align="bottom">
          {dms !== "rr" && (
            <Col xs={24} sm={12} md={8} lg={6}>
              <Form.Item
                name="journal"
                label={t("jobs.fields.dms.journal")}
                initialValue={bodyshop.cdk_configuration?.default_journal}
                rules={[{ required: true }]}
              >
                <Input />
              </Form.Item>
            </Col>
          )}

          {dms === "rr" && (
            <>
              {/* Advisor + inline Refresh (restores original behavior with better UX) */}
              <Col xs={24} sm={24} md={12} lg={8}>
                <Form.Item name="advisorNo" label={t("jobs.fields.dms.advisor")} rules={[{ required: true }]}>
                  <Space.Compact block>
                    <Select
                      style={{ flex: 1 }}
                      loading={advLoading}
                      allowClear
                      placeholder={t("general.actions.select", "Select...")}
                      popupMatchSelectWidth
                      options={advisors
                        .map((a) => {
                          const value = getAdvisorNumber(a);
                          if (value == null) return null;
                          return { value: String(value), label: getAdvisorLabel(a) || String(value) };
                        })
                        .filter(Boolean)}
                      notFoundContent={advLoading ? t("general.loading") : t("general.none")}
                    />
                    <Tooltip title={t("general.actions.refresh")}>
                      <Button
                        aria-label={t("general.actions.refresh")}
                        icon={<ReloadOutlined />}
                        onClick={() => fetchRrAdvisors(true)}
                        loading={advLoading}
                      />
                    </Tooltip>
                  </Space.Compact>
                </Form.Item>
              </Col>

              {/* Make Override (RR only, beside Advisor) */}
              <Col xs={24} sm={12} md={12} lg={8}>
                <Form.Item name="makeOverride" label={t("jobs.fields.dms.make_override")}>
                  <Input allowClear placeholder={t("general.actions.optional")} />
                </Form.Item>
              </Col>
            </>
          )}

          <Col xs={12} sm={8} md={6} lg={4}>
            <Form.Item name="kmin" label={t("jobs.fields.kmin")} initialValue={job?.kmin} rules={[{ required: true }]}>
              <InputNumber style={{ width: "100%" }} disabled />
            </Form.Item>
          </Col>

          <Col xs={12} sm={8} md={6} lg={4}>
            <Form.Item
              name="kmout"
              label={t("jobs.fields.kmout")}
              initialValue={job?.kmout}
              rules={[{ required: true }]}
            >
              <InputNumber style={{ width: "100%" }} disabled />
            </Form.Item>
          </Col>
        </Row>

        {/* CDK vehicle details (unchanged behavior) */}
        {bodyshop.cdk_dealerid && (
          <>
            <Row gutter={[16, 12]}>
              <Col xs={24} sm={12} md={8}>
                <Form.Item name="dms_make" label={t("jobs.fields.dms.dms_make")} rules={[{ required: true }]}>
                  <Input />
                </Form.Item>
              </Col>
              <Col xs={24} sm={12} md={8}>
                <Form.Item name="dms_model" label={t("jobs.fields.dms.dms_model")} rules={[{ required: true }]}>
                  <Input />
                </Form.Item>
              </Col>
              <Col xs={24} sm={12} md={8}>
                <Form.Item name="inservicedate" label={t("jobs.fields.dms.inservicedate")}>
                  <DateTimePicker isDateOnly />
                </Form.Item>
              </Col>
            </Row>

            <Row gutter={[16, 12]} align="middle">
              <Col>
                <DmsCdkMakes form={form} job={job} />
              </Col>
              <Col>
                <DmsCdkMakesRefetch />
              </Col>
              <Col>
                <Form.Item name="dms_unsold" label={t("jobs.fields.dms.dms_unsold")} initialValue={false}>
                  <Switch />
                </Form.Item>
              </Col>
              <Col>
                <Form.Item
                  name="dms_model_override"
                  label={t("jobs.fields.dms.dms_model_override")}
                  initialValue={false}
                >
                  <Switch />
                </Form.Item>
              </Col>
            </Row>
          </>
        )}

        <Row gutter={[16, 12]}>
          <Col span={24}>
            <Form.Item name="story" label={t("jobs.fields.dms.story")} rules={[{ required: true }]}>
              <Input.TextArea maxLength={240} />
            </Form.Item>
          </Col>
        </Row>

        <Divider />

        {/* Totals (unchanged) */}
        <Space size="large" wrap align="center" style={{ marginBottom: 16 }}>
          <Statistic
            title={t("jobs.fields.ded_amt")}
            value={Dinero(job.job_totals.totals.custPayable.deductible).toFormat()}
          />
          <Statistic
            title={t("jobs.labels.total_cust_payable")}
            value={Dinero(job.job_totals.totals.custPayable.total).toFormat()}
          />
          <Statistic
            title={t("jobs.labels.net_repairs")}
            value={Dinero(job.job_totals.totals.net_repairs).toFormat()}
          />
        </Space>

        {/* Non-RR payers list (parity with original) */}
        {dms !== "rr" && (
          <>
            <Divider />
            <Form.List name={["payers"]}>
              {(fields, { add, remove }) => (
                <div>
                  {fields.map((field, index) => (
                    <Card
                      key={field.key}
                      size="small"
                      style={{ marginBottom: 12 }}
                      title={`${t("jobs.fields.dms.payer.payer_type")} #${index + 1}`}
                      extra={
                        <Tooltip title={t("jobs.actions.remove", "Remove")}>
                          <Button
                            type="text"
                            danger
                            icon={<DeleteFilled />}
                            aria-label={t("jobs.actions.remove", "Remove")}
                            onClick={() => remove(field.name)}
                          />
                        </Tooltip>
                      }
                    >
                      <Row gutter={[16, 8]} align="middle">
                        <Col xs={24} sm={12} md={8} lg={6}>
                          <Form.Item
                            label={t("jobs.fields.dms.payer.name")}
                            name={[field.name, "name"]}
                            rules={[{ required: true }]}
                          >
                            <Select style={{ minWidth: "15rem" }} onSelect={(value) => handlePayerSelect(value, index)}>
                              {bodyshop.cdk_configuration?.payers?.map((payer) => (
                                <Select.Option key={payer.name}>{payer.name}</Select.Option>
                              ))}
                            </Select>
                          </Form.Item>
                        </Col>

                        <Col xs={24} sm={12} md={8} lg={6}>
                          <Form.Item
                            label={t("jobs.fields.dms.payer.dms_acctnumber")}
                            name={[field.name, "dms_acctnumber"]}
                            rules={[{ required: true }]}
                          >
                            <Input disabled />
                          </Form.Item>
                        </Col>

                        <Col xs={24} sm={12} md={8} lg={5}>
                          <Form.Item
                            label={t("jobs.fields.dms.payer.amount")}
                            name={[field.name, "amount"]}
                            rules={[{ required: true }]}
                          >
                            <CurrencyInput min={0} />
                          </Form.Item>
                        </Col>

                        <Col xs={24} sm={12} md={10} lg={7}>
                          <Form.Item
                            label={
                              <div>
                                {t("jobs.fields.dms.payer.controlnumber")}{" "}
                                <Dropdown
                                  trigger={["click"]}
                                  menu={{
                                    items:
                                      bodyshop.cdk_configuration.controllist?.map((key, idx) => ({
                                        key: idx,
                                        label: key.name,
                                        onClick: () => {
                                          form.setFieldsValue({
                                            payers: (form.getFieldValue("payers") || []).map((row, mapIndex) => {
                                              if (index !== mapIndex) return row;
                                              return { ...row, controlnumber: key.controlnumber };
                                            })
                                          });
                                        }
                                      })) ?? []
                                  }}
                                >
                                  {/* Anchor trigger restored (was missing) */}
                                  <a href="#" onClick={(e) => e.preventDefault()}>
                                    <DownOutlined />
                                  </a>
                                </Dropdown>
                              </div>
                            }
                            name={[field.name, "controlnumber"]}
                            rules={[{ required: true }]}
                          >
                            <Input />
                          </Form.Item>
                        </Col>

                        <Col xs={24}>
                          <Form.Item shouldUpdate noStyle>
                            {() => {
                              const payers = form.getFieldValue("payers");
                              const row = payers?.[index];
                              const cdkPayer =
                                bodyshop.cdk_configuration.payers &&
                                bodyshop.cdk_configuration.payers.find((i) => i && row && i.name === row.name);
                              if (i18n.exists(`jobs.fields.${cdkPayer?.control_type}`))
                                return <div>{cdkPayer && t(`jobs.fields.${cdkPayer?.control_type}`)}</div>;
                              else if (i18n.exists(`jobs.fields.dms.control_type.${cdkPayer?.control_type}`)) {
                                return (
                                  <div>{cdkPayer && t(`jobs.fields.dms.control_type.${cdkPayer?.control_type}`)}</div>
                                );
                              } else {
                                return null;
                              }
                            }}
                          </Form.Item>
                        </Col>
                      </Row>
                    </Card>
                  ))}
                  <Form.Item>
                    <Button
                      disabled={!(fields.length < 3)}
                      onClick={() => {
                        if (fields.length < 3) add();
                      }}
                      style={{ width: "100%" }}
                    >
                      {t("jobs.actions.dms.addpayer")}
                    </Button>
                  </Form.Item>
                </div>
              )}
            </Form.List>
          </>
        )}

        {/* Validation gates & summary (unchanged logic) */}
        <Form.Item shouldUpdate>
          {() => {
            // 1) Sum allocated payers
            let totalAllocated = Dinero();
            const payers = form.getFieldValue("payers") || [];
            payers.forEach((payer) => {
              totalAllocated = totalAllocated.add(Dinero({ amount: Math.round((payer?.amount || 0) * 100) }));
            });

            // 2) Subtotal from socket.allocationsSummary (existing behavior)
            const totals =
              socket && socket.allocationsSummary
                ? socket.allocationsSummary.reduce(
                    (acc, val) => ({
                      totalSale: acc.totalSale.add(Dinero(val.sale)),
                      totalCost: acc.totalCost.add(Dinero(val.cost))
                    }),
                    { totalSale: Dinero(), totalCost: Dinero() }
                  )
                : { totalSale: Dinero(), totalCost: Dinero() };

            const discrep = totals ? totals.totalSale.subtract(totalAllocated) : Dinero();

            // 3) Validation gates
            const advisorOk = dms !== "rr" || !!form.getFieldValue("advisorNo");

            // Require at least one complete payer row for non-RR
            const payersOk =
              dms === "rr" ||
              (payers.length > 0 &&
                payers.every((p) => p?.name && p.dms_acctnumber && (p.amount ?? "") !== "" && p.controlnumber));

            // 4) Disable rules:
            // - For non-RR: must have summary and zero discrepancy
            // - For RR: ignore discrepancy rule, but require advisor
            const nonRrDiscrepancyGate = dms !== "rr" && (socket.allocationsSummary ? discrep.getAmount() !== 0 : true);

            const disablePost = !advisorOk || !payersOk || nonRrDiscrepancyGate;

            return (
              <Space size="large" wrap align="center">
                <Statistic
                  title={t("jobs.labels.subtotal")}
                  value={(totals ? totals.totalSale : Dinero()).toFormat()}
                />
                <Typography.Title>-</Typography.Title>
                <Statistic title={t("jobs.labels.dms.totalallocated")} value={totalAllocated.toFormat()} />
                <Typography.Title>=</Typography.Title>
                <Statistic
                  title={t("jobs.labels.dms.notallocated")}
                  valueStyle={{ color: discrep.getAmount() === 0 ? "green" : "red" }}
                  value={discrep.toFormat()}
                />
                <Button disabled={disablePost} htmlType="submit">
                  {t("jobs.actions.dms.post")}
                </Button>
              </Space>
            );
          }}
        </Form.Item>
      </Form>
    </Card>
  );
}