import React, { useEffect, useState } from "react";
import { Button, Form, Select, Switch, Table, Tag } from "antd";
import TableAction from "@cqsjjb/jjb-react-admin-component/TableAction";
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
import SearchForm from "@cqsjjb/jjb-react-admin-component/SearchForm";
import ControlWrapper from "@cqsjjb/jjb-react-admin-component/ControlWrapper";
import { AntdTableFuncControl } from "@cqsjjb/jjb-common-decorator/antd";
import { tools } from "@cqsjjb/jjb-common-lib";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { NS_QUAL_REVIEW } from "~/enumerate/namespace";
import { QUALIFICATION_INDUSTRY_OPTIONS_MAP } from "~/enumerate/enterpriseOptions";
import { EXPERT_STATUS_MAP } from "~/enumerate/constant";
import {
  REVIEW_BUSINESS_SCOPE_OPTIONS,
  REVIEW_LIST_STATUS_MAP,
  REVIEW_STATUS_CLASS,
  REVIEW_UNIT_TYPE_OPTIONS,
  toQualReviewPageQuery,
} from "../reviewPageQuery";
import {
  getQualReviewMockEnabled,
  mockQueryReviewList,
  setQualReviewMockEnabled,
} from "../mockData";
import "./index.less";

const { router } = tools;

/**
 * 资质备案初审（原型 mod-qual-review）
 * - 搜索区：机构名称 / 机构类型 / 安全评价业务范围 / 是否专家核验 / 审核状态
 * - 表格列：复选框、序号、机构名称、机构类型、证书编号、业务范围、专家核验、审核状态、操作
 * - 操作：查看（详情）、审核（非已审核状态）
 */
