// app/components/StockCard.tsx
import { z } from "zod";

// 1. 定义数据结构的“法律” (Schema)
export const StockCardSchema = z.object({
  symbol: z.string(),
  price: z.number(),
  delta: z.number(),
  currency: z.string().optional().default("USD"),
});

// 2. 推导出 TypeScript 类型
type StockCardData = z.infer<typeof StockCardSchema>;

// 3. 纯展示组件
export function StockCard({ data }: { data: StockCardData }) {
  const isUp = data.delta >= 0;

  return (
    <div className="inline-block align-middle my-4 p-4 rounded-xl border border-gray-200 bg-white shadow-sm w-64">
      <div className="flex justify-between items-start">
        <h3 className="font-bold text-xl">{data.symbol}</h3>
        <span
          className={`px-2 py-0.5 rounded text-sm font-bold ${
            isUp ? "bg-red-100 text-red-600" : "bg-green-100 text-green-600"
          }`}
        >
          {isUp ? "↑" : "↓"} {Math.abs(data.delta)}%
        </span>
      </div>
      <div className="mt-2 text-2xl font-black">
        {data.currency === "USD" ? "$" : "¥"}
        {data.price.toFixed(2)}
      </div>
    </div>
  );
}

// app/components/MarkdownRenderer.tsx
"use client";

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { atomDark } from "react-syntax-highlighter/dist/esm/styles/prism";
import { ComponentPropsWithoutRef } from "react";
// 假设你的 StockCard 和 Schema 都在这里，或者你从单独文件引入
import { StockCard, StockCardSchema } from "./StockCard";

interface MarkdownRendererProps {
  content: string;
}

type CodeProps = ComponentPropsWithoutRef<"code"> & {
  inline?: boolean;
};

export function MarkdownRenderer({ content }: MarkdownRendererProps) {
  return (
    // 使用 Tailwind Typography，但允许内部元素通过 not-prose 逃逸
    <div className="prose prose-sm dark:prose-invert max-w-none">
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        components={{
          // 🔥 1. 剥离 <pre> 标签
          // 这是为了防止 StockCard 被强制包裹在黑色的 pre 容器中
          pre: ({ children }) => <>{children}</>,

          // 🔥 2. 自定义代码块渲染逻辑
          code({ inline, className, children, ...props }: CodeProps) {
            const match = /language-(\S+)/.exec(className || "");
            const language = match ? match[1] : "";
            const codeContent = String(children).replace(/\n$/, "");
            if (!inline && language === "stock-ui") {
              try {
                const jsonData = JSON.parse(codeContent);
                // 🛡️ 使用 Zod 进行运行时数据校验 (前端防火墙)
                const parseResult = StockCardSchema.safeParse(jsonData);

                if (parseResult.success) {
                  // ✅ 校验通过，渲染 React 组件
                  return (
                    <div className="not-prose font-sans my-5">
                      <StockCard data={parseResult.data} />
                    </div>
                  );
                }
              } catch (e) {
                // 解析失败（可能还在流式传输中），静默失败，继续往下走渲染成代码
              }
            }
            if (!inline && match) {
              return (
                <div className="not-prose rounded-md overflow-hidden my-4 bg-[#1d1f21]">
                  <SyntaxHighlighter
                    style={atomDark as any}
                    language={language}
                    PreTag="div" // 必须用 div，因为外层已经没有 pre 了
                    {...props}
                    // ✨ 核心样式修正：
                    // margin: 0 -> 消除 SyntaxHighlighter 默认的外边距
                    // padding: '1rem' -> 恢复代码块内部原本舒适的间距
                    // background: 'transparent' -> 让它透出我们外层 div 的背景色
                    customStyle={{
                      margin: 0,
                      padding: "1rem",
                      background: "transparent",
                    }}
                  >
                    {codeContent}
                  </SyntaxHighlighter>
                </div>
              );
            }
            return (
              <code
                className={`${className} bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-sm font-mono text-gray-900 dark:text-gray-100`}
                {...props}
              >
                {children}
              </code>
            );
          },
        }}
      >
        {content}
      </ReactMarkdown>
    </div>
  );
}

"use client";

import { useChat } from "@ai-sdk/react";
import { MarkdownRenderer } from "./components/MarkdownRenderer";

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit, status } =
    useChat();

  return (
    <div className="flex flex-col w-full h-screen max-w-3xl mx-auto bg-white dark:bg-black">
      {/* 消息列表区域 */}
      <div className="flex-1 overflow-y-auto p-4 space-y-6 pb-32">
        {messages.map((m) => (
          <div
            key={m.id}
            className={`flex flex-col w-full ${
              m.role === "user" ? "items-end" : "items-start"
            }`}
          >
            <div
              className={`max-w-[90%] rounded-2xl px-4 py-3 shadow-sm ${
                m.role === "user"
                  ? "bg-blue-600 text-white"
                  : "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
              }`}
            >
              {/* 🔥 核心变化：
                 这里不需要再判断 toolInvocations 了。
                 因为 AI 会把组件数据写在 content 里 (作为代码块)，
                 MarkdownRenderer 会自动识别并渲染成卡片。
              */}
              {m.role === "user" ? (
                <div className="whitespace-pre-wrap">{m.content}</div>
              ) : (
                <MarkdownRenderer content={m.content} />
              )}
            </div>
          </div>
        ))}

        {/* Loading 状态 */}
        {status === "submitted" && (
          <div className="flex justify-start">
            <div className="text-gray-400 text-sm ml-2 animate-pulse">
              Thinking...
            </div>
          </div>
        )}
      </div>

      {/* 底部输入框 */}
      <div className="fixed bottom-0 left-0 right-0 p-4 bg-white/80 dark:bg-black/80 backdrop-blur-md border-t border-gray-200 dark:border-gray-800">
        <form onSubmit={handleSubmit} className="max-w-3xl mx-auto flex gap-2">
          <input
            className="flex-1 p-3 rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500"
            value={input}
            onChange={handleInputChange}
            placeholder="试试问：分析一下 AAPL 和 MSFT 的对比"
          />
          <button
            type="submit"
            className="bg-blue-600 text-white px-6 py-3 rounded-xl hover:bg-blue-700 transition-colors font-medium disabled:opacity-50"
            disabled={status === "streaming" || !input}
          >
            发送
          </button>
        </form>
      </div>
    </div>
  );
}