"use client";

import { useEffect, useMemo, useState } from "react";
import { Button } from "@/components/ui/button";
import { useBacklinks } from "@/hooks/use-backlinks";
import type { BacklinkRecord } from "@/types/references";
import { cn } from "@/lib/utils";

interface PageBacklinksPanelProps {
  workspaceId: string;
  documentId: string;
  className?: string;
  defaultCollapsed?: boolean;
}

const formatRelative = (value: string) => {
  if (!value) return "";
  const date = new Date(value);
  return date.toLocaleString();
};

const EmptyState = () => (
  <div className="rounded-xl border border-dashed border-[#e2e8f0] bg-white/60 px-4 py-6 text-center text-sm text-gray-500">
    暂无反向引用。试试输入 <code className="rounded bg-gray-100 px-1">[[</code> 或 <code className="rounded bg-gray-100 px-1">#</code>{" "}
    来引用其他页面。
  </div>
);

const BacklinkItem = ({ record }: { record: BacklinkRecord }) => (
  <div className="rounded-xl border border-[#f1f5f9] bg-white p-4 shadow-sm">
    <div className="flex items-center justify-between text-sm font-medium text-gray-900">
      <span>{record.alias || record.sourceTitle || "无标题"}</span>
      <span className="text-xs text-gray-400">{record.displayMode === "embed" ? "嵌入块" : "行内引用"}</span>
    </div>
    <div className="mt-1 text-xs text-gray-500">
      来自页面：{record.sourceTitle || "无标题"} · 更新：{formatRelative(record.updatedAt)}
    </div>
  </div>
);

export function PageBacklinksPanel({ workspaceId, documentId, className, defaultCollapsed }: PageBacklinksPanelProps) {
  const { data, isLoading, error, refetch, isFetching } = useBacklinks({
    workspaceId,
    documentId,
  });

  const records = useMemo(() => data ?? [], [data]);
  // 说明：collapsed 需要可交互；这里用一个轻量的局部状态，但默认值来自 props（用于“自定义页面：折叠引用列表”）。
  const [isCollapsed, setIsCollapsed] = useState(Boolean(defaultCollapsed));
  useEffect(() => setIsCollapsed(Boolean(defaultCollapsed)), [defaultCollapsed]);
  // 避免页面切换时“先出现加载态、随后又消失”的闪烁：
  // 当尚未拿到任何记录且正在加载时，直接不渲染面板。
  if (!error && records.length === 0 && (isLoading || isFetching)) {
    return null;
  }

  if (!isLoading && !error && records.length === 0) {
    return null;
  }

  return (
    <section className={cn("rounded-2xl border border-[#eef2ff] bg-[#fdfdff] p-5 shadow-sm", className)}>
      <div className="mb-4 flex items-center justify-between">
        <div>
          <p className="text-base font-semibold text-[#1f2933]">反向引用</p>
          <p className="text-xs text-gray-500">展示指向当前页面的所有页面或块引用</p>
        </div>
        <Button size="sm" variant="ghost" onClick={() => refetch()} disabled={isFetching}>
          {isFetching ? "刷新中..." : "刷新"}
        </Button>
      </div>
      {records.length > 0 && (
        <div className="mb-4 flex items-center justify-between text-xs text-gray-500">
          <span>共 {records.length} 条</span>
          <Button
            size="sm"
            variant="ghost"
            onClick={() => setIsCollapsed((prev) => !prev)}
            className="h-7 px-2"
          >
            {isCollapsed ? "展开" : "折叠"}
          </Button>
        </div>
      )}
      {isLoading ? (
        <div className="py-6 text-center text-sm text-gray-500">加载引用中...</div>
      ) : error ? (
        <div className="py-6 text-center text-sm text-red-500">{(error as Error).message}</div>
      ) : records.length === 0 ? (
        <EmptyState />
      ) : isCollapsed ? (
        <div className="rounded-xl border border-dashed border-[#e2e8f0] bg-white/60 px-4 py-4 text-center text-xs text-gray-500">
          已折叠。点击“展开”查看。
        </div>
      ) : (
        <div className="space-y-3">
          {records.map((record) => (
            <BacklinkItem key={record.id} record={record} />
          ))}
        </div>
      )}
    </section>
  );
}