import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import rehypeHighlight from "rehype-highlight";
import rehypeRaw from "rehype-raw";
import "highlight.js/styles/github.css";

type Props = {
  url?: string;
};

export function MarkdownPreview({ url }: Props) {
  const { data, isLoading, error, isError } = useQuery({
    queryKey: ["markdown", url],
    queryFn: () => axios.get(url!, { responseType: "text" }),
    enabled: !!url,
  });

  if (!url) {
    return (
      <div className="w-full h-full flex items-center justify-center text-muted-foreground">
        Markdown 文件地址无效
      </div>
    );
  }

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-full">
        <div>加载中...</div>
      </div>
    );
  }

  if (isError) {
    return (
      <div className="flex items-center justify-center h-full text-red-500">
        {error?.message || "加载失败"}
      </div>
    );
  }

  return (
    <div className="h-full overflow-auto p-8 bg-white dark:bg-slate-950">
      <div className="max-w-4xl mx-auto prose prose-slate dark:prose-invert prose-headings:font-bold prose-a:text-blue-600 prose-code:text-pink-600 prose-pre:bg-slate-100 dark:prose-pre:bg-slate-900">
        <ReactMarkdown
          remarkPlugins={[remarkGfm]}
          rehypePlugins={[rehypeHighlight, rehypeRaw]}
        >
          {data?.data || ""}
        </ReactMarkdown>
      </div>
    </div>
  );
}