import React, { useState, useMemo } from "react";
import { Button, Image, Input, Modal, Select, Table, Tabs, Tag } from "antd";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { NS_QUAL_REVIEW } from "~/enumerate/namespace";
import StaffViewModal from "~/components/StaffViewModal";
import PreviewUrlButton from "~/components/PreviewUrlButton/index";
import { QUALIFICATION_INDUSTRY_OPTIONS, QUALIFICATION_INDUSTRY_OPTIONS_MAP } from "~/enumerate/enterpriseOptions";
import { CAPABILITY_MAP } from "~/enumerate/constant";
import { getCalibrationTag } from "../mockData";

const { TextArea } = Input;

/**
 * 共享组件：资质备案初审 6 个标签页（详情 / 审核共用）
 * 对应原型 mod-qual-review-form / mod-qual-review-detail：
 *   1. 申请基本信息  2. 管理人员  3. 专职安全评价师
 *   4. 申请材料      5. 设备清单  6. 机构负责人签字
 * @param {Object} props
 * @param {Object} props.detail - 备案详情数据
 * @param {boolean} [props.isReview=false] - 审核模式（材料表格开启"符合性"列）
 * @param {Object} [props.compliance={}] - 审核模式下的符合性状态
 * @param {Function} [props.onComplianceChange] - 符合性变动回调
 */
function calcAge(birthDate) {
  if (!birthDate) return "-";
  const birth = new Date(birthDate);
  if (isNaN(birth.getTime())) return "-";
  const now = new Date();
  let age = now.getFullYear() - birth.getFullYear();
  const m = now.getMonth() - birth.getMonth();
  if (m < 0 || (m === 0 && now.getDate() < birth.getDate())) age--;
  return age >= 0 ? age : "-";
}

const gridStyle = {
  display: "grid",
  gridTemplateColumns: "1fr 1fr",
  gap: "0.6rem 1rem",
};

const fieldStyle = { display: "flex", flexDirection: "column", gap: "0.3rem" };
const labelStyle = { fontSize: "0.8rem", color: "#64748b", fontWeight: 500 };
const inputStyle = { background: "#f8fafc" };
const fullSpan = { gridColumn: "1 / -1" };

/** 只读字段 */
function ReadonlyField({ label, value, span }) {
  return (
    <div style={span ? { ...fieldStyle, ...span } : fieldStyle}>
      <label style={labelStyle}>{label}</label>
      <Input readOnly value={value || "-"} style={inputStyle} />
    </div>
  );
}

/**
 * 设备详情弹窗（原型 modal-equip-view 缺失，按列表字段补全）
 */
function EquipViewModal({ record, onCancel }) {
  const open = !!record;
  const calibration = record ? getCalibrationTag(record) : null;
  const rows = record
    ? [
        { label: "装备名称", value: record.deviceName },
        { label: "规格型号", value: record.deviceModel },
        { label: "生产厂家", value: record.manufacturer },
        { label: "设备价值（元）", value: record.equipmentValue },
        { label: "计量检定情况", value: null },
      ]
    : [];
  return (
    <Modal
      open={open}
      title="装备详情"
      width={560}
      cancelText="关闭"
      okText="关闭"
      onOk={onCancel}
      onCancel={onCancel}
      footer={
        <Button type="primary" onClick={onCancel}>
          关闭
        </Button>
      }
    >
      {record && (
        <div style={gridStyle}>
          {rows.map((row) =>
            row.value != null ? (
              <ReadonlyField key={row.label} label={row.label} value={row.value} />
            ) : (
              <div key={row.label} style={fieldStyle}>
                <label style={labelStyle}>{row.label}</label>
                <div>
                  {calibration && (
                    <Tag
                      color={calibration.status === "success" ? "success" : "warning"}
                    >
                      {calibration.label}
                    </Tag>
                  )}
                </div>
              </div>
            ),
          )}
          <div style={{ ...fieldStyle, ...fullSpan }}>
            <label style={labelStyle}>检定报告</label>
            <div>
              {record.calibrationReportUrl ? (
                <PreviewUrlButton url={record.calibrationReportUrl}>预览检定报告</PreviewUrlButton>
              ) : (
                <span style={{ color: "#64748b", fontSize: "0.8rem" }}>未上传</span>
              )}
            </div>
          </div>
        </div>
      )}
    </Modal>
  );
}

