import React, { useState } from "react";
import { Button, Descriptions, Table, Tag, Tabs, Select, Modal, Space } from "antd";
import {
  MOCK_MATERIALS,
  MOCK_PERSONNEL,
  MOCK_EQUIPMENT,
  MOCK_EQUIP_DETAIL,
  MOCK_PERSONNEL_DETAIL,
  MOCK_CERTIFICATES,
  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 [personnelVisible, setPersonnelVisible] = useState(false);
  const [equipVisible, setEquipVisible] = useState(false);
  const [selectedEquip, setSelectedEquip] = useState(null);

  const baseCols = [
    { title: "序号", width: 60, render: (_, __, i) => i + 1 },
    { title: "材料名称", dataIndex: "name" },
  ];

  const materialCols = isReview
    ? [
        ...baseCols,
        { title: "上传附件", dataIndex: "attachment", width: 120 },
        { title: "格式", dataIndex: "format", width: 80 },
        { title: "状态", dataIndex: "status", width: 100, render: () => <Tag color="success">已上传</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: "format", width: 80 },
        { title: "状态", dataIndex: "status", width: 100, render: () => <Tag color="success">已上传</Tag> },
        { title: "操作", width: 80, render: () => <Button type="link" size="small">预览</Button> },
      ];

  const items = [
    {
      key: "info",
      label: "1.备案基本信息",
      children: (
        <Descriptions column={2} bordered size="small" style={{ background: "#fff" }}>
          <Descriptions.Item label="申请的业务范围" span={2}>{detail.scopeName}</Descriptions.Item>
          <Descriptions.Item label="备案属地">{detail.filingRegion}</Descriptions.Item>
          <Descriptions.Item label="备案单位">{detail.orgName}</Descriptions.Item>
          <Descriptions.Item label="备案单位类型">{detail.orgType}</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.certNo}</Descriptions.Item>
          <Descriptions.Item label="信息公开网址">{detail.website}</Descriptions.Item>
          <Descriptions.Item label="法人代表及电话">{detail.legalPerson} / {detail.legalPhone}</Descriptions.Item>
          <Descriptions.Item label="联系人及电话">{detail.contactPerson} / {detail.contactPhone}</Descriptions.Item>
          <Descriptions.Item label="固定资产总值(万元)">{detail.fixedAssets}</Descriptions.Item>
          <Descriptions.Item label="工作场所建筑面积">{detail.officeArea}</Descriptions.Item>
          <Descriptions.Item label="档案室面积">{detail.archiveArea}</Descriptions.Item>
          <Descriptions.Item label="专职安全评价师数量">{detail.evaluatorCount}</Descriptions.Item>
          <Descriptions.Item label="注册安全工程师数量">{detail.registerEngineerCount}</Descriptions.Item>
          <Descriptions.Item label="单位基本情况介绍" span={2}>{detail.description}</Descriptions.Item>
        </Descriptions>
      ),
    },
    {
      key: "materials",
      label: "2.备案材料上传",
      children: (
        <Table size="small" bordered rowKey="id" pagination={false} dataSource={MOCK_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>本人{detail.legalPerson}是{detail.orgName}法定代表人，现代表我单位承诺如下：</p>
          <p>一、我单位自愿申请安全评价机构资质。本人已经认真学习、了解并掌握《安全生产法》《行政许可法》《行政处罚法》及《安全评价检测检验机构管理办法》等法律法规的相关规定，知悉开展安全评价工作的法律责任、义务、权力和风险。</p>
          <p>二、本人承诺本单位满足《安全评价检测检验机构管理办法》所规定的资质条件要求，本人及单位三年内无重大违法失信行为，申请资质所提交的有关材料真实、合法、有效，并对其真实性、合法性承担相应法律责任，接受并配合有关部门对本单位开展的专业能力审查。</p>
          <p>三、如能获准资质，本单位将严格按照法律法规、规章标准的要求开展安全评价活动，遵守执业准则和职业道德，并对作出的安全评价报告结果承担法律责任，自觉接受应急管理部门、煤矿安全监督管理部门等行政执法部门的监督检查。</p>
          <p style={{ marginTop: "0.75rem" }}>法定代表人：{detail.legalPerson}（已签名）</p>
          <p>（单位盖章）</p>
          <p style={{ textAlign: "right" }}>2026年06月25日</p>
        </div>
      ),
    },
    {
      key: "personnel",
      label: "4.备案人员管理",
      children: (
        <Table size="small" bordered rowKey="id" pagination={false} dataSource={MOCK_PERSONNEL}
          columns={[
            { title: "序号", width: 60, render: (_, __, i) => i + 1 },
            { title: "人员姓名", dataIndex: "name", width: 100 },
            { title: "类型", dataIndex: "type", width: 100 },
            { title: "职务", dataIndex: "position", width: 120 },
            { title: "职称", dataIndex: "title", width: 100 },
            { title: "专业能力", dataIndex: "ability" },
            { title: "操作", width: 80,
              render: () => (
                <Button type="link" size="small" onClick={onPersonnelView || (() => setPersonnelVisible(true))}>
                  查看
                </Button>
              ),
            },
          ]}
        />
      ),
    },
    {
      key: "equipment",
      label: "5.装备清单",
      children: (
        <Table size="small" bordered rowKey="id" pagination={false} dataSource={MOCK_EQUIPMENT}
          columns={[
            { title: "序号", width: 60, render: (_, __, i) => i + 1 },
            { title: "装备名称", dataIndex: "name", width: 140 },
            { title: "规格型号", dataIndex: "model", width: 120 },
            { title: "生产厂家", dataIndex: "manufacturer", width: 140 },
            { title: "计量检定情况", dataIndex: "calibration", width: 120,
              render: (s) => {
                const cfg = CALIBRATION_MAP[s];
                return cfg ? <Tag color={cfg.color}>{cfg.label}</Tag> : s;
              },
            },
            { title: "操作", width: 80,
              render: (_, record) => (
                <Button type="link" size="small" onClick={() => onEquipView ? onEquipView(record) : (setSelectedEquip(record), setEquipVisible(true))}>
                  查看
                </Button>
              ),
            },
          ]}
        />
      ),
    },
  ];

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

      {/* 人员详细信息弹窗 */}
      <Modal
        title="人员详细信息"
        open={personnelVisible}
        onCancel={() => setPersonnelVisible(false)}
        width={720}
        footer={(originNode, { CancelBtn }) => <CancelBtn />}
      >
        <Descriptions column={2} bordered size="small">
          <Descriptions.Item label="姓名">{MOCK_PERSONNEL_DETAIL.name}</Descriptions.Item>
          <Descriptions.Item label="性别">{MOCK_PERSONNEL_DETAIL.gender}</Descriptions.Item>
          <Descriptions.Item label="资质范围">{MOCK_PERSONNEL_DETAIL.qualScope}</Descriptions.Item>
          <Descriptions.Item label="出生日期">{MOCK_PERSONNEL_DETAIL.birthDate}</Descriptions.Item>
          <Descriptions.Item label="办公地址" span={2}>{MOCK_PERSONNEL_DETAIL.officeAddress}</Descriptions.Item>
          <Descriptions.Item label="专业">{MOCK_PERSONNEL_DETAIL.major}</Descriptions.Item>
          <Descriptions.Item label="职业等级及证书编号">{MOCK_PERSONNEL_DETAIL.certLevel}</Descriptions.Item>
          <Descriptions.Item label="邮箱">{MOCK_PERSONNEL_DETAIL.email}</Descriptions.Item>
          <Descriptions.Item label="人员类型">{MOCK_PERSONNEL_DETAIL.personnelType}</Descriptions.Item>
          <Descriptions.Item label="身份证号">{MOCK_PERSONNEL_DETAIL.idCard}</Descriptions.Item>
          <Descriptions.Item label="现住地址" span={2}>{MOCK_PERSONNEL_DETAIL.currentAddress}</Descriptions.Item>
          <Descriptions.Item label="学历">{MOCK_PERSONNEL_DETAIL.education}</Descriptions.Item>
          <Descriptions.Item label="毕业院校">{MOCK_PERSONNEL_DETAIL.graduateSchool}</Descriptions.Item>
          <Descriptions.Item label="职务">{MOCK_PERSONNEL_DETAIL.position}</Descriptions.Item>
          <Descriptions.Item label="是否注册安全工程师">
            <Tag color={MOCK_PERSONNEL_DETAIL.isRegisterEngineer === "是" ? "success" : "error"}>
              {MOCK_PERSONNEL_DETAIL.isRegisterEngineer}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="出版学术专著、专利、获奖、发表学术论文等" span={2}>{MOCK_PERSONNEL_DETAIL.publications}</Descriptions.Item>
          <Descriptions.Item label="自我申报的专业能力及认定方式" span={2}>{MOCK_PERSONNEL_DETAIL.selfDeclaration}</Descriptions.Item>
          <Descriptions.Item label="主要学习工作经历" span={2}>{MOCK_PERSONNEL_DETAIL.workExperience}</Descriptions.Item>
          <Descriptions.Item label="申报专业能力证明材料" span={2}>
            <Space><Button type="link" size="small">查看附件</Button><Tag color="success">专业能力证明.pdf</Tag></Space>
          </Descriptions.Item>
        </Descriptions>

        <h4 style={{ fontSize: "0.85rem", color: "#1890ff", margin: "1.25rem 0 0.6rem", paddingBottom: "0.3rem", borderBottom: "2px solid #e6f7ff" }}>证照信息</h4>
        <Table size="small" bordered rowKey="id" pagination={false} dataSource={MOCK_CERTIFICATES} scroll={{ x: 920 }}
          columns={[
            { title: "证照名称", dataIndex: "name", ellipsis: true },
            { title: "证书编号", dataIndex: "certNo", width: 120 },
            { title: "证书类别", dataIndex: "category", width: 120 },
            { title: "发证机关", dataIndex: "issuer", width: 150, ellipsis: true },
            { title: "有效开始日期", dataIndex: "startDate", width: 120 },
            { title: "有效结束日期", dataIndex: "endDate", width: 120 },
            { title: "操作", fixed: "right", width: 80, render: () => <Button type="link" size="small">查看证书</Button> },
          ]}
        />
      </Modal>

      {/* 设备详细信息弹窗 */}
      <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 FilingTabs;