import React, { useEffect, useState, useRef } from "react";
import {
  Tag,
  Button,
  Card,
  Row,
  Col,
  Table,
  Form,
  Input,
  Select,
  Radio,
  DatePicker,
  Flex,
  message,
  Spin,
  Modal,
  Popover,
  Image,
} from "antd";
import dayjs from "dayjs";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { NS_SAFETY_EVAL_BUSINESS } from "~/enumerate/namespace";
import {EVAL_TYPE_OPTIONS, EVAL_TYPE_MAP} from '~/enumerate/constant';
import { QUALIFICATION_INDUSTRY_OPTIONS } from "~/enumerate/enterpriseOptions";
import { tools } from "@cqsjjb/jjb-common-lib";
import AttachmentUpload from "~/components/AttachmentUpload";
import LayoutFooterPortal from "~/components/LayoutFooterPortal";
import { fillDocxTemplate } from "~/utils/fillDocxTemplate";

const { router } = tools;
const { TextArea } = Input;

/** 风险分析记录表 docx 模板 */
const RISK_TEMPLATE_URL = "https://test-dragon-yf-pub.oss-cn-hangzhou.aliyuncs.com/jjb/6a86d268e4b072649bfb8a84.docx";

/** 两选项单选回显：1 勾选前者，2 勾选后者 */
const twoCheck = (val, yes, no) =>
  val === 1
    ? `☑${yes} □${no}`
    : val === 2
      ? `□${yes} ☑${no}`
      : `□${yes} □${no}`;

const RISK_LEVEL_CHECK = {
  1: "☑ 低度    □ 中度    □ 高度",
  2: "□ 低度    ☑ 中度    □ 高度",
  3: "□ 低度    □ 中度    ☑ 高度",
};



