import { Card, Col, Row } from "antd"

import { useMessageOption } from "@/hooks/useMessageOption.tsx"
import { useMutation, useQueryClient } from "@tanstack/react-query"
import { qaPrompt } from "@/libs/playground.tsx"

export const PlaygroundEmpty = () => {
  const { onSubmit } = useMessageOption()

  const queryClient = useQueryClient()

  const { mutateAsync: sendMessage } = useMutation({
    mutationFn: onSubmit,
    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: ["fetchChatHistory"]
      })
    }
  })

  function handleQuestion(message: string) {
    void sendMessage({ message, image: "" })
  }

  return (
    <div className="w-full p-4">
      {/* 标题区域 */}
      <div className="mb-4">
        <h2
          className="text-xl font-bold text-gray-800"
          style={{ lineHeight: "0" }}>
          数联网科创智能体
        </h2>
        <p className="text-sm text-gray-500">您好！请问有什么可以帮您？</p>
      </div>

      {/* 卡片网格布局 */}
      <Row gutter={[16, 16]} className="w-full">
        {qaPrompt.map((item, index) => (
          <Col key={index} xs={24} sm={12} md={8}>
            <Card
              hoverable
              style={{ backgroundColor: "#f3f4f6" }}
              className="border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 cursor-pointer"
              onClick={() => handleQuestion(item.title)}>
              <div className="flex items-center">
                <div className="text-blue-500 mr-2 w-10">{item.icon}</div>
                <div className="font-medium text-sm text-gray-800">
                  {item.title}
                </div>
              </div>
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  )
}