// app/components/MarkdownRenderer.tsx
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeSanitize from 'rehype-sanitize'; // 🛡️ 防 XSS 攻击的核心库
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { ComponentPropsWithoutRef } from 'react';

interface MarkdownRendererProps {
  content: string;
}

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

export function MarkdownRenderer({ content }: MarkdownRendererProps) {
  return (
    <div className="prose prose-sm dark:prose-invert max-w-none">
      <ReactMarkdown
        // 1. remarkPlugins: 处理 Markdown 语法 (如表格)
        remarkPlugins={[remarkGfm]} 
        
        // 2. rehypePlugins: 处理 HTML 安全 (防 XSS)
        // 注意：rehypeSanitize 默认非常严格，可能会过滤掉一些样式。
        // 如果发现样式丢失，需要查阅文档自定义 schema，但在 AI 聊天场景通常默认配置足够。
        rehypePlugins={[rehypeSanitize]} 
        
        components={{
          code({ inline, className, children, ...props }: CodeProps) {
            // 🛡️ 鲁棒性修复：确保 className 存在且为字符串
            const match = /language-(\w+)/.exec(className || '');
            
            // 逻辑说明：
            // 1. !inline: 不是行内代码 (即代码块)
            // 2. match: 成功匹配到了语言类型 (如 language-js)
            const isCodeBlock = !inline && match;

            if (isCodeBlock) {
              return (
                <SyntaxHighlighter
                  style={atomDark as any}
                  language={match![1]} // 这里加 ! 是安全的，因为前面已判断 match 存在
                  PreTag="div"
                  {...props}
                >
                  {String(children).replace(/\n$/, '')}
                </SyntaxHighlighter>
              );
            }

            // 🍂 Fallback: 如果是行内代码，或者没匹配到语言，
            // 则渲染为普通的 <code> 标签，保留 className 以便应用默认样式
            return (
              <code className={className} {...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-background">
      {/* 聊天记录区域 */}
      <div className="flex-1 overflow-y-auto p-4 space-y-4 pb-32">
        {messages.map((m) => (
          <div
            key={m.id}
            className={`flex w-full ${
              m.role === "user" ? "justify-end" : "justify-start"
            }`}
          >
            <div
              className={`max-w-[85%] 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" // 🤖 AI：灰底黑字
              }`}
            >
              {m.role === "user" ? (
                // 用户消息通常只是纯文本，直接渲染看起来更干净
                <div className="whitespace-pre-wrap">{m.content}</div>
              ) : (
                // AI 消息才需要 Markdown 渲染 (代码高亮、表格等)
                <MarkdownRenderer content={m.content} />
              )}
            </div>
          </div>
        ))}

        {/* Loading 状态提示 (可选) */}
        {status === "submitted" && (
          <div className="flex justify-start">
            <div className="bg-gray-100 dark:bg-gray-800 rounded-2xl px-4 py-3 text-gray-500 text-sm">
              思考中...
            </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="问点什么..."
          />
          <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>
  );
}