import { Connect } from "@cqsjjb/jjb-dva-runtime";
import {
  Button,
  Checkbox,
  Col,
  Form,
  Input,
  InputNumber,
  message,
  Row,
  Space,
} from "antd";
import { useEffect, useState } from "react";
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";

// 2026-08-08 变更：按原型 V1.6 institution.html 的 #mod-org-info 模块 1:1 还原机构基础信息表单。
// 复用既有「安全生产监管行业类别」枚举作为「拟申请的法定安全评价业务范围」候选项，
// 二者取值集合完全一致（煤矿/金属非金属矿/陆地油气/油气管道/石油化工医药/烟花爆竹/金属冶炼），无需新增枚举。
import { QUALIFICATION_INDUSTRY_OPTIONS } from "~/enumerate/enterpriseOptions";
import { NS_ORG_INFO } from "~/enumerate/namespace";

import {
  creditCodeRule,
  nonNegativeIntegerRule,
  normalizeUrl,
  phoneRule,
  positiveNumberRule,
  urlRule,
} from "~/utils/validators";

/**
 * 2026-08-08 新增：业务范围在后端为 varchar(500) 的「逗号分隔字符串」（apply_business_scope），
 * 而原型要求多选交互，故在页面出入口做数组/字符串互转。
 * 不做字段名映射，仅做同名字段的值形态转换，保持前后端字段名一致。
 */
const splitBusinessScope = (value) => {
  if (Array.isArray(value)) return value;
  if (!value) return undefined;
  return String(value)
    .split(",")
    .map((item) => item.trim())
    .filter(Boolean);
};

const joinBusinessScope = (value) =>
  Array.isArray(value) ? value.join(",") : value || undefined;

/**
 * 2026-08-08 联系人及电话合并/拆分工具（交互约定见下方说明）：
 *   录入：单输入框，值格式「联系人/电话」，用 / 分隔。
 *   提交前：按首个 / 拆为 contactName（/前）+ contactPhone（/后）两字段，传给后端。
 *   回显：后端 contactName/contactPhone 用 / 合并回单输入框。
 *   后端落库：contact_name varchar(50)、contact_phone varchar(20)；原 contact_name_phone 列保留不删、不再写入。
 * 复用要点：其他页面如需同样交互，保持「单输入框 + / 分隔 + 提交拆分存两列 + 回显合并」即可。
 * 注意：分隔符为单斜杠「/」（无空格），与录入示例"张三/13800138000"一致。
 */
const CONTACT_SEP = "/";

const mergeContactNamePhone = (name, phone) => {
  if (!name && !phone) return undefined;
  return [name, phone].filter(Boolean).join(CONTACT_SEP);
};

const splitContactNamePhone = (value) => {
  if (!value) return { contactName: undefined, contactPhone: undefined };
  const idx = String(value).indexOf(CONTACT_SEP);
  if (idx >= 0) {
    return {
      // 按首个 / 拆分；/后全部作为电话（剔除首尾空白），多余字符交给校验/提交时处理
      contactName: String(value).slice(0, idx).trim(),
      contactPhone: String(value).slice(idx + 1).trim(),
    };
  }
  // 无分隔符：整体作为联系人姓名，电话置空（由校验拦截）
  return { contactName: String(value).trim(), contactPhone: undefined };
};

