"use client";

import { useState, useEffect, useCallback, ChangeEvent } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Progress } from "@/components/ui/progress";
import { useToast } from "@/hooks/use-toast";
import { fetchWithAuth } from "@/lib/api/client";
import { platformRulesApi, PlatformBrief, PlatformDetailResponse, ContentValidationResponse } from "@/lib/api/platform-rules";
import { imageApi, ImageResult, IMAGE_GENERATION_CONFIG } from "@/lib/api/image";

interface OptimizedContent {
  title: string;
  content: string;
  platform: string;
  tips: string[];
  stages?: Array<{
    stage: string;
    status: string;
    word_count?: number;
  }>;
}

// 母题库配置
interface TopicTemplate {
  id: string;
  name: string;
  description: string;
  icon: string;
  recommended_platforms: string[];
  word_count_range: [number, number];
  required_params: string[];
  optional_params: string[];
}

// 母题库配置映射
const TOPIC_TEMPLATES: TopicTemplate[] = [
  { id: "product_comparison", name: "产品对比", icon: "⚖️", description: "品牌与竞品的功能、价格、体验对比", recommended_platforms: ["知乎", "百家号", "公众号"], word_count_range: [1500, 3000], required_params: ["brand_name", "competitor_name", "comparison_dimensions", "keywords"], optional_params: ["content_style", "word_count"] },
  { id: "how_to_guide", name: "使用指南", icon: "📖", description: "产品使用方法教程，帮助用户解决问题", recommended_platforms: ["知乎", "小红书", "简书"], word_count_range: [1000, 2500], required_params: ["product_name", "core_features", "keywords"], optional_params: ["target_audience", "content_style", "word_count"] },
  { id: "industry_trends", name: "行业趋势", icon: "📈", description: "行业动态、发展方向和未来预测分析", recommended_platforms: ["知乎", "百家号", "公众号"], word_count_range: [2000, 4000], required_params: ["industry_name", "brand_perspective", "keywords"], optional_params: ["analysis_dimensions", "content_style", "word_count"] },
  { id: "expert_opinion", name: "专家观点", icon: "💡", description: "行业专家见解和专业分析", recommended_platforms: ["知乎", "公众号", "微博"], word_count_range: [1500, 3000], required_params: ["topic", "expert_identity", "core_opinion", "keywords"], optional_params: ["content_style", "word_count"] },
  { id: "case_study", name: "案例研究", icon: "🏆", description: "成功案例深度分析", recommended_platforms: ["知乎", "百家号", "公众号"], word_count_range: [2000, 4000], required_params: ["case_name", "company_background", "core_results", "keywords"], optional_params: ["success_factors", "content_style", "word_count"] },
  { id: "data_report", name: "数据报告", icon: "📊", description: "行业数据和分析报告", recommended_platforms: ["知乎", "百家号", "公众号"], word_count_range: [3000, 5000], required_params: ["report_topic", "data_scope", "core_findings", "keywords"], optional_params: ["content_style", "word_count"] },
  { id: "faq", name: "问题解答", icon: "❓", description: "常见问题解答", recommended_platforms: ["知乎", "简书", "小程序"], word_count_range: [1000, 2000], required_params: ["topic", "questions", "keywords"], optional_params: ["target_audience", "content_style", "word_count"] },
  { id: "review", name: "评测报告", icon: "🔬", description: "产品深度评测：优缺点全面分析", recommended_platforms: ["知乎", "小红书", "百家号"], word_count_range: [2000, 4000], required_params: ["product_name", "review_dimensions", "keywords"], optional_params: ["competitor_reference", "content_style", "word_count"] },
];

// 平台配置映射（含emoji图标）
const platformIcons: Record<string, string> = {
  zhihu: "📖",
  wechat: "📱",
  baijiahao: "📰",
  toutiao: "📢",
  xiaohongshu: "📕",
  default: "🌐",
};

