import React, { useState, useEffect, useMemo } from "react";
import { Button, Descriptions, Table, Tag, Tabs, Select, Modal, Space, Image } 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_MAP } from "~/enumerate/enterpriseOptions";


/**
 * 共享组件：资质备案 5 个标签页（详情 / 审核共用）
 * @param {Object} props
 * @param {Object} props.detail - 备案详情数据
 * @param {boolean} [props.isReview=false] - 审核模式（开启后材料上传显示"上传附件"+"符合性"列）
 * @param {Object} [props.compliance={}] - 审核模式下的符合性状态
 * @param {Function} [props.onComplianceChange] - 符合性变动回调
 * @param {Function} [props.onPersonnelView] - 查看人员详情回调（覆盖默认弹窗）
 * @param {Function} [props.onEquipView] - 查看设备详情回调 (record) => void（覆盖默认弹窗）
 */
const FilingTabs = ({
  detail,
  isReview = false,
  compliance = {},
  onComplianceChange,

}) => {

  const [viewId, setViewId] = useState("");

  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 baseCols = [
    { title: "序号", width: 60, render: (_, __, i) => i + 1 },
    { title: "材料名称", dataIndex: "materialContent" },
  ];

  const materialCols = isReview
    ? [
        ...baseCols,
        { title: "上传附件", dataIndex: "attachmentDesc", width: 120 },
        { 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: 100,
          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>
          ),
        },
      ]
    : [
        ...baseCols,
        { 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: 80, render: (_, record) => <PreviewUrlButton url={record.attachmentUrl}>预览</PreviewUrlButton> },
      ];

  const commitment= detail.commitment || {};

  const items = [
    {
      key: "info",
      label: "1.备案基本信息",
      children: (
        <Descriptions column={2} bordered size="small" style={{ background: "#fff" }}>
          <Descriptions.Item label="申请的业务范围" span={2}>{Array.isArray(detail.businessScope) ? detail.businessScope.map(item => QUALIFICATION_INDUSTRY_OPTIONS_MAP[item]).join("、") : detail.businessScope || "-"}</Descriptions.Item>
          <Descriptions.Item label="备案属地">{detail.filingTerritoryName}</Descriptions.Item>
          <Descriptions.Item label="备案单位">{detail.filingUnitName}</Descriptions.Item>
          <Descriptions.Item label="备案单位类型">{detail.filingUnitTypeName}</Descriptions.Item>
          <Descriptions.Item label="统一社会信用代码">{detail.creditCode}</Descriptions.Item>
          <Descriptions.Item label="办公地址" span={2}>{detail.officeAddress}</Descriptions.Item>
          <Descriptions.Item label="注册地址" span={2}>{detail.registerAddress}</Descriptions.Item>
          <Descriptions.Item label="资质证书编号">{detail.qualCertNo}</Descriptions.Item>
          <Descriptions.Item label="信息公开网址">{detail.infoDisclosureUrl}</Descriptions.Item>
          <Descriptions.Item label="法人代表及电话">{detail.legalPersonPhone}</Descriptions.Item>
          <Descriptions.Item label="联系人及电话">{detail.contactPhone}</Descriptions.Item>
          <Descriptions.Item label="固定资产总值(万元)">{detail.fixedAssetAmount}</Descriptions.Item>
          <Descriptions.Item label="工作场所建筑面积">{detail.workplaceArea}㎡</Descriptions.Item>
          <Descriptions.Item label="档案室面积">{detail.archiveRoomArea}㎡</Descriptions.Item>
          <Descriptions.Item label="专职安全评价师数量">{detail.fulltimeEvaluatorCount}人</Descriptions.Item>
          <Descriptions.Item label="注册安全工程师数量">{detail.registeredEngineerCount}人</Descriptions.Item>
          <Descriptions.Item label="单位基本情况介绍" span={2}>{detail.unitIntro}</Descriptions.Item>
          <Descriptions.Item label="附件" span={2}>
            {attachmentList.length
              ? attachmentList.map((item, i) => {
                  const isImg = /\.(png|jpe?g|gif|bmp|webp|svg)(\?.*)?$/i.test(item.url || "");
                  return isImg ? (
                    <Image key={item.url || i} src={item.url} style={{ width: 100, height: 100, objectFit: "cover", marginRight: 8 }} />
                  ) : (
                    <PreviewUrlButton key={item.url || i} url={item.url}>
                      {item.name || `附件${i + 1}`}
                    </PreviewUrlButton>
                  );
                })
              : "-"}
          </Descriptions.Item>
        </Descriptions>
      ),
    },
    {
      key: "materials",
      label: "2.备案材料上传",
      children: (
        <Table size="small" bordered rowKey="id" pagination={false} dataSource={detail?.materials || []} columns={materialCols} />
      ),
    },
    {
      key: "promise",
      label: "3.法定代表人承诺书",
      children: (
        <div style={{ border: "1px solid #d9d9d9", borderRadius: 6, 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>本人{commitment.legalRepName}是{detail.filingUnitName}法定代表人，现代表我单位承诺如下：</p>
          <p>一、我单位自愿申请安全评价机构资质。本人已经认真学习、了解并掌握《安全生产法》《行政许可法》《行政处罚法》及《安全评价检测检验机构管理办法》等法律法规的相关规定，知悉开展安全评价工作的法律责任、义务、权力和风险。</p>
          <p>二、本人承诺本单位满足《安全评价检测检验机构管理办法》所规定的资质条件要求，本人及单位三年内无重大违法失信行为，申请资质所提交的有关材料真实、合法、有效，并对其真实性、合法性承担相应法律责任，接受并配合有关部门对本单位开展的专业能力审查。</p>
          <p>三、如能获准资质，本单位将严格按照法律法规、规章标准的要求开展安全评价活动，遵守执业准则和职业道德，并对作出的安全评价报告结果承担法律责任，自觉接受应急管理部门、煤矿安全监督管理部门等行政执法部门的监督检查。</p>
          <p style={{ marginTop: "0.75rem" }}>法定代表人：{commitment.legalRepName}（已签名）</p>
          <Space>
            
            {commitment.legalRepSignatureUrl&&<Image src={commitment.legalRepSignatureUrl} style={{ width: 100, height: 100 }} />}
            <p>（单位盖章）</p>
          </Space>
          <p style={{ textAlign: "right" }}>{commitment.signDate}</p>
        </div>
      ),
    },
    {
      key: "personnel",
      label: "4.备案人员管理",
      children: (
        <Table size="small" bordered rowKey="id" pagination={false} dataSource={detail?.personnelList || []}
          columns={[
            { title: "序号", width: 60, render: (_, __, i) => i + 1 },
            { title: "人员姓名", dataIndex: "personName", width: 100 },
            { title: "类型", dataIndex: "personTypeName", width: 100 },
           
            { title: "职称", dataIndex: "titleName", width: 100 },
            { title: "操作", width: 80,
              render: (_, record) => (
                <Button type="link" size="small" onClick={() => setViewId(record.sourcePersonnelId)}>
                  查看
                </Button>
              ),
            },
          ]}
        />
      ),
    },
    {
      key: "equipment",
      label: "5.装备清单",
      children: (
        <Table size="small" bordered rowKey="id" pagination={false} dataSource={detail?.equipmentList || []}
          columns={[
            { title: "序号", width: 60, render: (_, __, i) => i + 1 },
            { title: "装备名称", dataIndex: "deviceName", width: 140 },
            { title: "规格型号", dataIndex: "deviceModel", width: 120 },
            { title: "生产厂家", dataIndex: "manufacturer", width: 140 },
            { title: "计量检定情况", width: 120,
              render: (_, record) => {
                if (record.calibrationReportUrl) {
                  return <Tag color="success">已上传</Tag>;
                }
                return <Tag color="warning">待上传</Tag>;
              },
            },
            { title: "操作", width: 80,
              render: (_, record) => (
                <PreviewUrlButton url={record.calibrationReportUrl}>
                  查看
                </PreviewUrlButton>
              ),
            },
          ]}
        />
      ),
    },
  ];

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

      {/* 人员详细信息弹窗 */}
            <StaffViewModal
              open={!!viewId}
              currentId={viewId}
        
              onCancel={() => setViewId("")}
            />

      

      </>
  );
};


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