import { useQuery } from "@tanstack/react-query";
import { Card, List, Tag, Typography } from "antd";
import { getAdminDiagnostics } from "../api/adminApi";

export function AdminDiagnosticsPanel(): JSX.Element {
  const { data, isLoading } = useQuery({
    queryKey: ["admin-diagnostics"],
    queryFn: getAdminDiagnostics
  });

  if (isLoading || !data) {
    return <p className="wesp-admin-block">Loading diagnostics...</p>;
  }

  return (
    <div className="wesp-admin-grid">
      <Typography.Title level={4} style={{ margin: 0 }}>
        Diagnostics
      </Typography.Title>
      <Card>
        <List
          dataSource={data.checks}
          renderItem={(check) => (
            <List.Item key={check.id}>
              <List.Item.Meta
                title={check.message}
                description={
                  <Tag
                    className={
                      check.status === "ok"
                        ? "wesp-tag wesp-tag--ok"
                        : check.status === "warn"
                          ? "wesp-tag wesp-tag--warn"
                          : "wesp-tag wesp-tag--error"
                    }
                  >
                    {check.status}
                  </Tag>
                }
              />
            </List.Item>
          )}
        />
      </Card>
    </div>
  );
}