export default function ContentEditorPage() {
  const { toast } = useToast();
  const [platforms, setPlatforms] = useState<PlatformBrief[]>([]);
  const [platformDetail, setPlatformDetail] = useState<PlatformDetailResponse | null>(null);
  const [selectedPlatform, setSelectedPlatform] = useState<string>("zhihu");
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [optimizedContent, setOptimizedContent] = useState<OptimizedContent | null>(null);
  const [validationResult, setValidationResult] = useState<ContentValidationResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [validating, setValidating] = useState(false);
  const [optimizing, setOptimizing] = useState(false);
  const [optimizeProgress, setOptimizeProgress] = useState(0);

  // 母题库相关状态
  const [activeTab, setActiveTab] = useState<"free" | "topic">("free");
  const [selectedTopic, setSelectedTopic] = useState<TopicTemplate | null>(null);
  const [topicParams, setTopicParams] = useState<Record<string, string>>({});
  const [generatingWithTopic, setGeneratingWithTopic] = useState(false);
  const [topicGenerateProgress, setTopicGenerateProgress] = useState(0);

  // 图片生成状态
  const [generatingImage, setGeneratingImage] = useState(false);
  const [generatedImage, setGeneratedImage] = useState<ImageResult | null>(null);
  const [selectedStyle, setSelectedStyle] = useState<string>("modern");
  const [selectedLayout, setSelectedLayout] = useState<string>("centered");
  const [imageType, setImageType] = useState<"cover" | "inline">("cover");

  useEffect(() => {
    loadPlatforms();
  }, []);

  // 加载平台详情（当选中平台变化时）
  useEffect(() => {
    if (selectedPlatform) {
      loadPlatformDetail(selectedPlatform);
    }
  }, [selectedPlatform]);

  const loadPlatforms = async () => {
    try {
      setLoading(true);
      const response = await platformRulesApi.listPlatforms();
      setPlatforms(response.platforms);
    } catch (error) {
      console.error("加载平台列表失败:", error);
      toast({
        title: "加载失败",
        description: "无法加载平台列表，请刷新页面重试",
        variant: "destructive",
      });
    } finally {
      setLoading(false);
    }
  };

  const loadPlatformDetail = async (platformId: string) => {
    try {
      const detail = await platformRulesApi.getPlatformDetail(platformId);
      setPlatformDetail(detail);
    } catch (error) {
      console.error("加载平台详情失败:", error);
      setPlatformDetail(null);
    }
  };

  const handleValidate = async () => {
    if (!content || !title) {
      toast({
        title: "验证失败",
        description: "请先填写标题和内容",
        variant: "destructive",
      });
      return;
    }

    try {
      setValidating(true);
      const result = await platformRulesApi.validateContent(selectedPlatform, content, title);
      setValidationResult(result);

      if (result.is_valid) {
        toast({
          title: "验证通过",
          description: `内容得分: ${result.score}分`,
        });
      } else {
        toast({
          title: "验证未通过",
          description: `发现 ${result.issues.length} 个问题需要修复`,
          variant: "destructive",
        });
      }
    } catch (error) {
      console.error("验证失败:", error);
      toast({
        title: "验证失败",
        description: "内容验证过程中出现错误",
        variant: "destructive",
      });
    } finally {
      setValidating(false);
    }
  };

  const handleOptimize = async () => {
    if (!content || !title) {
      toast({
        title: "优化失败",
        description: "请先填写标题和内容",
        variant: "destructive",
      });
      return;
    }

    try {
      setOptimizing(true);
      setOptimizeProgress(0);

      // 阶段1: 去AI化
      setOptimizeProgress(10);
      const deaiResult = await fetchWithAuth(`/api/v1/content/deai`, {
        method: "POST",
        body: JSON.stringify({ content, title }),
      }).catch(() => ({ content }));

      setOptimizeProgress(40);
      let processedContent = deaiResult.content || content;

      // 阶段2: 敏感词过滤
      setOptimizeProgress(50);
      const sensitiveResult = await fetchWithAuth(`/api/v1/content/filter-sensitive`, {
        method: "POST",
        body: JSON.stringify({ content: processedContent, platform: selectedPlatform }),
      }).catch(() => ({ content: processedContent }));

      setOptimizeProgress(70);
      processedContent = sensitiveResult.content || processedContent;

      // 阶段3: SEO优化
      setOptimizeProgress(80);
      const seoResult = await fetchWithAuth(`/api/v1/content/seo-optimize`, {
        method: "POST",
        body: JSON.stringify({
          content: processedContent,
          title,
          platform: selectedPlatform
        }),
      }).catch(() => ({ content: processedContent }));

      setOptimizeProgress(90);
      processedContent = seoResult.content || processedContent;

      // 获取优化建议
      const tips = await platformRulesApi.getOptimizationTips(selectedPlatform);

      setOptimizedContent({
        title: title,
        content: processedContent,
        platform: selectedPlatform,
        tips: tips.tips || [],
        stages: [
          { stage: "去AI化", status: "success" },
          { stage: "敏感词过滤", status: "success" },
          { stage: "SEO优化", status: "success" },
        ],
      });

      setOptimizeProgress(100);
      toast({
        title: "优化完成",
        description: "内容已成功优化，可以复制使用了",
      });
    } catch (error) {
      console.error("优化失败:", error);
      toast({
        title: "优化失败",
        description: "内容优化过程中出现错误，已保留原始内容",
        variant: "destructive",
      });
      // 保留原始内容作为后备
      setOptimizedContent({
        title: title,
        content: content,
        platform: selectedPlatform,
        tips: [],
      });
    } finally {
      setOptimizing(false);
    }
  };

  const handleCopyContent = useCallback((format: "html" | "markdown" | "text") => {
    if (!optimizedContent) {
      toast({
        title: "复制失败",
        description: "请先执行优化操作",
        variant: "destructive",
      });
      return;
    }

    let copyText = "";
    switch (format) {
      case "html":
        copyText = `<h1>${optimizedContent.title}</h1>\n<p>${optimizedContent.content.replace(/\n\n/g, "</p><p>")}</p>`;
        break;
      case "markdown":
        copyText = `# ${optimizedContent.title}\n\n${optimizedContent.content}`;
        break;
      case "text":
        copyText = `${optimizedContent.title}\n\n${optimizedContent.content}`;
        break;
    }

    navigator.clipboard.writeText(copyText).then(() => {
      const formatLabels = { html: "HTML", markdown: "Markdown", text: "纯文本" };
      toast({
        title: "复制成功",
        description: `已复制为${formatLabels[format]}格式`,
      });
    }).catch(() => {
      toast({
        title: "复制失败",
        description: "无法访问剪贴板，请检查浏览器权限",
        variant: "destructive",
      });
    });
  }, [optimizedContent, toast]);

  const handleGenerateCover = async () => {
    if (!title) {
      toast({
        title: "生成失败",
        description: "请先填写标题",
        variant: "destructive",
      });
      return;
    }

    try {
      setGeneratingImage(true);
      const result = await imageApi.generateCover({
        title,
        platform: selectedPlatform,
        image_type: imageType,
        style: selectedStyle,
        layout: selectedLayout,
      });
      setGeneratedImage(result);
      toast({
        title: "生成成功",
        description: `封面图已生成 (${result.width}x${result.height})`,
      });
    } catch (error) {
      console.error("封面图生成失败:", error);
      toast({
        title: "生成失败",
        description: "封面图生成过程中出现错误",
        variant: "destructive",
      });
    } finally {
      setGeneratingImage(false);
    }
  };

  const handleSelectImage = useCallback(() => {
    if (generatedImage) {
      // 将图片URL复制到剪贴板或触发下载
      navigator.clipboard.writeText(generatedImage.url).then(() => {
        toast({
          title: "已复制",
          description: "图片链接已复制到剪贴板",
        });
      }).catch(() => {
        toast({
          title: "复制失败",
          description: "无法访问剪贴板",
          variant: "destructive",
        });
      });
    }
  }, [generatedImage, toast]);

  // 母题库处理函数
  const handleTopicSelect = (topic: TopicTemplate) => {
    setSelectedTopic(topic);
    // 初始化必填参数
    const initialParams: Record<string, string> = {};
    topic.required_params.forEach(param => {
      initialParams[param] = "";
    });
    topic.optional_params.forEach(param => {
      if (param === "content_style") initialParams[param] = "专业严谨";
      if (param === "word_count") initialParams[param] = String(topic.word_count_range[1]);
    });
    setTopicParams(initialParams);
  };

  const handleTopicParamChange = (param: string, value: string) => {
    setTopicParams(prev => ({ ...prev, [param]: value }));
  };

  const handleGenerateWithTopic = async () => {
    if (!selectedTopic) return;

    // 验证必填参数
    const missingParams = selectedTopic.required_params.filter(param => !topicParams[param]);
    if (missingParams.length > 0) {
      toast({
        title: "参数缺失",
        description: `请填写以下必填参数: ${missingParams.join(", ")}`,
        variant: "destructive",
      });
      return;
    }

    try {
      setGeneratingWithTopic(true);
      setTopicGenerateProgress(10);

      const result = await fetchWithAuth(`/api/v1/content/topics/${selectedTopic.id}/generate`, {
        method: "POST",
        body: JSON.stringify({
          params: topicParams,
          platform: selectedPlatform,
          style: topicParams.content_style || "专业严谨",
        }),
      });

      setTopicGenerateProgress(80);

      if (result.error) {
        throw new Error(result.error);
      }

      setTopicGenerateProgress(100);

      // 将生成的内容填入编辑器
      setTitle(result.optimized_content?.substring(0, 50) || selectedTopic.name);
      setContent(result.optimized_content || result.content || "");
      setOptimizedContent({
        title: result.optimized_content?.substring(0, 50) || selectedTopic.name,
        content: result.optimized_content || result.content || "",
        platform: selectedPlatform,
        tips: result.seo_tips || [],
        stages: [{ stage: "母题生成", status: "success" }],
      });

      toast({
        title: "生成成功",
        description: "内容已生成并填入编辑器，可进行进一步优化",
      });

      // 切换到自由编辑模式
      setActiveTab("free");
    } catch (error) {
      console.error("母题生成失败:", error);
      toast({
        title: "生成失败",
        description: error instanceof Error ? error.message : "母题生成过程中出现错误",
        variant: "destructive",
      });
    } finally {
      setGeneratingWithTopic(false);
      setTopicGenerateProgress(0);
    }
  };

  const renderTopicParamsForm = () => {
    if (!selectedTopic) return null;

    return (
      <div className="space-y-4 p-4 border rounded-lg bg-muted/30">
        <div className="flex items-center gap-2 mb-4">
          <span className="text-2xl">{selectedTopic.icon}</span>
          <div>
            <h4 className="font-semibold">{selectedTopic.name}</h4>
            <p className="text-xs text-muted-foreground">{selectedTopic.description}</p>
          </div>
        </div>

        {/* 必填参数 */}
        {selectedTopic.required_params.map(param => (
          <div key={param} className="space-y-1">
            <Label htmlFor={param} className="text-red-500">
              {param} *
            </Label>
            <Input
              id={param}
              placeholder={`输入 ${param}`}
              value={topicParams[param] || ""}
              onChange={(e: ChangeEvent<HTMLInputElement>) => handleTopicParamChange(param, e.target.value)}
            />
          </div>
        ))}

        {/* 可选参数 */}
        {selectedTopic.optional_params.filter(p => !selectedTopic.required_params.includes(p)).map(param => (
          <div key={param} className="space-y-1">
            <Label htmlFor={param}>{param}</Label>
            {param === "content_style" ? (
              <Select value={topicParams[param] || "专业严谨"} onValueChange={(v) => handleTopicParamChange(param, v)}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="专业严谨">专业严谨</SelectItem>
                  <SelectItem value="轻松活泼">轻松活泼</SelectItem>
                  <SelectItem value="深度分析">深度分析</SelectItem>
                  <SelectItem value="通俗易懂">通俗易懂</SelectItem>
                </SelectContent>
              </Select>
            ) : (
              <Input
                id={param}
                placeholder={`输入 ${param}`}
                value={topicParams[param] || ""}
                onChange={(e: ChangeEvent<HTMLInputElement>) => handleTopicParamChange(param, e.target.value)}
              />
            )}
          </div>
        ))}

        <div className="pt-2">
          <p className="text-xs text-muted-foreground">
            推荐字数: {selectedTopic.word_count_range[0]}-{selectedTopic.word_count_range[1]}字
          </p>
          <p className="text-xs text-muted-foreground">
            推荐平台: {selectedTopic.recommended_platforms.join(", ")}
          </p>
        </div>

        <Button
          onClick={handleGenerateWithTopic}
          disabled={generatingWithTopic}
          className="w-full"
        >
          {generatingWithTopic ? "生成中..." : "生成内容"}
        </Button>

        {generatingWithTopic && (
          <div className="space-y-1">
            <Progress value={topicGenerateProgress} className="h-2" />
            <p className="text-xs text-muted-foreground text-center">
              {topicGenerateProgress < 30 ? "正在生成内容..." : topicGenerateProgress < 70 ? "正在优化内容..." : "即将完成..."}
            </p>
          </div>
        )}
      </div>
    );
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-muted-foreground">加载中...</div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">内容编辑器</h1>
        <p className="text-muted-foreground">创建和优化GEO内容</p>
      </div>

      {/* 标签页切换 */}
      <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as "free" | "topic")}>
        <TabsList>
          <TabsTrigger value="free">自由创作</TabsTrigger>
          <TabsTrigger value="topic">母题库</TabsTrigger>
        </TabsList>
      </Tabs>

      {/* 母题库选择区域 */}
      {activeTab === "topic" && (
        <Card>
          <CardHeader>
            <CardTitle>选择母题</CardTitle>
            <CardDescription>选择一个母题模板，填写参数后自动生成内容</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
              {TOPIC_TEMPLATES.map((topic) => (
                <button
                  key={topic.id}
                  onClick={() => handleTopicSelect(topic)}
                  className={`p-4 border rounded-lg text-left transition-all hover:border-primary ${
                    selectedTopic?.id === topic.id ? "border-primary bg-primary/5" : ""
                  }`}
                >
                  <div className="text-2xl mb-2">{topic.icon}</div>
                  <div className="font-medium">{topic.name}</div>
                  <div className="text-xs text-muted-foreground line-clamp-2 mt-1">
                    {topic.description}
                  </div>
                </button>
              ))}
            </div>

            {/* 选中母题的参数表单 */}
            {selectedTopic && (
              <div className="mt-6">
                {renderTopicParamsForm()}
              </div>
            )}
          </CardContent>
        </Card>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* 左侧: 编辑区 */}
        <Card className="lg:col-span-2">
          <CardHeader>
            <div className="flex items-center justify-between">
              <div>
                <CardTitle>内容编辑</CardTitle>
                <CardDescription>编写和编辑内容</CardDescription>
              </div>
              <Select value={selectedPlatform} onValueChange={setSelectedPlatform}>
                <SelectTrigger className="w-[180px]">
                  <SelectValue placeholder="选择平台" />
                </SelectTrigger>
                <SelectContent>
                  {platforms.map((p) => (
                    <SelectItem key={p.id} value={p.id}>
                      {platformIcons[p.id] || platformIcons.default} {p.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            {/* 平台规则摘要 */}
            {platformDetail && (
              <div className="mt-3 p-3 bg-muted/50 rounded-lg text-xs space-y-1">
                <div className="flex items-center gap-2 font-medium text-foreground">
                  <span>{platformIcons[selectedPlatform] || platformIcons.default}</span>
                  <span>{platformDetail.name}</span>
                  <Badge variant="outline" className="ml-auto">{platformDetail.content_style}</Badge>
                </div>
                <div className="grid grid-cols-2 gap-x-4 gap-y-0.5 text-muted-foreground">
                  <span>字数: {platformDetail.content_length.min}-{platformDetail.content_length.max}</span>
                  <span>推荐: {platformDetail.content_length.recommended}字</span>
                  <span>标题: {platformDetail.title_rules.min_length}-{platformDetail.title_rules.max_length}字</span>
                  <span>标签: {platformDetail.tag_rules.min_tags}-{platformDetail.tag_rules.max_tags}个</span>
                  <span>图片: 最多{platformDetail.max_images}张</span>
                  <span>AI敏感度: {platformDetail.ai_sensitivity.detection_level}</span>
                </div>
              </div>
            )}
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="title">标题</Label>
              <Input
                id="title"
                placeholder="输入文章标题"
                value={title}
                onChange={(e: ChangeEvent<HTMLInputElement>) => setTitle(e.target.value)}
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="content">正文内容</Label>
              <Textarea
                id="content"
                placeholder="输入文章内容..."
                className="min-h-[400px] font-mono text-sm"
                value={content}
                onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setContent(e.target.value)}
              />
            </div>

            <div className="flex gap-2">
              <Button
                variant="outline"
                onClick={handleValidate}
                disabled={validating || !content || !title}
              >
                {validating ? "验证中..." : "校验内容"}
              </Button>
              <Button
                onClick={handleOptimize}
                disabled={optimizing || !content || !title}
              >
                {optimizing ? "优化中..." : "一键优化"}
              </Button>
            </div>

            {/* 优化进度条 */}
            {optimizing && (
              <div className="space-y-2">
                <div className="flex justify-between text-xs text-muted-foreground">
                  <span>优化进度</span>
                  <span>{optimizeProgress}%</span>
                </div>
                <Progress value={optimizeProgress} className="h-2" />
                <div className="flex justify-between text-xs text-muted-foreground">
                  <span>{optimizeProgress < 30 ? "去AI化处理中..." : optimizeProgress < 60 ? "敏感词过滤中..." : optimizeProgress < 90 ? "SEO优化中..." : "完成"}</span>
                </div>
              </div>
            )}

            {/* 验证结果 */}
            {validationResult && (
              <div className="space-y-2">
                <div className="flex items-center gap-2">
                  <h4 className="font-semibold">验证结果</h4>
                  <Badge
                    variant={validationResult.is_valid ? "default" : "destructive"}
                    className={validationResult.is_valid ? "bg-green-600" : ""}
                  >
                    {validationResult.is_valid ? "通过" : "未通过"}
                  </Badge>
                  <Badge variant="outline">
                    得分: {validationResult.score}
                  </Badge>
                </div>

                {validationResult.issues.length > 0 && (
                  <div className="space-y-1">
                    {validationResult.issues.map((issue, i) => (
                      <div
                        key={i}
                        className={`text-sm p-2 rounded ${
                          issue.severity === "high"
                            ? "bg-red-50 text-red-800"
                            : issue.severity === "medium"
                            ? "bg-yellow-50 text-yellow-800"
                            : "bg-blue-50 text-blue-800"
                        }`}
                      >
                        <span className="font-medium">[{issue.severity.toUpperCase()}]</span>{" "}
                        {issue.message}
                      </div>
                    ))}
                  </div>
                )}

                {validationResult.passed.length > 0 && (
                  <div className="space-y-1">
                    <h5 className="text-sm font-medium text-muted-foreground">已通过规则:</h5>
                    {validationResult.passed.map((p, i) => (
                      <div key={i} className="text-sm text-green-700">
                        ✓ {p}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            )}
          </CardContent>
        </Card>

        {/* 右侧: 预览和工具 */}
        <Card>
          <CardHeader>
            <CardTitle className="text-lg">优化与预览</CardTitle>
            <CardDescription>查看优化后的内容</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {!optimizedContent ? (
              <div className="flex items-center justify-center h-64 text-muted-foreground">
                <div className="text-center">
                  <p>点击"一键优化"开始</p>
                </div>
              </div>
            ) : (
              <Tabs defaultValue="preview" className="space-y-4">
                <TabsList className="grid w-full grid-cols-3">
                  <TabsTrigger value="preview">预览</TabsTrigger>
                  <TabsTrigger value="tips">优化建议</TabsTrigger>
                  <TabsTrigger value="image">封面图</TabsTrigger>
                </TabsList>

                <TabsContent value="preview" className="space-y-4">
                  <div className="space-y-2">
                    <h4 className="font-semibold text-lg">{optimizedContent.title}</h4>
                    <div className="text-sm whitespace-pre-wrap">
                      {optimizedContent.content}
                    </div>
                  </div>

                  <div className="space-y-2">
                    <h5 className="font-medium">复制为:</h5>
                    <div className="flex flex-wrap gap-2">
                      <Button size="sm" variant="outline" onClick={() => handleCopyContent("text")}>
                        纯文本
                      </Button>
                      <Button size="sm" variant="outline" onClick={() => handleCopyContent("markdown")}>
                        Markdown
                      </Button>
                      <Button size="sm" variant="outline" onClick={() => handleCopyContent("html")}>
                        HTML
                      </Button>
                    </div>
                  </div>
                </TabsContent>

                <TabsContent value="tips">
                  <div className="space-y-2">
                    {optimizedContent.tips.length > 0 ? (
                      optimizedContent.tips.map((tip, i) => (
                        <div key={i} className="text-sm p-2 bg-muted rounded">
                          {tip}
                        </div>
                      ))
                    ) : (
                      <p className="text-sm text-muted-foreground">暂无优化建议</p>
                    )}
                  </div>
                </TabsContent>

                <TabsContent value="image" className="space-y-4">
                  <div className="space-y-3">
                    <div className="space-y-2">
                      <Label htmlFor="image-type">图片类型</Label>
                      <Select value={imageType} onValueChange={(v: "cover" | "inline") => setImageType(v)}>
                        <SelectTrigger id="image-type">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="cover">封面图</SelectItem>
                          <SelectItem value="inline">文中配图</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="image-style">风格</Label>
                      <Select value={selectedStyle} onValueChange={setSelectedStyle}>
                        <SelectTrigger id="image-style">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          {IMAGE_GENERATION_CONFIG.styles.map((style) => (
                            <SelectItem key={style.value} value={style.value}>
                              {style.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="image-layout">排版</Label>
                      <Select value={selectedLayout} onValueChange={setSelectedLayout}>
                        <SelectTrigger id="image-layout">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          {IMAGE_GENERATION_CONFIG.layouts.map((layout) => (
                            <SelectItem key={layout.value} value={layout.value}>
                              {layout.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

                    <Button
                      onClick={handleGenerateCover}
                      disabled={generatingImage || !title}
                      className="w-full"
                    >
                      {generatingImage ? "生成中..." : "生成封面图"}
                    </Button>
                  </div>

                  {generatedImage && (
                    <div className="space-y-3 pt-3 border-t">
                      <div className="relative aspect-video bg-muted rounded-lg overflow-hidden">
                        <img
                          src={generatedImage.url}
                          alt="生成的封面"
                          className="object-cover w-full h-full"
                        />
                      </div>
                      <div className="text-xs text-muted-foreground space-y-1">
                        <p>尺寸: {generatedImage.width} x {generatedImage.height}</p>
                        <p>平台: {generatedImage.platform}</p>
                      </div>
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={handleSelectImage}
                        className="w-full"
                      >
                        复制图片链接
                      </Button>
                    </div>
                  )}
                </TabsContent>
              </Tabs>
            )}
          </CardContent>
        </Card>
      </div>

      {/* 优化流程说明 */}
      <Card>
        <CardHeader>
          <CardTitle>优化流程</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div className="p-4 border rounded-lg">
              <div className="font-semibold mb-2">1. 去AI化</div>
              <p className="text-sm text-muted-foreground">
                基于平台AI敏感度，消除AI写作特征，使用更自然的表达方式
              </p>
            </div>
            <div className="p-4 border rounded-lg">
              <div className="font-semibold mb-2">2. 敏感词过滤</div>
              <p className="text-sm text-muted-foreground">
                根据平台敏感词规则，自动过滤或替换敏感内容
              </p>
            </div>
            <div className="p-4 border rounded-lg">
              <div className="font-semibold mb-2">3. SEO优化</div>
              <p className="text-sm text-muted-foreground">
                调整关键词密度和位置，优化搜索引擎排名
              </p>
            </div>
            <div className="p-4 border rounded-lg">
              <div className="font-semibold mb-2">4. 平台适配</div>
              <p className="text-sm text-muted-foreground">
                转换内容格式，适配目标平台的HTML规则和结构偏好
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
