import React, { useState } from "react";
import { Tabs, Tag, Alert, Button, Card } from "antd";
import { ArrowLeftOutlined } from "@ant-design/icons";
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
import { AntdTableFuncControl } from "@cqsjjb/jjb-common-decorator/antd";

const PROCESS_TABS = [
  { key: "risk", index: "01", label: "风险分析", state: "已完成", stateType: "success" },
  { key: "contract", index: "02", label: "业务合同", state: "已完成", stateType: "success" },
  { key: "team", index: "03", label: "项目组", state: "已完成", stateType: "success" },
  { key: "survey", index: "04", label: "现场踏勘", state: "已完成", stateType: "success" },
  { key: "report", index: "05", label: "报告编制", state: "编制中", stateType: "processing" },
  { key: "internal", index: "06", label: "内部审核", state: "待办理", stateType: "default" },
  { key: "technical", index: "07", label: "技术审核", state: "待办理", stateType: "default" },
  { key: "control", index: "08", label: "过程控制", state: "前置未完成", stateType: "warning", locked: true },
];

const ProjectFlow = (props) => {
  const [activeKey, setActiveKey] = useState("risk");

  const tabItems = PROCESS_TABS.map((item) => ({
    key: item.key,
    disabled: item.locked,
    label: (
      <span>
        {item.index} {item.label}
        <Tag color={item.stateType} style={{ marginLeft: 8 }}>{item.state}</Tag>
      </span>
    ),
    children: (
      <Card>
        <div style={{ minHeight: 240, textAlign: "center", color: "#999", paddingTop: 80 }}>
          {item.index} {item.label} 子流程页面
        </div>
      </Card>
    ),
  }));

  return (
    <PageLayout
      title={
        <span>
          <Button
            type="link"
            icon={<ArrowLeftOutlined />}
            onClick={() => props.history.push("MyProject")}
            style={{ paddingLeft: 0 }}
          >
            返回
          </Button>
          项目法定流程工作台
        </span>
      }
      extra={<Tag color="blue">全量项目管理</Tag>}
    >
      <div style={{ marginBottom: 16, color: "#666" }}>
        华安化工园区安全预评价 | XP-2026-001
      </div>

      <Alert
        type="info"
        showIcon
        message="本工作台仅展示8个法定子流程，不重复展示新增项目时填写的基本信息。各子流程均为独立页面；过程控制审核须校验前7个节点全部完成并形成有效签字记录后才可办理。"
        style={{ marginBottom: 16 }}
      />

      <Tabs activeKey={activeKey} onChange={setActiveKey} items={tabItems} />
    </PageLayout>
  );
};

export default AntdTableFuncControl(ProjectFlow);