import React, { useState, useEffect } from "react";
import {
  Form,
  Table,
  Button,
  Tag,
  Modal,
  Row,
  Col,
  Card,
  Statistic,
  Space,
  message,
} from "antd";
import { AntdTableFuncControl } from "@cqsjjb/jjb-common-decorator/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 { NS_SAFETY_EVAL_BUSINESS } from "~/enumerate/namespace";
import { RISK_LEVEL_MAP, RISK_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 RiskWarning = (props) => {
  const [searchForm] = Form.useForm();
  const [dataSource, setDataSource] = useState([]);
  const [total, setTotal] = useState(0);
  const [statData, setStatData] = useState({});
  const [handleModalVisible, setHandleModalVisible] = useState(false);
  const [currentRecord, setCurrentRecord] = useState(null);

  const { riskWarningPageLoading } = props.safetyEvalBusiness;

  const getStat = async () => {
    const res = await props.evalProjectRiskWarningStat();
    if (res?.success !== false) {
      setStatData(res?.data || {});
    }
  };

  const getData = async () => {
    const params = {
      ...router.query,
      current: router.query.current || 1,
      size: router.query.size || 10,
    };
    const res = await props.evalProjectRiskWarningPage(params);
    if (res?.success !== false) {
      setDataSource(res?.data || []);
      setTotal(res?.total || 0);
    }
  };

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

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

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

  const handlePageChange = (pagination) => {
    router.query = {
      ...router.query,
      current: pagination.current,
      size: pagination.pageSize,
    };
    getData();
  };

  const handleProcess = (record) => {
    setCurrentRecord(record);
    setHandleModalVisible(true);
  };

  const handleCloseRisk = async (record) => {
    Modal.confirm({
      title: "确认闭环",
      content: `确定将"${record.projectName}"的风险标记为闭环吗？`,
      onOk: async () => {
        // TODO: 调用闭环接口
        message.success("已闭环");
        getData();
      },
    });
  };

  const columns = [
    { title: "项目编号", dataIndex: "projectNo", width: 130 },
    {
      title: "项目/客户",
      width: 240,
      render: (_, record) => (
        <div>
          <div className="rw-project-name">{record.projectName}</div>
          <div className="rw-customer-name">{record.customerName}</div>
        </div>
      ),
    },
    {
      title: "风险等级",
      dataIndex: "riskLevelCode",
      width: 100,
      render: (code) => {
        const cfg = RISK_LEVEL_MAP[code];
        return cfg ? <Tag color={cfg.color}>{cfg.text}</Tag> : <Tag>{code}</Tag>;
      },
    },
    { title: "预警类型", dataIndex: "warningTypeName", width: 100 },
    {
      title: "触发条件",
      dataIndex: "triggerCondition",
      ellipsis: true,
      width: 260,
    },
    { title: "责任人", dataIndex: "responsiblePerson", width: 90 },
    { title: "预警时间", dataIndex: "warningTime", width: 110 },
    {
      title: "状态",
      dataIndex: "statusCode",
      width: 90,
      render: (code) => {
        const cfg = RISK_STATUS_MAP[code];
        return cfg ? <Tag color={cfg.color}>{cfg.text}</Tag> : <Tag>{code}</Tag>;
      },
    },
    {
      title: "操作",
      width: 130,
      fixed: "right",
      render: (_, record) => (
        <Space>
          <Button type="link" size="small" onClick={() => handleProcess(record)}>
            处理
          </Button>
          <Button type="link" size="small" onClick={() => handleCloseRisk(record)}>
            闭环
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <PageLayout title="风险预警管理">
      <Row gutter={16} className="rw-stat-row">
        <Col span={6}>
          <Card size="small">
            <Statistic
              title="预警总数"
              value={statData.totalCount ?? "-"}
              suffix={<span className="rw-stat-suffix">来自项目过程控制与周期规则</span>}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card size="small">
            <Statistic
              title="高风险"
              value={statData.highRiskCount ?? "-"}
              valueStyle={{ color: "#ff4d4f" }}
              suffix={<span className="rw-stat-suffix">延期、逾期、重大整改</span>}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card size="small">
            <Statistic
              title="处理中"
              value={statData.processingCount ?? "-"}
              valueStyle={{ color: "#faad14" }}
              suffix={<span className="rw-stat-suffix">已分派但未闭环</span>}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card size="small">
            <Statistic
              title="本周新增"
              value={statData.weekNewCount ?? "-"}
              valueStyle={{ color: "#52c41a" }}
              suffix={<span className="rw-stat-suffix">需在周例会确认</span>}
            />
          </Card>
        </Col>
      </Row>

      

      <SearchForm
        form={searchForm}
        loading={false}
        style={{ marginBottom: 16 }}
        formLine={[
          <Form.Item key="projectOrCustomer" name="projectOrCustomer">
            <ControlWrapper.Input
              label="项目/客户"
              placeholder="项目或客户名称"
              allowClear
            />
          </Form.Item>,
          <Form.Item key="riskLevel" name="riskLevel">
            <ControlWrapper.Select
              label="风险等级"
              placeholder="全部"
              allowClear
              options={[
                { label: "高风险", value: "HIGH" },
                { label: "中风险", value: "MIDDLE" },
                { label: "低风险", value: "LOW" },
              ]}
            />
          </Form.Item>,
          <Form.Item key="warningType" name="warningType">
            <ControlWrapper.Select
              label="预警类型"
              placeholder="全部"
              allowClear
              options={[
                { label: "进度风险", value: "PROGRESS" },
                { label: "周期风险", value: "CYCLE" },
                { label: "质量风险", value: "QUALITY" },
                { label: "人员风险", value: "PERSONNEL" },
                { label: "归档风险", value: "ARCHIVE" },
              ]}
            />
          </Form.Item>,
        ]}
        onFinish={handleSearch}
        onReset={handleReset}
      />

      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          marginBottom: 12,
        }}
      >
        <span style={{ fontSize: 13, color: "#999" }}>
          处理按钮会打开处置面板；标记闭环会直接更新行状态。
        </span>
      </div>

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

      <Modal
        title="风险处置"
        open={handleModalVisible}
        onCancel={() => setHandleModalVisible(false)}
        footer={null}
        width={600}
        destroyOnHide={true}
      >
        {currentRecord && (
          <div>
            <p>
              <strong>项目：</strong>
              {currentRecord.projectName}
            </p>
            <p>
              <strong>风险等级：</strong>
              <Tag color={RISK_LEVEL_MAP[currentRecord.riskLevelCode]?.color}>
                {currentRecord.riskLevelName}
              </Tag>
            </p>
            <p>
              <strong>预警类型：</strong>
              {currentRecord.warningTypeName}
            </p>
            <p>
              <strong>触发条件：</strong>
              {currentRecord.triggerCondition}
            </p>
            <p>
              <strong>责任人：</strong>
              {currentRecord.responsiblePerson}
            </p>
            <p>
              <strong>预警时间：</strong>
              {currentRecord.warningTime}
            </p>
            <div style={{ textAlign: "right", marginTop: 24 }}>
              <Space>
                <Button onClick={() => setHandleModalVisible(false)}>取消</Button>
                <Button
                  type="primary"
                  onClick={() => {
                    message.success("处理完成");
                    setHandleModalVisible(false);
                    getData();
                  }}
                >
                  确认处理
                </Button>
              </Space>
            </div>
          </div>
        )}
      </Modal>
    </PageLayout>
  );
};

export default Connect(
  [NS_SAFETY_EVAL_BUSINESS],
  true,
)(AntdTableFuncControl(RiskWarning));