"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
import {
  ChevronDown,
  ChevronUp,
  ExternalLink,
  Flame,
  Loader2,
  MessageSquarePlus,
  ScanSearch,
  Sparkles,
  Table2,
} from "lucide-react";
import { ViralAnalysisPanel } from "@/components/viral-analysis-panel";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { FeatureGate } from "@/components/layout/feature-gate";
import { ScanPipelineSummary } from "@/components/inspiration/scan-pipeline-summary";
import { EmptyState } from "@/components/layout/empty-state";
import { notify } from "@/lib/notifications/store";
import { parseMediaUrls, parseViralAnalysis } from "@/lib/types/viral";
import { hasProductContext, summarizeProductContext } from "@/lib/types/product-context";
import { isPlacementGoal } from "@/lib/types/topic-goal";
import { cn } from "@/lib/utils";

interface Reply {
  id: string;
  text: string;
  authorName?: string | null;
  likeCount?: number | null;
}

interface OutreachDraftPreview {
  id: string;
  text: string;
  angle?: string | null;
  rationale?: string | null;
}

interface OutreachTargetPreview {
  id: string;
  reason?: string | null;
  drafts: OutreachDraftPreview[];
}

export interface ScanItem {
  id: string;
  text: string;
  authorName?: string | null;
  permalink?: string | null;
  likeCount?: number | null;
  replyCount?: number | null;
  score: number;
  searchTag?: string | null;
  relevanceScore?: number | null;
  placementScore?: number | null;
  placementReason?: string | null;
  qualityTier?: string | null;
  qualityReason?: string | null;
  combinedScore?: number | null;
  mediaUrls?: string | null;
  mediaType?: string | null;
  viralAnalysis?: string | null;
  replies: Reply[];
  outreachTargets?: OutreachTargetPreview[];
}

export interface Scan {
  id: string;
  createdAt: string;
  scanMode?: string;
  scanGoal?: string | null;
  scanTags?: string | null;
  searchSource?: string | null;
  repliesFetched?: boolean;
  repliesCount?: number;
  topic: {
    id: string;
    label: string;
    query: string;
    topicGoal?: string | null;
    productContext?: string | null;
  };
  items: ScanItem[];
}

function truncateText(text: string, max = 72) {
  const trimmed = (text ?? "").replace(/\s+/g, " ").trim();
  if (!trimmed) return "（無內文）";
  if (trimmed.length <= max) return trimmed;
  return `${trimmed.slice(0, max)}…`;
}

function CollapsibleTrigger({
  onToggle,
  className,
  children,
}: {
  onToggle: () => void;
  className?: string;
  children: React.ReactNode;
}) {
  return (
    <div
      role="button"
      tabIndex={0}
      onClick={onToggle}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          onToggle();
        }
      }}
      className={cn("cursor-pointer text-left outline-none focus-visible:ring-2 focus-visible:ring-ring", className)}
    >
      {children}
    </div>
  );
}

function parseScanTags(raw: string | null | undefined): string[] {
  if (!raw) return [];
  try {
    return JSON.parse(raw) as string[];
  } catch {
    return [];
  }
}

interface TopicScanResultsProps {
  scans: Scan[];
  onReload: () => Promise<void>;
  emptyAction?: React.ReactNode;
}

