import React, { useState, useEffect } 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 "~/pages/Container/EnterpriseInfo/PersonnelInfo/StaffViewModal";
import PreviewUrlButton from "~/components/PreviewUrlButton/index";
import {
  MOCK_EQUIP_DETAIL,

  CALIBRATION_MAP,
} from "../mockData";

/**
 * 共享组件：资质备案 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,
  onPersonnelView,
  onEquipView,
}) => {

  const [equipVisible, setEquipVisible] = useState(false);
  const [selectedEquip, setSelectedEquip] = useState(null);
  const [viewId, setViewId] = useState("");
  


  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]}
              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}>{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>
      ),
    },
    {
      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>
            
            <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: "positionName", width: 120 },
            { 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("")}
            />

      {/* 设备详细信息弹窗 */}
      <Modal
        title="设备详细信息"
        open={equipVisible}
        onCancel={() => setEquipVisible(false)}
        width={600}
        footer={<Button onClick={() => setEquipVisible(false)}>关闭</Button>}
      >
        {selectedEquip && (
          <Descriptions column={1} size="small">
            <Descriptions.Item label="设备名称">{MOCK_EQUIP_DETAIL.name}</Descriptions.Item>
            <Descriptions.Item label="型号">{MOCK_EQUIP_DETAIL.model}</Descriptions.Item>
            <Descriptions.Item label="仪器分类">{MOCK_EQUIP_DETAIL.category}</Descriptions.Item>
            <Descriptions.Item label="设备类型">{MOCK_EQUIP_DETAIL.type}</Descriptions.Item>
            <Descriptions.Item label="厂家">{MOCK_EQUIP_DETAIL.manufacturer}</Descriptions.Item>
            <Descriptions.Item label="现场校验类型">{MOCK_EQUIP_DETAIL.calibrationType}</Descriptions.Item>
            <Descriptions.Item label="设备流量说明">{MOCK_EQUIP_DETAIL.flowDesc}</Descriptions.Item>
            <Descriptions.Item label="最大流量">{MOCK_EQUIP_DETAIL.maxFlow}</Descriptions.Item>
            <Descriptions.Item label="最小流量">{MOCK_EQUIP_DETAIL.minFlow}</Descriptions.Item>
            <Descriptions.Item label="是否双路">{MOCK_EQUIP_DETAIL.dualChannel}</Descriptions.Item>
            <Descriptions.Item label="校准初始值" span={2}>{MOCK_EQUIP_DETAIL.calibInitValue}</Descriptions.Item>
            <Descriptions.Item label="校准单位" span={2}>{MOCK_EQUIP_DETAIL.calibUnit}</Descriptions.Item>
            <Descriptions.Item label="设备状态">
              <Tag color={CALIBRATION_MAP[MOCK_EQUIP_DETAIL.status]?.color}>{CALIBRATION_MAP[MOCK_EQUIP_DETAIL.status]?.label}</Tag>
            </Descriptions.Item>
          </Descriptions>
        )}
      </Modal>

      </>
  );
};


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