"use client";

import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import { ChevronLeft, ChevronRight, Copy, ExternalLink, Loader2, RefreshCw, Radar, ScanSearch, Send, Target, Trash2 } from "lucide-react";
import { ProductContextForm } from "@/components/product-context-form";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { EmptyState } from "@/components/layout/empty-state";
import { PageHeader } from "@/components/layout/page-header";
import { InlineAlert } from "@/components/ui/inline-alert";
import { Textarea } from "@/components/ui/textarea";
import { notify } from "@/lib/notifications/store";
import { useCapabilities } from "@/lib/capabilities/context";
import { useActionFeedback } from "@/lib/use-action-feedback";
import { hasProductContext, summarizeProductContext } from "@/lib/types/product-context";
import { isPlacementGoal } from "@/lib/types/topic-goal";
import { parseFetchJson, THREADS_MAX_CHARS } from "@/lib/utils";

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

interface OutreachTarget {
  id: string;
  status: string;
  relevance?: number | null;
  reason?: string | null;
  scanItem: {
    id: string;
    text: string;
    authorName?: string | null;
    permalink?: string | null;
    likeCount?: number | null;
    replyCount?: number | null;
    placementReason?: string | null;
    placementScore?: number | null;
    scan: {
      topic: {
        id: string;
        label: string;
        topicGoal?: string | null;
        productContext?: string | null;
        brief?: string | null;
      };
      scanGoal?: string | null;
    };
  };
  drafts: OutreachDraft[];
}

interface PlacementTopic {
  id: string;
  label: string;
  query: string;
  topicGoal: string;
  scanCount: number;
  latestScan: {
    id: string;
    createdAt: string;
    itemCount: number;
  } | null;
}

const PAGE_SIZE = 10;

