import React, { useState } from "react";
import { Tag, Button, Card, Table, Select, Input, Flex, Typography, Row, Col } from "antd";

const { TextArea } = Input;

const INITIAL_ROWS = [
  { dim: "评价依据", focus: "充分、有效", result: "符合", opinion: "补充地方标准有效版本", feedback: "已验证", feedbackType: "success" },
  { dim: "危险辨识", focus: "全面、无遗漏", result: "需修改", opinion: "补充液氨装卸泄漏场景", feedback: "待反馈", feedbackType: "warning" },
  { dim: "单元划分", focus: "科学合理", result: "符合", opinion: "划分合理", feedback: "—", feedbackType: "default" },
  { dim: "评价方法", focus: "适用、过程正确", result: "符合", opinion: "方法适用", feedback: "—", feedbackType: "default" },
  { dim: "对策措施", focus: "针对性、可操作性", result: "需修改", opinion: "细化报警联锁措施", feedback: "已验证", feedbackType: "success" },
  { dim: "评价结论", focus: "客观、正确", result: "符合", opinion: "结论客观", feedback: "—", feedbackType: "default" },
  { dim: "报告规范", focus: "格式、文字、数据逻辑", result: "符合", opinion: "统一图表编号", feedback: "—", feedbackType: "default" },
];

const InternalReviewContent = () => {
  const [rows, setRows] = useState(INITIAL_ROWS);

  const updateRow = (index, field, value) => {
    const next = [...rows];
    next[index] = { ...next[index], [field]: value };
    setRows(next);
  };

  return (
    <div>
      <div className="pf-permission">
        <Tag color="blue" className="pf-tag">内部审核人</Tag>
        <span className="pf-desc">审核、修改、反馈、验证闭环</span>
      </div>

        <Row gutter={16}  style={{ marginBottom: 16 }}>
          <Col span={6}><Card size="small"><Typography.Text type="secondary">审核版本</Typography.Text><div><strong>V1.3</strong></div></Card></Col>
          <Col span={6}><Card size="small"><Typography.Text type="secondary">内审人</Typography.Text><div><strong>王丽萍</strong></div></Card></Col>
          <Col span={6}><Card size="small"><Typography.Text type="secondary">审核项</Typography.Text><div><strong>7项</strong></div></Card></Col>
          <Col span={6}><Card size="small"><Typography.Text type="secondary">问题</Typography.Text><div><Typography.Text strong type="warning">2项</Typography.Text></div></Card></Col>
        </Row>

        <Table
          dataSource={rows}
          columns={[
            { title: "审核维度", dataIndex: "dim", width: 100 },
            { title: "审核重点", dataIndex: "focus", width: 160 },
            {
              title: "结论", dataIndex: "result", width: 120,
              render: (val, _, idx) => (
                <Select value={val} size="small" style={{ width: 100 }} onChange={(v) => updateRow(idx, "result", v)}>
                  <Select.Option value="符合">符合</Select.Option>
                  <Select.Option value="需修改">需修改</Select.Option>
                </Select>
              ),
            },
            {
              title: "审核意见", dataIndex: "opinion", width: 180,
              render: (val, _, idx) => (
                <Input size="small" value={val} onChange={(e) => updateRow(idx, "opinion", e.target.value)} />
              ),
            },
            {
              title: "修改反馈", dataIndex: "feedback", width: 120,
              render: (val, record) => {
                if (record.feedbackType === "success") return <Tag color="success">已验证</Tag>;
                if (record.feedbackType === "warning") return <Tag color="warning">待反馈</Tag>;
                return <span style={{ color: "#999" }}>—</span>;
              },
            },
          ]}
          rowKey="dim"
          pagination={false}
          size="small"
        />

        <div style={{ marginTop: 12 }}>
          <Typography.Text strong>总体审核意见</Typography.Text>
          <TextArea rows={2} defaultValue="完成危险辨识修改后通过内部审核。" style={{ marginTop: 4 }} />
        </div>

        <Flex justify="space-between" align="center" style={{ marginTop: 10 }}>
          <Flex gap={8} align="center">
            <Typography.Text type="secondary">内审人独立签字</Typography.Text>
            <strong>王丽萍</strong>
            <Button size="small">下发APP签字</Button>
          </Flex>
        </Flex>

        <Flex justify="flex-end" gap={8} style={{ marginTop: 16 }}>
          <Button>保存意见</Button>
          <Button type="primary">确认修改并提交技审</Button>
        </Flex>
     
    </div>
  );
};

export default InternalReviewContent;