import React, { useState, useEffect } from "react";
import { Button, Tag, Space, Spin } from "antd";
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
import { REVIEW_STATUS_MAP, LEGAL_STATUS_STYLE } from "~/enumerate/constant";
import { tools } from "@cqsjjb/jjb-common-lib";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { NS_QUAL_REVIEW } from "~/enumerate/namespace";
import FilingTabs from "../FilingTabs";
import ReviewModal from "./ReviewModal";
import "./indes.less";

const { router } = tools;

const QualReviewForm = (props) => {
  const { queryComplianceCheck, fetchQualFilingDetail, queryChangeComplianceCheck, fetchQualChangeDetail, qualReview } = props;
  const {  qualReviewLoading, complianceCheckItems, fetchQualFilingDetailLoading, qualFilingDetail } = qualReview;
  const { router } = tools;
  const isChange = router.query.mode === "change";
  const [compliance, setCompliance] = useState({});
  const [reviewVisible, setReviewVisible] = useState(false);

  const statusConfig = REVIEW_STATUS_MAP[qualFilingDetail.filingStatusCode];

  const legalPassCount = complianceCheckItems.filter(
    (i) => i.status === "PASS",
  ).length;
  const legalFailCount = complianceCheckItems.filter(
    (i) => i.status === "NOT_PASS",
  ).length;

  useEffect(() => {
    const complianceAction = isChange ? queryChangeComplianceCheck : queryComplianceCheck;
    const detailAction = isChange ? fetchQualChangeDetail : fetchQualFilingDetail;
    complianceAction({ id: router.query.id });
    detailAction({ id: router.query.id });
  }, []);

  return (
    <PageLayout
      title={
        <Space>
          <span>资质备案审核</span>
          {statusConfig && (
            <Tag color={statusConfig.color}>{statusConfig.label}</Tag>
          )}
        </Space>
      }
      history={props.history}
      previous
      footer={
        <Button type="primary" onClick={() => setReviewVisible(true)}>
          审核操作
        </Button>
      }
    >
      <Spin spinning={qualReviewLoading || fetchQualFilingDetailLoading}>
        <div className="qual-review-form">
          <div className="legal-check-bar">
            <div className="legal-check-title">法律规定内容</div>
            <div className="legal-check-grid">
              {complianceCheckItems.map((item) => {
                const style = LEGAL_STATUS_STYLE[item.status] || {};
                return (
                  <div
                    key={item.title}
                    className="legal-check-item"
                    style={{
                      borderLeft: `3px solid ${style.borderColor}`,
                      background: style.bg,
                    }}
                  >
                    <span>{style.icon}</span>
                    <div>
                      <div style={{ fontWeight: 500 }}>{item.title}</div>
                      <div className="legal-check-item-desc">{item.description}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          <FilingTabs
            detail={qualFilingDetail}
            isReview
            compliance={compliance}
            onComplianceChange={(id, v) =>
              setCompliance((prev) => ({ ...prev, [id]: v }))
            }
          />

          <ReviewModal
            open={reviewVisible}
            filingId={qualFilingDetail?.id}
            isChange={isChange}
            legalPassCount={legalPassCount}
            legalFailCount={legalFailCount}
            onSuccess={() => props.history.goBack()}
            onCancel={() => setReviewVisible(false)}
          />
        </div>
      </Spin>
    </PageLayout>
  );
};

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