import React, { useState, useEffect } from "react";
import dayjs from "dayjs";
import { Button, Form, Table, Tag, Modal, Select, DatePicker, Input, Space, 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 { AntdTableFuncControl } from "@cqsjjb/jjb-common-decorator/antd";
import { tools } from "@cqsjjb/jjb-common-lib";
import AttachmentUpload from "~/components/AttachmentUpload";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { NS_RISK_CENTER } from "~/enumerate/namespace";
import {
  RISK_TYPE_MAP,
  STAGE_MAP,
  ORG_STATUS_MAP,
  RISK_SUBTYPE_OPTIONS,
} from "~/enumerate/constant";
import "./index.less";

const { router } = tools;

/** 项目预警规则提示 */
const PROJ_RULES = [
  "项目启动超期",
  "关键节点超期",
  "项目人员异常",
  "从业告知异常",
  "现场勘查异常",
  "过程控制/归档异常",
];

/** 统计卡片样式主题 */
const CARD_THEMES = [
  { bg: "#fee2e2", color: "#dc2626" },
  { bg: "#fef3c7", color: "#d97706" },
  { bg: "#dbeafe", color: "#2563eb" },
  { bg: "#d1fae5", color: "#059669" },
];

const RiskCenter = (props) => {
  const [form] = Form.useForm();
  const [processForm] = Form.useForm();
  const [processRecord, setProcessRecord] = useState(null);
  const [processModalOpen, setProcessModalOpen] = useState(false);

  const { riskCenter, queryRiskOverviewAction, queryRiskPageAction } = props;
  const { overviewStats = [], riskPageList = [], riskPageTotal = 0, riskPageLoading } = riskCenter || {};

  useEffect(() => {
    queryRiskOverviewAction();
    handleSearch();
  }, []);

  const handleSearch = () => {
    queryRiskPageAction(router.query);
  };

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

  const handlePageChange = (page, size) => {
    router.query = { ...router.query, current: page, size };
    handleSearch()
  };

  /** 处理按钮 — 打开对应阶段的处理弹窗 */
  const handleProcess = (record) => {
    setProcessRecord(record);
    if (record.stage === "未处理" || record.stage === "已发机构") {
      processForm.setFieldsValue({
        relatedId: record.id,
        institution: record.riskObject,
        deadline: dayjs().add(15, "day"),
        opinion: "请核查来源字段与上传材料，形成监管处置记录。",
      });
    }
    setProcessModalOpen(true);
  };

  /** 提交预警处置 */
  const handleProcessSubmit = () => {
    message.success("处理结果已提交");
    setProcessModalOpen(false);
    setProcessRecord(null);
    processForm.resetFields();
  };

  /** 退回补正 */
  const handleReturn = () => {
    message.success("已退回机构补正");
    setProcessModalOpen(false);
    setProcessRecord(null);
  };

  /** 复核通过并闭环 */
  const handleClose = () => {
    message.success("预警已复核闭环");
    setProcessModalOpen(false);
    setProcessRecord(null);
  };

  const columns = [
    {
      title: "预警编号",
      dataIndex: "id",
      width: 160,
    },
    {
      title: "预警大类",
      dataIndex: "category",
      width: 100,
      render: (val) => {
        const cfg = RISK_TYPE_MAP[val];
        return cfg ? <Tag color={cfg.color}>{cfg.label}</Tag> : val || "--";
      },
    },
    {
      title: "预警子类",
      dataIndex: "subtype",
      width: 140,
    },
    {
      title: "风险对象",
      dataIndex: "riskObject",
      width: 200,
    },
    {
      title: "来源字段",
      dataIndex: "sourceFields",
      width: 280,
      render: (sources) => (
        <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
          {(sources || []).map((s, i) => (
            <span key={i} className="source-pill">
              {s}
            </span>
          ))}
        </div>
      ),
    },
    {
      title: "触发内容",
      dataIndex: "content",
      width: 320,
    },
    {
      title: "处理阶段",
      dataIndex: "stage",
      width: 100,
      render: (stage) => {
        const cfg = STAGE_MAP[stage];
        return cfg ? <Tag color={cfg.color}>{cfg.label}</Tag> : "--";
      },
    },
    {
      title: "机构端状态",
      dataIndex: "orgStatus",
      width: 110,
      render: (status) => {
        const cfg = ORG_STATUS_MAP[status];
        return cfg ? <Tag color={cfg.color}>{cfg.label}</Tag> : "--";
      },
    },
    {
      title: "监管操作",
      width: 100,
      fixed: "right",
      render: (_, record) => (
        <Button type="primary" size="small" onClick={() => handleProcess(record)}>
          处理
        </Button>
      ),
    },
  ];

  return (
    <PageLayout title="风险预警中心">
      <div className="risk-center">
        {/* 统计卡片 */}
        <div className="stat-grid cols-4">
          {overviewStats.map((stat, idx) => {
            const theme = CARD_THEMES[idx % CARD_THEMES.length];
            return (
              <div className="stat-card" key={idx}>
                <div className="stat-info">
                  <div className="stat-label">{stat.label}</div>
                  <div className="stat-value">{stat.value}</div>
                  <div className="stat-hint">{stat.hint}</div>
                </div>
                <div
                  className="stat-icon"
                  style={{ background: theme.bg, color: theme.color }}
                >
                  {stat.label.charAt(0)}
                </div>
              </div>
            );
          })}
        </div>

        {/* 项目预警规则提示 */}
        <div className="source-note">
          <strong>项目预警规则：</strong>
          {PROJ_RULES.map((rule) => (
            <span key={rule} className="source-pill">
              {rule}
            </span>
          ))}
        </div>

        {/* 搜索表单 */}
        <SearchForm
          style={{ marginBottom: 12 }}
          form={form}
          formLine={[
            <Form.Item key="keyword" name="keyword">
              <ControlWrapper.Input
                label="关键词"
                placeholder="机构/项目/人员/预警编号"
                allowClear
              />
            </Form.Item>,
            <Form.Item key="riskType" name="type">
              <ControlWrapper.Select
                label="预警大类"
                placeholder="全部"
                allowClear
                style={{ width: "100%" }}
                options={[
                  { label: "资质预警", value: "资质预警" },
                  { label: "项目预警", value: "项目预警" },
                ]}
              />
            </Form.Item>,
            <Form.Item key="subtype" name="subtype">
              <ControlWrapper.Select
                label="预警子类"
                placeholder="全部"
                allowClear
                style={{ width: "100%" }}
                options={RISK_SUBTYPE_OPTIONS}
              />
            </Form.Item>,
            <Form.Item key="stage" name="stage">
              <ControlWrapper.Select
                label="处理阶段"
                placeholder="全部"
                allowClear
                style={{ width: "100%" }}
                options={[
                  { label: "未处理", value: "未处理" },
                  { label: "已发机构", value: "已发机构" },
                  { label: "待复核", value: "待复核" },
                  { label: "已闭环", value: "已闭环" },
                ]}
              />
            </Form.Item>,
          ]}
          onReset={handleReset}
          onFinish={(values) => {
            router.query = { ...values, current: 1, size: 10 };
            handleSearch();
          }}
        />

        {/* 工具条 */}
        <div className="risk-toolbar">
          <div className="risk-toolbar-left">
            <span className="risk-toolbar-desc">
              资质预警沿用资质保持监控结果；项目预警由项目计划、人员、从业告知、现场记录和审核归档数据触发。
            </span>
          </div>
          <div className="risk-toolbar-right">
            <Button className="btn-ghost" size="small">
              导出预警
            </Button>
          </div>
        </div>

        {/* 数据表格 */}
        <Table
          rowKey="id"
          columns={columns}
          dataSource={riskPageList}
          loading={riskPageLoading}
          scroll={{ x: 1600, y: props.scrollY }}
          pagination={{
            total: riskPageTotal,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (t) => `共 ${t} 条`,
            current: Number(router.query.current) || 1,
            pageSize: Number(router.query.size) || 10,
            onChange: handlePageChange,
          }}
        />

        {/* 风险预警处置弹窗（未处理 / 已发机构） */}
        {processRecord && (processRecord.stage === "未处理" || processRecord.stage === "已发机构") && (
          <Modal
            title={`风险预警处置 - ${processRecord.id}`}
            open={processModalOpen}
            onCancel={() => { setProcessModalOpen(false); setProcessRecord(null); }}
            footer={
              <Space>
                <Button onClick={() => { setProcessModalOpen(false); setProcessRecord(null); }}>关闭</Button>
                <Button type="primary" onClick={handleProcessSubmit}>提交</Button>
              </Space>
            }
            width={760}
            destroyOnHidden
          >
            <div style={{ padding: "0 0 8px", fontSize: 13, color: "#666" }}>
              风险预警中心统一办理监管处置：确认来源、选择处置方式、发送机构消息、等待机构反馈、复核并闭环。
            </div>
            <Form form={processForm} layout="vertical" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 16px" }} scrollToFirstError>
              <Form.Item name="method" label="处置方式" rules={[{ required: true, message: "请选择处置方式" }]}>
                <Select placeholder="请选择处置方式" options={[
                  { label: "发送整改通知", value: "send_rectify" },
                  { label: "发送核查函", value: "send_check" },
                  { label: "退回补正", value: "return" },
                  { label: "转办复核", value: "transfer" },
                  { label: "标记闭环", value: "mark_closed" },
                ]} />
              </Form.Item>
              <Form.Item name="deadline" label="办理期限" rules={[{ required: true, message: "请选择办理期限" }]}>
                <DatePicker style={{ width: "100%" }} />
              </Form.Item>
              <Form.Item name="relatedId" label="关联预警编号">
                <Input disabled />
              </Form.Item>
              <Form.Item name="institution" label="接收机构">
                <Input disabled />
              </Form.Item>
              <Form.Item name="opinion" label="监管意见" style={{ gridColumn: "1 / -1" }}>
                <Input.TextArea rows={3} />
              </Form.Item>
              <AttachmentUpload
                name="attachments"
                label="监管附件"
                accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png"
                extra="可上传核查材料、监管意见附件或其他处置依据。"
              />
            </Form>
          </Modal>
        )}

        {/* 机构反馈复核弹窗（待复核 / 已闭环） */}
        {processRecord && (processRecord.stage === "待复核" || processRecord.stage === "已闭环") && (
          <Modal
            title={`机构反馈复核 - ${processRecord.id}`}
            open={processModalOpen}
            onCancel={() => { setProcessModalOpen(false); setProcessRecord(null); }}
            footer={
              <Space>
                <Button onClick={() => { setProcessModalOpen(false); setProcessRecord(null); }}>关闭</Button>
                <Button onClick={handleReturn}>退回补正</Button>
                <Button type="primary" onClick={handleClose}>复核通过并闭环</Button>
              </Space>
            }
            width={760}
            destroyOnHidden
          >
            <div style={{ padding: "0 0 8px", fontSize: 13, color: "#666" }}>
              机构端提交的说明和附件进入本环节复核，监管人员可通过、退回补正或办结。
            </div>
            <Table
              rowKey="name"
              dataSource={[
                { name: "整改说明", content: "已说明问题原因和处理措施", status: "待复核", source: "机构端消息.整改说明" },
                { name: "证明附件", content: "机构上传的证明材料", status: "待复核", source: "机构端消息.附件" },
              ]}
              columns={[
                { title: "材料项", dataIndex: "name", width: 100 },
                { title: "机构提交内容", dataIndex: "content", width: 200 },
                { title: "复核状态", dataIndex: "status", width: 100 },
                { title: "来源", dataIndex: "source" },
              ]}
              pagination={false}
              size="small"
            />
            <div style={{ marginTop: 16 }}>
              <AttachmentUpload
                name="reviewAttachments"
                label="复核附件"
                accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png"
                extra="可上传复核意见、核查记录或办结依据。"
              />
            </div>
          </Modal>
        )}
      </div>
    </PageLayout>
  );
};

export default Connect(
  [NS_RISK_CENTER],
  true,
)(AntdTableFuncControl(RiskCenter));