const RiskAnalysisContent = ({ readOnly, ...props }) => {
  const [form] = Form.useForm();

  const projectId = router.query?.id;

  const {
    safetyEvalBusiness,
    evalRiskAnalysisGet,
    evalRiskAnalysisSave,
    evalRiskAnalysisPeopleSave,
    evalSignTaskSave,
  } = props;
  const {
    riskAnalysisLoading,
    evalProjectDetailLoading,
    riskAnalysisSaveLoading,
    evalSignTaskSaveLoading,
    evalProjectDetailData,
  } = safetyEvalBusiness || {};

  // 查询风险分析数据回显
  const [participantModalOpen, setParticipantModalOpen] = useState(false);
  const [selectedParticipantIds, setSelectedParticipantIds] = useState([]);
  const [signingIndex, setSigningIndex] = useState(null);
  const addParticipantRef = useRef(null);

  const fetchData = async () => {
    if (!projectId) return;

    const res = await evalRiskAnalysisGet({ projectId });
    if (res?.success !== false && res?.data) {
      form.setFieldsValue({
        ...res.data,
        riskFileUrl: res.data.riskFileUrl? JSON.parse(res.data.riskFileUrl) :undefined,
        analysisDate: res.data.analysisDate
          ? dayjs(res.data.analysisDate)
          : undefined,
      });
    } else {
      form.setFieldsValue({
        evalTypeCode: evalProjectDetailData.evalTypeCode,
        projectName: evalProjectDetailData.projectName,
        industryName: evalProjectDetailData.industryCode,
      });
    }
  };

  useEffect(() => {
    if (evalProjectDetailData?.id) {
      fetchData();
    }
  }, [projectId, evalProjectDetailData?.id]);

  // 保存
  const handleSave = async (statusCode, noNeedfresh) => {
    const values = await form.validateFields();

    const { analysisDate, ...rest } = values;
    // 检查是否有文件正在上传中
    const fileList = rest.riskFileUrl || [];
    if (fileList.some((f) => f.status === "uploading")) {
      message.warning("文件上传中，请稍后再保存");
      return;
    }
    if (statusCode === 2 && !fileList.length) {
      message.warning("请上传风险分析表附件");
      return;
    }
    // if (statusCode === 2&&!rest.participants?.length) {
    //   message.warning("请选择风险分析人员");
    //   return;
    // }
    const res = await evalRiskAnalysisSave({
      ...rest,
      projectId,
      statusCode,
      riskFileUrl: rest.riskFileUrl? JSON.stringify(rest.riskFileUrl) :undefined,
      analysisDate: analysisDate
        ? analysisDate.format("YYYY-MM-DD")
        : undefined,
    });
    if (res?.success) {
      let peopleSaved = true;
      if (res.data && rest.participants?.length) {
        // validateFields 仅返回已注册 Form.Item 的字段，personnelId 需从表单完整数据中取
        const participantList = form.getFieldValue("participants") || [];
        const result = await evalRiskAnalysisPeopleSave(
          participantList.map((item) => {
            return {
              ...item,
              riskId: res.data.id,
            };
          }),
        );
        peopleSaved = result?.success;
      }
      if (!noNeedfresh&&peopleSaved) {
        message.success(statusCode === 2 ? "风险分析已完成" : "已暂存");
        props.getDetail();
      }
    }
  };

  // 发起APP签字
  const handleSignApp = async (fieldName) => {
    await handleSave(1, true);
    const participant = form.getFieldValue(["participants", fieldName]);
    if (!participant?.personnelId) {
      message.warning("该人员信息不完整，请先保存后再发起签字");
      return;
    }
    setSigningIndex(fieldName);
    try {
      const res = await evalSignTaskSave({
        projectId,
        nodeCode: "RISK_ANALYSIS",
        bizRefId: form.getFieldValue("id") || undefined,
        signerPersonnelId: participant.personnelId,
        taskTitle: "风险分析签字",
        taskStatusCode: 1,
      });
      if (res?.success) {
        message.success("已发起APP签字");
        form.setFieldValue(["participants", fieldName, "signStatusCode"], 1);
      }
    } finally {
      setSigningIndex(null);
    }
  };

  // 导出Word：根据模板填充当前表单数据（已签字人员注入签字图片）
  const handleExport = async () => {
    const values = form.getFieldsValue(true);
    const industryText = String(values.industryName || "")
      .split(",")
      .filter(Boolean)
      .map(
        (code) =>
          QUALIFICATION_INDUSTRY_OPTIONS.find((o) => o.value === code)?.label,
      )
      .filter(Boolean)
      .join("、");
    // 签字单元格仅内嵌已签字人员的签字图片，逐张换行展示
    const images = [];
    const signTokens = [];
    for (const p of values.participants || []) {
      if (p.signStatusCode !== 2 || !p.signFileUrl) continue;
      try {
        const blob = await (await fetch(p.signFileUrl)).blob();
        if (["image/png", "image/jpeg"].includes(blob.type)) {
          const token = `§SIGN_IMG_${images.length}§`;
          images.push({ token, blob });
          signTokens.push(token);
        }
      } catch {
        // 图片加载失败时跳过
      }
    }
    const data = {
      projectName: values.projectName || "",
      analysisDate: values.analysisDate
        ? values.analysisDate.format("YYYY年MM月DD日")
        : "    年    月    日",
      evalTypeText: EVAL_TYPE_MAP[values.evalTypeCode] || "",
      industryText,
      bizScopeCheck: twoCheck(values.inBizScopeFlag, "是", "否"),
      evalScope: values.evalScope || "",
      unitOverview: values.unitOverview || "",
      industryRiskDesc: values.industryRiskDesc || "",
      staffMatchCheck: twoCheck(values.staffMatchCode, "满足", "不满足"),
      needExpertCheck:
        values.needExpertCode === 1
          ? "□不需要 ☑需要"
          : values.needExpertCode === 2
            ? "☑不需要 □需要"
            : "□不需要 □需要",
      capabilityCheck: twoCheck(values.capabilityCode, "是", "否"),
      feasibleCheck: twoCheck(values.feasibleCode, "可行", "不可行"),
      economicCheck: twoCheck(values.economicCode, "有经济效益", "无经济效益"),
      riskLevelCheck:
        RISK_LEVEL_CHECK[values.riskLevelCode] || "□ 低度    □ 中度    □ 高度",
      signContractCheck: twoCheck(values.signContractCode, "签合同", "不签合同"),
      participantsText: signTokens.join(""),
    };
    try {
      await fillDocxTemplate(
        RISK_TEMPLATE_URL,
        data,
        `安全评价风险分析记录表${values.projectName ? `-${values.projectName}` : ""}.docx`,
        { download: true, images },
      );
      message.success("导出成功");
    } catch {
      message.error("导出失败，请重试");
    }
  };

  return (
    <Spin spinning={evalProjectDetailLoading || riskAnalysisLoading}>
      <div>
        <div className="pf-permission">
          <Tag color="blue" className="pf-tag">
            市场部经办人 / 市场部经理
          </Tag>
          <span className="pf-desc">
            市场部组织前置条件调查和风险分析，相关职能部门参与；市场部经理依据分析结果决定是否签订技术服务合同。
          </span>
        </div>
        <Card
          title="安全评价风险分析记录表"
          styles={{ header: { textAlign: "center" } }}
        >
          <Form form={form} layout="vertical" disabled={readOnly} scrollToFirstError>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item label="风险分析时间" name="analysisDate">
                  <DatePicker className="pf-w-full" allowClear />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="评价项目名称" name="projectName">
                  <Input
                    placeholder="请输入评价项目名称"
                    maxLength={50}
                    allowClear
                  />
                </Form.Item>
              </Col>
            </Row>

            <Row gutter={16}>
              <Col span={12}>
                <Form.Item label="评价类别" name="evalTypeCode">
                  <Select placeholder="请选择评价类别" allowClear>
                    {EVAL_TYPE_OPTIONS.map((opt) => (
                      <Select.Option key={opt.value} value={opt.value}>
                        {opt.label}
                      </Select.Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="所属行业"
                  name="industryName"
                  getValueProps={(value) => ({
                    value: value ? String(value).split(",") : [],
                  })}
                  getValueFromEvent={(value) =>
                    Array.isArray(value) ? value.join(",") : value
                  }
                >
                  <Select mode="multiple" placeholder="请选择所属行业" allowClear>
                    {QUALIFICATION_INDUSTRY_OPTIONS.map((opt) => (
                      <Select.Option key={opt.value} value={opt.value}>
                        {opt.label}
                      </Select.Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
            </Row>

            <Form.Item label="评价范围" name="evalScope">
              <TextArea
                rows={2}
                placeholder="明确本项目安全评价对象、装置、区域及委托范围"
                maxLength={200}
                showCount
              />
            </Form.Item>

            <Form.Item label="是否在公司资质业务范围内" name="inBizScopeFlag">
              <Radio.Group>
                <Radio value={1}>是</Radio>
                <Radio value={2}>否</Radio>
              </Radio.Group>
            </Form.Item>

            <Card
              type="inner"
              size="small"
              title="一、被评价单位基本概况"
              className="pf-section"
            >
              <Form.Item name="unitOverview">
                <TextArea
                  rows={4}
                  placeholder="填写项目简介、投资规模、地理位置、周边环境、主要设施及客户要求"
                  maxLength={500}
                  showCount
                />
              </Form.Item>
            </Card>

            <Card
              type="inner"
              size="small"
              title="二、项目行业风险特性分析"
              className="pf-section"
            >
              <Form.Item name="industryRiskDesc">
                <TextArea
                  rows={3}
                  placeholder="分析项目所属行业的主要危险、有害因素"
                  maxLength={500}
                  showCount
                />
              </Form.Item>
              <div className="pf-hint-blue">
                应结合项目行业特点、地理位置、周边环境和评价类别填写；非常规项目应通过风险分析会议形成记录。
              </div>
            </Card>

            <Card
              type="inner"
              size="small"
              title="三、评价机构符合情况"
              className="pf-section"
            >
              <Form.Item
                label="（1）评价人员专业构成是否满足该项目的评价需求"
                name="staffMatchCode"
              >
                <Radio.Group>
                  <Radio value={1}>满足</Radio>
                  <Radio value={2}>不满足</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item
                label="（2）是否需要聘请相关技术专家"
                name="needExpertCode"
              >
                <Radio.Group>
                  <Radio value={2}>不需要</Radio>
                  <Radio value={1}>需要</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item
                label="（3）是否有能力承担该项目的评价风险"
                name="capabilityCode"
              >
                <Radio.Group>
                  <Radio value={1}>是</Radio>
                  <Radio value={2}>否</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item label="（4）项目的可行性分析" name="feasibleCode">
                <Radio.Group>
                  <Radio value={1}>可行</Radio>
                  <Radio value={2}>不可行</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item label="（5）项目的经济性分析" name="economicCode">
                <Radio.Group>
                  <Radio value={1}>有经济效益</Radio>
                  <Radio value={2}>无经济效益</Radio>
                </Radio.Group>
              </Form.Item>
            </Card>

            <Card
              type="inner"
              size="small"
              title="风险分析结论"
              className="pf-section"
            >
              <Form.Item label="风险程度" name="riskLevelCode">
                <Radio.Group>
                  <Radio value={1}>低度</Radio>
                  <Radio value={2}>中度</Radio>
                  <Radio value={3}>高度</Radio>
                </Radio.Group>
              </Form.Item>
              <div className="pf-risk-note">
                中度：化工、金属非金属矿山、金属冶炼、陆地油气开采等行业评价项目。
              </div>
              <Form.Item label="合同签订" name="signContractCode">
                <Radio.Group>
                  <Radio value={1}>签合同</Radio>
                  <Radio value={2}>不签合同</Radio>
                </Radio.Group>
              </Form.Item>
              <div className="pf-hint-blue">
                系统建议：当前条件具备签约基础，最终结论由市场部经理批准。
              </div>
            </Card>

            <Card type="inner" size="small" title="参与风险分析人员签字" className="pf-section">
              <Form.List name="participants">
                {(fields, { add, remove }) => {
                  addParticipantRef.current = add;
                  return (
                    <>
                      <Table
                        dataSource={fields}
                        columns={[
                          {
                            title: "姓名",
                            dataIndex: "name",
                            render: (_, field) => {
                              const { key, ...fieldProps } = field;
                              return (
                                <Form.Item
                                  {...fieldProps}
                                  name={[field.name, "personnelName"]}
                                  noStyle
                                >
                                  <Input
                                    placeholder="姓名"
                                    disabled
                                    maxLength={20}
                                    allowClear
                                  />
                                </Form.Item>
                              );
                            },
                          },
                          {
                            title: "部门/岗位",
                            dataIndex: "deptName",
                            render: (_, field) => {
                              const { key, ...fieldProps } = field;
                              return (
                                <Form.Item
                                  {...fieldProps}
                                  name={[field.name, "deptName"]}
                                  noStyle
                                >
                                  <Input
                                    placeholder="部门/岗位"
                                    disabled
                                    maxLength={20}
                                    allowClear
                                  />
                                </Form.Item>
                              );
                            },
                          },
                          {
                            title: "分析意见",
                            dataIndex: "opinion",
                            render: (_, field) => {
                              const { key, ...fieldProps } = field;
                              return (
                                <Form.Item
                                  {...fieldProps}
                                  name={[field.name, "opinion"]}
                                  noStyle
                                >
                                  <Input
                                    placeholder="填写分析意见"
                                    maxLength={30}
                                    allowClear
                                  />
                                </Form.Item>
                              );
                            },
                          },
                          {
                            title: "签字状态",
                            render: (_, field) => {
                              const value = form.getFieldValue([
                                "participants",
                                field.name,
                                "signStatusCode",
                              ]);
                              const signFileUrl = form.getFieldValue([
                                "participants",
                                field.name,
                                "signFileUrl",
                              ]);
                              let text = "发起APP签字";

                              if (value === 1) {
                                text = "待APP签字";
                              }
                              if (value === 2) {
                                text = "已手写签字";
                              }

                              const btn = (
                                <Button
                                  size="small"
                                  loading={
                                    evalSignTaskSaveLoading &&
                                    signingIndex === field.name
                                  }
                                  disabled={value === 1 || value === 2 || readOnly}
                                  onClick={() => handleSignApp(field.name)}
                                >
                                  {text}
                                </Button>
                              );

                              // 已签字且有签字图片时，悬停展示签字图片（disabled 按钮不触发 hover，需用 span 包裹）
                              if (value === 2 && signFileUrl) {
                                return (
                                  <Popover
                                    placement="topRight"
                                    content={
                                      <Image
                                        className="pf-sign-img"
                                        src={signFileUrl}
                                        alt="签字图片"
                                      />
                                    }
                                  >
                                    <span>{btn}</span>
                                  </Popover>
                                );
                              }
                              return btn;
                            },
                          },
                          {
                            title: "操作",
                            render: (_, field) => (
                              <Button
                                type="link"
                                danger
                                size="small"
                                disabled={readOnly}
                                onClick={() => remove(field.name)}
                              >
                                删除
                              </Button>
                            ),
                          },
                        ]}
                        rowKey={(_, index) => index}
                        pagination={false}
                      />
                      {!readOnly && (
                        <Button
                          type="dashed"
                          size="small"
                          style={{ marginTop: 8 }}
                          onClick={() => {
                            setSelectedParticipantIds([]);
                            setParticipantModalOpen(true);
                          }}
                        >
                          ＋ 添加参与人员
                        </Button>
                      )}
                    </>
                  );
                }}
              </Form.List>
            </Card>

            <AttachmentUpload
              name="riskFileUrl"
              style={{ marginBottom: 0 }}
              label="风险分析表附件"
              accept=".pdf,.docx,.jpg,.png"
              maxCount={10}
              disabled={readOnly}
              extra="支持 PDF、Word、JPG、PNG 格式。上传后可替换修改，系统保留当前归档文件信息"
            />
          </Form>
        </Card>

        

        <Modal
          title="选择参与人员"
          width={650}
          open={participantModalOpen}
          onCancel={() => setParticipantModalOpen(false)}
          onOk={() => {
            const selected = (evalProjectDetailData?.participants || []).filter(
              (p) => selectedParticipantIds.includes(p.id),
            );
            selected.forEach((p) => {
              addParticipantRef.current?.({
                personnelId: p.id,
                personnelName: p.name,
                deptName: p.deptName,
                opinion: "",
                projectId,
              });
            });
            setParticipantModalOpen(false);
          }}
        >
          <Table
            dataSource={(() => {
              const existing = (form.getFieldValue("participants") || []).map(
                (p) => p.personnelName,
              );
              return (evalProjectDetailData?.participants || []).filter(
                (p) => !existing.includes(p.name),
              );
            })()}
            rowKey="id"
            rowSelection={{
              type: "checkbox",
              selectedRowKeys: selectedParticipantIds,
              onChange: (keys) => setSelectedParticipantIds(keys),
              getCheckboxProps: (record) => ({
                disabled: false,
              }),
            }}
            columns={[
              { title: "姓名", dataIndex: "name", width: 100 },
              { title: "部门", dataIndex: "deptName", width: 120 },
              { title: "岗位", dataIndex: "posName", width: 120 },
              { title: "能力", dataIndex: "capacity", width: 200 },
            ]}
            pagination={false}
            size="small"
            locale={{ emptyText: "所有人员均已添加" }}
          />
        </Modal>

        {!readOnly && (
          <LayoutFooterPortal slotId="pf-footer-slot">
            <Flex justify="flex-end" gap={8}>
              <Button onClick={handleExport}>导出Word</Button>
              <Button
                onClick={() => handleSave(1)}
                loading={riskAnalysisSaveLoading}
              >
                暂存
              </Button>

              <Button
                type="primary"
                onClick={() => handleSave(2)}
                loading={riskAnalysisSaveLoading}
              >
                完成分析并保存
              </Button>
            </Flex>
          </LayoutFooterPortal>
        )}
      </div>
    </Spin>
  );
};

export default Connect([NS_SAFETY_EVAL_BUSINESS], true)(RiskAnalysisContent);