import { DataNavigation } from "@/components/Common/DataNavigation.tsx"
import { Card, Descriptions, DescriptionsProps, Drawer, List, Spin } from "antd"
import { useCallback, useMemo, useState } from "react"
import { useMessageOption } from "@/hooks/useMessageOption.tsx"
import { useStoreMessageOption } from "@/store/option.tsx"

export const PlaygroundTokenStatistics = () => {
  const { currentMeteringEntry } = useStoreMessageOption()

  const items = useMemo<DescriptionsProps["items"]>(() => {
    const { data } = currentMeteringEntry
    return [
      // {
      //   key: "relatedDataCount",
      //   label: "关联数据个数",
      //   children: data.relatedDataCount
      // },
      {
        key: "iodTokenCount",
        label: "数联网引用token总数",
        children: data.iodTokenCount ?? 0
      },
      {
        key: "modelInputTokenCount",
        label: "大模型输入token数量",
        children: data.modelInputTokenCount ?? 0
      },
      {
        key: "modelOutputTokenCount",
        label: "大模型输出token数量",
        children: data.modelOutputTokenCount ?? 0
      }
    ]
  }, [currentMeteringEntry])

  return (
    <Card
      style={{ marginBottom: "1rem" }}
      className="h-full"
      title={<DataNavigation title="Token统计" showButton={false} />}>
      <Spin spinning={currentMeteringEntry.loading}>
        <Descriptions layout="horizontal" items={items} column={2} />
      </Spin>
    </Card>
  )
}
