import { Table, Group, ActionIcon, Button } from "@mantine/core";
import { IconChevronUp, IconChevronDown } from "@tabler/icons-react";

export function AlertTable({
  alerts,
  paginatedAlerts,
  page,
  setPage,
  pageSize,
  sortedAlerts,
  sortConfig,
  handleSort,
  getRowColor,
  getSeverityColor,
  getStateBadge,
  formatRelativeTime,
}) {
  const totalPages = Math.ceil(sortedAlerts.length / pageSize);

  return (
    <>
      <Table striped highlightOnHover>
        <Table.Thead>
          <Table.Tr>
            {[
              { key: "alertname", label: "名称" },
              { key: "instance", label: "节点" },
              { key: "severity", label: "严重性" },
              { key: "state", label: "状态" },
              { key: "startsAt", label: "开始时间" },
              { key: "endsAt", label: "结束时间" },
              { key: "updatedAt", label: "更新时间" },
              { key: "summary", label: "描述" },
            ].map((col) => (
              <Table.Th key={col.key}>
                <Group spacing={4}>
                  {col.label}
                  {["severity", "startsAt", "instance"].includes(col.key) && (
                    <ActionIcon size="xs" onClick={() => handleSort(col.key)}>
                      {sortConfig.key === col.key && sortConfig.direction === "asc" ? (
                        <IconChevronUp size={14} />
                      ) : (
                        <IconChevronDown size={14} />
                      )}
                    </ActionIcon>
                  )}
                </Group>
              </Table.Th>
            ))}
          </Table.Tr>
        </Table.Thead>
        <Table.Tbody>
          {paginatedAlerts.map((alert, i) => (
            <Table.Tr key={i} style={{ backgroundColor: getRowColor(alert) }}>
              <Table.Td>{alert.labels?.alertname || "-"}</Table.Td>
              <Table.Td>{alert.labels?.instance || "-"}</Table.Td>
              <Table.Td style={{ color: getSeverityColor(alert.labels?.severity) }}>
                {alert.labels?.severity || "info"}
              </Table.Td>
              <Table.Td>{getStateBadge(alert.status?.state)}</Table.Td>
              <Table.Td title={alert.startsAt || "-"}>{formatRelativeTime(alert.startsAt)}</Table.Td>
              <Table.Td title={alert.endsAt || "-"}>
                {alert.endsAt ? new Date(alert.endsAt).toLocaleString() : "-"}
              </Table.Td>
              <Table.Td title={alert.updatedAt || "-"}>{formatRelativeTime(alert.updatedAt)}</Table.Td>
              <Table.Td>{alert.annotations?.summary || "-"}</Table.Td>
            </Table.Tr>
          ))}
        </Table.Tbody>
      </Table>

      {/* 分页控件 */}
      <Group position="apart" mt="sm">
        <Button
          disabled={page === 1}
          onClick={() => setPage((p) => Math.max(1, p - 1))}
          variant="outline"
          size="xs"
        >
          上一页
        </Button>
        <span>
          {page} / {totalPages}
        </span>
        <Button
          disabled={page >= totalPages}
          onClick={() => setPage((p) => p + 1)}
          variant="outline"
          size="xs"
        >
          下一页
        </Button>
      </Group>
    </>
  );
}
