import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Suspense, lazy, type ComponentType, type LazyExoticComponent } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import { api } from "../api/client";
import type { Format } from "../api/types";
import { useAuth } from "../auth/AuthContext";
import { toast } from "../components/Toaster";
import { btn } from "../components/ui";
import type { ReaderProps } from "../lib/useProgress";

const READERS: Partial<Record<Format, LazyExoticComponent<ComponentType<ReaderProps>>>> = {
  cbz: lazy(() => import("../readers/CbzReader")),
  txt: lazy(() => import("../readers/TextReader")),
  md: lazy(() => import("../readers/TextReader")),
  pdf: lazy(() => import("../readers/PdfReader")),
  epub: lazy(() => import("../readers/EpubReader")),
};

export default function Reader() {
  const { id: idStr } = useParams();
  const id = Number(idStr);
  const qc = useQueryClient();
  const nav = useNavigate();
  const { isAdmin } = useAuth();

  const bookQ = useQuery({ queryKey: ["book", id], queryFn: () => api.getBook(id), enabled: Number.isFinite(id) });
  const progQ = useQuery({ queryKey: ["progress"], queryFn: api.listProgress });
  const del = useMutation({
    mutationFn: () => api.deleteBook(id),
    onSuccess: () => {
      toast("ok", "已删除");
      qc.invalidateQueries({ queryKey: ["books"] });
      nav("/");
    },
    onError: (e) => toast("err", e instanceof Error ? e.message : "删除失败"),
  });

  const book = bookQ.data;
  const body = (() => {
    if (!Number.isFinite(id)) return <Msg text="无效的书 id" />;
    if (bookQ.isPending) return <Msg text="加载中…" />;
    if (bookQ.isError)
      return (
        <Msg
          text={"加载失败:" + (bookQ.error instanceof Error ? bookQ.error.message : "")}
          retry={() => bookQ.refetch()}
        />
      );
    if (!book) return <Msg text="未找到这本书" />;
    if (book.state === "error") return <Msg text={`文件损坏:${book.error}`} />;
    if (progQ.isPending) return <Msg text="恢复进度…" />;
    const R = READERS[book.format];
    if (!R) return <Msg text={`暂不支持的格式:${book.format}`} />;
    const row = (progQ.data ?? []).find((r) => r.library_id === book.library_id && r.path === book.path);
    return <R book={book} initialLocator={row?.locator} />;
  })();

  return (
    <div className="flex h-full flex-col">
      <header className="flex shrink-0 items-center gap-3 border-b border-zinc-800 px-4 py-2 text-sm">
        <Link to="/" className="text-zinc-400 hover:text-zinc-100">
          ← 书架
        </Link>
        <span className="truncate font-medium">{book?.title ?? "…"}</span>
        <span className="text-zinc-500">
          {book?.library ? book.library + " · " : ""}
          {book?.format}
          {book ? ` · ${Math.round(book.percent * 100)}%` : ""}
        </span>
        {isAdmin && book && (
          <button
            className={btn + " ml-auto text-red-300"}
            onClick={() => {
              if (confirm(`删除《${book.title}》?磁盘文件一并删除,阅读进度保留`)) del.mutate();
            }}
          >
            删除
          </button>
        )}
      </header>
      <div className="min-h-0 flex-1">
        <Suspense fallback={<Msg text="加载阅读器…" />}>{body}</Suspense>
      </div>
    </div>
  );
}

function Msg({ text, retry }: { text: string; retry?: () => void }) {
  return (
    <div className="grid h-full place-items-center p-8 text-center text-zinc-500">
      <div>
        <p className="mb-3">{text}</p>
        {retry && (
          <button className={btn} onClick={retry}>
            重试
          </button>
        )}
      </div>
    </div>
  );
}