import React, { useEffect, useState } from "react";
import {
  Card,
  Table,
  Button,
  message,
  Popconfirm,
  Tag,
  Space,
  Tooltip,
} from "antd";
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  EyeOutlined,
  CopyOutlined,
} from "@ant-design/icons";
import { useResources } from "@/hooks/resource/useResource";
import { useNavigate } from "react-router-dom";

const ResourceTask = () => {
  const navigate = useNavigate();
  const [pagination, setPagination] = useState({ current: 1, pageSize: 10 });
  const [sorter, setSorter] = useState({
    field: "created_at",
    order: "descend",
  });

  const {
    resources: quotations,
    loading,
    total,
    fetchResources: fetchQuotations,
    deleteResource: deleteQuotation,
  } = useResources(pagination, sorter, "task");

  useEffect(() => {
    fetchQuotations();
  }, []);

  const handleTableChange = (pagination, filters, sorter) => {
    setPagination(pagination);
    setSorter(sorter);
    fetchQuotations({
      current: pagination.current,
      pageSize: pagination.pageSize,
      field: sorter.field,
      order: sorter.order,
    });
  };

  const handleDelete = async (id) => {
    try {
      await deleteQuotation(id);
      message.success("删除成功");
      fetchQuotations();
    } catch (error) {
      message.error("删除失败：" + error.message);
    }
  };

  const columns = [
    {
      title: "任务名称",
      dataIndex: ["attributes", "taskName"],
      key: "taskName",
      ellipsis: true,
    },
    {
      title: "创建日期",
      dataIndex: "created_at",
      key: "created_at",
      sorter: true,
      render: (text) => (
        <span>
          {new Date(text).toLocaleString("zh-CN", {
            year: "numeric",
            month: "2-digit",
            day: "2-digit",
            hour: "2-digit",
            minute: "2-digit",
          })}
        </span>
      ),
    },
    {
      title: "操作",
      fixed: 'right',
      key: "action",
      render: (_, record) => (
        <Space size={0}>
          <Button
            size="small"
            type="link"
            icon={<EyeOutlined />}
            onClick={() => navigate(`/resource/task/edit/${record.id}`)}
          >
            查看
          </Button>

          <Button
            size="small"
            type="link"
            icon={<EditOutlined />}
            onClick={() =>
              navigate(`/resource/task/edit/${record.id}?edit=true`)
            }
          >
            编辑
          </Button>
          <Popconfirm
            title="确定要删除这个任务吗？"
            description="删除后将无法恢复！"
            onConfirm={() => handleDelete(record.id)}
            okText="确定"
            cancelText="取消"
            okButtonProps={{ danger: true }}
          >
            <Button size="small" type="link" danger icon={<DeleteOutlined />}>
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <Card
      title={
        <Space>
          <span>任务管理</span>
          <Tag color="blue">{total} 个任务</Tag>
        </Space>
      }
      className="h-full w-full overflow-auto"
      extra={
        <Button
          type="primary"
          icon={<PlusOutlined />}
          onClick={() => navigate("/resource/task/edit")}
        >
          新增任务
        </Button>
      }
    >
      <Table
        scroll={{ x: true }}
        columns={columns}
        dataSource={quotations}
        rowKey="id"
        loading={loading}
        onChange={handleTableChange}
        pagination={{
          ...pagination,
          total,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `共 ${total} 条记录`,
        }}
      />
    </Card>
  );
};

export default ResourceTask;