import { useRef, useState, useMemo } from "react";
import { Table, Button, Space, Popconfirm, Flex, message, Tooltip, Select, Row, Col, Empty, Pagination, Tag, Popover } from "antd";
import { EditOutlined, DeleteOutlined, InfoCircleOutlined } from "@ant-design/icons";
import { useQuery, useMutation } from "@tanstack/react-query";
import { GetVqdAlarm, DeleteVqdAlarm, DeleteVqdAlarmAll } from "../api/vqdalarm";
import type { VqdAlarmItem } from "../types/vqdalarm";
import type { ColumnsType } from "antd/es/table";
import { useGlobal } from "../Context";
import { FormatFileSizeToString } from "../utils/rate";
import { formatSecondsToHMS } from "../utils/time";
import Filter from "./Filter";
import AlarmSnap from './Snap';
const variants = ['filled'] as const;
export default function VqdAlarmPage() {
  const { ErrorHandle } = useGlobal();
  const [pagination, setPagination] = useState({
    page: 1,
    size: 12,
    name: ""
  });
  const [arrList, setArrList] = useState<any>([{ name: "全部类型", id: 0 }]);
  const [templateData, setTemplateData] = useState<VqdAlarmItem[]>([]);
  // 获取任务列表
  const {
    data: storageResponse,
    isLoading,
    refetch,
  } = useQuery({
    queryKey: ["storage", pagination],
    queryFn: () =>
      GetVqdAlarm({ ...pagination })
        .then((res) => res.data)
        .catch((err) => {
          ErrorHandle(err);
          throw err;
        }),
    // refetchInterval: 4000,
    retry: 2,
  });

  // 删除任务
  const [delLoadings, setDelLoadings] = useState<number[]>([]);
  const { mutate: deleteMutation } = useMutation({
    mutationFn: DeleteVqdAlarm,
    onMutate: (id: number) => {
      setDelLoadings((prev) => [...prev, id]);
    },
    onSuccess: (_, ctx) => {
      setDelLoadings((prev) => prev.filter((item) => item !== ctx));
      message.success("删除成功");
      refetch();
    },
    onError: (error: Error, ctx) => {
      setDelLoadings((prev) => prev.filter((item) => item !== ctx));
      ErrorHandle(error);
    },
  });

  // 处理分页变化
  const onAlarmPageChange = (page: number, pageSize?: number) => {
    setPagination((prev) => ({
      ...prev,
      page: page,
      size: pageSize || prev.size,
    }));
  }
  const handleTableChange = (page: number, pageSize?: number) => {
    setPagination((prev) => ({
      ...prev,
      page: page,
      size: pageSize || prev.size,
    }));
  };

  // 客户端分页数据
  const dataSource = useMemo(() => {
    const items = storageResponse?.items || [];
    const start = (pagination.page - 1) * pagination.size;
    const end = start + pagination.size;
    return items.slice(start, end);
  }, [storageResponse, pagination]);
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const rowSelection = {
    selectedRowKeys,
    onChange: (
      newSelectedRowKeys: React.Key[],
      selectedRows: VqdAlarmItem[]
    ) => {
      setSelectedRowKeys([...newSelectedRowKeys]);
    },
  };
  // 批量删除任务
  const { mutate: deleteMutationAll, isPending: delAllLoadings } = useMutation({
    mutationFn: DeleteVqdAlarmAll,
    onSuccess: () => {
      message.success("批量删除成功");
      refetch()
      setSelectedRowKeys([])
    },
    onError: ErrorHandle,
    retry: 0,
  });
  // 表格列定义
  const columns: ColumnsType<VqdAlarmItem> = [
    {
      title: "名称",
      dataIndex: "alarm_name",
      align: "center",
    },
    {
      title: "文件名称",
      dataIndex: "file_path",
      align: "center",
      render: (text, record) => (
        <Space>
          {text}
        </Space>
      ),
    },
    {
      title: "描述",
      dataIndex: "des",
      align: "center",
    },
    {
      title: "创建日期",
      dataIndex: "created_at",
      align: "center",
      render: (text: string) => (text ? new Date(text).toLocaleString() : "-"),
    },
    {
      title: "操作",
      align: "center",
      width: 120,
      fixed: "right",
      render: (_, record) => (
        <Space>


          <Popconfirm
            title="确定要删除这个告警吗？"
            onConfirm={() => {
              if (record.id) {
                deleteMutation(record.id);
              }
            }}
            okText="确定"
            cancelText="取消"
          >
            <Button
              loading={delLoadings.includes(record.id)}
              danger
              icon={<DeleteOutlined />}
            />
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <div>
      {/* <Flex justify="space-between" align="center" className="mb-4">
        <Space>

          <Popconfirm
            title="确定要批量删除文件吗？"

            onConfirm={() => {
              deleteMutationAll({ ids: selectedRowKeys as number[] })
            }}
            okText="确定"
            cancelText="取消"
          >
            <Button color="danger" variant="solid" loading={delAllLoadings} disabled={selectedRowKeys.length == 0} >
              批量删除
            </Button>
          </Popconfirm>

        </Space>

        <Filter
          searchLoading={isLoading}
          onSearchChange={(value: string) => {
            setPagination({ ...pagination, name: value });
          }}
        />
      </Flex> */}
      {/* 表格 */}
      {/* <Table
        columns={columns}
        rowSelection={rowSelection}
        dataSource={storageResponse?.items}
        rowKey="id"
        loading={isLoading}
        scroll={{ x: "max-content" }}
        pagination={{
          current: pagination.page,
          pageSize: pagination.size,
          total: storageResponse?.total || 0,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `共 ${total} 条`,
          onChange: handleTableChange,
          onShowSizeChange: handleTableChange,
        }}
      /> */}

      <Flex justify="space-between" className="mr-2" align="center">
        <Space className="pl-2">

          <Popconfirm
            title="确定要批量删除文件吗？"

            onConfirm={() => {
              const ids = storageResponse?.items.map(item => item.id);
              deleteMutationAll({ ids: ids as number[] })
            }}
            okText="确定"
            cancelText="取消"
          >
            <Button color="danger" variant="solid" loading={delAllLoadings}  >
              批量删除本页
            </Button>
          </Popconfirm>

        </Space>
        {/* <DatePicker
          defaultDate={moment().format('YYYY-MM-DD')}
          moonData={moonReq}
          onChangePanel={handleSelectMoon}
          onSelectDate={handleSelectDate}
          loading={moonLoading}
        /> */}
        <div className="w-[150px] ml-[20px]">
          {/* <Select
            defaultValue={0}
            className="w-[100%] mr-2"
            placeholder="选择类型"
            onChange={(v) => {
              console.log("类型", v);

            }
            }
            options={arrList.map((item: any) => {
              return {
                label: item.name,
                value: item.id,
              };
            })}
            optionRender={(option) => (
              <Space>
                <span>
                  {option.data.label}
                </span>
              </Space>
            )}
          /> */}
          <Filter

            searchLoading={isLoading}
            onSearchChange={(value: string) => {
              setPagination({ ...pagination, name: value });
            }}
          />
        </div>
      </Flex>
      <br />
      <Row gutter={[16, 16]} className="pl-2 pr-2">
        {storageResponse?.items.map((item) => {
          return (
            <Col xxl={6} xl={8} lg={12} md={12} sm={12} xs={24} key={item.id} >
              <div className="overflow-hidden relative rounded-lg h-full w-full cursor-pointer shadow">
                <AlarmSnap filePath={item.file_path} />
                <div className="pl-3 pr-2 pb-1">

                  <Flex align="center" wrap gap="small">
                    {
                      item.abnormals.map((item) => {
                        return (<>
                          <Tag bordered={false} color="#87d068" className="m-0 mt-2">{item.name}</Tag>
                        </>)
                      })
                    }
                  </Flex>
                  <div>
                    <Space className="pt-2"> 任务名称:{item.task_name}</Space>
                  </div>
                  {/* <Space className="pt-2"> 通道:{item.channel_name || item.channel_id}</Space> */}
                  <Flex justify="space-between" align="center">
                    <p className="m-0"> {item.created_at}</p>
                    <div>
                      <Popover content={(<>
                        <div>通道: {item.channel_name || item.channel_id}</div>
                        <div>诊断计划: {item.plan_name}</div>
                        <div className="pb-2">诊断模板: {item.task_template_name} </div>
                      </>)} title="详情">
                        <Button type="text" icon={<InfoCircleOutlined />}></Button>
                      </Popover>
                      <Tooltip title="删除">
                        <Popconfirm
                          title="删除告警"
                          description="确定要删除此告警吗？"
                          onConfirm={() => {
                            deleteMutation(item.id)
                          }}
                        >
                          {/* loading={isDelLoading} */}
                          <Button type="text" danger icon={<DeleteOutlined />}></Button>
                        </Popconfirm>
                      </Tooltip>

                    </div>
                  </Flex>
                </div>
              </div>

            </Col>
          );
        })}
        {storageResponse?.items.length === 0 && (
          <Col span={24}>
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          </Col>
        )}
      </Row>
      <Flex justify="flex-end" className="mr-[20px] mt-6 mb-3" align="center">
        <Pagination onChange={onAlarmPageChange} defaultCurrent={pagination.page} defaultPageSize={pagination.size} total={storageResponse?.total} />
      </Flex>
    </div>
  );
}