"use client";

import type { UseChatHelpers } from "@ai-sdk/react";
import { motion } from "framer-motion";
import { memo } from "react";
import useSWR from "swr";
import { fetcher } from "@/lib/utils";
import type { ChatMessage } from "@/lib/types";
import { Suggestion } from "./elements/suggestion";
import type { VisibilityType } from "./visibility-selector";

type SuggestedActionsProps = {
  chatId: string;
  sendMessage: UseChatHelpers<ChatMessage>["sendMessage"];
  selectedVisibilityType: VisibilityType;
};

function PureSuggestedActions({ chatId, sendMessage }: SuggestedActionsProps) {
  const { data: suggestedActions } = useSWR<string[]>("/api/starter-questions", fetcher, {
    fallbackData: [
      // AI图片编辑
      "帮我优化这张产品图片，突出产品特点和卖点",
      "请美化这张商品图片，提升视觉吸引力",
      // 市场分析
      "分析一下当前电商市场的热门趋势和消费者偏好",
      "帮我分析竞品的产品策略和定价",
      // 文案优化
      "优化这段产品描述文案，让它更有吸引力和转化力",
      "帮我改写产品标题，提升点击率",
      // 卖点优化
      "提炼这个产品的核心卖点，突出差异化优势",
      // 视频生成
      "帮我生成一个产品宣传视频的创意脚本",
    ],
  });

  return (
    <div
      className="grid w-full gap-2 sm:grid-cols-2"
      data-testid="suggested-actions"
    >
      {suggestedActions?.map((suggestedAction, index) => (
        <motion.div
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: 20 }}
          initial={{ opacity: 0, y: 20 }}
          key={suggestedAction}
          transition={{ delay: 0.05 * index }}
        >
          <Suggestion
            className="h-auto w-full whitespace-normal p-3 text-left"
            onClick={(suggestion) => {
              window.history.pushState({}, "", `/chat/${chatId}`);
              sendMessage({
                role: "user",
                parts: [{ type: "text", text: suggestion }],
              });
            }}
            suggestion={suggestedAction}
          >
            {suggestedAction}
          </Suggestion>
        </motion.div>
      ))}
    </div>
  );
}

export const SuggestedActions = memo(
  PureSuggestedActions,
  (prevProps, nextProps) => {
    if (prevProps.chatId !== nextProps.chatId) {
      return false;
    }
    if (prevProps.selectedVisibilityType !== nextProps.selectedVisibilityType) {
      return false;
    }

    return true;
  }
);