"use client";

import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import { ChevronLeft, ChevronRight, Download, Puzzle, Radar, Sparkles, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { ConfirmDialog } from "@/components/ui/confirm-dialog";
import { PageHeader } from "@/components/layout/page-header";
import { DraftCard } from "@/components/draft-card";
import { notify } from "@/lib/notifications/store";

interface MatrixRow {
  id: string;
  sortOrder: number | null;
  searchTag: string | null;
  angle: string | null;
  hook: string | null;
  text: string;
  referenceNotes: string | null;
  sources: string | null;
  imageBrief?: string | null;
  imagePath?: string | null;
  imagePaths?: string | null;
  draftType?: string | null;
  rationale?: string | null;
  status: string;
  createdAt: string;
}

interface AccountStatus {
  id: string;
  sessionSynced?: boolean;
  browserConnected?: boolean;
}

const PAGE_SIZE = 10;

export default function MatrixPage() {
  const [rows, setRows] = useState<MatrixRow[]>([]);
  const [total, setTotal] = useState(0);
  const [totalPages, setTotalPages] = useState(1);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(true);
  const [sessionSynced, setSessionSynced] = useState(false);
  const [hasAccount, setHasAccount] = useState(false);
  const [selectMode, setSelectMode] = useState(false);
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
  const [bulkDeleting, setBulkDeleting] = useState(false);
  const [confirmBulkDelete, setConfirmBulkDelete] = useState(false);

  const load = useCallback(async (targetPage = page) => {
    setLoading(true);
    try {
      const [matrixRes, accountsRes] = await Promise.all([
        fetch(`/api/matrix?page=${targetPage}&limit=${PAGE_SIZE}`),
        fetch("/api/accounts"),
      ]);
      const [data, accountData] = await Promise.all([
        matrixRes.json().catch(() => ({})),
        accountsRes.json().catch(() => ({})),
      ]);
      if (!matrixRes.ok) {
        notify({
          type: "error",
          title: "載入草稿失敗",
          message: data.error ?? "請稍後再試",
        });
        setRows([]);
        setTotal(0);
        setTotalPages(1);
        return;
      }
      const accounts = (accountData.accounts ?? []) as AccountStatus[];
      const active = accounts.find((account) => account.id === accountData.activeAccountId) ?? accounts[0];
      const fetchedRows = data.rows ?? [];
      const fetchedTotal = data.total ?? 0;
      const fetchedTotalPages = data.totalPages ?? 1;
      setRows(fetchedRows);
      setTotal(fetchedTotal);
      setTotalPages(fetchedTotalPages);
      setHasAccount(Boolean(active));
      setSessionSynced(Boolean(active?.sessionSynced || active?.browserConnected));
      if (fetchedRows.length === 0 && targetPage > 1) {
        setPage(1);
      } else if (targetPage > fetchedTotalPages) {
        setPage(fetchedTotalPages);
      }
    } catch {
      notify({
        type: "error",
        title: "載入草稿失敗",
        message: "網路連線異常，請稍後再試",
      });
      setRows([]);
      setTotal(0);
      setTotalPages(1);
    } finally {
      setLoading(false);
    }
  }, [page]);

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

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

  function goToPage(p: number) {
    if (p < 1 || p > totalPages || p === page) return;
    setPage(p);
  }

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

  function toggleDraftSelection(id: string, selected: boolean) {
    setSelectedIds((prev) => {
      const next = new Set(prev);
      if (selected) next.add(id);
      else next.delete(id);
      return next;
    });
  }

  function toggleSelectAllOnPage() {
    const pageIds = rows.map((row) => row.id);
    const allSelected = pageIds.length > 0 && pageIds.every((id) => selectedIds.has(id));
    setSelectedIds((prev) => {
      const next = new Set(prev);
      if (allSelected) {
        for (const id of pageIds) next.delete(id);
      } else {
        for (const id of pageIds) next.add(id);
      }
      return next;
    });
  }

  async function handleBulkDelete() {
    const ids = Array.from(selectedIds);
    if (ids.length === 0) return;

    setBulkDeleting(true);
    try {
      const res = await fetch("/api/drafts", {
        method: "DELETE",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ids }),
      });
      const data = await res.json();
      if (!res.ok) {
        notify({
          type: "error",
          title: "批量刪除失敗",
          message: data.error ?? "請稍後再試",
        });
        return;
      }

      notify({
        type: "success",
        title: "已刪除選取的草稿",
        message: `共刪除 ${data.deleted ?? ids.length} 篇`,
      });
      exitSelectMode();
      await load(page);
    } finally {
      setBulkDeleting(false);
    }
  }

  const pageIds = rows.map((row) => row.id);
  const allOnPageSelected = pageIds.length > 0 && pageIds.every((id) => selectedIds.has(id));
  const selectedCount = selectedIds.size;

  return (
    <div>
      <PageHeader
        eyebrow="01 / COPY NINJA"
        title="拷貝忍者"
        description="海巡 Threads 熱門素材，依你的風格產出可直接發布的貼文草稿。"
        action={
          <Button asChild size="lg">
            <Link href="/scans?mode=viral"><Sparkles className="h-4 w-4" />開始海巡</Link>
          </Button>
        }
      />

      <div className="mb-6 flex items-center justify-between gap-3">
        <div>
          <h2 className="text-lg font-semibold">已生成內容</h2>
          <p className="mt-1 text-sm text-muted-foreground">
            {total > 0 ? `共 ${total} 篇 · 第 ${page}/${totalPages} 頁` : "完成第一個風格任務後會出現在這裡"}
          </p>
        </div>
        {total > 0 && (
          <div className="flex flex-wrap items-center gap-2">
            {selectMode ? (
              <>
                <Button variant="outline" size="sm" onClick={toggleSelectAllOnPage}>
                  {allOnPageSelected ? "取消全選" : "全選本頁"}
                </Button>
                <Button
                  variant="destructive"
                  size="sm"
                  onClick={() => setConfirmBulkDelete(true)}
                  disabled={selectedCount === 0 || bulkDeleting}
                >
                  <Trash2 className="h-4 w-4" />
                  {bulkDeleting ? "刪除中…" : `刪除${selectedCount > 0 ? ` (${selectedCount})` : ""}`}
                </Button>
                <Button variant="ghost" size="sm" onClick={exitSelectMode} disabled={bulkDeleting}>
                  取消
                </Button>
              </>
            ) : (
              <>
                <Button variant="outline" size="sm" onClick={() => setSelectMode(true)}>
                  <Trash2 className="h-4 w-4" />
                  批量刪除
                </Button>
                <Button variant="outline" size="sm" asChild>
                  <a href="/api/matrix/export" download><Download className="h-4 w-4" />匯出</a>
                </Button>
              </>
            )}
          </div>
        )}
      </div>

      {loading ? (
        <div className="space-y-6">
          {[0, 1, 2].map((i) => (
            <div key={i} className="skeleton h-48 animate-pulse" />
          ))}
        </div>
      ) : rows.length === 0 ? (
        <Card className="overflow-hidden border-dashed">
          <CardContent className="flex min-h-64 flex-col items-center justify-center p-8 text-center">
            <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary">
              {sessionSynced ? <Radar className="h-6 w-6" /> : <Puzzle className="h-6 w-6" />}
            </div>
            <h3 className="text-lg font-semibold">
              {sessionSynced ? "Extension 已同步，可以開始海巡" : hasAccount ? "先同步你的 Threads Extension" : "先建立經營帳號"}
            </h3>
            <p className="mt-2 max-w-md text-sm leading-6 text-muted-foreground">
              {sessionSynced
                ? "目前帳號的 Threads Session 已就緒。新增海巡任務，設定主題後開始分析與抓取。"
                : hasAccount
                  ? "登入 Threads 後按 Extension 同步；完成後這裡會自動辨識帳號狀態。"
                  : "建立帳號並填好人設，再透過 Extension 同步 Threads Session。"}
            </p>
            <div className="mt-5 flex flex-wrap justify-center gap-2">
              {sessionSynced ? (
                <Button asChild><Link href="/scans?mode=viral">開始海巡</Link></Button>
              ) : hasAccount ? (
                <Button asChild><Link href="/connections">同步 Extension</Link></Button>
              ) : (
                <Button asChild><Link href="/connections">建立帳號</Link></Button>
              )}
            </div>
          </CardContent>
        </Card>
      ) : (
        <>
          <div className="divide-y divide-border">
            {rows.map((row, index) => (
              <DraftCard
                key={row.id}
                draft={row}
                onUpdate={() => load(page)}
                index={index}
                selectable={selectMode}
                selected={selectedIds.has(row.id)}
                onSelectedChange={(selected) => toggleDraftSelection(row.id, selected)}
              />
            ))}
          </div>

          {totalPages > 1 && (
            <div className="mt-8 flex items-center justify-center gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={() => goToPage(page - 1)}
                disabled={page <= 1}
              >
                <ChevronLeft className="h-4 w-4" />
                上一頁
              </Button>
              <span className="px-3 text-sm text-muted-foreground">
                {page} / {totalPages}
              </span>
              <Button
                variant="outline"
                size="sm"
                onClick={() => goToPage(page + 1)}
                disabled={page >= totalPages}
              >
                下一頁
                <ChevronRight className="h-4 w-4" />
              </Button>
            </div>
          )}
        </>
      )}

      <ConfirmDialog
        open={confirmBulkDelete}
        onOpenChange={setConfirmBulkDelete}
        title="批量刪除草稿"
        description={`確定要刪除選取的 ${selectedCount} 篇草稿？此操作無法復原。`}
        confirmText="刪除"
        danger
        onConfirm={handleBulkDelete}
      />
    </div>
  );
}