"use client";

import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
import { useCallback, useEffect, useState } from "react";
import {
  ArrowLeft,
  Loader2,
  MessageSquare,
  Radar,
  RefreshCw,
  Save,
  Sparkles,
  Table2,
} from "lucide-react";
import { ResearchMapView } from "@/components/research-map-view";
import { SuggestedTagsPicker } from "@/components/suggested-tags-picker";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { FeatureGate } from "@/components/layout/feature-gate";
import { PageHeader } from "@/components/layout/page-header";
import { JobProgressPanel } from "@/components/job-progress-panel";
import { openRefine, registerApplyCallback, syncResearchMap } from "@/lib/refine-session/store";
import { reconcileSelectedTags } from "@/lib/services/preserve-selected-tags";
import { Textarea } from "@/components/ui/textarea";
import { InlineAlert } from "@/components/ui/inline-alert";
import { notify } from "@/lib/notifications/store";
import type { ActionFeedback } from "@/lib/use-action-feedback";
import { useActionFeedback } from "@/lib/use-action-feedback";
import type { ResearchMap } from "@/lib/types/research";
import { BrandProductPicker } from "@/components/product-profile/brand-product-picker";
import { hasProductContext, summarizeProductContext } from "@/lib/types/product-context";
import { TOPIC_GOAL_LABELS, isPlacementGoal } from "@/lib/types/topic-goal";
import { parseFetchJson } from "@/lib/utils";
import { parseStyle8DProfile } from "@/lib/types/style-profile";

interface Topic {
  id: string;
  label: string;
  query: string;
  brief: string | null;
  productContext: string | null;
  brandProfileId?: string | null;
  productProfileId?: string | null;
  topicGoal: string;
  researchMap: string | null;
  selectedTags: string | null;
  active: boolean;
}

function parseResearchMap(raw: string | null): ResearchMap | null {
  if (!raw) return null;
  try {
    return JSON.parse(raw) as ResearchMap;
  } catch {
    return null;
  }
}

function parseTags(raw: string | null): string[] {
  if (!raw) return [];
  try {
    const parsed = JSON.parse(raw) as unknown;
    return Array.isArray(parsed) ? parsed.filter((t): t is string => typeof t === "string") : [];
  } catch {
    return [];
  }
}

