import { Button, Image, Space, Table, Upload } from "antd";
import { useState } from "react";

import OrgEquipmentSelectModal from "./OrgEquipmentSelectModal";

export default function EquipmentStep({
  equipmentList = [],
  disabled,
  onAdd,
  onRemove,
  onUploadCalibration,
}) {
  const [selectOpen, setSelectOpen] = useState(false);
  const [previewImage, setPreviewImage] = useState("");
  const existingIds = equipmentList.map((item) => String(item.sourceEquipmentId || ""));

  const isImage = (url) => /\.(png|jpe?g|gif|bmp|webp|svg)(\?.*)?$/i.test(url || "");

  return (
    <>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12 }}>
        <span style={{ fontWeight: 600 }}>申请单位装备清单</span>
        {!disabled && (
          <Button size="small" onClick={() => setSelectOpen(true)}>添加设备</Button>
        )}
      </div>
      <Table
        size="small"
        rowKey="id"
        pagination={false}
        dataSource={equipmentList}
        columns={[
          { title: "序号", width: 60, render: (_, __, index) => index + 1 },
          { title: "装备名称", dataIndex: "deviceName" },
          { title: "规格型号", dataIndex: "deviceModel" },
          { title: "生产厂家", dataIndex: "manufacturer" },
          {
            title: "计量检定情况",
            width: 180,
            render: (_, record) => (
              <Space size="small">
                {record.calibrationReportUrl ? (
                  <Button
                    type="link"
                    size="small"
                    onClick={() => {
                      if (isImage(record.calibrationReportUrl)) {
                        setPreviewImage(record.calibrationReportUrl);
                      } else {
                        window.open(record.calibrationReportUrl);
                      }
                    }}
                  >
                    预览
                  </Button>
                ) : (
                  !disabled && (
                    <Upload
                      showUploadList={false}
                      action={`${window.process.env.app.API_HOST}/safety-eval/file/upload`}
                      onChange={(info) => {
                        if (info.file.status === "done") {
                          const data = info.file.response?.data;
                          if (data) {
                            onUploadCalibration?.(record, data);
                          }
                        }
                      }}
                    >
                      <Button type="link" size="small">上传报告</Button>
                    </Upload>
                  )
                )}
              </Space>
            ),
          },
          {
            title: "操作",
            width: 100,
            render: (_, record) => (
              !disabled && (
                <Button type="link" size="small" danger onClick={() => onRemove?.(record)}>移除</Button>
              )
            ),
          },
        ]}
      />
      <OrgEquipmentSelectModal
        open={selectOpen}
        existingIds={existingIds}
        onCancel={() => setSelectOpen(false)}
        onConfirm={(ids, rows) => {
          onAdd?.(ids, rows);
          setSelectOpen(false);
        }}
      />
      <Image
        style={{ display: "none" }}
        preview={{
          visible: !!previewImage,
          src: previewImage,
          onVisibleChange: (visible) => {
            if (!visible) setPreviewImage("");
          },
        }}
      />
    </>
  );
}