"use client";

import { useState, useRef, useCallback } from "react";
import { Button } from "@/components/ui/button";
import {
  Sparkles,
  Wand2,
  Maximize2,
  Minimize2,
  ArrowRight,
  Languages,
  FileText,
  Bug,
  Loader2,
  Copy,
  Check,
  Heading,
  Send,
  RefreshCw,
} from "lucide-react";

interface AiAssistantProps {
  content: string;
  selectedText?: string;
  onInsert: (text: string, mode: "replace" | "append") => void;
  onGenerateExcerpt?: (text: string) => void;
  onGenerateTitle?: (text: string) => void;
}

type Action = "polish" | "expand" | "shorten" | "continue" | "translate_en" | "translate_zh" | "summarize" | "fix_grammar";

export default function AiAssistant({
  content,
  selectedText,
  onInsert,
  onGenerateExcerpt,
  onGenerateTitle,
}: AiAssistantProps) {
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState("");
  const [resultLabel, setResultLabel] = useState("");
  const [generateTarget, setGenerateTarget] = useState<"title" | "excerpt" | null>(null);
  const [customPrompt, setCustomPrompt] = useState("");
  const [copied, setCopied] = useState(false);
  const abortRef = useRef<AbortController | null>(null);

  const stopGeneration = useCallback(() => {
    abortRef.current?.abort();
    abortRef.current = null;
    setLoading(false);
    setGenerateTarget(null);
  }, []);

  function getEffectiveText(): string {
    if (selectedText?.trim()) return selectedText.trim();
    return content.replace(/<[^>]+>/g, "").trim();
  }

  const hasSelection = !!(selectedText?.trim());

  async function runAction(action?: Action, label?: string) {
    const text = getEffectiveText();
    if (!text && action !== "summarize") {
      setResult("请先输入文章内容或选中文字");
      setResultLabel("");
      return;
    }

    setLoading(true);
    setResult("");
    setResultLabel(label || "");
    setGenerateTarget(null);
    abortRef.current = new AbortController();

    try {
      const res = await fetch("/api/ai", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          prompt: customPrompt || undefined,
          selectedText: text || undefined,
          action,
        }),
        signal: abortRef.current.signal,
      });

      if (!res.ok) {
        const err = await res.json();
        setResult(`错误：${err.error || "请求失败"}`);
        setLoading(false);
        return;
      }

      const reader = res.body?.getReader();
      const decoder = new TextDecoder();
      let accumulated = "";

      if (reader) {
        while (true) {
          const { done, value } = await reader.read();
          if (done) break;
          const chunk = decoder.decode(value, { stream: true });
          for (const line of chunk.split("\n")) {
            if (line.startsWith("data: ")) {
              const data = line.slice(6);
              if (data === "[DONE]") continue;
              try {
                const parsed = JSON.parse(data);
                const delta = parsed.choices?.[0]?.delta?.content;
                if (delta) {
                  accumulated += delta;
                  setResult(accumulated);
                }
              } catch { /* ignore */ }
            }
          }
        }
      }
    } catch (err) {
      if (err instanceof Error && err.name === "AbortError") {
        setResult((prev) => prev + "\n\n[已停止]");
      } else {
        setResult(`错误：${err instanceof Error ? err.message : "未知错误"}`);
      }
    } finally {
      setLoading(false);
      abortRef.current = null;
      setGenerateTarget(null);
    }
  }

  async function runGenerate(target: "title" | "excerpt") {
    const text = content.replace(/<[^>]+>/g, "").trim();
    if (!text) {
      setResult("请先输入文章内容");
      setResultLabel("");
      return;
    }

    setLoading(true);
    setResult("");
    setResultLabel(target === "title" ? "生成标题" : "生成摘要");
    setGenerateTarget(target);
    abortRef.current = new AbortController();

    const promptText = target === "title"
      ? `请为以下文章生成一个简洁的中文标题（不超过30字），直接输出标题，不要引号：\n\n${text}`
      : `请为以下文章写一段摘要（2-3句话，不超过200字），直接输出摘要：\n\n${text}`;

    try {
      const res = await fetch("/api/ai", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ prompt: promptText, selectedText: text }),
        signal: abortRef.current.signal,
      });

      if (!res.ok) {
        const err = await res.json();
        setResult(`错误：${err.error || "请求失败"}`);
        setLoading(false);
        setGenerateTarget(null);
        return;
      }

      const reader = res.body?.getReader();
      const decoder = new TextDecoder();
      let accumulated = "";

      if (reader) {
        while (true) {
          const { done, value } = await reader.read();
          if (done) break;
          const chunk = decoder.decode(value, { stream: true });
          for (const line of chunk.split("\n")) {
            if (line.startsWith("data: ")) {
              const data = line.slice(6);
              if (data === "[DONE]") continue;
              try {
                const parsed = JSON.parse(data);
                const delta = parsed.choices?.[0]?.delta?.content;
                if (delta) {
                  accumulated += delta;
                  setResult(accumulated);
                }
              } catch { /* ignore */ }
            }
          }
        }
      }
    } catch (err) {
      if (err instanceof Error && err.name === "AbortError") {
        setResult((prev) => prev + "\n\n[已停止]");
      } else {
        setResult(`错误：${err instanceof Error ? err.message : "未知错误"}`);
      }
    } finally {
      setLoading(false);
      abortRef.current = null;
      setGenerateTarget(null);
    }
  }

  function applyGenerated() {
    if (generateTarget === "title" && onGenerateTitle && result) {
      onGenerateTitle(result);
      setResult("");
      setResultLabel("");
      setGenerateTarget(null);
    } else if (generateTarget === "excerpt" && onGenerateExcerpt && result) {
      onGenerateExcerpt(result);
      setResult("");
      setResultLabel("");
      setGenerateTarget(null);
    }
  }

  function handleCopy() {
    navigator.clipboard.writeText(result);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }

  function handleInsert(mode: "replace" | "append") {
    onInsert(result, mode);
    setResult("");
    setResultLabel("");
  }

  return (
    <div className="sticky top-6 space-y-5">
      {/* ── 标题栏 ── */}
      <div className="flex items-center gap-2">
        <div className="w-6 h-6 rounded-md bg-primary/10 flex items-center justify-center">
          <Sparkles className="w-3.5 h-3.5 text-primary" />
        </div>
        <span className="font-sans text-sm font-semibold text-foreground">AI 写作助手</span>
      </div>

      {/* ── 选中提示 ── */}
      {hasSelection && (
        <div className="rounded-lg bg-primary/5 border border-primary/20 px-3 py-2">
          <p className="font-sans text-xs text-primary/70">
            📌 已选中 <span className="font-medium">{selectedText.length}</span> 字，AI 将只处理选中内容
          </p>
        </div>
      )}

      {/* ── 文本处理 ── */}
      <div className="space-y-2">
        <p className="font-sans text-[10px] uppercase tracking-widest text-muted-foreground/50">文本处理</p>
        <div className="grid grid-cols-2 gap-1.5">
          {[
            { key: "polish" as Action, label: "润色", icon: <Wand2 className="w-3 h-3" /> },
            { key: "expand" as Action, label: "扩写", icon: <Maximize2 className="w-3 h-3" /> },
            { key: "shorten" as Action, label: "精简", icon: <Minimize2 className="w-3 h-3" /> },
            { key: "continue" as Action, label: "续写", icon: <ArrowRight className="w-3 h-3" /> },
            { key: "fix_grammar" as Action, label: "纠错", icon: <Bug className="w-3 h-3" /> },
            { key: "summarize" as Action, label: "摘要", icon: <FileText className="w-3 h-3" /> },
          ].map((a) => (
            <button
              key={a.key}
              type="button"
              disabled={loading}
              onClick={() => runAction(a.key, a.label)}
              className="flex items-center justify-center gap-1.5 h-8 rounded-lg border border-border font-sans text-xs text-foreground hover:bg-muted/40 hover:border-muted-foreground/30 disabled:opacity-40 transition-all active:scale-[0.97]"
            >
              {a.icon}
              {a.label}
            </button>
          ))}
        </div>
      </div>

      {/* ── 翻译 ── */}
      <div className="space-y-2">
        <p className="font-sans text-[10px] uppercase tracking-widest text-muted-foreground/50">翻译</p>
        <div className="grid grid-cols-2 gap-1.5">
          {[
            { key: "translate_en" as Action, label: "中 → 英", icon: <Languages className="w-3 h-3" /> },
            { key: "translate_zh" as Action, label: "英 → 中", icon: <Languages className="w-3 h-3" /> },
          ].map((a) => (
            <button
              key={a.key}
              type="button"
              disabled={loading}
              onClick={() => runAction(a.key, a.label)}
              className="flex items-center justify-center gap-1.5 h-8 rounded-lg border border-border font-sans text-xs text-foreground hover:bg-muted/40 hover:border-muted-foreground/30 disabled:opacity-40 transition-all active:scale-[0.97]"
            >
              {a.icon}
              {a.label}
            </button>
          ))}
        </div>
      </div>

      {/* ── 智能生成 ── */}
      <div className="space-y-2">
        <p className="font-sans text-[10px] uppercase tracking-widest text-muted-foreground/50">智能生成</p>
        <div className="grid grid-cols-2 gap-1.5">
          <button
            type="button"
            disabled={loading}
            onClick={() => runGenerate("title")}
            className="flex items-center justify-center gap-1.5 h-8 rounded-lg border border-border font-sans text-xs text-foreground hover:bg-muted/40 hover:border-muted-foreground/30 disabled:opacity-40 transition-all active:scale-[0.97]"
          >
            <Heading className="w-3 h-3" />
            生成标题
          </button>
          <button
            type="button"
            disabled={loading}
            onClick={() => runGenerate("excerpt")}
            className="flex items-center justify-center gap-1.5 h-8 rounded-lg border border-border font-sans text-xs text-foreground hover:bg-muted/40 hover:border-muted-foreground/30 disabled:opacity-40 transition-all active:scale-[0.97]"
          >
            <FileText className="w-3 h-3" />
            生成摘要
          </button>
        </div>
      </div>

      {/* ── 自定义指令 ── */}
      <div className="space-y-2">
        <div className="flex gap-1.5">
          <input
            value={customPrompt}
            onChange={(e) => setCustomPrompt(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); runAction(undefined, "自定义指令"); }
            }}
            placeholder="输入自定义指令..."
            className="flex-1 h-8 px-3 rounded-lg border border-border bg-transparent font-sans text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring"
            disabled={loading}
          />
          <Button
            size="sm"
            variant="outline"
            disabled={loading || !customPrompt.trim()}
            onClick={() => runAction(undefined, "自定义指令")}
            className="h-8 w-8 p-0 shrink-0"
          >
            {loading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Send className="w-3.5 h-3.5" />}
          </Button>
        </div>
      </div>

      {/* ── 结果区 ── */}
      {(result || loading) && (
        <div className="space-y-3">
          {/* 分割线 */}
          <div className="flex items-center gap-2">
            <div className="flex-1 h-px bg-border" />
            <span className="font-sans text-[10px] text-muted-foreground/50 shrink-0">
              {loading ? "生成中..." : "结果"}
            </span>
            <div className="flex-1 h-px bg-border" />
          </div>

          {/* 结果标签 */}
          {resultLabel && !loading && result && (
            <p className="font-sans text-[10px] uppercase tracking-widest text-muted-foreground/50">{resultLabel}</p>
          )}

          {/* 结果内容 */}
          <div className="relative rounded-lg border border-border bg-muted/20 p-3 max-h-80 overflow-auto">
            {loading && !result && (
              <div className="flex items-center gap-2 py-2">
                <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
                <span className="font-sans text-sm text-muted-foreground">AI 正在思考...</span>
              </div>
            )}
            {result && (
              <div className="font-sans text-sm text-foreground whitespace-pre-wrap leading-relaxed">
                {result}
                {loading && <span className="inline-block w-1.5 h-4 bg-primary ml-0.5 animate-pulse align-middle" />}
              </div>
            )}
            {loading && result && (
              <button
                type="button"
                onClick={stopGeneration}
                className="absolute top-2 right-2 px-2 py-0.5 rounded text-[10px] font-medium bg-red-600 text-white hover:bg-red-700 transition-colors"
              >
                停止
              </button>
            )}
          </div>

          {/* 操作按钮 */}
          {!loading && result && (
            <div className="space-y-2">
              {generateTarget ? (
                <button
                  type="button"
                  onClick={applyGenerated}
                  className="w-full flex items-center justify-center gap-1.5 h-9 rounded-lg bg-primary text-primary-foreground font-sans text-xs font-medium hover:bg-primary/90 transition-colors active:scale-[0.98]"
                >
                  <Send className="w-3 h-3" />
                  应用{generateTarget === "title" ? "标题" : "摘要"}
                </button>
              ) : (
                <div className="space-y-1.5">
                  <button
                    type="button"
                    onClick={() => handleInsert("replace")}
                    className="w-full flex items-center justify-center gap-1.5 h-9 rounded-lg bg-primary text-primary-foreground font-sans text-xs font-medium hover:bg-primary/90 transition-colors active:scale-[0.98]"
                  >
                    <RefreshCw className="w-3 h-3" />
                    替换内容
                  </button>
                  <div className="grid grid-cols-2 gap-1.5">
                    <button
                      type="button"
                      onClick={() => handleInsert("append")}
                      className="flex items-center justify-center gap-1 h-8 rounded-lg border border-border font-sans text-xs text-foreground hover:bg-muted/40 transition-colors"
                    >
                      追加到末尾
                    </button>
                    <button
                      type="button"
                      onClick={handleCopy}
                      className="flex items-center justify-center gap-1 h-8 rounded-lg border border-border font-sans text-xs text-foreground hover:bg-muted/40 transition-colors"
                    >
                      {copied ? <Check className="w-3 h-3 text-green-600" /> : <Copy className="w-3 h-3" />}
                      {copied ? "已复制" : "复制"}
                    </button>
                  </div>
                </div>
              )}
            </div>
          )}
        </div>
      )}

      {/* ── 空状态 ── */}
      {!result && !loading && (
        <p className="font-sans text-xs text-muted-foreground/40 leading-relaxed text-center py-4">
          选中文字可以局部处理<br />
          或直接点击上方按钮处理全文
        </p>
      )}
    </div>
  );
}