export function TopicScanResults({ scans, onReload, emptyAction }: TopicScanResultsProps) {
  const router = useRouter();
  const [scanExpanded, setScanExpanded] = useState<Record<string, boolean>>({});
  const [itemExpanded, setItemExpanded] = useState<Record<string, boolean>>({});
  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
  const [generating, setGenerating] = useState<string | null>(null);
  const [matrixGen, setMatrixGen] = useState<string | null>(null);
  const [batchAnalyzing, setBatchAnalyzing] = useState<string | null>(null);
  const [generatingReplyId, setGeneratingReplyId] = useState<string | null>(null);
  const [viralExpanded, setViralExpanded] = useState<Record<string, boolean>>({});

  async function handleGenerate(scanId: string) {
    setGenerating(scanId);
    const res = await fetch("/api/generate", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ scanId }),
    });
    const data = await res.json();
    setGenerating(null);
    if (!res.ok) {
      notify({ type: "error", title: "生成草稿失敗", message: data.error });
      return;
    }
    notify({
      type: "success",
      title: "草稿已生成",
      message: `共 ${data.drafts?.length ?? 0} 篇`,
      href: "/",
    });
  }

  async function handleGenerateMatrix(scanId: string) {
    setMatrixGen(scanId);
    const res = await fetch("/api/generate-matrix", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ scanId }),
    });
    const data = await res.json();
    setMatrixGen(null);
    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");
  }

  async function handleGenerateReply(scanItemId: string, productContext: string) {
    if (!hasProductContext(productContext)) {
      notify({
        type: "warning",
        title: "請先填寫品牌與產品",
        message: "請到主題設定選擇品牌與產品後再生成回覆。",
      });
      return;
    }

    setGeneratingReplyId(scanItemId);
    const res = await fetch("/api/outreach/generate", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ scanItemId, productContext }),
    });
    const data = await res.json();
    setGeneratingReplyId(null);
    if (!res.ok) {
      notify({ type: "error", title: "生成回覆失敗", message: data.error });
      return;
    }
    setItemExpanded((prev) => ({ ...prev, [scanItemId]: true }));
    await onReload();
    notify({
      type: "success",
      title: "回覆草稿已生成",
      message: "請審核後再到主動互動頁發布",
      href: "/outreach",
    });
  }

  function toggleScan(id: string) {
    setScanExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
  }

  function toggleItemDetail(id: string) {
    setItemExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
  }

  function toggleReplies(id: string) {
    setExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
  }

  function toggleViral(id: string) {
    setViralExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
  }

  function expandAllScans() {
    setScanExpanded(Object.fromEntries(scans.map((s) => [s.id, true])));
  }

  function collapseAllScans() {
    setScanExpanded(Object.fromEntries(scans.map((s) => [s.id, false])));
  }

  function revealAnalyzedItems(itemIds: string[], scanId: string) {
    setScanExpanded((prev) => ({ ...prev, [scanId]: true }));
    setItemExpanded((prev) => {
      const next = { ...prev };
      for (const id of itemIds) next[id] = true;
      return next;
    });
    setViralExpanded((prev) => {
      const next = { ...prev };
      for (const id of itemIds) next[id] = true;
      return next;
    });
  }

  async function handleBatchAnalyze(scanId: string) {
    setBatchAnalyzing(scanId);
    setScanExpanded((prev) => ({ ...prev, [scanId]: true }));
    notify({
      type: "info",
      title: "爆款分析進行中",
      message: "正在分析 Top5 貼文，約需 1～3 分鐘，請稍候…",
    });

    try {
      const res = await fetch("/api/analyze-viral", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ scanId, limit: 5 }),
      });
      const data = await res.json();
      if (!res.ok) {
        notify({ type: "error", title: "批次爆款分析失敗", message: data.error });
        return;
      }

      const results = (data.results ?? []) as Array<{ item?: { id?: string } }>;
      const itemIds = results
        .map((row) => row.item?.id)
        .filter((id): id is string => typeof id === "string");

      if (itemIds.length === 0) {
        notify({
          type: "warning",
          title: "沒有可分析的貼文",
          message: "請確認有通過品質篩選（優質／可參考）的素材。",
        });
        return;
      }

      revealAnalyzedItems(itemIds, scanId);
      await onReload();
      revealAnalyzedItems(itemIds, scanId);

      notify({
        type: "success",
        title: "爆款分析完成",
        message: `共 ${itemIds.length} 篇，已自動展開結果`,
      });
    } catch {
      notify({
        type: "error",
        title: "批次爆款分析失敗",
        message: "連線中斷或逾時，請稍後再試。",
      });
    } finally {
      setBatchAnalyzing(null);
    }
  }

  if (scans.length === 0) {
    return (
      <EmptyState
        icon={ScanSearch}
        title="尚無海巡成果"
        description="到主題設定完成分析與海巡後，成果會顯示在這裡"
        action={emptyAction}
      />
    );
  }

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap gap-2">
        <Button size="sm" variant="ghost" onClick={expandAllScans}>
          全部展開
        </Button>
        <Button size="sm" variant="ghost" onClick={collapseAllScans}>
          全部收合
        </Button>
      </div>

      <div className="space-y-5">
        {scans.map((scan, si) => {
          const placementScan = isPlacementGoal(scan.scanGoal ?? scan.topic.topicGoal);
          const tags = parseScanTags(scan.scanTags);
          const visibleItems = scan.items;

          const isScanOpen = scanExpanded[scan.id] ?? false;
          const analyzedCount = scan.items.filter((i) => i.viralAnalysis).length;

          return (
            <Card key={scan.id} className="animate-fade-in-up" style={{ animationDelay: `${si * 60}ms` }}>
              <CardHeader className="pb-3">
                <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                  <CollapsibleTrigger
                    onToggle={() => toggleScan(scan.id)}
                    className="group min-w-0 flex-1"
                  >
                    <div className="flex items-start gap-2">
                      <ChevronDown
                        className={cn(
                          "mt-1 h-4 w-4 shrink-0 text-muted-foreground transition-transform",
                          isScanOpen && "rotate-180"
                        )}
                      />
                      <div className="min-w-0">
                        <CardTitle className="group-hover:text-foreground/90">
                          {new Date(scan.createdAt).toLocaleString("zh-TW")}
                        </CardTitle>
                        <CardDescription>
                          {scan.scanMode === "multi-tag" && tags.length > 0 && `${tags.length} 個標籤`}
                          {analyzedCount > 0 && `${tags.length > 0 ? " · " : ""}${analyzedCount} 篇已爆款分析`}
                          {!isScanOpen && " · 點擊展開貼文"}
                        </CardDescription>
                        <ScanPipelineSummary
                          className="mt-2"
                          itemCount={scan.items.length}
                          repliesFetched={scan.repliesFetched}
                          repliesCount={scan.repliesCount}
                        />
                        <div className="mt-2 flex flex-wrap items-center gap-1.5">
                          <Badge
                            variant={
                              scan.searchSource === "browser" || scan.searchSource === "web"
                                ? "secondary"
                                : "default"
                            }
                            className="text-[10px]"
                          >
                            {scan.searchSource === "browser"
                              ? "瀏覽器爬蟲"
                              : scan.searchSource === "web"
                                ? "網路搜尋"
                                : scan.searchSource === "hybrid"
                                  ? "API + 網搜"
                                  : "官方 API"}
                          </Badge>
                        </div>
                        {!isScanOpen && tags.length > 0 && (
                          <div className="mt-2 flex flex-wrap gap-1.5">
                            {tags.slice(0, 6).map((tag) => (
                              <Badge key={tag} variant="outline" className="text-[11px]">
                                {tag}
                              </Badge>
                            ))}
                            {tags.length > 6 && (
                              <Badge variant="outline" className="text-[11px]">
                                +{tags.length - 6}
                              </Badge>
                            )}
                          </div>
                        )}
                      </div>
                    </div>
                  </CollapsibleTrigger>
                  <div className="flex flex-wrap gap-2 sm:shrink-0">
                    {!placementScan && (
                      <>
                        <FeatureGate feature="viralAnalysis">
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => handleBatchAnalyze(scan.id)}
                            disabled={batchAnalyzing === scan.id}
                          >
                            {batchAnalyzing === scan.id ? (
                              <Loader2 className="h-3.5 w-3.5 animate-spin" />
                            ) : (
                              <Flame className="h-3.5 w-3.5" />
                            )}
                            {batchAnalyzing === scan.id ? "分析中…" : "爆款分析 Top5"}
                          </Button>
                        </FeatureGate>
                        <FeatureGate feature="generate">
                          <Button
                            size="sm"
                            onClick={() => handleGenerateMatrix(scan.id)}
                            disabled={matrixGen === scan.id}
                          >
                            <Table2 className="h-3.5 w-3.5" />
                            {matrixGen === scan.id ? "生成中…" : "內容矩陣"}
                          </Button>
                        </FeatureGate>
                        <FeatureGate feature="generate">
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => handleGenerate(scan.id)}
                            disabled={generating === scan.id}
                          >
                            <Sparkles className="h-3.5 w-3.5" />
                            {generating === scan.id ? "生成中…" : "快速草稿"}
                          </Button>
                        </FeatureGate>
                      </>
                    )}
                    {placementScan && (
                      <Button size="sm" variant="outline" asChild>
                        <Link href="/outreach">前往主動互動審核</Link>
                      </Button>
                    )}
                  </div>
                </div>
                {isScanOpen && tags.length > 0 && (
                  <div className="mt-2 flex flex-wrap gap-1.5 pl-6">
                    {tags.map((tag) => (
                      <Badge key={tag} variant="outline" className="text-[11px]">
                        {tag}
                      </Badge>
                    ))}
                  </div>
                )}
                {isScanOpen && placementScan && (
                  <div className="mt-4 rounded-lg border border-border bg-muted/50 p-4 pl-6">
                    <p className="text-sm font-semibold">品牌與產品</p>
                    <p className="mt-1 text-[12px] text-muted-foreground">
                      {summarizeProductContext(scan.topic.productContext) ??
                        "尚未設定，請到主題設定或品牌與產品頁選用"}
                    </p>
                    <Button size="sm" variant="outline" className="mt-3" asChild>
                      <Link href={`/scans/${scan.topic.id}`}>變更品牌</Link>
                    </Button>
                  </div>
                )}
              </CardHeader>
              {batchAnalyzing === scan.id && (
                <div className="mx-5 mb-2 flex items-center gap-2 rounded-lg border border-border bg-muted/60 px-3 py-2.5 text-[13px] text-muted-foreground">
                  <Loader2 className="h-4 w-4 shrink-0 animate-spin" />
                  爆款分析 Top5 進行中…完成後會自動展開分析結果（約 1～3 分鐘）
                </div>
              )}
              {isScanOpen && (
                <CardContent className="space-y-2 pt-0">
                  {visibleItems.map((item) => {
                    const isItemOpen = itemExpanded[item.id] ?? false;
                    const outreachTarget = item.outreachTargets?.[0];
                    const hasDrafts = (outreachTarget?.drafts.length ?? 0) > 0;

                    return (
                      <div
                        key={item.id}
                        className={cn(
                          "rounded-lg border border-border bg-muted transition-colors hover:bg-secondary",
                          isItemOpen ? "p-4" : "px-3 py-2.5"
                        )}
                      >
                        <div className="flex items-start justify-between gap-3">
                          <CollapsibleTrigger
                            onToggle={() => toggleItemDetail(item.id)}
                            className="min-w-0 flex-1"
                          >
                            <div className="flex flex-wrap items-center gap-2">
                              {item.searchTag && (
                                <Badge variant="default" className="text-[11px]">
                                  {item.searchTag}
                                </Badge>
                              )}
                              <span className="text-xs font-medium text-muted-foreground">
                                @{item.authorName ?? "匿名"}
                              </span>
                              <Badge variant="outline">{item.likeCount ?? 0} 讚</Badge>
                              {(item.replyCount ?? 0) > 0 && (
                                <Badge variant="outline">{item.replyCount} 則留言</Badge>
                              )}
                              {hasDrafts && (
                                <Badge variant="success" className="text-[10px]">
                                  已有草稿
                                </Badge>
                              )}
                              {item.viralAnalysis && !isItemOpen && (
                                <Badge variant="success" className="text-[10px]">
                                  已分析
                                </Badge>
                              )}
                            </div>
                            {item.permalink ? (
                              <a
                                href={item.permalink}
                                target="_blank"
                                rel="noopener noreferrer"
                                className={cn(
                                  "mt-1.5 block text-[14px] leading-[1.65] underline-offset-2 hover:underline",
                                  !isItemOpen && "text-muted-foreground"
                                )}
                                onClick={(e) => e.stopPropagation()}
                              >
                                {isItemOpen ? item.text : truncateText(item.text)}
                              </a>
                            ) : (
                              <p
                                className={cn(
                                  "mt-1.5 text-[14px] leading-[1.65]",
                                  !isItemOpen && "text-muted-foreground"
                                )}
                              >
                                {isItemOpen ? item.text : truncateText(item.text)}
                              </p>
                            )}
                          </CollapsibleTrigger>
                          <div className="flex shrink-0 flex-col items-end gap-1">
                            {item.permalink && (
                              <a
                                href={item.permalink}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="inline-flex items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground"
                                onClick={(e) => e.stopPropagation()}
                              >
                                <ExternalLink className="h-3 w-3" />
                                原文
                              </a>
                            )}
                            <Button
                              size="sm"
                              variant="ghost"
                              className="h-7 px-2 text-[12px]"
                              onClick={() => toggleItemDetail(item.id)}
                            >
                              {isItemOpen ? (
                                <ChevronUp className="h-3.5 w-3.5" />
                              ) : (
                                <ChevronDown className="h-3.5 w-3.5" />
                              )}
                              {isItemOpen ? "收合" : "展開"}
                            </Button>
                          </div>
                        </div>

                        {isItemOpen && (
                          <>
                            <div className="mt-2 flex flex-wrap items-center gap-2">
                              {placementScan ? (
                                <FeatureGate feature="outreach">
                                  <Button
                                    size="sm"
                                    variant="outline"
                                    className="h-7 px-2 text-[12px]"
                                    disabled={generatingReplyId === item.id}
                                    onClick={() =>
                                      handleGenerateReply(item.id, scan.topic.productContext ?? "")
                                    }
                                  >
                                    {generatingReplyId === item.id ? (
                                      <Loader2 className="h-3 w-3 animate-spin" />
                                    ) : (
                                      <MessageSquarePlus className="h-3 w-3" />
                                    )}
                                    {hasDrafts ? "重新生成回覆" : "生成回覆"}
                                  </Button>
                                </FeatureGate>
                              ) : (
                                <FeatureGate feature="viralAnalysis">
                                  <Button
                                    size="sm"
                                    variant="ghost"
                                    className="h-7 px-2 text-[12px]"
                                    onClick={() => toggleViral(item.id)}
                                  >
                                    <Flame className="h-3 w-3" />
                                    {viralExpanded[item.id] ? "收合爆款分析" : "爆款分析"}
                                    {item.viralAnalysis && (
                                      <Badge variant="success" className="ml-1 text-[10px]">
                                        已分析
                                      </Badge>
                                    )}
                                  </Button>
                                </FeatureGate>
                              )}
                              {item.replies.length > 0 && (
                                <Button
                                  size="sm"
                                  variant="ghost"
                                  className="h-7 px-2 text-[12px]"
                                  onClick={() => toggleReplies(item.id)}
                                >
                                  {expanded[item.id] ? (
                                    <ChevronUp className="h-3.5 w-3.5" />
                                  ) : (
                                    <ChevronDown className="h-3.5 w-3.5" />
                                  )}
                                  {item.replies.length} 則留言
                                </Button>
                              )}
                            </div>
                            {placementScan && hasDrafts && outreachTarget && (
                              <div className="mt-3 space-y-2 border-t border-border pt-3">
                                {outreachTarget.drafts.map((draft) => (
                                  <div
                                    key={draft.id}
                                    className="rounded-lg bg-background px-3 py-2.5 ring-1 ring-border"
                                  >
                                    {draft.angle && (
                                      <p className="text-[10px] font-semibold text-muted-foreground">
                                        {draft.angle}
                                      </p>
                                    )}
                                    <p className="mt-1 text-sm leading-relaxed">{draft.text}</p>
                                    {draft.rationale && (
                                      <p className="mt-1 text-[11px] text-muted-foreground">
                                        {draft.rationale}
                                      </p>
                                    )}
                                  </div>
                                ))}
                                <Button size="sm" variant="link" className="h-7 px-0" asChild>
                                  <Link href="/outreach">到主動互動審核發布</Link>
                                </Button>
                              </div>
                            )}
                            {!placementScan && viralExpanded[item.id] && (
                              <ViralAnalysisPanel
                                scanItemId={item.id}
                                mediaUrls={parseMediaUrls(item.mediaUrls)}
                                viralAnalysis={parseViralAnalysis(item.viralAnalysis)}
                                onUpdate={onReload}
                              />
                            )}
                            {expanded[item.id] && item.replies.length > 0 && (
                              <div className="mt-3 space-y-2 border-t border-border pt-3">
                                {item.replies.map((reply) => (
                                  <div
                                    key={reply.id}
                                    className="rounded-lg bg-background px-3 py-2.5 ring-1 ring-border"
                                  >
                                    <p className="font-mono text-[10px] text-muted-foreground">
                                      @{reply.authorName ?? "匿名"} · {reply.likeCount ?? 0} 讚
                                    </p>
                                    <p className="mt-1 text-sm leading-relaxed">{reply.text}</p>
                                  </div>
                                ))}
                              </div>
                            )}
                          </>
                        )}
                      </div>
                    );
                  })}
                </CardContent>
              )}
            </Card>
          );
        })}
      </div>
    </div>
  );
}