export default function TopicDetailPage() {
  const params = useParams();
  const router = useRouter();
  const topicId = params.topicId as string;

  const [topic, setTopic] = useState<Topic | null>(null);
  const [brief, setBrief] = useState("");
  const [productContext, setProductContext] = useState("");
  const [brandProfileId, setBrandProfileId] = useState<string | null>(null);
  const [productProfileId, setProductProfileId] = useState<string | null>(null);
  const [researchMap, setResearchMap] = useState<ResearchMap | null>(null);
  const [selectedTags, setSelectedTags] = useState<string[]>([]);
  const [analyzing, setAnalyzing] = useState(false);
  const [analyzeElapsed, setAnalyzeElapsed] = useState(0);
  const [analyzeError, setAnalyzeError] = useState<string | null>(null);
  const [analyzeProgress, setAnalyzeProgress] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);
  const [analyzingTags, setAnalyzingTags] = useState(false);
  const [scanning, setScanning] = useState(false);
  const [scanProgress, setScanProgress] = useState<string | null>(null);
  const [scanProgressDetail, setScanProgressDetail] = useState<string | null>(null);
  const [showScanSummary, setShowScanSummary] = useState(false);
  const [activeScanJobId, setActiveScanJobId] = useState<string | null>(null);
  const [cancellingScan, setCancellingScan] = useState(false);
  const [generating, setGenerating] = useState(false);
  const [lastScanId, setLastScanId] = useState<string | null>(null);
  const [style8DReady, setStyle8DReady] = useState(false);
  const { feedback, clearFeedback, showError, showSuccess, showWarning } =
    useActionFeedback();
  const [brandFeedback, setBrandFeedback] = useState<ActionFeedback | null>(null);
  const [tagsFeedback, setTagsFeedback] = useState<ActionFeedback | null>(null);
  const [scanFeedback, setScanFeedback] = useState<ActionFeedback | null>(null);
  const load = useCallback(async () => {
    const [topicsRes, scansRes, accountsRes] = await Promise.all([
      fetch("/api/topics"),
      fetch("/api/scans"),
      fetch("/api/accounts"),
    ]);
    const topicsData = await topicsRes.json();
    const scansData = await scansRes.json();
    const accountsData = (await accountsRes.json()) as {
      activeAccountId?: string | null;
      accounts?: Array<{ id: string; styleProfile?: string | null }>;
    };
    const activeAccount = accountsData.accounts?.find(
      (row) => row.id === accountsData.activeAccountId
    ) ?? accountsData.accounts?.[0];
    setStyle8DReady(!!parseStyle8DProfile(activeAccount?.styleProfile));
    const found = (topicsData.topics as Topic[]).find((t) => t.id === topicId);
    if (!found) return;
    setTopic(found);
    setBrief(found.brief ?? "");
    setProductContext(found.productContext ?? "");
    setBrandProfileId(found.brandProfileId ?? null);
    setProductProfileId(found.productProfileId ?? null);
    setResearchMap(parseResearchMap(found.researchMap));
    setSelectedTags(parseTags(found.selectedTags));

    const latestScan = (scansData.scans as Array<{ id: string; topicId: string }>).find(
      (s) => s.topicId === topicId
    );
    if (latestScan) setLastScanId(latestScan.id);
  }, [topicId]);

  const syncActiveJobs = useCallback(async () => {
    try {
      const res = await fetch(`/api/jobs?topicId=${topicId}&active=1`);
      const data = await parseFetchJson<{ jobs?: Array<{
        id: string;
        type: string;
        progress?: string | null;
        progressDetail?: string | null;
      }> }>(res);
      if (!res.ok) return;

      const active = data.jobs ?? [];
      const analyzeJob = active.find((j) => j.type === "analyze-topic");
      const scanJob = active.find((j) => j.type === "scan");

      setAnalyzing(!!analyzeJob);
      setAnalyzeProgress(analyzeJob?.progress ?? null);
      setScanning(!!scanJob);
      setScanProgress(scanJob?.progress ?? null);
      setScanProgressDetail(scanJob?.progressDetail ?? null);
      setActiveScanJobId(scanJob?.id ?? null);
    } catch {
      // 背景輪詢失敗時略過，避免整頁崩潰
    }
  }, [topicId]);

  useEffect(() => {
    if (!topic || !researchMap) return;
    syncResearchMap(topicId, researchMap, topic.label);
  }, [topicId, topic, researchMap]);

  useEffect(() => {
    return registerApplyCallback(topicId, (map) => {
      setSelectedTags((prev) => {
        const reconciled = reconcileSelectedTags(prev, map, {
          label: topic?.label ?? "",
          query: topic?.query ?? "",
          brief: topic?.brief,
        });
        setResearchMap(reconciled.researchMap);
        void fetch("/api/topics", {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            id: topicId,
            researchMap: reconciled.researchMap,
            selectedTags: reconciled.selectedTags,
          }),
        });
        return reconciled.selectedTags;
      });
    });
  }, [topicId, topic?.label, topic?.query, topic?.brief]);

  useEffect(() => {
    load();
    syncActiveJobs();
  }, [load, syncActiveJobs]);

  useEffect(() => {
    if (!analyzing && !scanning) return;
    const timer = window.setInterval(syncActiveJobs, 2000);
    return () => window.clearInterval(timer);
  }, [analyzing, scanning, syncActiveJobs]);

  useEffect(() => {
    if (!analyzing) {
      setAnalyzeElapsed(0);
      return;
    }
    const timer = window.setInterval(() => {
      setAnalyzeElapsed((s) => s + 1);
    }, 1000);
    return () => window.clearInterval(timer);
  }, [analyzing]);

  useEffect(() => {
    function onJobCompleted(event: Event) {
      const { job } = (event as CustomEvent).detail as {
        job: {
          topicId?: string | null;
          type: string;
          status: string;
          result?: string | null;
          error?: string | null;
          progress?: string | null;
          progressDetail?: string | null;
        };
      };
      if (job.topicId !== topicId) return;

      if (job.type === "analyze-topic") {
        setAnalyzing(false);
        setAnalyzeProgress(null);
        if (job.status === "completed") {
          setAnalyzeError(null);
          load();
        } else if (job.status === "failed") {
          setAnalyzeError(job.error ?? "AI 分析失敗");
        }
      }

      if (job.type === "scan") {
        setScanning(false);
        setActiveScanJobId(null);
        if (job.status === "completed") {
          setScanProgress(job.progress ?? "海巡完成");
          setScanProgressDetail(job.progressDetail ?? null);
          setShowScanSummary(true);
        } else {
          setScanProgress(null);
          setScanProgressDetail(null);
          setShowScanSummary(false);
          if (job.status === "failed") {
            setScanFeedback({
              type: "error",
              title: "海巡失敗",
              message: job.error ?? "海巡執行失敗，請再試一次。",
            });
          }
        }
        if (job.status === "completed" && job.result) {
          try {
            const scan = JSON.parse(job.result) as {
              id?: string;
              items?: Array<{ qualityTier?: string }>;
            };
            if (scan.id) {
              setLastScanId(scan.id);
              router.push(`/scans/${topicId}/results`);
            }
            load();
          } catch {
            load();
          }
        }
      }
    }

    window.addEventListener("job-completed", onJobCompleted);
    return () => window.removeEventListener("job-completed", onJobCompleted);
  }, [topicId, load, router]);

  async function handleSaveBrief() {
    if (!topic) return;
    clearFeedback();
    setSaving(true);
    const res = await fetch("/api/topics", {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ id: topic.id, brief }),
    });
    setSaving(false);
    if (!res.ok) {
      const data = await res.json().catch(() => ({}));
      showError((data as { error?: string }).error ?? "無法儲存 Brief", "儲存失敗");
      return;
    }
    showSuccess("Brief 已儲存");
    load();
  }

  async function handleAnalyze() {
    if (!topic) return;
    if (!brief.trim()) {
      showWarning("請先填寫主題 Brief，AI 才能準確分析。", "尚無 Brief");
      return;
    }
    if (
      isPlacementGoal(topic.topicGoal) &&
      !brandProfileId &&
      !hasProductContext(productContext)
    ) {
      showWarning("置入模式需要品牌與至少一項產品。", "請先選擇品牌");
      return;
    }

    setAnalyzeError(null);

    try {
      const res = await fetch("/api/analyze-topic", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ topicId: topic.id, brief }),
      });

      let data: { error?: string; jobId?: string; message?: string } = {};
      try {
        data = await res.json();
      } catch {
        throw new Error("伺服器回應格式錯誤");
      }

      if (!res.ok) {
        throw new Error(data.error ?? `AI 分析失敗（HTTP ${res.status}）`);
      }

      setAnalyzing(true);
      setAnalyzeProgress(data.message ?? "已於背景執行…");
      notify({
        type: "info",
        title: `${topic.label} · 主題分析中`,
        message: "AI 正在建立研究地圖與搜尋標籤，可以先去其他頁面。完成後會再通知你。",
        href: `/scans/${topic.id}`,
      });
      window.dispatchEvent(new Event("haixun:jobs-updated"));
      syncActiveJobs();
    } catch (err) {
      const message = err instanceof Error ? err.message : "AI 分析失敗";
      setAnalyzeError(message);
    }
  }

  function toggleTag(tag: string) {
    setSelectedTags((prev) =>
      prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
    );
  }

  function selectAllAccountTags() {
    if (!researchMap) return;
    const accountTags = researchMap.suggestedTags
      .filter((t) => t.searchType === "帳號" || t.tag.startsWith("@"))
      .map((t) => t.tag);
    const fromSimilar = (researchMap.similarAccounts ?? []).map((a) =>
      a.username.startsWith("@") ? a.username : `@${a.username}`
    );
    setSelectedTags((prev) => [...new Set([...prev, ...accountTags, ...fromSimilar])]);
  }

  async function handleSaveTags() {
    if (!topic) return;
    setSaving(true);
    await fetch("/api/topics", {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ id: topic.id, selectedTags }),
    });
    setSaving(false);
    setTagsFeedback({ type: "success", message: "標籤已儲存" });
    load();
  }

  async function handleAnalyzeTags() {
    if (!topic || !researchMap || analyzingTags) return;
    setTagsFeedback(null);
    setAnalyzingTags(true);
    try {
      const res = await fetch("/api/analyze-tags", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ topicId: topic.id }),
      });
      const data = await parseFetchJson<{
        error?: string;
        researchMap?: ResearchMap;
        selectedTags?: string[];
        count?: number;
      }>(res);
      if (!res.ok || !data.researchMap || !data.selectedTags) {
        throw new Error(data.error ?? "搜尋標籤分析沒有回傳可用結果");
      }
      setResearchMap(data.researchMap);
      setSelectedTags(data.selectedTags);
      setTagsFeedback({
        type: "success",
        message: `已重新產生 ${data.count ?? data.selectedTags.length} 個自然搜尋詞，研究地圖未重新分析。`,
      });
    } catch (error) {
      setTagsFeedback({
        type: "error",
        title: "標籤分析失敗",
        message: error instanceof Error ? error.message : "請重試或更換研究模型",
      });
    } finally {
      setAnalyzingTags(false);
    }
  }

  async function handleScan() {
    if (!topic) return;
    setScanFeedback(null);
    setShowScanSummary(false);
    const placement = isPlacementGoal(topic.topicGoal);
    if (!placement && selectedTags.length === 0) {
      setScanFeedback({
        type: "warning",
        title: "請先選擇標籤",
        message: "完成 AI 分析後，至少選擇一個搜尋標籤再海巡。",
      });
      return;
    }
    if (
      placement &&
      (!researchMap ||
        (researchMap.questions.length === 0 && researchMap.pillars.length === 0))
    ) {
      setScanFeedback({
        type: "warning",
        title: "請先完成 AI 分析",
        message: "置入模式需要研究地圖的「受眾會問什麼」與「內容支柱」才能自動海巡。",
      });
      return;
    }
    setScanning(true);
    try {
      const res = await fetch("/api/scan", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          topicId: topic.id,
          useTags: !placement,
          selectedTags,
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error ?? "無法啟動海巡");
      setActiveScanJobId(data.jobId ?? null);
      setScanProgress(data.message ?? "海巡已啟動…");
      notify({
        type: "info",
        title: `${topic.label} · 海巡中`,
        message: "正在搜尋 Threads 並篩選素材，完成後會再通知你。",
        href: `/scans/${topic.id}`,
      });
      window.dispatchEvent(new Event("haixun:jobs-updated"));
      syncActiveJobs();
    } catch (error) {
      setScanning(false);
      setScanFeedback({
        type: "error",
        title: "海巡失敗",
        message: error instanceof Error ? error.message : "無法啟動海巡",
      });
    }
  }

  async function handleCancelScan() {
    if (!activeScanJobId) return;
    setCancellingScan(true);
    try {
      const res = await fetch(`/api/jobs/${activeScanJobId}/cancel`, { method: "POST" });
      const data = await res.json();
      if (!res.ok) {
        setScanFeedback({
          type: "error",
          title: "取消失敗",
          message: data.error ?? "無法停止海巡",
        });
        return;
      }
      setScanning(false);
      setScanProgress(null);
      setScanProgressDetail(null);
      setActiveScanJobId(null);
      setScanFeedback({ type: "info", message: "海巡已停止" });
      syncActiveJobs();
    } finally {
      setCancellingScan(false);
    }
  }

  async function handleGenerateMatrix() {
    if (!lastScanId) {
      setScanFeedback({ type: "warning", message: "請先完成海巡再生成內容矩陣。" });
      return;
    }
    setGenerating(true);
    const res = await fetch("/api/generate-matrix", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ scanId: lastScanId }),
    });
    const data = await res.json();
    setGenerating(false);
    if (!res.ok) {
      notify({ type: "error", title: "生成內容矩陣失敗", message: data.error });
      return;
    }
    notify({
      type: "success",
      title: "內容矩陣已生成",
      message: `共 ${data.drafts?.length ?? 0} 篇`,
      href: "/matrix",
    });
    router.push("/matrix");
  }

  if (!topic) {
    return (
      <div className="flex items-center justify-center py-20">
        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
      </div>
    );
  }

  return (
    <div>
      <div className="mb-4">
        <Button variant="ghost" size="sm" asChild>
          <Link
            href={`/scans?mode=${isPlacementGoal(topic.topicGoal) ? "placement" : "viral"}`}
          >
            <ArrowLeft className="h-4 w-4" />
            返回主題列表
          </Link>
        </Button>
      </div>

      <PageHeader
        title={topic.label}
        description={`${topic.query} · ${TOPIC_GOAL_LABELS[isPlacementGoal(topic.topicGoal) ? "placement" : "viral"]}`}
      />

      <div className="mb-5 flex flex-col gap-3 rounded-xl border border-border bg-card p-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <div className="flex items-center gap-2">
            <p className="text-sm font-medium">帳號 8D 風格策略</p>
            <Badge variant={style8DReady ? "success" : "secondary"}>
              {style8DReady ? "已套用" : "尚未設定"}
            </Badge>
          </div>
          <p className="mt-1 text-xs text-muted-foreground">
            這份策略會自動影響後續產文與回覆；D1–D8 欄位在帳號策略頁編輯。
          </p>
        </div>
        <Button asChild variant="outline" size="sm">
          <Link href="/accounts#style-8d">查看 D1–D8</Link>
        </Button>
      </div>

      {feedback && (
        <InlineAlert
          type={feedback.type}
          title={feedback.title}
          message={feedback.message}
          onDismiss={clearFeedback}
          className="mb-4"
        />
      )}

      <div className="space-y-5">
        <Card>
          <CardHeader>
            <CardTitle>① 主題 Brief</CardTitle>

          </CardHeader>
          <CardContent className="space-y-3">
            <Textarea
              value={brief}
              onChange={(e) => setBrief(e.target.value)}
              rows={5}
              placeholder={
                isPlacementGoal(topic.topicGoal)
                  ? "例：服務自己在家幫狗洗澡的飼主，不要送寵物美容的受眾。"
                  : "例：30 歲上班族女性第一次備孕。想分享科學備孕知識，服務同齡焦慮型讀者。不要業配、偏方、純情緒宣洩。"
              }
            />
            {isPlacementGoal(topic.topicGoal) && (
              <div className="space-y-2 rounded-lg border border-border bg-muted/40 p-4">
                {brandFeedback && (
                  <InlineAlert
                    type={brandFeedback.type}
                    title={brandFeedback.title}
                    message={brandFeedback.message}
                    onDismiss={() => setBrandFeedback(null)}
                  />
                )}
                <BrandProductPicker
                  brandId={brandProfileId}
                  productId={productProfileId}
                  onChange={async ({ brandId, productId, context }) => {
                    setBrandFeedback(null);
                    const res = await fetch("/api/topics", {
                      method: "PATCH",
                      headers: { "Content-Type": "application/json" },
                      body: JSON.stringify({
                        id: topic.id,
                        brandProfileId: brandId,
                        productProfileId: productId,
                      }),
                    });
                    let data: { error?: string; topic?: { productContext?: string } } = {};
                    try {
                      data = await parseFetchJson(res);
                    } catch (err) {
                      setBrandFeedback({
                        type: "error",
                        title: "儲存失敗",
                        message: err instanceof Error ? err.message : "伺服器回應異常",
                      });
                      return;
                    }
                    if (!res.ok) {
                      setBrandFeedback({
                        type: "error",
                        title: "儲存失敗",
                        message: data.error ?? "無法連結品牌與產品",
                      });
                      return;
                    }
                    setBrandProfileId(brandId);
                    setProductProfileId(productId);
                    if (data.topic?.productContext) {
                      setProductContext(data.topic.productContext);
                    } else if (context) {
                      setProductContext(context);
                    }
                    setBrandFeedback({ type: "success", message: "品牌與產品已連結" });
                  }}
                />
                {!brandProfileId && !productProfileId && summarizeProductContext(productContext) && (
                  <p className="text-[12px] text-muted-foreground">
                    目前使用舊版內嵌資料：{summarizeProductContext(productContext)}
                  </p>
                )}
              </div>
            )}
            <Button size="sm" onClick={handleSaveBrief} disabled={saving}>
              <Save className="h-3.5 w-3.5" />
              {saving ? "儲存中…" : "儲存"}
            </Button>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <div className="flex items-start justify-between gap-4">
              <div>
                <CardTitle>② 研究地圖</CardTitle>

              </div>
              <div className="flex shrink-0 flex-wrap gap-2">
                {researchMap && (
                  <FeatureGate feature="research">
                    <Button
                      variant="outline"
                      onClick={() =>
                        openRefine(topicId, { researchMap, topicLabel: topic.label })
                      }
                    >
                      <MessageSquare className="h-4 w-4" />
                      微調
                    </Button>
                  </FeatureGate>
                )}
                <FeatureGate feature="analyze">
                  <Button onClick={handleAnalyze} disabled={analyzing}>
                    {analyzing ? (
                      <Loader2 className="h-4 w-4 animate-spin" />
                    ) : (
                      <Sparkles className="h-4 w-4" />
                    )}
                    {analyzing ? `主題分析中… ${analyzeElapsed}s` : "主題分析"}
                  </Button>
                </FeatureGate>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            {analyzing && (
              <p className="page-lead mb-3">
                {analyzeProgress ?? "分析中…"}
                {analyzeElapsed > 0 && ` · ${analyzeElapsed}s`}
              </p>
            )}
            {analyzeError && !analyzing && (
              <InlineAlert type="error" title="AI 分析失敗" message={analyzeError} className="mb-3" />
            )}
            <FeatureGate feature="analyze" showHint />
            {researchMap ? (
              <ResearchMapView
                map={researchMap}
                showSimilarAccounts={!isPlacementGoal(topic.topicGoal)}
              />
            ) : (
              <p className="page-lead">填好 Brief 後按「分析」</p>
            )}
          </CardContent>
        </Card>

        {researchMap && (
          <Card>
            <CardHeader>
              <div className="flex items-start justify-between gap-4">
                <div>
                  <CardTitle>③ {isPlacementGoal(topic.topicGoal) ? "海巡關鍵字" : "搜尋標籤"}</CardTitle>
                  <CardDescription className="mt-1">
                    {isPlacementGoal(topic.topicGoal)
                      ? "以真人會搜尋的痛點、求助與選購詞找出高意向受眾"
                      : "勾選後以 Threads API 與網搜找參考貼文；可一併勾選相似帳號"}
                  </CardDescription>
                </div>
                <div className="flex shrink-0 flex-wrap gap-2">
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={handleAnalyzeTags}
                    disabled={analyzingTags}
                  >
                    {analyzingTags ? (
                      <Loader2 className="h-3.5 w-3.5 animate-spin" />
                    ) : (
                      <RefreshCw className="h-3.5 w-3.5" />
                    )}
                    {analyzingTags ? "分析標籤中…" : "重新分析標籤"}
                  </Button>
                  <Button size="sm" variant="outline" onClick={handleSaveTags} disabled={saving || analyzingTags}>
                    儲存標籤
                  </Button>
                </div>
              </div>
            </CardHeader>
            <CardContent className="space-y-3">
              {tagsFeedback && (
                <InlineAlert
                  type={tagsFeedback.type}
                  title={tagsFeedback.title}
                  message={tagsFeedback.message}
                  onDismiss={() => setTagsFeedback(null)}
                />
              )}
              <SuggestedTagsPicker
                tags={researchMap.suggestedTags}
                selected={selectedTags}
                onToggle={toggleTag}
                onSelectAllAccounts={selectAllAccountTags}
                hideAccounts={isPlacementGoal(topic.topicGoal)}
                researchMap={researchMap}
              />
            </CardContent>
          </Card>
        )}

        <Card>
          <CardHeader>
            <CardTitle>④ 海巡與產出</CardTitle>
            <CardDescription>
              {isPlacementGoal(topic.topicGoal)
                ? "分析完成後一鍵海巡：自動用受眾問題與內容支柱搜尋，再以「不要碰」過濾"
                : "海巡後生成內容矩陣"}
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            {scanFeedback && (
              <InlineAlert
                type={scanFeedback.type}
                title={scanFeedback.title}
                message={scanFeedback.message}
                onDismiss={() => setScanFeedback(null)}
              />
            )}
            {(scanning || showScanSummary) && (scanProgress || scanProgressDetail) && (
              <div className="space-y-2 rounded-lg border border-border bg-muted/50 p-3">
                <JobProgressPanel
                  summary={scanProgress ?? (scanning ? "背景海巡中…" : "海巡完成")}
                  progressDetailRaw={scanProgressDetail}
                  completed={!scanning && showScanSummary}
                  jobType="scan"
                />
                {scanning ? (
                  <p className="page-lead">可換頁 · 取消於下個子任務後生效</p>
                ) : (
                  <div className="flex flex-wrap items-center gap-2">
                    <p className="page-lead">海巡與留言抓取已完成，請自行挑選貼文</p>
                    <Button
                      size="sm"
                      variant="ghost"
                      className="h-7 px-2 text-[12px]"
                      onClick={() => {
                        setShowScanSummary(false);
                        setScanProgress(null);
                        setScanProgressDetail(null);
                      }}
                    >
                      關閉
                    </Button>
                  </div>
                )}
              </div>
            )}
            <FeatureGate feature="scan" showHint className="mb-3" />
            <div className="flex flex-wrap gap-2">
            <FeatureGate feature="scan">
            <Button
              onClick={handleScan}
              disabled={
                scanning ||
                (!isPlacementGoal(topic.topicGoal) && selectedTags.length === 0) ||
                (isPlacementGoal(topic.topicGoal) && !researchMap)
              }
            >
              <Radar className="h-4 w-4" />
              {scanning
                ? "海巡中…"
                : isPlacementGoal(topic.topicGoal)
                  ? "置入海巡"
                  : `綜合海巡（${selectedTags.length} 個標籤）`}
            </Button>
            </FeatureGate>
            {scanning && activeScanJobId && (
              <Button
                variant="outline"
                onClick={handleCancelScan}
                disabled={cancellingScan}
              >
                {cancellingScan ? (
                  <Loader2 className="h-4 w-4 animate-spin" />
                ) : null}
                停止海巡
              </Button>
            )}
            {!isPlacementGoal(topic.topicGoal) && (
              <Button
                variant="outline"
                onClick={handleGenerateMatrix}
                disabled={generating || !lastScanId}
              >
                <Table2 className="h-4 w-4" />
                {generating ? "生成中…" : "生成內容矩陣"}
              </Button>
            )}
            <Button variant="ghost" asChild>
              <Link href={`/scans/${topicId}/results`}>
                查看海巡成果
              </Link>
            </Button>
            </div>
          </CardContent>
        </Card>
      </div>

    </div>
  );
}