const FilingTabs = ({
  detail = {},
  isReview = false,
  compliance = {},
  onComplianceChange,
}) => {
  const [viewId, setViewId] = useState("");
  const [equipRecord, setEquipRecord] = useState(null);
  const [previewImage, setPreviewImage] = useState("");

  const personnelRows = useMemo(
    () =>
      (detail.personnelList || []).map((item) => ({
        ...item,
        age: item.age ?? calcAge(item.birthDate),
      })),
    [detail.personnelList],
  );

  /** 管理人员：岗位含"法定代表人/负责人"；无匹配时回退展示全部人员 */
  const managerRows = useMemo(() => {
    const filtered = personnelRows.filter((item) =>
      /法定代表人|技术负责人|过程控制负责人|负责人/.test(item.positionName || ""),
    );
    return filtered.length ? filtered : personnelRows;
  }, [personnelRows]);

  /** 专职安全评价师：评价师证书号存在或岗位含"评价师"；无匹配时回退展示全部人员 */
  const evaluatorRows = useMemo(() => {
    const filtered = personnelRows.filter(
      (item) => item.evaluatorCertNo || /评价师/.test(item.positionName || ""),
    );
    return filtered.length ? filtered : personnelRows;
  }, [personnelRows]);

  const attachmentList = useMemo(() => {
    const v = detail.attachmentUrl;
    if (!v) return [];
    try {
      const p = JSON.parse(v);
      return Array.isArray(p) ? p : [];
    } catch {
      return [];
    }
  }, [detail.attachmentUrl]);

  const businessScope = useMemo(() => {
    const list = Array.isArray(detail.businessScope) ? detail.businessScope : [];
    return QUALIFICATION_INDUSTRY_OPTIONS.map((opt) => ({
      ...opt,
      checked: list.includes(opt.value),
    }));
  }, [detail.businessScope]);

  const openPreview = (file) => {
    const url = file?.url;
    if (!url) return;
    if (/\.(jpe?g|png|gif|webp|bmp)(\?|#|$)/i.test(`${file.name || ""} ${url}`.toLowerCase())) {
      setPreviewImage(url);
    } else {
      window.open(url, "_blank");
    }
  };

  /** 人员表格列（管理/评价师共用基础） */
  const basePersonCols = (withScope) => [
    { title: "序号", width: 60, render: (_, __, i) => i + 1 },
    { title: "姓名", dataIndex: "personName", width: 110 },
    { title: "岗位类别", dataIndex: "positionName", width: 140, ellipsis: true },
    {
      title: "学历/专业",
      width: 160,
      render: (_, r) =>
        [r.educationLevelName, r.majorName || r.educationTypeName].filter(Boolean).join(" / ") || "-",
    },
    { title: "职称", dataIndex: "titleName", width: 120, render: (v) => v || "-" },
    {
      title: "从业年限",
      width: 100,
      render: (_, r) => r.workYears || r.yearsOfWorking || "-",
    },
    {
      title: "专业能力",
      width: 180,
      render: (_, r) => {
        const codes = r.professionalCapabilityCodeList || [];
        return codes.length
          ? codes.map((code) => CAPABILITY_MAP[code] || code).join("、")
          : "-";
      },
    },
    ...(withScope
      ? [
          {
            title: "申请业务范围",
            width: 200,
            ellipsis: true,
            render: (_, r) => {
              const scopes = r.appliedScope || r.scopeList;
              if (Array.isArray(scopes)) {
                return scopes.map((s) => QUALIFICATION_INDUSTRY_OPTIONS_MAP[s] || s).join("、");
              }
              return scopes || "-";
            },
          },
        ]
      : []),
    {
      title: "操作",
      width: 80,
      fixed: "right",
      render: (_, record) => (
        <Button
          type="link"
          size="small"
          onClick={() => setViewId(record.sourcePersonnelId || record.id)}
        >
          查看
        </Button>
      ),
    },
  ];

  const materialCols = isReview
    ? [
        { title: "序号", width: 60, render: (_, __, i) => i + 1 },
        { title: "申请材料", dataIndex: "materialContent", ellipsis: true },
        { title: "格式", dataIndex: "materialFormat", width: 80 },
        {
          title: "状态",
          width: 100,
          render: (_, record) =>
            record.uploadStatusCode === 2 ? (
              <Tag color="success">{record.uploadStatusName || "已上传"}</Tag>
            ) : (
              <Tag color="warning">{record.uploadStatusName || "待上传"}</Tag>
            ),
        },
        {
          title: "符合性",
          width: 110,
          render: (_, record) => (
            <Select
              style={{ width: "100%", fontSize: "0.75rem" }}
              size="small"
              placeholder="请选择"
              value={compliance[record.id]}
              allowClear
              defaultValue="pass"
              onChange={(v) => onComplianceChange?.(record.id, v)}
            >
              <Select.Option value="pass">符合</Select.Option>
              <Select.Option value="fail">不符合</Select.Option>
            </Select>
          ),
        },
        {
          title: "操作",
          width: 80,
          render: (_, record) => (
            <PreviewUrlButton url={record.attachmentUrl}>预览</PreviewUrlButton>
          ),
        },
      ]
    : [
        { title: "序号", width: 60, render: (_, __, i) => i + 1 },
        { title: "申请材料", dataIndex: "materialContent", ellipsis: true },
        { title: "格式", dataIndex: "materialFormat", width: 80 },
        {
          title: "操作",
          width: 80,
          render: (_, record) => (
            <PreviewUrlButton url={record.attachmentUrl}>预览</PreviewUrlButton>
          ),
        },
      ];

  const commitment = detail.commitment || {};

  const items = [
    {
      key: "info",
      label: "1. 申请基本信息",
      children: (
        <div style={gridStyle}>
          <div style={{ ...fieldStyle, ...fullSpan }}>
            <label style={labelStyle}>拟申请的法定安全评价业务范围 *</label>
            <div
              style={{
                display: "flex",
                flexWrap: "wrap",
                gap: "0.3rem 1rem",
                padding: "0.45rem 0.75rem",
                border: "1px solid #d9d9d9",
                borderRadius: 6,
                background: "#f8fafc",
              }}
            >
              {businessScope.map((opt) => (
                <label
                  key={opt.value}
                  style={{ fontSize: "0.82rem", color: "#1e293b", cursor: "not-allowed" }}
                >
                  <input type="checkbox" checked={opt.checked} disabled /> {opt.label}
                </label>
              ))}
            </div>
          </div>
          <ReadonlyField label="备案属地 *" value={detail.filingTerritoryName} />
          <ReadonlyField label="备案单位 *" value={detail.filingUnitName} />
          <ReadonlyField label="备案单位类型 *" value={detail.filingUnitTypeName} />
          <ReadonlyField label="统一社会信用代码 *" value={detail.creditCode} />
          <ReadonlyField label="注册地址 *" value={detail.registerAddress} span={fullSpan} />
          <ReadonlyField label="办公地址 *" value={detail.officeAddress} span={fullSpan} />
          <ReadonlyField label="信息公开网址 *" value={detail.infoDisclosureUrl} />
          <div style={fieldStyle}>
            <label style={labelStyle}>资质证书编号 *</label>
            <Input readOnly value={detail.qualCertNo || "-"} style={inputStyle} />
            <span style={{ color: "#8b95a5", fontSize: "0.72rem" }}>
              初次申请无需填写，已有资质备案时填写
            </span>
          </div>
          <ReadonlyField label="法定代表人 *" value={detail.legalPersonName || detail.legalPerson} />
          <ReadonlyField label="法定代表人电话 *" value={detail.legalPersonPhone} />
          <ReadonlyField label="传真 *" value={detail.fax} />
          <ReadonlyField label="联系人及电话 *" value={detail.contactPhone} />
          <ReadonlyField label="固定资产总值（万元） *" value={detail.fixedAssetAmount} />
          <ReadonlyField label="工作场所建筑面积（㎡） *" value={detail.workplaceArea} />
          <ReadonlyField label="档案室面积（㎡） *" value={detail.archiveRoomArea} />
          <ReadonlyField label="专职安全评价师数量 *" value={detail.fulltimeEvaluatorCount} />
          <ReadonlyField label="注册安全工程师数量 *" value={detail.registeredEngineerCount} />
          <div style={{ ...fieldStyle, ...fullSpan }}>
            <label style={labelStyle}>单位基本情况介绍（可附页） *</label>
            <TextArea readOnly rows={5} value={detail.unitIntro || ""} style={inputStyle} />
          </div>
          <div style={{ ...fieldStyle, ...fullSpan }}>
            <label style={labelStyle}>营业执照</label>
            <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
              {attachmentList.length ? (
                <>
                  <Button
                    size="small"
                    onClick={() => openPreview(attachmentList[0])}
                  >
                    查看营业执照
                  </Button>
                  <span style={{ color: "#8b95a5", fontSize: "0.75rem" }}>
                    {attachmentList[0].name || "营业执照.pdf"}
                  </span>
                </>
              ) : (
                <span style={{ color: "#8b95a5", fontSize: "0.8rem" }}>—</span>
              )}
            </div>
          </div>
        </div>
      ),
    },
    {
      key: "management",
      label: "2. 管理人员基本情况汇总表",
      children: (
        <Table
          size="small"
          bordered
          rowKey="id"
          pagination={false}
          dataSource={managerRows}
          scroll={{ x: 900 }}
          columns={basePersonCols(false)}
        />
      ),
    },
    {
      key: "evaluators",
      label: "3. 专职安全评价师基本情况汇总表",
      children: (
        <Table
          size="small"
          bordered
          rowKey="id"
          pagination={false}
          dataSource={evaluatorRows}
          scroll={{ x: 1100 }}
          columns={basePersonCols(true)}
        />
      ),
    },
    {
      key: "materials",
      label: "4. 申请材料",
      children: (
        <Table
          size="small"
          bordered
          rowKey="id"
          pagination={false}
          dataSource={Array.isArray(detail.materials) ? detail.materials : []}
          columns={materialCols}
        />
      ),
    },
    {
      key: "equipment",
      label: "5. 设备清单",
      children: (
        <Table
          size="small"
          bordered
          rowKey="id"
          pagination={false}
          dataSource={Array.isArray(detail.equipmentList) ? detail.equipmentList : []}
          columns={[
            { title: "序号", width: 60, render: (_, __, i) => i + 1 },
            { title: "装备名称", dataIndex: "deviceName", ellipsis: true },
            { title: "规格型号", dataIndex: "deviceModel", ellipsis: true },
            { title: "生产厂家", dataIndex: "manufacturer" },
            {
              title: "计量检定情况",
              width: 120,
              render: (_, record) => {
                const tag = getCalibrationTag(record);
                return (
                  <Tag color={tag.status === "success" ? "success" : "warning"}>
                    {tag.label}
                  </Tag>
                );
              },
            },
            {
              title: "操作",
              width: 80,
              render: (_, record) => (
                <Button type="link" size="small" onClick={() => setEquipRecord(record)}>
                  查看
                </Button>
              ),
            },
          ]}
        />
      ),
    },
    {
      key: "signature",
      label: "6. 机构负责人签字",
      children: (
        <div
          style={{
            border: "1px solid #d9d9d9",
            borderRadius: 8,
            padding: "1.25rem 1.5rem",
            background: "#fafafa",
            fontSize: "0.85rem",
            lineHeight: 1.9,
          }}
        >
          <p style={{ textAlign: "center", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.75rem" }}>
            机构负责人签字确认
          </p>
          <p>
            机构端已完成资质申请第六项负责人签字，确认本次提交的基础信息、管理人员、专职安全评价师、申请材料和设备清单真实、准确、完整。
          </p>
          <div style={gridStyle}>
            <ReadonlyField label="签字人" value={commitment.legalRepName} />
            <ReadonlyField label="职务" value="法定代表人 / 机构负责人" />
            <ReadonlyField label="签字方式" value="APP认证签字" />
            <ReadonlyField label="签字时间" value={commitment.signDate} />
            <div style={{ ...fieldStyle, ...fullSpan }}>
              <label style={labelStyle}>签字文件</label>
              <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
                {commitment.legalRepSignatureUrl ? (
                  <>
                    <Button
                      size="small"
                      onClick={() =>
                        openPreview({
                          url: commitment.legalRepSignatureUrl,
                          name: "机构负责人签字件",
                        })
                      }
                    >
                      查看签字件
                    </Button>
                    <Tag color="success">已签字</Tag>
                  </>
                ) : (
                  <Tag color="warning">未签字</Tag>
                )}
              </div>
            </div>
            {commitment.legalRepSignatureUrl && (
              <Image
                src={commitment.legalRepSignatureUrl}
                style={{ width: 120, height: 120, objectFit: "contain", marginTop: 8 }}
              />
            )}
          </div>
        </div>
      ),
    },
  ];

  return (
    <>
      <Tabs items={items} />

      <StaffViewModal
        open={!!viewId}
        currentId={viewId}
        onCancel={() => setViewId("")}
      />

      <EquipViewModal record={equipRecord} onCancel={() => setEquipRecord(null)} />

      <Image
        src={previewImage}
        preview={{
          visible: !!previewImage,
          onVisibleChange: (v) => !v && setPreviewImage(""),
        }}
        style={{ display: "none" }}
      />
    </>
  );
};

export default Connect([NS_QUAL_REVIEW], true)(FilingTabs);