"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";

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

// 平台配置映射（含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);

  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]);

  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>

      <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-2">
                  <TabsTrigger value="preview">预览</TabsTrigger>
                  <TabsTrigger value="tips">优化建议</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>
              </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>
  );
}