import Link from "next/link";
import { useRouter } from "next/router";
import {
  useCallback,
  useEffect,
  useRef,
  useState,
  type FormEvent,
} from "react";
import {
  ArrowRight,
  ArrowUpRight,
  Bot,
  ChevronRight,
  FileText,
  Plus,
  Search,
  X,
} from "lucide-react";
import GuidanceShell, { useGuidanceAccount } from "@/components/GuidanceShell";
import {
  EmptyState,
  KindBadge,
  KindIcon,
  Notice,
  PageHeading,
  kindNames,
  Tabs,
} from "@/components/GuidanceUI";
import { guides, type Guidance } from "@/content/guides/catalog";
import s from "@/styles/guidance.module.css";

type Summary = {
  id: string;
  revision: number;
  title: string;
  summary: string;
  kind: Guidance["kind"];
  author?: string;
  tags?: string[];
  source: "community" | "example";
};
type Source = "all" | "published" | "examples";
const kinds = ["all", "guide", "context", "evidence"] as const;
const examples: Summary[] = guides.map((g) => ({ ...g, source: "example" }));
export default function DocumentDirectory({
  communityOnly = false,
}: {
  communityOnly?: boolean;
}) {
  const router = useRouter();
  const mine = communityOnly && router.query.scope === "mine";
  return (
    <GuidanceShell
      title={mine ? "我的文档" : communityOnly ? "社区文档" : "探索文档"}
    >
      <DirectoryContent communityOnly={communityOnly} mine={mine} />
    </GuidanceShell>
  );
}
function DirectoryContent({
  communityOnly,
  mine,
}: {
  communityOnly: boolean;
  mine: boolean;
}) {
  const router = useRouter(),
    account = useGuidanceAccount();
  const [published, setPublished] = useState<Summary[]>([]),
    [loading, setLoading] = useState(true),
    [error, setError] = useState("");
  const [q, setQ] = useState(""),
    [kind, setKind] = useState("all"),
    [source, setSource] = useState<Source>(communityOnly ? "published" : "all"),
    [sort, setSort] = useState("default");
  const controller = useRef<AbortController | null>(null);
  const refresh = useCallback(async () => {
    controller.current?.abort();
    const abort = new AbortController();
    controller.current = abort;
    setLoading(true);
    setError("");
    try {
      const r = await fetch(
        "/api/documents" +
          (mine && account.user ? "?author=" + account.user.id : ""),
        { signal: abort.signal },
      );
      const b = await r.json();
      if (!r.ok) throw Error(b.error || "目录暂时不可用");
      if (!Array.isArray(b.documents)) throw Error("目录返回异常，请稍后重试");
      setPublished(
        b.documents.map((d: Omit<Summary, "source">) => ({
          ...d,
          source: "community",
        })),
      );
    } catch (e) {
      if (!abort.signal.aborted)
        setError(e instanceof Error ? e.message : "目录暂时不可用");
    } finally {
      if (!abort.signal.aborted) setLoading(false);
    }
  }, [mine, account.user?.id]);
  useEffect(() => {
    void refresh();
    return () => controller.current?.abort();
  }, [refresh]);
  useEffect(() => {
    if (!router.isReady) return;
    setQ(typeof router.query.q === "string" ? router.query.q : "");
    setKind(
      typeof router.query.kind === "string" &&
        kinds.some((k) => k === router.query.kind)
        ? router.query.kind
        : "all",
    );
    setSource(
      communityOnly
        ? "published"
        : router.query.source === "published" ||
            router.query.source === "examples"
          ? router.query.source
          : "all",
    );
    setSort(router.query.sort === "title" ? "title" : "default");
  }, [
    router.isReady,
    router.query.q,
    router.query.kind,
    router.query.source,
    router.query.sort,
    communityOnly,
  ]);
  function remember(
    next: { q?: string; kind?: string; source?: Source; sort?: string } = {},
  ) {
    const values = { q, kind, source, sort, ...next },
      query: Record<string, string> = {};
    if (values.q) query.q = values.q;
    if (values.kind !== "all") query.kind = values.kind;
    if (!communityOnly && values.source !== "all") query.source = values.source;
    if (values.sort !== "default") query.sort = values.sort;
    if (mine) query.scope = "mine";
    void router.push(
      { pathname: communityOnly ? "/documents" : "/", query },
      undefined,
      { shallow: true, scroll: false },
    );
  }
  function search(e: FormEvent) {
    e.preventDefault();
    remember();
  }
  function clear() {
    setQ("");
    setKind("all");
    setSource(communityOnly ? "published" : "all");
    setSort("default");
    remember({
      q: "",
      kind: "all",
      source: communityOnly ? "published" : "all",
      sort: "default",
    });
  }
  const all: Summary[] = communityOnly
    ? published
    : [...published, ...examples];
  const term = q.trim().toLocaleLowerCase();
  const found = all.filter(
    (d) =>
      (!mine || d.author === account.user?.id) &&
      (source === "all" ||
        (source === "published" && d.source === "community") ||
        (source === "examples" && d.source === "example")) &&
      `${d.title} ${d.summary} ${d.id} ${d.tags?.join(" ") || ""}`
        .toLocaleLowerCase()
        .includes(term),
  );
  const documents = found.filter((d) => kind === "all" || d.kind === kind);
  if (sort === "title")
    documents.sort((a, b) => a.title.localeCompare(b.title, "zh-CN"));
  const waiting = loading || (mine && account.loading),
    filtered =
      !!q ||
      kind !== "all" ||
      (!communityOnly && source !== "all") ||
      sort !== "default";
  const heading = mine ? "我的文档" : communityOnly ? "社区文档" : "探索文档";
  return (
    <>
      <PageHeading
        title={heading}
        description={
          mine
            ? "在这里管理你发布的文档，修改会创建新的固定版本。"
            : communityOnly
              ? "来自真实作者的独立文档。找到有用的知识，从一篇开始阅读。"
              : "为当前任务找到有用的指导，按需连接下一篇知识。"
        }
        eyebrow={
          mine
            ? "YOUR KNOWLEDGE"
            : communityOnly
              ? "COMMUNITY LIBRARY"
              : "DISCOVER KNOWLEDGE"
        }
      >
        <Link
          className={s.secondaryButton}
          href="/agent/index.md"
          target="_blank"
        >
          <Bot size={15} />
          Agent 入口
          <ArrowUpRight size={13} />
        </Link>
      </PageHeading>
      {!communityOnly && (
        <>
          <section className={s.introCard}>
            <span className={s.introIcon}>
              <Bot size={23} />
            </span>
            <div>
              <h2>好用的知识，从不必整套加载。</h2>
              <p>
                每篇文档都有适用条件和固定版本。需要更多时，再沿着有用的链接继续阅读。
              </p>
            </div>
            <div className={s.introDiagram} aria-hidden="true">
              <span>
                <FileText size={13} />
                一篇文档
              </span>
              <ArrowRight size={15} />
              <span>
                <FileText size={13} />
                下一页
              </span>
            </div>
            <Link className={s.textLink} href="/protocol">
              了解工作原理
              <ArrowUpRight size={13} />
            </Link>
          </section>
          <div className={s.topics}>
            <span>试试这些任务</span>
            {["代码审查", "规划", "验证"].map((t) => (
              <button
                type="button"
                key={t}
                onClick={() => {
                  setQ(t);
                  remember({ q: t });
                }}
              >
                {t}
              </button>
            ))}
          </div>
        </>
      )}
      {mine && !account.loading && !account.user ? (
        <section className={s.panel}>
          {account.error && (
            <div className={s.panelBody}>
              <Notice tone="error">
                {account.error}{" "}
                <button type="button" onClick={() => void account.refresh()}>
                  重新检查
                </button>
              </Notice>
            </div>
          )}
          <EmptyState
            title="登录后，管理你的知识"
            description="使用已验证的邮箱账户发布文档、更新版本，并随时回到这里继续编辑。"
          >
            <Link
              className={s.primaryButton}
              href="/account?next=%2Fdocuments%3Fscope%3Dmine"
            >
              登录 / 创建账户
              <ArrowRight size={15} />
            </Link>
          </EmptyState>
        </section>
      ) : (
        <>
          <section className={s.panel} aria-label="文档目录">
            <Tabs
              tabs={kinds.map((k) => ({
                id: k,
                label: k === "all" ? "全部文档" : kindNames[k],
                count: found.filter((d) => k === "all" || d.kind === k).length,
              }))}
              value={kind}
              onChange={(value) => {
                setKind(value);
                remember({ kind: value });
              }}
            />
            <div className={s.catalogToolbar}>
              <form className={s.catalogSearch} role="search" onSubmit={search}>
                <Search size={16} />
                <input
                  aria-label="搜索文档"
                  placeholder="搜索标题、摘要或文档 ID…"
                  value={q}
                  onChange={(e) => setQ(e.target.value)}
                />
                {q && (
                  <button
                    type="button"
                    aria-label="清空关键词"
                    onClick={() => {
                      setQ("");
                      remember({ q: "" });
                    }}
                  >
                    <X size={14} />
                  </button>
                )}
                <button type="submit" aria-label="提交搜索">
                  <ArrowRight size={15} />
                </button>
              </form>
              <div className={s.catalogTools}>
                {!communityOnly && (
                  <select
                    aria-label="文档来源"
                    value={source}
                    onChange={(e) => {
                      const value = e.target.value as Source;
                      setSource(value);
                      remember({ source: value });
                    }}
                  >
                    <option value="all">全部来源</option>
                    <option value="published">社区发布</option>
                    <option value="examples">协议样例</option>
                  </select>
                )}
                <select
                  aria-label="文档排序"
                  value={sort}
                  onChange={(e) => {
                    setSort(e.target.value);
                    remember({ sort: e.target.value });
                  }}
                >
                  <option value="default">默认顺序</option>
                  <option value="title">按标题排序</option>
                </select>
              </div>
            </div>
            <div className={s.catalogStatus}>
              <p role="status">
                {waiting
                  ? "正在加载文档…"
                  : error
                    ? `当前显示 ${documents.length} 篇，社区目录加载失败`
                    : `找到 ${documents.length} 篇文档`}
              </p>
              {filtered ? (
                <button type="button" aria-label="清除所有筛选" onClick={clear}>
                  清除所有筛选
                </button>
              ) : (
                <span>最多展示最近 100 篇社区文档</span>
              )}
            </div>
            {error && (
              <div className={s.panelBody}>
                <Notice tone="error">
                  {error}{" "}
                  <button
                    type="button"
                    className={s.textLink}
                    onClick={() => void refresh()}
                  >
                    重新加载
                  </button>
                </Notice>
              </div>
            )}
            <div className={s.tableHeader} aria-hidden="true">
              <span>文档</span>
              <span>类型</span>
              <span>版本</span>
              <span className={s.tableSource}>来源</span>
              <span />
            </div>
            {waiting && (!documents.length || communityOnly) ? (
              <div aria-label="正在加载文档" aria-busy="true">
                {[0, 1, 2].map((i) => (
                  <div className={s.skeletonRow} key={i}>
                    <div className={s.skeletonBox} />
                    <div className={s.skeletonLines}>
                      <div className={s.skeletonLine} />
                      <div className={s.skeletonLine} />
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              documents.map((d) => (
                <Link
                  href={`${d.source === "example" ? "/guide/" : "/documents/"}${d.id}?revision=${d.revision}`}
                  key={d.id}
                  className={s.documentRow}
                >
                  <div className={s.documentPrimary}>
                    <span className={s.documentIcon}>
                      <KindIcon kind={d.kind} />
                    </span>
                    <div className={s.documentDetails}>
                      <h2 className={s.documentTitle}>{d.title}</h2>
                      <p className={s.documentSummary}>{d.summary}</p>
                      <p className={s.documentId} title={d.id}>
                        {d.id}
                      </p>
                      <div className={s.documentMobileMeta}>
                        <KindBadge kind={d.kind} />
                        <span>v{d.revision}</span>
                        <span>
                          {d.source === "example" ? "协议样例" : "社区发布"}
                        </span>
                      </div>
                    </div>
                  </div>
                  <span className={s.documentKind}>
                    <KindBadge kind={d.kind} />
                  </span>
                  <span className={s.documentVersion}>v{d.revision}</span>
                  <span className={s.documentSource}>
                    {d.source === "example" ? "协议样例" : "社区发布"}
                  </span>
                  <ChevronRight size={16} className={s.documentArrow} />
                </Link>
              ))
            )}
            {!waiting && !documents.length && !error && (
              <EmptyState
                title={
                  filtered
                    ? "没有匹配文档"
                    : mine
                      ? "你的第一篇文档，从这里开始"
                      : "这里还没有社区文档"
                }
                description={
                  filtered
                    ? "试试其他关键词或清除筛选，发现更多适合当前任务的知识。"
                    : mine
                      ? "把你反复使用的方法写下来，让 Agent 在需要时找到它。"
                      : "你可以先阅读协议样例，也可以发布第一篇独立文档。"
                }
              >
                {filtered ? (
                  <button
                    type="button"
                    className={s.secondaryButton}
                    onClick={clear}
                  >
                    重置筛选
                  </button>
                ) : (
                  <Link className={s.primaryButton} href="/write">
                    <Plus size={15} />
                    发布一篇文档
                  </Link>
                )}
              </EmptyState>
            )}
          </section>
          <div className={s.catalogFootnote}>
            <span>
              {mine
                ? "只有你可以更新自己的文档，已发布的历史版本保持不变。"
                : "社区文档与协议样例分别标识，采用前请确认适用条件与版本。"}
            </span>
            <Link href="/protocol">
              了解读取规范
              <ArrowUpRight size={12} />
            </Link>
          </div>
        </>
      )}
    </>
  );
}