export default function OutreachPage() {
  const [targets, setTargets] = useState<OutreachTarget[]>([]);
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0);
  const [totalPages, setTotalPages] = useState(1);
  const [selectMode, setSelectMode] = useState(false);
  const [selectedDraftIds, setSelectedDraftIds] = useState<Set<string>>(new Set());
  const [batchDeleting, setBatchDeleting] = useState(false);
  const [placementTopics, setPlacementTopics] = useState<PlacementTopic[]>([]);
  const [loading, setLoading] = useState(true);
  const [busy, setBusy] = useState<string | null>(null);
  const [draftText, setDraftText] = useState<Record<string, string>>({});
  const [productDrafts, setProductDrafts] = useState<Record<string, string>>({});
  const { feedback, clearFeedback, showError, showSuccess, showWarning } = useActionFeedback();
  const { isReady } = useCapabilities();
  const threadsApiReady = isReady("threadsApi");
  const load = useCallback(async (silent = false) => {
    if (!silent) setLoading(true);
    try {
      const [outreachRes, topicsRes] = await Promise.all([
        fetch(`/api/outreach?page=${page}&limit=${PAGE_SIZE}`),
        fetch("/api/topics"),
      ]);
      const [data, topicsData] = await Promise.all([
        parseFetchJson<{ targets?: OutreachTarget[]; total?: number; totalPages?: number; error?: string }>(outreachRes),
        parseFetchJson<{ topics?: PlacementTopic[]; error?: string }>(topicsRes),
      ]);
      if (!outreachRes.ok) {
        showError(data.error ?? "無法載入受眾名單", "載入失敗");
        setTargets([]);
        setTotal(0);
        setTotalPages(1);
        return;
      }
      const rows = data.targets ?? [];
      setTargets(rows);
      setTotal(data.total ?? rows.length);
      setTotalPages(data.totalPages ?? 1);
      if (page > (data.totalPages ?? 1)) setPage(Math.max(1, data.totalPages ?? 1));
      setPlacementTopics((topicsData.topics ?? []).filter((t) => isPlacementGoal(t.topicGoal)));
      setDraftText(
        Object.fromEntries(
          rows.flatMap((target: OutreachTarget) => target.drafts.map((draft) => [draft.id, draft.text]))
        )
      );
      setProductDrafts((prev) => {
        const next = { ...prev };
        for (const target of rows as OutreachTarget[]) {
          const topic = target.scanItem.scan.topic;
          if (next[topic.id] === undefined) {
            next[topic.id] = topic.productContext ?? "";
          }
        }
        return next;
      });
    } catch {
      showError("網路連線異常，請稍後再試", "載入失敗");
      setTargets([]);
      setTotal(0);
      setTotalPages(1);
    } finally {
      if (!silent) setLoading(false);
    }
  }, [page, showError]);

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

  useEffect(() => {
    setSelectedDraftIds(new Set());
  }, [page]);

  async function saveDraft(draftId: string) {
    setBusy(`save-${draftId}`);
    try {
      const res = await fetch(`/api/outreach/drafts/${draftId}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ text: draftText[draftId], status: "EDITED" }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        showError(data.error ?? "無法儲存草稿", "儲存失敗");
        return;
      }
      showSuccess("草稿已儲存");
      load(true);
    } catch {
      showError("網路連線異常，請稍後再試", "儲存失敗");
    } finally {
      setBusy(null);
    }
  }

  async function deleteDraft(draft: OutreachDraft) {
    if (!confirm("確定刪除這則留言草稿？刪除後無法復原。")) return;
    setBusy(`delete-${draft.id}`);
    try {
      const res = await fetch(`/api/outreach/drafts/${draft.id}`, { method: "DELETE" });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        showError(data.error ?? "無法刪除留言草稿", "刪除失敗");
        return;
      }
      setDraftText((prev) => {
        const next = { ...prev };
        delete next[draft.id];
        return next;
      });
      showSuccess("留言草稿已刪除");
      load(true);
    } catch {
      showError("網路連線異常，請稍後再試", "刪除失敗");
    } finally {
      setBusy(null);
    }
  }

  function toggleDraftSelection(id: string) {
    setSelectedDraftIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }

  function exitSelectMode() {
    setSelectMode(false);
    setSelectedDraftIds(new Set());
  }

  async function deleteSelectedDrafts() {
    const ids = [...selectedDraftIds];
    if (ids.length === 0) return;
    if (!confirm(`確定刪除選取的 ${ids.length} 則留言草稿？刪除後無法復原。`)) return;
    setBatchDeleting(true);
    try {
      const res = await fetch("/api/outreach/drafts", {
        method: "DELETE",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ids }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        showError(data.error ?? "無法批次刪除留言草稿", "批次刪除失敗");
        return;
      }
      showSuccess(`已刪除 ${data.deleted ?? ids.length} 則留言草稿`);
      exitSelectMode();
      await load(true);
    } catch {
      showError("網路連線異常，請稍後再試", "批次刪除失敗");
    } finally {
      setBatchDeleting(false);
    }
  }

  async function copyText(text: string) {
    await navigator.clipboard.writeText(text);
    showSuccess("已複製留言");
  }

  const placementTopicId = targets.find((t) =>
    isPlacementGoal(t.scanItem.scan.scanGoal ?? t.scanItem.scan.topic.topicGoal)
  )?.scanItem.scan.topic.id;

  async function saveProductContext(topicId: string) {
    setBusy(`product-${topicId}`);
    try {
      const res = await fetch("/api/topics", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id: topicId, productContext: productDrafts[topicId] ?? "" }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        showError(data.error ?? "無法儲存品牌與產品", "儲存失敗");
        return false;
      }
      showSuccess("品牌與產品已儲存");
      load(true);
      return true;
    } catch {
      showError("網路連線異常，請稍後再試", "儲存失敗");
      return false;
    } finally {
      setBusy(null);
    }
  }

  async function regenerateTarget(target: OutreachTarget) {
    const topicId = target.scanItem.scan.topic.id;
    const productContext = productDrafts[topicId] ?? "";
    if (!hasProductContext(productContext)) {
      showWarning("在上方區塊填寫品牌與產品後，再重新生成。", "請先填寫品牌與產品");
      return;
    }

    setBusy(`regen-${target.id}`);
    try {
      const res = await fetch("/api/outreach/generate", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          scanItemId: target.scanItem.id,
          productContext,
        }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        notify({ type: "error", title: "重新生成失敗", message: data.error });
        return;
      }
      notify({ type: "success", title: "已重新生成回覆草稿" });
      load(true);
    } catch {
      notify({ type: "error", title: "重新生成失敗", message: "網路連線異常，請稍後再試" });
    } finally {
      setBusy(null);
    }
  }

  async function publishDraft(draft: OutreachDraft) {
    setBusy(`publish-${draft.id}`);
    try {
      const res = await fetch(`/api/outreach/drafts/${draft.id}/publish`, { method: "POST" });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        notify({ type: "error", title: "發布留言失敗", message: data.error });
        return;
      }
      notify({ type: "success", title: "留言已發布到 Threads" });
      load(true);
    } catch {
      notify({ type: "error", title: "發布留言失敗", message: "網路連線異常，請稍後再試" });
    } finally {
      setBusy(null);
    }
  }

  const hasPlacementTargets = targets.some((t) =>
    isPlacementGoal(t.scanItem.scan.scanGoal ?? t.scanItem.scan.topic.topicGoal)
  );
  const deletableDraftIds = targets.flatMap((target) =>
    target.drafts.filter((draft) => draft.status !== "PUBLISHED").map((draft) => draft.id)
  );
  const allPageDraftsSelected =
    deletableDraftIds.length > 0 && deletableDraftIds.every((id) => selectedDraftIds.has(id));

  function toggleAllPageDrafts() {
    setSelectedDraftIds((prev) => {
      const next = new Set(prev);
      if (allPageDraftsSelected) deletableDraftIds.forEach((id) => next.delete(id));
      else deletableDraftIds.forEach((id) => next.add(id));
      return next;
    });
  }

  return (
    <div>
      <PageHeader
        eyebrow="02 / FIND YOUR TA"
        title="找出正在需要你的人"
        description="從 Threads 訊號辨識高意向受眾，再套入你的人設與產品脈絡，產出自然、不硬銷的開場話術。"
        action={<Button asChild size="lg"><Link href="/scans?mode=placement"><Radar className="h-4 w-4" />挖掘新受眾</Link></Button>}
      />

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

      {!loading && targets.length > 0 && (
        <div className="mb-4 flex flex-wrap items-center justify-between gap-2 rounded-lg border border-border bg-muted/40 px-3 py-2">
          <p className="text-xs text-muted-foreground">共 {total} 個目標 · 第 {page}/{totalPages} 頁</p>
          <div className="flex flex-wrap gap-2">
            {selectMode ? (
              <>
                <Button size="sm" variant="outline" onClick={toggleAllPageDrafts} disabled={deletableDraftIds.length === 0}>
                  {allPageDraftsSelected ? "取消全選" : "全選本頁"}
                </Button>
                <Button size="sm" variant="outline" onClick={deleteSelectedDrafts} disabled={selectedDraftIds.size === 0 || batchDeleting}>
                  {batchDeleting ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Trash2 className="h-3.5 w-3.5" />}
                  刪除選取（{selectedDraftIds.size}）
                </Button>
                <Button size="sm" variant="ghost" onClick={exitSelectMode}>完成</Button>
              </>
            ) : (
              <Button size="sm" variant="outline" onClick={() => setSelectMode(true)}>
                批次管理
              </Button>
            )}
          </div>
        </div>
      )}

      {loading ? (
        <div className="space-y-4">
          {[0, 1, 2].map((i) => <div key={i} className="skeleton h-56 animate-pulse" />)}
        </div>
      ) : targets.length === 0 ? (
        placementTopics.length > 0 ? (
          <div className="space-y-4">
            <div className="rounded-lg border border-border bg-muted/40 px-4 py-3 text-sm text-muted-foreground">
              你已有 {placementTopics.length} 個找 TA 主題。到海巡成果頁點「獲客留言」，生成的對象會出現在這裡。
            </div>
            <div className="grid gap-4 sm:grid-cols-2">
              {placementTopics.map((topic) => (
                <Card key={topic.id}>
                  <CardHeader className="pb-3">
                    <CardTitle className="truncate">{topic.label}</CardTitle>
                    <CardDescription className="truncate">{topic.query}</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    {topic.latestScan ? (
                      <p className="text-[13px] text-muted-foreground">
                        最近海巡 {new Date(topic.latestScan.createdAt).toLocaleDateString("zh-TW", { month: "short", day: "numeric" })}
                        {" · "}
                        {topic.latestScan.itemCount} 篇
                      </p>
                    ) : (
                      <p className="text-[13px] text-muted-foreground">尚未海巡</p>
                    )}
                    <div className="flex flex-wrap gap-2">
                      {topic.latestScan ? (
                        <Button size="sm" asChild>
                          <Link href={`/scans/${topic.id}/results`}>
                            <ScanSearch className="h-3.5 w-3.5" />
                            前往生成留言
                          </Link>
                        </Button>
                      ) : (
                        <Button size="sm" variant="outline" asChild>
                          <Link href={`/scans/${topic.id}`}>
                            <ScanSearch className="h-3.5 w-3.5" />
                            先完成海巡
                          </Link>
                        </Button>
                      )}
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
            <div className="flex justify-center pt-2">
              <Button asChild variant="outline" size="sm">
                <Link href="/scans?mode=placement"><Radar className="h-4 w-4" />新增更多主題</Link>
              </Button>
            </div>
          </div>
        ) : (
          <EmptyState
            icon={Target}
            title="還沒有高意向受眾"
            description="建立找 TA 主題並海巡後，AI 會從中辨識高意向受眾並生成開場話術。"
            action={<Button asChild><Link href="/scans?mode=placement"><Radar className="h-4 w-4" />開始挖掘</Link></Button>}
          />
        )
      ) : (
        <div className="space-y-4">
          {hasPlacementTargets && placementTopicId && (
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-base">品牌與產品</CardTitle>
                <CardDescription>
                  調整後可重新生成，讓留言更自然帶到你的品牌（不會硬銷）。
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-3">
                <ProductContextForm
                  compact
                  value={productDrafts[placementTopicId] ?? ""}
                  onChange={(value) =>
                    setProductDrafts((prev) => ({ ...prev, [placementTopicId]: value }))
                  }
                />
                <Button
                  size="sm"
                  variant="outline"
                  disabled={busy === `product-${placementTopicId}`}
                  onClick={() => saveProductContext(placementTopicId)}
                >
                  {busy === `product-${placementTopicId}` ? "儲存中…" : "儲存品牌與產品"}
                </Button>
              </CardContent>
            </Card>
          )}

          {targets.map((target) => {
            const isPlacement = isPlacementGoal(
              target.scanItem.scan.scanGoal ?? target.scanItem.scan.topic.topicGoal
            );
            const productSummary = summarizeProductContext(
              productDrafts[target.scanItem.scan.topic.id] ?? target.scanItem.scan.topic.productContext
            );

            return (
            <Card key={target.id}>
              <CardHeader>
                <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                  <div>
                    <CardTitle>
                      @{target.scanItem.authorName ?? "匿名"} · {target.scanItem.scan.topic.label}
                    </CardTitle>
                    <CardDescription>
                      {target.scanItem.likeCount ?? 0} 讚 / {target.scanItem.replyCount ?? 0} 留言
                    </CardDescription>
                    <div className="mt-2 flex flex-wrap gap-1.5">
                      <Badge variant={target.status === "LOW_RELEVANCE" ? "warning" : "success"}>
                        相關度 {Math.round((target.relevance ?? 0) * 100)}%
                      </Badge>
                      <Badge variant="outline">{target.status}</Badge>
                    </div>
                  </div>
                  <div className="flex flex-wrap gap-2">
                    {isPlacement && (
                      <Button
                        size="sm"
                        variant="outline"
                        disabled={busy === `regen-${target.id}`}
                        onClick={() => regenerateTarget(target)}
                      >
                        {busy === `regen-${target.id}` ? (
                          <Loader2 className="h-3.5 w-3.5 animate-spin" />
                        ) : (
                          <RefreshCw className="h-3.5 w-3.5" />
                        )}
                        重新生成
                      </Button>
                    )}
                    {target.scanItem.permalink && (
                      <Button size="sm" variant="outline" asChild>
                        <a href={target.scanItem.permalink} target="_blank" rel="noreferrer">
                          <ExternalLink className="h-3.5 w-3.5" />
                          原貼文
                        </a>
                      </Button>
                    )}
                  </div>
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="rounded-lg border border-border bg-muted/50 p-3">
                  <p className="text-[13px] leading-relaxed">{target.scanItem.text}</p>
                  {productSummary && (
                    <p className="mt-2 text-xs text-muted-foreground">置入參考：{productSummary}</p>
                  )}
                  {(target.scanItem.placementReason || target.reason) && (
                    <p className="mt-2 text-xs text-muted-foreground">
                      {target.scanItem.placementReason ?? target.reason}
                    </p>
                  )}
                </div>

                {target.drafts.map((draft) => {
                  const value = draftText[draft.id] ?? draft.text;
                  return (
                    <div key={draft.id} className="relative space-y-2 rounded-lg border border-border p-3">
                      {selectMode && draft.status !== "PUBLISHED" && (
                        <button
                          type="button"
                          aria-label="選取留言草稿"
                          onClick={() => toggleDraftSelection(draft.id)}
                          className={`absolute right-3 top-3 flex h-5 w-5 items-center justify-center rounded border text-xs ${
                            selectedDraftIds.has(draft.id)
                              ? "border-primary bg-primary text-primary-foreground"
                              : "border-border bg-background"
                          }`}
                        >
                          {selectedDraftIds.has(draft.id) ? "✓" : ""}
                        </button>
                      )}
                      <div className="flex items-center justify-between gap-2">
                        <div className={`flex flex-wrap gap-1.5 ${selectMode ? "pr-8" : ""}`}>
                          <Badge variant={draft.status === "PUBLISHED" ? "success" : "warning"}>{draft.status}</Badge>
                          {draft.angle && <Badge variant="outline">{draft.angle}</Badge>}
                        </div>
                        <span className="text-xs text-muted-foreground">{value.length}/{THREADS_MAX_CHARS}</span>
                      </div>
                      <Textarea
                        value={value}
                        rows={3}
                        onChange={(e) => setDraftText((prev) => ({ ...prev, [draft.id]: e.target.value }))}
                      />
                      {draft.rationale && <p className="text-xs text-muted-foreground">{draft.rationale}</p>}
                      <div className="flex flex-wrap gap-2">
                        <Button size="sm" variant="outline" onClick={() => saveDraft(draft.id)} disabled={busy === `save-${draft.id}`}>
                          儲存
                        </Button>
                        <Button size="sm" variant="outline" onClick={() => copyText(value)}>
                          <Copy className="h-3.5 w-3.5" />
                          複製
                        </Button>
                        {draft.status !== "PUBLISHED" && (
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => deleteDraft(draft)}
                            disabled={busy === `delete-${draft.id}`}
                          >
                            {busy === `delete-${draft.id}` ? (
                              <Loader2 className="h-3.5 w-3.5 animate-spin" />
                            ) : (
                              <Trash2 className="h-3.5 w-3.5" />
                            )}
                            刪除
                          </Button>
                        )}
                        {draft.status !== "PUBLISHED" && (
                          <Button
                            size="sm"
                            onClick={() => publishDraft(draft)}
                            disabled={busy === `publish-${draft.id}` || !threadsApiReady}
                            title={!threadsApiReady ? "需先在連線設定綁定 Threads API" : undefined}
                          >
                            {busy === `publish-${draft.id}` ? (
                              <Loader2 className="h-3.5 w-3.5 animate-spin" />
                            ) : (
                              <Send className="h-3.5 w-3.5" />
                            )}
                            發布留言
                          </Button>
                        )}
                      </div>
                    </div>
                  );
                })}
              </CardContent>
            </Card>
            );
          })}
          {totalPages > 1 && (
            <div className="flex items-center justify-center gap-3 pt-2">
              <Button size="sm" variant="outline" disabled={page <= 1} onClick={() => setPage((value) => Math.max(1, value - 1))}>
                <ChevronLeft className="h-4 w-4" />上一頁
              </Button>
              <span className="text-xs text-muted-foreground">第 {page} / {totalPages} 頁</span>
              <Button size="sm" variant="outline" disabled={page >= totalPages} onClick={() => setPage((value) => Math.min(totalPages, value + 1))}>
                下一頁<ChevronRight className="h-4 w-4" />
              </Button>
            </div>
          )}
        </div>
      )}
    </div>
  );
}