import React, { useState } from "react";
import { Tag, Button, Card, Table, Flex, Typography, Steps } from "antd";
import { CheckCircleFilled } from "@ant-design/icons";

const STAGES = [
  { key: "notice", index: "01", label: "从业告知",},
  { key: "inspection", index: "02", label: "现场勘查", },
  { key: "rectification", index: "03", label: "整改通知",  },
  { key: "enterprise", index: "04", label: "企业整改",},
  { key: "review", index: "05", label: "整改复查",  },
];

const NoticePanel = () => (
  <div>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
      <div>
        <span style={{ fontSize: 20, fontWeight: 600, color: "#1677ff", marginRight: 8 }}>01</span>
        <Typography.Text strong style={{ fontSize: 15 }}>安全评价检测检验机构从业告知书</Typography.Text>
        <Typography.Paragraph type="secondary" style={{ margin: 0 }}>支持在线填写后打印；阶段试行期间，以机构盖章版上传归档作为完成依据。</Typography.Paragraph>
      </div>
      <Tag color="success">盖章件已上传</Tag>
    </div>

    <div style={{ background: "#f0f5ff", padding: "8px 12px", borderRadius: 6, marginBottom: 16, display: "flex", gap: 16, fontSize: 13 }}>
      <strong>办理方式</strong>
      <span>在线填写用于生成、打印标准告知书</span>
      <span>打印盖章后上传扫描件或清晰照片</span>
      <Tag color="blue">完成节点必须留存盖章件</Tag>
    </div>

    <Card type="inner" size="small" title="已上传盖章件" extra={<Tag color="success">已上传</Tag>} style={{ marginBottom: 12 }}>
      <Flex justify="space-between" align="center">
        <Flex gap={8} align="center">
          <span style={{ background: "#1677ff", color: "#fff", padding: "4px 6px", borderRadius: 4, fontSize: 12 }}>PDF</span>
          <div>
            <Typography.Text strong>安全评价检测检验机构从业告知书（盖章版）.pdf</Typography.Text>
            <Typography.Paragraph type="secondary" style={{ margin: 0, fontSize: 12 }}>2.4MB · 2026-07-07 10:28 上传</Typography.Paragraph>
          </div>
        </Flex>
        <Flex gap={8}>
          <Button size="small">查看</Button>
          <Button size="small">重新上传</Button>
        </Flex>
      </Flex>
    </Card>

    <div style={{ display: "flex", gap: 16, fontSize: 12 }}>
      <div><CheckCircleFilled style={{ color: "#52c41a" }} /> 机构公章清晰</div>
      <div><CheckCircleFilled style={{ color: "#52c41a" }} /> 填写内容完整</div>
      <div><CheckCircleFilled style={{ color: "#52c41a" }} /> 归档版本一致</div>
    </div>

    <Flex justify="flex-end" gap={8} style={{ marginTop: 16 }}>
      <Button>打印告知书</Button>
      <Button type="primary">确认从业告知完成</Button>
    </Flex>
  </div>
);

const InspectionPanel = () => (
  <div>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
      <div>
        <span style={{ fontSize: 20, fontWeight: 600, color: "#1677ff", marginRight: 8 }}>02</span>
        <Typography.Text strong style={{ fontSize: 15 }}>现场人员打卡与检查表</Typography.Text>
        <Typography.Paragraph type="secondary" style={{ margin: 0 }}>主要核验项目组人员是否真实到场，留存APP人脸、GPS、签到签退、现场照片及本人签字记录。</Typography.Paragraph>
      </div>
      <Tag color="success">打卡与检查表完整</Tag>
    </div>

    <Card type="inner" size="small" title="人员现场打卡情况" style={{ marginBottom: 12 }}>
      <Table
        dataSource={[
          { name: "张建国", role: "项目负责人", face: "通过", gps: "正常", signIn: "08:52", signOut: "16:45", duration: "7h53m", photos: 12, sign: "已签字" },
          { name: "李明华", role: "报告编制人", face: "通过", gps: "正常", signIn: "08:55", signOut: "16:43", duration: "7h48m", photos: 9, sign: "已签字" },
          { name: "赵东升", role: "专业组员", face: "通过", gps: "正常", signIn: "08:57", signOut: "16:40", duration: "7h43m", photos: 7, sign: "已签字" },
        ]}
        columns={[
          { title: "人员", dataIndex: "name" },
          { title: "项目角色", dataIndex: "role" },
          { title: "人脸识别", dataIndex: "face", render: (v) => <Tag color="success">{v}</Tag> },
          { title: "GPS定位", dataIndex: "gps", render: (v) => <Tag color="success">{v}</Tag> },
          { title: "签到时间", dataIndex: "signIn" },
          { title: "签退时间", dataIndex: "signOut" },
          { title: "在场时长", dataIndex: "duration" },
          { title: "现场照片", dataIndex: "photos", render: (v) => <Button type="link" size="small">{v}张</Button> },
          { title: "本人签字", dataIndex: "sign", render: (v) => <Tag color="success">{v}</Tag> },
        ]}
        rowKey="name"
        pagination={false}
        size="small"
      />
      <div style={{ display: "flex", gap: 24, marginTop: 8, fontSize: 12 }}>
        <span>打卡企业地址：重庆市渝北区化工园区东路18号</span>
        <span>允许打卡范围：企业地址周边500米</span>
        <span>签到日期：2026-07-15</span>
      </div>
    </Card>

    <Card type="inner" size="small" title="现场检查表">
      <Flex justify="space-between" align="center">
        <Flex gap={8} align="center">
          <span style={{ background: "#52c41a", color: "#fff", padding: "4px 6px", borderRadius: 4, fontSize: 12 }}>XLSX</span>
          <div>
            <Typography.Text strong>华安化工园区现场安全检查表.xlsx</Typography.Text>
            <Typography.Paragraph type="secondary" style={{ margin: 0, fontSize: 12 }}>1.8MB · 李明华 · 2026-07-15 17:06 上传</Typography.Paragraph>
          </div>
        </Flex>
        <Flex gap={8} align="center">
          <Tag color="success">已归档</Tag>
          <Button size="small">查看</Button>
          <Button size="small">删除</Button>
        </Flex>
      </Flex>
    </Card>

    <Flex justify="flex-end" gap={8} style={{ marginTop: 16 }}>
      <Button>刷新打卡状态</Button>
      <Button>导出打卡记录</Button>
      <Button type="primary">确认现场勘查完成</Button>
    </Flex>
  </div>
);

