import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import { api } from "../api/client";
import type { Book } from "../api/types";
import { useAuth } from "../auth/AuthContext";
import { Cover } from "../components/Cover";
import { TopBar } from "../components/TopBar";
import { toast } from "../components/Toaster";
import { btn, btnPrimary, card, input } from "../components/ui";
import { groupByDir } from "../lib/group";

function BookCard({
  book,
  onOpen,
  onDelete,
}: {
  book: Book;
  onOpen: () => void;
  onDelete: () => void;
}) {
  const { isAdmin } = useAuth();
  return (
    <div className="group relative w-32 shrink-0">
      <button onClick={onOpen} className="block w-full text-left">
        <Cover
          book={book}
          className="aspect-[3/4] w-32 rounded-lg shadow-md ring-1 ring-stone-800 transition duration-200 group-hover:-translate-y-1 group-hover:shadow-xl group-hover:ring-stone-600"
        />
        <p className="mt-1.5 truncate text-xs text-stone-200 transition-colors group-hover:text-amber-300">
          {book.title}
        </p>
        <p className="truncate text-[10px] text-stone-500">
          {book.format} · {book.path}
        </p>
      </button>
      {book.state === "error" && (
        <span
          className="absolute left-1 top-1 rounded bg-red-900 px-1 text-[10px] text-red-100"
          title={book.error}
        >
          损坏
        </span>
      )}
      {book.percent > 0 && (
        <div className="mt-1 h-1 w-32 overflow-hidden rounded-full bg-stone-800">
          <div className="h-full rounded-full bg-amber-500" style={{ width: `${Math.round(book.percent * 100)}%` }} />
        </div>
      )}
      {isAdmin && (
        <button
          className="absolute right-1 top-1 hidden rounded bg-stone-900/80 px-1.5 text-xs text-red-300 group-hover:block"
          title="删除(连磁盘文件)"
          onClick={() => {
            if (confirm(`删除《${book.title}》?磁盘文件一并删除,阅读进度保留`)) onDelete();
          }}
        >
          ✕
        </button>
      )}
    </div>
  );
}

export default function Shelf() {
  const qc = useQueryClient();
  const nav = useNavigate();
  const { isAdmin } = useAuth();
  const [lib, setLib] = useState(0); // 0 = 全部库
  const [qRaw, setQRaw] = useState("");
  const [q, setQ] = useState("");

  useEffect(() => {
    const t = setTimeout(() => setQ(qRaw.trim()), 300); // 搜索防抖
    return () => clearTimeout(t);
  }, [qRaw]);

  const libsQ = useQuery({ queryKey: ["libraries"], queryFn: api.listLibraries });
  const booksQ = useQuery({
    queryKey: ["books", lib, q],
    queryFn: () => api.listBooks({ library: lib || undefined, q }),
  });
  const progQ = useQuery({ queryKey: ["progress"], queryFn: api.listProgress });
  // 继续阅读行 → book id 解析用(键与 booksQ 默认态一致,天然共享缓存)
  const allQ = useQuery({ queryKey: ["books", 0, ""], queryFn: () => api.listBooks() });

  const del = useMutation({
    mutationFn: (id: number) => api.deleteBook(id),
    onSuccess: () => {
      toast("ok", "已删除");
      qc.invalidateQueries({ queryKey: ["books"] });
    },
    onError: (e) => toast("err", e instanceof Error ? e.message : "删除失败"),
  });
  const scan = useMutation({
    mutationFn: (id: number) => api.scanLibrary(id),
    onSuccess: () => {
      toast("ok", "扫描已触发");
      setTimeout(() => qc.invalidateQueries({ queryKey: ["books"] }), 3000); // 给周期扫描留出时间
    },
    onError: (e) => toast("err", e instanceof Error ? e.message : "扫描失败"),
  });

  const groups = useMemo(() => groupByDir(booksQ.data ?? []), [booksQ.data]);
  const booksByKey = useMemo(() => {
    const m = new Map<string, Book>();
    for (const b of allQ.data ?? []) m.set(`${b.library_id}/${b.path}`, b);
    return m;
  }, [allQ.data]);

  const continueRows = (progQ.data ?? []).slice(0, 12);
  const libs = libsQ.data ?? [];

  return (
    <div className="flex h-full flex-col">
      <TopBar
        right={
          <>
            <button className={btn} onClick={() => qc.invalidateQueries({ queryKey: ["books"] })}>
              刷新
            </button>
            {isAdmin && lib > 0 && (
              <button className={btn} disabled={scan.isPending} onClick={() => scan.mutate(lib)}>
                {scan.isPending ? "扫描中…" : "扫描此库"}
              </button>
            )}
            <input
              className={input + " w-44"}
              aria-label="搜索标题" placeholder="搜索标题…"
              value={qRaw}
              onChange={(e) => setQRaw(e.target.value)}
            />
          </>
        }
      />
      <div className="flex-1 overflow-y-auto p-4">
        {libs.length === 0 && (
          <p className="text-sm text-stone-500">还没有书库。admin 请到「库管理」建库并扫描。</p>
        )}
        <div className="mb-4 flex flex-wrap gap-2">
          <button className={lib === 0 ? btnPrimary : btn} onClick={() => setLib(0)}>
            全部
          </button>
          {libs.map((l) => (
            <button key={l.id} className={lib === l.id ? btnPrimary : btn} onClick={() => setLib(l.id)}>
              {l.name}
            </button>
          ))}
        </div>

        {continueRows.length > 0 && (
          <section className="mb-8">
            <h2 className="mb-2 text-sm font-semibold text-stone-400">继续阅读</h2>
            <div className="flex gap-4 overflow-x-auto pb-2">
              {continueRows.map((r) => {
                const b = booksByKey.get(`${r.library_id}/${r.path}`);
                if (!b)
                  return (
                    <div key={`${r.library_id}/${r.path}`} className={`w-28 shrink-0 p-2 text-xs text-stone-600 ${card}`}>
                      <p className="truncate">{r.title || "已删除的书"}</p>
                      <p>{Math.round(r.percent * 100)}%</p>
                    </div>
                  );
                return (
                  <BookCard
                    key={`${r.library_id}/${r.path}`}
                    book={b}
                    onOpen={() => nav(`/book/${b.id}`)}
                    onDelete={() => del.mutate(b.id)}
                  />
                );
              })}
            </div>
          </section>
        )}

        {booksQ.isError && (
          <p className="mb-4 text-sm text-red-400">
            加载失败:{booksQ.error instanceof Error ? booksQ.error.message : ""}{" "}
            <button className={btn} onClick={() => booksQ.refetch()}>
              重试
            </button>
          </p>
        )}
        {!booksQ.isPending && groups.length === 0 && !booksQ.isError && (
          <p className="text-sm text-stone-500">此库暂无书目(放入文件后等待扫描或点「扫描此库」)。</p>
        )}
        {groups.map((g) => (
          <section key={g.dir || "//"} className="mb-8">
            <h2 className="mb-2 text-sm font-semibold text-stone-400">{g.dir || "根目录"}</h2>
            <div className="flex flex-wrap gap-4">
              {g.books.map((b) => (
                <BookCard key={b.id} book={b} onOpen={() => nav(`/book/${b.id}`)} onDelete={() => del.mutate(b.id)} />
              ))}
            </div>
          </section>
        ))}
      </div>
    </div>
  );
}