function OrgInfoPage(props) {
  const [form] = Form.useForm();
  const { orgInfoLoading } = props.orgInfo;
  const [editing, setEditing] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  const [detail, setDetail] = useState({});
  /** 是否已存在机构数据（有 id 视为已入库，只能修改） */
  const [hasExistingData, setHasExistingData] = useState(false);

  const loadDetail = async () => {
    try {
      const res = await props.orgInfoGet();
      if (res?.data?.id) {
        setDetail(res.data);
        form.setFieldsValue({
          ...res.data,
          // 2026-08-08 业务范围回填为数组以适配多选控件
          applyBusinessScope: splitBusinessScope(res.data.applyBusinessScope),
          // 2026-08-08 联系人及电话：后端 contactName/contactPhone 两列合并为单字段展示
          contactNamePhone: mergeContactNamePhone(
            res.data.contactName,
            res.data.contactPhone,
          ),
        });
        setHasExistingData(true);
        setEditing(false);
      } else {
        setDetail({});
        setHasExistingData(false);
        setEditing(true);
      }
    } catch (err) {
      console.warn("[OrgInfo] loadDetail failed:", err);
      setDetail({});
      setHasExistingData(false);
      setEditing(true);
    }
  };

  useEffect(() => {
    loadDetail();
  }, []);

  const handleCancelEdit = () => {
    setEditing(false);
  };

  const handleSave = async (submitType) => {
    try {
      const formValues = await form.validateFields();
      // 2026-08-08 联系人及电话：单字段拆分为后端 contactName / contactPhone 两列提交
      const split = splitContactNamePhone(formValues.contactNamePhone);
      // 剔除多余字符：姓名/电话做 trim 与空白清理（校验已保证格式，此处仅兜底）
      const contactName = split.contactName
        ? split.contactName.replace(/\s+/g, "")
        : undefined;
      const contactPhone = split.contactPhone
        ? split.contactPhone.replace(/\s+/g, "")
        : undefined;
      const values = {
        ...formValues,
        contactName,
        contactPhone,
        // 移除仅用于展示的合并字段，避免提交冗余
        contactNamePhone: undefined,
        // 2026-08-08 多选业务范围按后端 varchar(500) 约定以逗号拼接提交
        applyBusinessScope: joinBusinessScope(formValues.applyBusinessScope),
        infoDisclosureUrl: formValues.infoDisclosureUrl
          ? normalizeUrl(formValues.infoDisclosureUrl)
          : undefined,
        authStatusCode: submitType === "draft" ? 0 : 1,
        authStatusName: submitType === "draft" ? "草稿" : "已提交",
      };
      setSubmitting(true);

      let request;
      if (hasExistingData) {
        request = props.orgInfoModify;
        values.id = detail.id;
      } else {
        request =
          submitType === "draft" ? props.orgInfoDraft : props.orgInfoSave;
      }

      const res = await request(values);
      if (res?.success !== false) {
        message.success(
          hasExistingData
            ? "修改成功"
            : submitType === "draft"
              ? "暂存成功"
              : "提交成功",
        );
        setEditing(false);
        loadDetail();
      }
    } finally {
      setSubmitting(false);
    }
  };
  return (
    <PageLayout
      title={
        <div>
          {/* 2026-08-08 标题对齐原型 institution.html #mod-org-info（副标题按需求移除） */}
          <span>基础信息管理</span>
        </div>
      }
      extra={
        hasExistingData &&
        !editing && (
          <Button
            type="primary"
            loading={orgInfoLoading}
            onClick={() => setEditing(true)}
          >
            修改
          </Button>
        )
      }
    >
      {/*
        2026-08-08 布局对齐原型 institution.html：
        原型 .form-grid 为两列网格、label 在控件上方（纵向），gap 1rem。
        此处使用 antd Form layout="vertical" + Row/Col 两列还原，整行字段 span=24。
        2026-08-08 按原型 .info-card 增加带边框容器并整体居中（border-radius 8px、padding 1.25rem、maxWidth 960px 居中）。
      */}
      <div
        style={{
          width: "94%",
          maxWidth: "100%",
          margin: "0 auto",
          border: "1px solid #e2e8f0",
          borderRadius: 8,
          padding: "1.25rem",
          background: "#fff",
        }}
      >
        <Form form={form} layout="vertical" disabled={!editing}>
          <Row gutter={[16, 16]}>
          {/* 2026-08-08 字段顺序严格对齐原型 institution.html 434-450 行 */}
          <Col span={12}>
            <Form.Item
              name="unitName"
              label="单位名称"
              rules={[{ required: true, message: "请输入单位名称" }]}
            >
              <Input placeholder="请输入单位名称" allowClear maxLength={200} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="creditCode"
              label="统一社会信用代码"
              rules={[creditCodeRule(true)]}
            >
              <Input
                placeholder="请输入统一社会信用代码"
                allowClear
                maxLength={18}
              />
            </Form.Item>
          </Col>
          {/* 原型：注册地址占整行（full） */}
          <Col span={24}>
            <Form.Item
              name="registerAddress"
              label="注册地址"
              rules={[{ required: true, message: "请输入注册地址" }]}
            >
              <Input placeholder="请输入注册地址" maxLength={500} />
            </Form.Item>
          </Col>
          {/* 原型：办公地址占整行（full），TextArea rows=3 */}
          <Col span={24}>
            <Form.Item
              name="businessAddress"
              label="办公地址"
              rules={[{ required: true, message: "请输入办公地址" }]}
            >
              <Input.TextArea
                rows={3}
                placeholder="请输入办公地址"
                maxLength={500}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="infoDisclosureUrl"
              label="信息公开网址"
              rules={[urlRule("信息公开网址", true)]}
              normalize={(value) =>
                typeof value === "string" ? value.trim() : value
              }
            >
              <Input
                placeholder="请输入信息公开网址"
                allowClear
                maxLength={500}
              />
            </Form.Item>
          </Col>
          {/* 原型：资质证书编号非必填，带"非必填，初次申请无需填写"提示 */}
          <Col span={12}>
            <Form.Item
              name="qualificationCertNo"
              label="资质证书编号"
              extra="非必填，初次申请无需填写"
            >
              <Input
                placeholder="初次申请无需填写"
                allowClear
                maxLength={100}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="legalRepresentative"
              label="法定代表人"
              rules={[{ required: true, message: "请输入法定代表人" }]}
            >
              <Input placeholder="请输入法定代表人" allowClear maxLength={50} />
            </Form.Item>
          </Col>
          {/* 2026-08-08 标签对齐原型「法定代表人电话」 */}
          <Col span={12}>
            <Form.Item
              name="legalRepresentativePhone"
              label="法定代表人电话"
              rules={[phoneRule("法定代表人电话", true)]}
              normalize={(value) =>
                typeof value === "string" ? value.trim() : value
              }
            >
              <Input
                placeholder="请输入法定代表人电话"
                allowClear
                maxLength={20}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="fax" label="传真" rules={[{ required: true, message: "请输入传真" }]}>
              <Input placeholder="请输入传真" allowClear maxLength={20} />
            </Form.Item>
          </Col>
          {/*
            2026-08-08 联系人及电话（交互约定）：
            单输入框录入，格式「联系人/电话」（用 / 分隔），如：张三/13800138000；
            提交前按首个 / 拆为 contactName（/前）+ contactPhone（/后）存两列；
            回显时后端 contactName/contactPhone 用 / 合并回填。
            校验：拆分后 contactName 非空且≤50、contactPhone 非空且匹配手机/座机格式且≤20。
          */}
          <Col span={12}>
            <Form.Item
              name="contactNamePhone"
              label="联系人及电话"
              validateFirst
              rules={[
                { required: true, message: "请输入联系人及电话" },
                {
                  validator: (_, value) => {
                    const { contactName, contactPhone } =
                      splitContactNamePhone(value);
                    if (!contactName) {
                      return Promise.reject(new Error("联系人不能为空"));
                    }
                    if (contactName.length > 50) {
                      return Promise.reject(new Error("联系人不能超过50字"));
                    }
                    if (!contactPhone) {
                      return Promise.reject(
                        new Error("请使用/分隔联系人和电话，并填写电话"),
                      );
                    }
                    // 复用既有 PHONE_PATTERN：手机11位 / 固话10~12位（去空白后）
                    if (
                      !/^(1[3-9]\d{9}|\d{10,12})$/.test(
                        String(contactPhone).replace(/\s+/g, ""),
                      )
                    ) {
                      return Promise.reject(
                        new Error("电话格式不正确（手机11位或固话区号+号码）"),
                      );
                    }
                    if (contactPhone.length > 20) {
                      return Promise.reject(new Error("电话不能超过20字"));
                    }
                    return Promise.resolve();
                  },
                },
              ]}
              extra="请使用/分隔联系人和电话，如：张三/13800138000"
            >
              <Input
                placeholder="如：张三/13800138000"
                allowClear
                maxLength={73}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="fixedAssetsTotal"
              label="固定资产总值（万元）"
              rules={[
                { required: true, message: "请输入固定资产总值" },
                {
                  validator: (_, value) => {
                    if (value === undefined || value === null || value === "") {
                      return Promise.resolve();
                    }
                    if (Number(value) < 0) {
                      return Promise.reject(
                        new Error("固定资产总值应为非负数字"),
                      );
                    }
                    return Promise.resolve();
                  },
                },
              ]}
            >
              <InputNumber
                style={{ width: "100%" }}
                min={0}
                precision={4}
                placeholder="请输入固定资产总值"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="workplaceArea"
              label="工作场所建筑面积（㎡）"
              rules={[positiveNumberRule("工作场所建筑面积", true)]}
            >
              <InputNumber
                style={{ width: "100%" }}
                min={0}
                max={99999}
                precision={2}
                placeholder="请输入工作场所建筑面积"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="archiveRoomArea"
              label="档案室面积（㎡）"
              rules={[positiveNumberRule("档案室面积", true)]}
            >
              <InputNumber
                style={{ width: "100%" }}
                min={0}
                max={99999}
                precision={2}
                placeholder="请输入档案室面积"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="fulltimeEvaluatorCount"
              label="专职安全评价师数量"
              rules={[nonNegativeIntegerRule("专职安全评价师数量", true)]}
            >
              <InputNumber
                style={{ width: "100%" }}
                min={0}
                max={99999}
                precision={0}
                placeholder="请输入专职安全评价师数量"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="registeredEngineerCount"
              label="注册安全工程师数量"
              rules={[nonNegativeIntegerRule("注册安全工程师数量", true)]}
            >
              <InputNumber
                style={{ width: "100%" }}
                min={0}
                max={99999}
                precision={0}
                placeholder="请输入注册安全工程师数量"
              />
            </Form.Item>
          </Col>
          {/*
            2026-08-08 业务范围：
            原型为 checkbox 网格（2列、灰底 #f8fafc、边框容器），此处用 Checkbox.Group + Row/Col 还原视觉。
          */}
          <Col span={24}>
            <Form.Item
              name="applyBusinessScope"
              label="拟申请的法定安全评价业务范围"
              rules={[
                {
                  required: true,
                  message: "请选择拟申请的法定安全评价业务范围",
                },
              ]}
            >
              <Checkbox.Group
                style={{
                  display: "grid",
                  gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
                  gap: "0.65rem 1rem",
                  padding: "1rem",
                  border: "1px solid #e2e8f0",
                  borderRadius: 8,
                  background: "#f8fafc",
                }}
              >
                {QUALIFICATION_INDUSTRY_OPTIONS.map((opt) => (
                  <Checkbox key={opt.value} value={opt.value}>
                    {opt.label}
                  </Checkbox>
                ))}
              </Checkbox.Group>
            </Form.Item>
          </Col>
          {/* 原型：单位基本情况介绍（可附页），TextArea rows=7 */}
          <Col span={24}>
            <Form.Item
              name="orgIntro"
              label="单位基本情况介绍（可附页）"
              rules={[{ required: true, message: "请输入单位基本情况介绍" }]}
            >
              <Input.TextArea
                rows={7}
                placeholder="请简要介绍单位基本情况，如成立时间、人员构成、技术力量、业绩等"
                maxLength={2000}
                showCount
              />
            </Form.Item>
          </Col>
          </Row>
          {editing && (
            <div style={{ marginTop: 24, textAlign: "center" }}>
              <Space>
                <Button onClick={handleCancelEdit}>取消</Button>
                {!hasExistingData && (
                  <Button loading={submitting} onClick={() => handleSave("draft")}>
                    暂存
                  </Button>
                )}
                <Button
                  type="primary"
                  loading={submitting}
                  onClick={() => handleSave("submit")}
                >
                  提交
                </Button>
              </Space>
            </div>
          )}
        </Form>
      </div>
    </PageLayout>
  );
}

export default Connect([NS_ORG_INFO], true)(OrgInfoPage);