import React, { useState, useEffect } from "react";
import {
  Form,
  Table,
  Button,
  Tag,
  Modal,
  Select,
  Descriptions,
  message,
} from "antd";

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 TableAction from "@cqsjjb/jjb-react-admin-component/TableAction";
import { AntdTableFuncControl } from "@cqsjjb/jjb-common-decorator/antd";
import { NS_QUAL_REVIEW } from "~/enumerate/namespace";
import { ON_SITE_REVIEW_STATUS_MAP } from "~/enumerate/constant";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { tools } from "@cqsjjb/jjb-common-lib";
import "./index.less";

const { router } = tools;

const BIZ_TYPE_MAP = {
  add: "新申请资质",
  change: "资质变更",
};

const SiteReviewNotice = (props) => {
  const [searchForm] = Form.useForm();
  const [detailModalVisible, setDetailModalVisible] = useState(false);
  const [currentRecord, setCurrentRecord] = useState(null);

  const {
    qualReview,
    queryQualOnSiteReviewOrgPage,
    confirmQualOnSiteReview,
  } = props;

  const {
    orgSiteReviewList = [],
    orgSiteReviewTotal = 0,
    siteReviewNoticeLoading,
  } = qualReview || {};

  useEffect(() => {
    searchForm.setFieldsValue(router.query);
    getData();
  }, []);

  const getData = () => {
    queryQualOnSiteReviewPage({
      ...router.query,
    });
  };

  const queryQualOnSiteReviewPage = (params) => {
    router.query = params;
    queryQualOnSiteReviewOrgPage(params);
  };

  const handleSearch = (values) => {
    const { reviewDateRange, ...rest } = values;
    queryQualOnSiteReviewPage({
      ...router.query,
      ...rest,
      ...(reviewDateRange?.[0] && { reviewDateStartBegin: reviewDateRange[0].format("YYYY-MM-DD") }),
      ...(reviewDateRange?.[1] && { reviewDateStartEnd: reviewDateRange[1].format("YYYY-MM-DD") }),
      current: 1,
      size: 10,
    });
  };

  const handleReset = (values) => {
    searchForm.resetFields();
    queryQualOnSiteReviewPage({ ...values, current: 1, size: 10 });
  };

  const handleViewDetail = (record) => {
    setCurrentRecord(record);
    setDetailModalVisible(true);
  };

  const handleConfirm = (record) => {
    Modal.confirm({
      title: "确认现场审查安排",
      content: `确定确认项目"${record.id}"的现场审查安排吗？确认后将反馈至监管端。`,
      onOk: () => {
        return confirmQualOnSiteReview({ id: record.id }).then((res) => {
          if (res?.success !== false) {
            message.success("现场审查安排已确认");
            getData();
          }
        });
      },
    });
  };

  const columns = [
    { title: "通知编号", dataIndex: "id", width: 110 ,ellipsis: true },
    {
      title: "申请事项",
      dataIndex: "bizType",
      width: 120,
      render: (v) => BIZ_TYPE_MAP[v] || v || "-",
    },
    { title: "监管部门", dataIndex: "supervisorContact", width: 130, ellipsis: true },
    { title: "现场审查时间", dataIndex: "reviewDateStart", width: 180 },
    { title: "审查地点", dataIndex: "reviewLocation", width: 180, ellipsis: true },
    { title: "审查组", dataIndex: "reviewMembers", width: 130, ellipsis: true },
    {
      title: "材料准备",
      dataIndex: "materialRequirements",
      width: 160,
      ellipsis: true,
    },
    {
      title: "状态",
      dataIndex: "status",
      width: 110,
      render: (status) => {
        const cfg = ON_SITE_REVIEW_STATUS_MAP[status];
        return cfg ? <Tag color={cfg.color}>{cfg.label}</Tag> : (status || "-");
      },
    },
    {
      title: "操作",
      width: 180,
      fixed: "right",
      render: (_, record) => (
        <TableAction>
          <Button
            type="link"
            size="small"
           
            onClick={() => handleViewDetail(record)}
          >
            查看
          </Button>
          {record.status === "AGENCY_PENDING_CONFIRMATION" && (
            <Button
              type="link"
              size="small"
            
              onClick={() => handleConfirm(record)}
            >
              确认安排
            </Button>
          )}
        </TableAction>
      ),
    },
  ];

  return (
    <PageLayout title="现场审查通知">
     

      <SearchForm
        form={searchForm}
        loading={siteReviewNoticeLoading}
        style={{ marginBottom: 16 }}
        formLine={[
          <Form.Item key="keyword" name="keyword">
            <ControlWrapper.Input
              label="通知编号"
              placeholder="请输入通知编号"
              allowClear
            />
          </Form.Item>,
          <Form.Item key="bizType" name="bizType">
            <ControlWrapper.Select label="申请事项" placeholder="全部" allowClear style={{ width: "100%" }}>
              <Select.Option value="add">新申请资质</Select.Option>
              <Select.Option value="change">资质变更</Select.Option>
            </ControlWrapper.Select>
          </Form.Item>,
          <Form.Item key="reviewDateRange" name="reviewDateRange">
            <ControlWrapper.DatePicker.RangePicker label="审查日期" placeholder={["开始日期", "结束日期"]} />
          </Form.Item>,
          <Form.Item key="status" name="status">
            <ControlWrapper.Select label="确认状态" placeholder="全部" allowClear style={{ width: "100%" }}>
              {Object.entries(ON_SITE_REVIEW_STATUS_MAP).map(([value, cfg]) => (
                <Select.Option key={value} value={value}>{cfg.label}</Select.Option>
              ))}
            </ControlWrapper.Select>
          </Form.Item>,
        ]}
        onFinish={handleSearch}
        onReset={handleReset}
      />

      <Table
        rowKey="id"
        columns={columns}
        dataSource={orgSiteReviewList}
        loading={siteReviewNoticeLoading}
        scroll={{ y: props.scrollY, x: 1300 }}
        pagination={{
          total: orgSiteReviewTotal,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `共 ${total} 条`,
          current: Number(router.query.current) || 1,
          pageSize: Number(router.query.size) || 10,
          onChange: (page, pageSize) => {
            queryQualOnSiteReviewPage({ ...router.query, current: page, size: pageSize });
          },
        }}
      />

      <Modal
        title="现场审查通知详情"
        open={detailModalVisible}
        onCancel={() => setDetailModalVisible(false)}
        footer={null}
        width={680}
        destroyOnHide={true}
      >
        {currentRecord && (
          <Descriptions column={2} bordered size="small">
            <Descriptions.Item label="通知编号">{currentRecord.id}</Descriptions.Item>
            <Descriptions.Item label="申请事项">
              {BIZ_TYPE_MAP[currentRecord.bizType] || currentRecord.bizType || "-"}
            </Descriptions.Item>
            <Descriptions.Item label="监管联系人">{currentRecord.supervisorContact || "-"}</Descriptions.Item>
            <Descriptions.Item label="联系电话">{currentRecord.contactPhone || "-"}</Descriptions.Item>
            <Descriptions.Item label="现场审查时间" span={2}>{currentRecord.reviewDateStart || "-"}</Descriptions.Item>
            <Descriptions.Item label="审查地点" span={2}>{currentRecord.reviewLocation || "-"}</Descriptions.Item>
            <Descriptions.Item label="审查组成员" span={2}>{currentRecord.reviewMembers || "-"}</Descriptions.Item>
            <Descriptions.Item label="审查组长">{currentRecord.reviewLeader || "-"}</Descriptions.Item>
            <Descriptions.Item label="状态">
              <Tag color={ON_SITE_REVIEW_STATUS_MAP[currentRecord.status]?.color}>
                {ON_SITE_REVIEW_STATUS_MAP[currentRecord.status]?.label || currentRecord.status}
              </Tag>
            </Descriptions.Item>
            <Descriptions.Item label="材料准备要求" span={2}>
              {currentRecord.materialRequirements || "-"}
            </Descriptions.Item>
          </Descriptions>
        )}
      </Modal>
    </PageLayout>
  );
};

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