const SimpleUploadPanel = ({ index, title, desc, icon, fileType, fileName, fileSize, uploader, date }) => (
  <div>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
      <div>
        <span style={{ fontSize: 20, fontWeight: 600, color: "#1677ff", marginRight: 8 }}>{index}</span>
        <Typography.Text strong style={{ fontSize: 15 }}>{title}</Typography.Text>
        <Typography.Paragraph type="secondary" style={{ margin: 0 }}>{desc}</Typography.Paragraph>
      </div>
      <Tag color="success">已完成</Tag>
    </div>

    <Flex gap={16}>
      <Card style={{ flex: 1, textAlign: "center" }}>
        <div style={{ fontSize: 32, marginBottom: 8 }}>{icon}</div>
        <Typography.Text strong>上传{title}</Typography.Text>
        <Typography.Paragraph type="secondary" style={{ fontSize: 12 }}>支持 PDF、Word、JPG、PNG</Typography.Paragraph>
        <Button type="primary">选择文件</Button>
        <div style={{ marginTop: 8, fontSize: 12, color: "#999" }}>上传后本节点自动标记完成</div>
      </Card>

      <Card style={{ flex: 1 }}>
        <Flex justify="space-between" align="center" style={{ marginBottom: 12 }}>
          <Typography.Text strong>已归档文件</Typography.Text>
          <Tag color="success">已上传</Tag>
        </Flex>
        <Flex gap={8} align="center">
          <span style={{ background: "#1677ff", color: "#fff", padding: "4px 6px", borderRadius: 4, fontSize: 12 }}>{fileType}</span>
          <div>
            <Typography.Text strong>{fileName}</Typography.Text>
            <Typography.Paragraph type="secondary" style={{ margin: 0, fontSize: 12 }}>{fileSize} · {uploader} · {date} 上传</Typography.Paragraph>
          </div>
        </Flex>
        <Flex justify="flex-end" gap={8} style={{ marginTop: 8 }}>
          <Button size="small">查看</Button>
          <Button size="small">替换修改</Button>
        </Flex>
      </Card>
    </Flex>

    <Flex justify="flex-end" gap={8} style={{ marginTop: 16 }}>
      <Button>重新上传</Button>
      <Button type="primary">确认完成</Button>
    </Flex>
  </div>
);

const SurveyContent = () => {
  const [activeStage, setActiveStage] = useState("notice");

  return (
    <div>
      <div className="pf-permission">
        <Tag color="blue" className="pf-tag">项目组专职人员 ≥ 2人</Tag>
        <span className="pf-desc">从业告知、现场勘查、整改与复查全过程留痕</span>
      </div>

     
        <Steps
          current={STAGES.findIndex((s) => s.key === activeStage)}
        
          onChange={(idx) => setActiveStage(STAGES[idx].key)}
          style={{ marginBottom: 16 }}
          items={STAGES.map((s) => ({
            title: s.label,
            status: "process",
          }))}
        />

        {activeStage === "notice" && <NoticePanel />}
        {activeStage === "inspection" && <InspectionPanel />}
        {activeStage === "rectification" && (
          <SimpleUploadPanel
            index="03" title="整改通知单上传"
            desc="本节点不在线编制整改通知，只归档机构已出具的《整改通知单》文件；上传成功即完成，后续可替换修改。"
            icon="📄" fileType="PDF"
            fileName="华安化工园区建设项目整改通知单.pdf"
            fileSize="2.1MB" uploader="张建国" date="2026-07-15 17:20"
          />
        )}
        {activeStage === "enterprise" && (
          <SimpleUploadPanel
            index="04" title="企业整改报告上传"
            desc="企业线下提交《整改报告》后，由机构人员上传归档；本系统不提供企业在线提交和逐项整改流程。"
            icon="📄" fileType="PDF"
            fileName="华安化工园区企业整改报告.pdf"
            fileSize="3.5MB" uploader="李明华" date="2026-07-16 09:15"
          />
        )}
        {activeStage === "review" && (
          <SimpleUploadPanel
            index="05" title="整改复查单上传"
            desc="机构人员现场复查后，将经双方签字确认的《整改复查单》上传归档；上传后本节点自动标记完成。"
            icon="📄" fileType="PDF"
            fileName="华安化工园区整改复查单（双方签字）.pdf"
            fileSize="1.6MB" uploader="张建国" date="2026-07-18 11:30"
          />
        )}
     
    </div>
  );
};

export default SurveyContent;