const QualReview = (props) => {
  const [form] = Form.useForm();
  const { qualReview, queryReviewList } = props;
  const { qualReviewList, qualReviewTotal, qualReviewLoading } = qualReview || {};
  const [mockEnabled, setMockEnabled] = useState(getQualReviewMockEnabled());

  /**
   * 数据加载：mock 模式走本地高内聚数据（不请求后端）；
   * 真实模式走原有接口，二者互不影响。
   */
  const loadList = (useMock = mockEnabled) => {
    if (useMock) {
      const res = mockQueryReviewList(router.query);
      props.resetModelState(NS_QUAL_REVIEW, {
        qualReviewList: res.data,
        qualReviewTotal: res.total,
        qualReviewLoading: false,
      });
      return;
    }
    queryReviewList({
      ...toQualReviewPageQuery(router.query),
      supervision: true,
      applyTypeCode: 1,
    });
  };

  const handleSearch = () => {
    loadList();
  };

  const handleReset = (values) => {
    router.query = {
      ...router.query,
      ...values,
      current: 1,
      size: 10,
    };
    handleSearch();
  };

  useEffect(() => {
    form.setFieldsValue(router.query);
    loadList();
  }, []);

  /** 随时切换 mock/真实接口 */
  const handleToggleMock = (v) => {
    setQualReviewMockEnabled(v);
    setMockEnabled(v);
    router.query = { ...router.query, current: 1 };
    loadList(v);
  };

  /** 审核状态渲染：优先后端文案，缺失时按状态编码推断 */
  const renderStatus = (record) => {
    const name = record.filingStatusName || record.statusName;
    if (name) {
      const code = Number(record.filingStatusCode);
      const fallback = REVIEW_LIST_STATUS_MAP[code] || {};
      const color = /待审核|待核验/.test(name)
        ? "warning"
        : /审核中/.test(name)
          ? "processing"
          : /打回|退回/.test(name)
            ? "error"
            : /已审核|通过|已备案/.test(name)
              ? "success"
              : fallback.color || "default";
      return (
        <Tag className={REVIEW_STATUS_CLASS[color] || "tag_default"}>{name}</Tag>
      );
    }
    const config = REVIEW_LIST_STATUS_MAP[Number(record.filingStatusCode)];
    return config ? (
      <Tag className={REVIEW_STATUS_CLASS[config.color] || "tag_default"}>
        {config.label}
      </Tag>
    ) : (
      "--"
    );
  };

  const renderExpertStatus = (record) => {
    if (!record.needExpertCheck) {
      return <span className="expertDash">—</span>;
    }
    const config = EXPERT_STATUS_MAP[record.expertStatus];
    return config ? (
      <Tag className={REVIEW_STATUS_CLASS[config.color] || "tag_default"}>
        {config.label}
      </Tag>
    ) : (
      "--"
    );
  };

  const columns = [
    {
      title: "序号",
      dataIndex: "id",
      width: 60,
      fixed: "left",
      render: (text, record, index) => index + 1,
    },
    { title: "机构名称", dataIndex: "filingUnitName", width: 220, ellipsis: true },
    { title: "机构类型", dataIndex: "filingUnitTypeName", width: 100 },
    { title: "证书编号", dataIndex: "qualCertNo", width: 140, ellipsis: true },
    {
      title: "安全评价业务范围",
      dataIndex: "businessScope",
      width: 180,
      ellipsis: true,
      render: (_, record) => {
        if (Array.isArray(record.businessScope)) {
          return record.businessScope
            .map((item) => QUALIFICATION_INDUSTRY_OPTIONS_MAP[item] || item)
            .join("、");
        }
        return record.businessScope || "-";
      },
    },
    {
      title: "专家核验",
      dataIndex: "expertStatus",
      width: 100,
      render: (_, record) => renderExpertStatus(record),
    },
    {
      title: "审核状态",
      dataIndex: "filingStatusCode",
      width: 100,
      render: (_, record) => renderStatus(record),
    },
    {
      title: "操作",
      width: 140,
      fixed: "right",
      render: (_, record) => (
        <TableAction>
          <Button
            type="link"
            size="small"
            onClick={() => props.history.push(`FilingDetail?id=${record.id}`)}
          >
            查看
          </Button>
          {/* mock 演示模式展示全部“审核”按钮便于与原型对比；真实模式按状态显示 */}
          {(mockEnabled || Number(record.filingStatusCode) !== 1) && (
            <Button
              type="link"
              size="small"
              onClick={() => props.history.push(`QualReviewForm?id=${record.id}`)}
            >
              审核
            </Button>
          )}
        </TableAction>
      ),
    },
  ];

  return (
    <PageLayout title="资质申请审批">
      <SearchForm
        style={{ marginBottom: 24 }}
        form={form}
        defaultExpand
        loading={qualReviewLoading}
        formLine={[
          <Form.Item key="filingUnitName" name="filingUnitName">
            <ControlWrapper.Input label="机构名称" placeholder="请输入机构名称" allowClear />
          </Form.Item>,
          <Form.Item key="filingUnitTypeName" name="filingUnitTypeName">
            <ControlWrapper.Select
              label="机构类型"
              placeholder="请选择"
              allowClear
              style={{ width: "100%" }}
              options={REVIEW_UNIT_TYPE_OPTIONS}
            />
          </Form.Item>,
          <Form.Item key="businessScope" name="businessScope">
            <ControlWrapper.Select
              label="安全评价业务范围"
              placeholder="请选择"
              allowClear
              showSearch
              optionFilterProp="label"
              style={{ width: "100%" }}
              options={REVIEW_BUSINESS_SCOPE_OPTIONS}
            />
          </Form.Item>,
          <Form.Item key="needExpertCheck" name="needExpertCheck">
            <ControlWrapper.Select
              label="是否专家核验"
              placeholder="请选择"
              allowClear
              style={{ width: "100%" }}
            >
              <Select.Option value="yes">是</Select.Option>
              <Select.Option value="no">否</Select.Option>
            </ControlWrapper.Select>
          </Form.Item>,
          <Form.Item key="filingStatusCode" name="filingStatusCode">
            <ControlWrapper.Select
              label="审核状态"
              placeholder="请选择"
              allowClear
              style={{ width: "100%" }}
            >
              <Select.Option value="1">已审核</Select.Option>
              <Select.Option value="2">待审核</Select.Option>
              <Select.Option value="3">打回</Select.Option>
            </ControlWrapper.Select>
          </Form.Item>,
        ]}
        onReset={handleReset}
        onFinish={(values) => {
          router.query = {
            ...router.query,
            ...values,
            current: 1,
            size: 10,
          };
          handleSearch();
        }}
      />

      <div className="toolbar">
        <div className="toolbarLeft">
          <span className="totalText">
            共 <strong>{qualReviewTotal || 0}</strong> 条记录
          </span>
          <Tag
            className={mockEnabled ? "tag_warning" : "tag_default"}
            style={{ marginRight: 0 }}
          >
            {mockEnabled ? "Mock 演示中" : "真实接口"}
          </Tag>
          <span style={{ fontSize: "0.78rem", color: "#64748b" }}>Mock 数据</span>
          <Switch size="small" checked={mockEnabled} onChange={handleToggleMock} />
        </div>
      </div>

      <Table
        rowKey="id"
        columns={columns}
        dataSource={Array.isArray(qualReviewList) ? qualReviewList : []}
        rowSelection={{}}
        scroll={{ x: 1000, y: props.scrollY }}
        loading={qualReviewLoading}
        pagination={{
          total: qualReviewTotal,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `共 ${total} 条`,
          current: router.query.current || 1,
          pageSize: router.query.size || 10,
          onChange: (page, pageSize) => {
            router.query = {
              ...router.query,
              current: page,
              size: pageSize,
            };
            handleSearch();
          },
        }}
      />
    </PageLayout>
  );
};

export default Connect([NS_QUAL_REVIEW], true)(AntdTableFuncControl(QualReview));