import {
  Card,
  List,
  Table,
  Tag,
  Space,
  TableProps,
  Divider,
  Typography,
  Tooltip
} from "antd"
import { NavLink, useParams } from "react-router-dom"
import { useStoreMessageOption } from "@/store/option.tsx"
import { useMemo } from "react"

interface DataType {
  key: string
  name: string
  doId: number
  data_space: string
  content: string
  tokenCount: number
}

const columns: TableProps<DataType>["columns"] = [
  {
    title: '序号',
    key: 'index',
    width: 100,
    render: (_text, _record, index) => index + 1, // 索引从0开始，+1后从1显示
  },
  {
    title: "标识",
    dataIndex: "doId",
    key: "doId"
  },
  {
    title: "提供方",
    dataIndex: "data_space",
    key: "data_space"
  },
  {
    title: "token数量",
    key: "tokenCount",
    dataIndex: "tokenCount",
    width: 100
  },
  {
    title: "内容",
    key: "content",
    dataIndex: "content",
    ellipsis: {
      showTitle: false
    },
    render: (content) => (
      <Tooltip placement="topLeft" title={content}>
        {content}
      </Tooltip>
    )
  }
]

export const ListDetail = () => {
  const { chatMessages } = useStoreMessageOption()
  const { id } = useParams()
  const record = useMemo(
    () => chatMessages.find((item) => item.id === id),
    [chatMessages]
  )

  const modelData = useMemo(
    () => [
      {
        key: "大模型输入token数",
        value: record.modelInputTokenCount
      },
      {
        key: "大模型输出token数",
        value: record.modelOutputTokenCount
      },
      {
        key: "模型",
        value: record.model
      }
    ],
    [record]
  )

  const inputTokenData = useMemo(
    () => [
      {
        key: "内容:",
        value: record.queryContent
      },
      {
        key: "token数量:",
        value: record.queryContent.length
      }
    ],
    [record]
  )
  const keywordsData = useMemo(
    () => [
      {
        key: "token数量:",
        value: record.iodKeywords.reduce((acc, cur) => acc + cur.length, 0)
      },
      {
        key: "内容:",
        value: record.iodKeywords.join(", ")
      }
    ],
    [record]
  )
  const responseContent = useMemo(
    () => [
      {
        key: "token数量:",
        value: record.modelResponseContent.length
      },
      {
        key: "内容:",
        value: record.modelResponseContent
      }
    ],
    [record]
  )

  return (
    <div className="p-[1rem] pt-[4rem]">
      <List
        grid={{ gutter: 16, column: 3 }}
        dataSource={modelData}
        renderItem={(item) => (
          <List.Item>
            <Card title={item.key}>{item.value}</Card>
          </List.Item>
        )}
        style={{ marginBottom: "2rem" }}
      />

      <Space direction="vertical" size={10}>
        <Divider orientation="left">输入token详情</Divider>
        <List
          bordered
          header={<div>问题</div>}
          dataSource={inputTokenData}
          renderItem={(item) => (
            <List.Item style={{ justifyContent: "flex-start" }}>
              <Typography.Paragraph  style={{ marginBottom: 0 }} className="mr-1">
                {item.key}
              </Typography.Paragraph>
              <Tooltip placement="topLeft" style={{ marginBottom: 0 }} title={item.value}>
                {item.value}
              </Tooltip>
            </List.Item>
          )}
          style={{ marginBottom: "1rem" }}
        />
        <Card title="数联网引用数据">
          <Table<DataType> columns={columns} dataSource={record.iodData} />
        </Card>
      </Space>

      <Space direction="vertical" size={10}>
        <Divider orientation="left">输出token详情</Divider>
        <List
          bordered
          dataSource={keywordsData}
          header={<div>数联网搜索关键词</div>}
          renderItem={(item) => (
            <List.Item style={{ justifyContent: "flex-start" }}>
              <Typography.Text className="mr-1" style={{ marginBottom: 0 }}>{item.key}</Typography.Text>
              <Tooltip  style={{ marginBottom: 0 }} placement="topLeft" title={item.value}>
                {item.value}
              </Tooltip>
            </List.Item>
          )}
        />
        <List
          bordered
          dataSource={responseContent}
          header={<div>回答</div>}
          renderItem={(item) => (
            <List.Item
              style={{ justifyContent: "flex-start", alignItems: "center" }}>
              <Typography.Text
                className="mt-0 mr-1 w-20"
                style={{ marginBottom: 0 }}>
                {item.key}
              </Typography.Text>
              <Typography.Paragraph
                style={{ marginBottom: 0 }}
                ellipsis={{ tooltip: item.value, rows: 2, expandable: true }}>
                {item.value}
              </Typography.Paragraph>
            </List.Item>
          )}
        />
      </Space>
    </div>
  )
}
