import React, { useMemo } from "react"
import { MeteringEntry, useStoreMessageOption } from "@/store/option"
import { Card, List, Table, Tag, Space, TableProps, Tooltip } from "antd"
import { NavLink } from "react-router-dom"
import { formatDate } from "@/utils/date"

const columns: TableProps<MeteringEntry>["columns"] = [
  {
    title: "id",
    dataIndex: "id",
    key: "id",
    width: "13%"
  },
  {
    title: "问题",
    dataIndex: "queryContent",
    key: "queryContent"
  },
  {
    title: "提示词全文",
    dataIndex: "prompt",
    key: "prompt",
    ellipsis: {
      showTitle: false
    },
    render: (prompt) => (
      <Tooltip placement="topLeft" title={prompt}>
        {prompt}
      </Tooltip>
    ),
    width: "10%"
  },
  {
    title: "思维链",
    key: "cot",
    dataIndex: "cot",
    ellipsis: {
      showTitle: false
    },
    render: (responseContent) => (
      <Tooltip placement="topLeft" title={responseContent}>
        {responseContent}
      </Tooltip>
    ),
    width: "10%"
  },

  {
    title: "回答",
    dataIndex: "responseContent",
    key: "responseContent",
    ellipsis: {
      showTitle: false
    },
    render: (responseContent) => (
      <Tooltip placement="topLeft" title={responseContent}>
        {responseContent}
      </Tooltip>
    ),
    width: "10%"
  },
  {
    title: "关联数据个数",
    dataIndex: "relatedDataCount",
    key: "relatedDataCount"
  },
  {
    title: "数联网token",
    dataIndex: "iodTokenCount",
    key: "iodTokenCount"
  },
  {
    title: "大模型token",
    key: "largeModelToken",
    dataIndex: "largeModelToken",
    render: (_, record) => {
      return (
        <div>{record.modelInputTokenCount + record.modelOutputTokenCount}</div>
      )
    }
  },
  {
    title: "日期",
    dataIndex: "date",
    key: "date",
    render: (date) => {
      return <div>{formatDate(date)}</div>
    }
  },
  {
    title: "耗时",
    key: "timeTaken",
    dataIndex: "timeTaken"
  },
  {
    title: "操作",
    key: "action",
    render: (_, record) => (
      <Space size="middle">
        {/* <a>Invite {record.name}</a> */}

        <NavLink to={`/metering/list/${record.id}`}>
          <a>详情</a>
        </NavLink>
      </Space>
    )
  }
]

export const MeteringDetail = () => {
  const { meteringEntries } = useStoreMessageOption()

  const data = useMemo(
    () => [
      {
        key: "对话数量",
        value: meteringEntries.length
      },
      {
        key: "数联网输入token数",
        value: meteringEntries.reduce((acc, cur) => {
          for (const item of cur.iodKeywords) {
            acc += item.length
          }
          return acc
        }, 0)
      },
      {
        key: "数联网输出token数",
        value: meteringEntries.reduce((acc, cur) => acc + cur.iodTokenCount, 0)
      },
      {
        key: "大模型输入token数",
        value: meteringEntries.reduce(
          (acc, cur) => acc + cur.modelInputTokenCount,
          0
        )
      },
      {
        key: "大模型输出token数",
        value: meteringEntries.reduce(
          (acc, cur) => acc + cur.modelOutputTokenCount,
          0
        )
      }
    ],
    [meteringEntries]
  )
  return (
    <div className="p-4  pt-[4rem]">
      <List
        grid={{ gutter: 16, column: 5 }}
        dataSource={data}
        split={false}
        renderItem={(item) => (
          <List.Item>
            <Card title={item.key}>{item.value}</Card>
          </List.Item>
        )}
      />

      <Table<MeteringEntry> columns={columns} dataSource={meteringEntries} />
    </div>
  )
}