import React, { useState, useEffect } from "react";
import dayjs from "dayjs";
import { Form, Table, Button, Modal, Input, Select, DatePicker, Card, Row, Col, Statistic, message, Tag } 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 { tools } from "@cqsjjb/jjb-common-lib";
import { NS_QUAL_REVIEW } from "~/enumerate/namespace";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { ON_SITE_REVIEW_STATUS_MAP } from "~/enumerate/constant";
import AttachmentUpload from "~/components/AttachmentUpload";

const { router } = tools;

const SiteReviewNotice = (props) => {
  const [searchForm] = Form.useForm();
  const [noticeForm] = Form.useForm();
  const [resultForm] = Form.useForm();
  const [noticeModalOpen, setNoticeModalOpen] = useState(false);
  const [resultModalOpen, setResultModalOpen] = useState(false);
  const [currentEditId, setCurrentEditId] = useState(null);
  const [currentResultRow, setCurrentResultRow] = useState(null);

  const {
    qualReview,
    queryQualOnSiteReviewPage,
    queryQualOnSiteReviewStatistics,
    addQualOnSiteReview,
    updateQualOnSiteReview,
    uploadQualOnSiteReviewResult,
    fetchQualOnSiteReviewDetail,
    fetchQualOnSiteReviewResultDetail,
    queryOrgSelectList,
    resetModelState,
  } = props;

  const {
    qualOnSiteReviewList = [],
    qualOnSiteReviewTotal = 0,
    qualOnSiteReviewStats = {},
    orgSelectList = [],
    siteReviewNoticeLoading,
    siteReviewStatisticsLoading,
    siteReviewSaveLoading,
    siteReviewResultLoading,
  } = qualReview || {};

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

  useEffect(() => {
    if (!noticeModalOpen) {
      resetModelState(NS_QUAL_REVIEW, { siteReviewSaveLoading: false });
    }
  }, [noticeModalOpen]);

  useEffect(() => {
    if (!resultModalOpen) {
      resetModelState(NS_QUAL_REVIEW, { siteReviewResultLoading: false });
    }
  }, [resultModalOpen]);

  const handleSearch = () => {

    queryQualOnSiteReviewPage({
      ...router.query,
    });
  };

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

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

  const handleOpenNoticeModal = () => {
    setCurrentEditId(null);
    noticeForm.resetFields();
    setNoticeModalOpen(true);
  };

  const handleEditNotice = (record) => {
    setCurrentEditId(record.id);
    fetchQualOnSiteReviewDetail({ id: record.id }).then((res) => {
      if (res?.success !== false) {
        const detail = res.data;
        noticeForm.setFieldsValue({
          orgId: detail.orgId,
          reviewDateStart: detail.reviewDateStart ? dayjs(detail.reviewDateStart) : null,
          reviewLocation: detail.reviewLocation,
          reviewMembers: detail.reviewMembers,
          reviewLeader: detail.reviewLeader,
          materialRequirements: detail.materialRequirements,
          supervisorContact: detail.supervisorContact,
          contactPhone: detail.contactPhone,
        });
      }
    });
    setNoticeModalOpen(true);
  };

  const handleSubmitNotice = () => {
    noticeForm.validateFields().then((values) => {
      const payload = {
        ...values,
        reviewDateStart: values.reviewDateStart.format("YYYY-MM-DD HH:mm:ss"),
        status: "AGENCY_PENDING_CONFIRMATION",
      };

      const action = currentEditId
        ? updateQualOnSiteReview({ ...payload, id: currentEditId })
        : addQualOnSiteReview(payload);

      action.then((res) => {
        if (res?.success !== false) {
          setNoticeModalOpen(false);
          message.success(currentEditId ? "现场审查通知已修改" : "现场审查通知已下发机构端");
          queryQualOnSiteReviewStatistics();
          handleSearch();
        }
      });
    }).catch(() => {});
  };

  const handleOpenResultModal = (record) => {
    setCurrentResultRow(record);
    resultForm.resetFields();
    resultForm.setFieldsValue({
      institution: record.unitName,
      reviewDateStart: record.reviewDateStart,
    });
    fetchQualOnSiteReviewResultDetail({ id: record.id }).then((res) => {
      if (res?.success !== false && res?.data) {
        const detail = res.data;
        resultForm.setFieldsValue({
          reviewLeader: detail.reviewLeader || "",
          reviewResult: detail.reviewResult,
          reviewOpinion: detail.reviewOpinion || "",
          fileList: (detail.fileList || []).map((item) => ({
            url: item.url,
            uid: item.id,
            status: "done",
            name: item.name,
          })),
        });
      }
    });
    setResultModalOpen(true);
  };

  const handleSubmitResult = () => {
    resultForm.validateFields().then((values) => {


      const payload = {
        id: currentResultRow.id,
        ...values,
      };

      uploadQualOnSiteReviewResult(payload).then((res) => {
        if (res?.success !== false) {
          setResultModalOpen(false);
          message.success("审查结果已保存并上传");
          queryQualOnSiteReviewStatistics();
          handleSearch();
        }
      });
    }).catch(() => {});
  };

  const columns = [
    { title: "机构名称", dataIndex: "unitName", ellipsis: true },
    {
      title: "现场审查时间", dataIndex: "reviewDateStart",
     
    },
    { title: "审查地点", dataIndex: "reviewLocation",  ellipsis: true },
    { title: "审查组成员", dataIndex: "reviewMembers", ellipsis: true },
    {
      title: "状态", dataIndex: "status",
      render: (status) => {
        const cfg = ON_SITE_REVIEW_STATUS_MAP[status];
        return cfg ? <Tag color={cfg.color}>{cfg.label}</Tag> : (status || "-");
      },
    },
    {
      title: "操作", width: 220, fixed: "right",
      render: (_, record) => (
        <TableAction>
          <Button type="link" size="small" onClick={() => handleEditNotice(record)}>
            修改
          </Button>
          <Button type="link" size="small" onClick={() => handleOpenResultModal(record)}>
            审查结果上传
          </Button>
        </TableAction>
      ),
    },
  ];

  return (
    <PageLayout
      title="现场审查通知"
      extra={
        <Button type="primary" onClick={handleOpenNoticeModal}>
          下发现场审查通知
        </Button>
      }
    >
    

      <Row gutter={16} style={{ marginBottom: 16 }}>
        <Col span={8}>
          <Card size="small" loading={siteReviewStatisticsLoading}>
            <Statistic title="通知总数" value={qualOnSiteReviewStats.totalCount ?? "-"} suffix="条" />
            <div style={{ fontSize: 12, color: "#999", marginTop: 4 }}>{qualOnSiteReviewStats.annualCumulativeCount ?? 0} 条本年度累计</div>
          </Card>
        </Col>
        <Col span={8}>
          <Card size="small" loading={siteReviewStatisticsLoading}>
            <Statistic title="待开展审查" value={qualOnSiteReviewStats.pendingReviewNextThirtyDaysCount ?? ""} valueStyle={{ color: "#2563eb" }} suffix="条" />
            <div style={{ fontSize: 12, color: "#999", marginTop: 4 }}>未来30日内</div>
          </Card>
        </Col>
        <Col span={8}>
          <Card size="small" loading={siteReviewStatisticsLoading}>
            <Statistic title="已完成" value={qualOnSiteReviewStats.completedArchivedCount ?? "-"} valueStyle={{ color: "#059669" }} suffix="条" />
            <div style={{ fontSize: 12, color: "#999", marginTop: 4 }}>审查结果已归档</div>
          </Card>
        </Col>
      </Row>

      <SearchForm
        form={searchForm}
        loading={siteReviewNoticeLoading}
        formLine={[
          <Form.Item key="unitName" name="unitName">
            <ControlWrapper.Input label="机构名称" placeholder="请输入机构名称" allowClear />
          </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>,
          <Form.Item key="dateRange" name="dateRange">
            <ControlWrapper.DatePicker.RangePicker label="审查日期" placeholder={["开始日期", "结束日期"]} />
          </Form.Item>,
        ]}
        onFinish={handleSearchSubmit}
        onReset={handleReset}
        style={{ marginBottom: 16 }}
      />

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

      {/* 下发现场审查通知 弹窗 */}
      <Modal
        title={currentEditId ? "修改现场审查通知" : "下发现场审查通知"}
        open={noticeModalOpen}
        onCancel={() => setNoticeModalOpen(false)}
        onOk={handleSubmitNotice}
        okText={currentEditId ? "保存修改" : "确认下发"}
        confirmLoading={siteReviewSaveLoading}
        width={760}
        destroyOnHidden
      >
        <Form form={noticeForm} layout="vertical">
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item name="orgId" label="受审查机构" rules={[{ required: true, message: "请选择" }]}>
                <Select placeholder="请选择" showSearch optionFilterProp="label">
                  {(orgSelectList || []).map((item) => (
                    <Select.Option key={item.id} value={item.id} label={item.unitName}>
                      {item.unitName}
                    </Select.Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="reviewDateStart" label="现场审查开始时间" rules={[{ required: true, message: "请选择" }]}>
                <DatePicker style={{ width: "100%" }} showTime />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item name="reviewLocation" label="审查地点" rules={[{ required: true, message: "请输入" }]}>
                <Input placeholder="机构办公场所、档案室及设备存放场所" maxLength={200} />
              </Form.Item>
            </Col>
            {/* <Col span={12}>
              <Form.Item name="reviewLeader" label="审查组长">
                <Input placeholder="请输入" maxLength={50} />
              </Form.Item>
            </Col> */}
          </Row>
          <Form.Item name="reviewMembers" label="审查组成员名单" rules={[{ required: true, message: "请输入" }]}>
            <Input placeholder="请输入审查组成员名单" maxLength={100} />
          </Form.Item>
          <Form.Item name="materialRequirements" label="材料准备要求">
            <Input.TextArea
              rows={4}
              placeholder="请准备机构资质申请材料原件、人员档案、社保材料、办公场所和档案室证明、设备清单、过程控制制度及项目档案等资料。"
              maxLength={500}
            />
          </Form.Item>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item name="supervisorContact" label="监管联系人">
                <Input placeholder="请输入监管联系人" maxLength={50} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="contactPhone" label="联系电话" rules={[{ pattern: /^(\d{3,4}-?\d{7,8}|\d{11})$/, message: "请输入正确的联系电话" }]}>
                <Input placeholder="请输入联系电话" maxLength={20} />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>

      {/* 审查结果上传弹窗 */}
      <Modal
        title="上传审查结果"
        open={resultModalOpen}
        onCancel={() => setResultModalOpen(false)}
        onOk={handleSubmitResult}
        okText="保存审查结果"
        confirmLoading={siteReviewResultLoading}
        width={760}
        destroyOnHidden
      >
        <div style={{ fontSize: 13, color: "#666", marginBottom: 16 }}>
          上传现场审查结果文件，并保存审查结论和意见。
        </div>
        <Form form={resultForm} layout="vertical">
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item name="institution" label="受审查机构">
                <Input disabled />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="reviewDateStart" label="现场审查日期">
                <Input disabled />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item name="reviewResult" label="审查结论" rules={[{ required: true, message: "请选择" }]}>
                <Select placeholder="请选择">
                  <Select.Option value={true}>审查通过</Select.Option>
                
                  <Select.Option value={false}>不通过</Select.Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="reviewLeader" label="审查组长">
                <Input placeholder="请输入" />
              </Form.Item>
            </Col>
          </Row>
          <AttachmentUpload
            name="fileList"
            label="审查结果文件"
            accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
            maxCount={10}
            extra="支持上传审查记录、审查意见或现场审查结果文件，限定pdf和图片，最多10个。"
          />
          <Form.Item name="reviewOpinion" label="审查意见">
            <Input.TextArea rows={4} placeholder="填写现场审查发现、整改要求和结论依据" />
          </Form.Item>
        </Form>
      </Modal>
    </PageLayout>
  );
};

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