sunnymh-manga-site/components/ReadingProgressButton.tsx

"use client";

import { useEffect, useState } from "react";
import Link from "next/link";

type ChapterLite = {
  number: number;
  title: string;
};

type Props = {
  mangaSlug: string;
  chapters: ChapterLite[];
};

function storageKey(slug: string) {
  return `sunnymh:last-read:${slug}`;
}

export function readLastReadChapter(slug: string): number | null {
  if (typeof window === "undefined") return null;
  const raw = window.localStorage.getItem(storageKey(slug));
  if (!raw) return null;
  const n = Number(raw);
  return Number.isFinite(n) && n > 0 ? n : null;
}

export function writeLastReadChapter(slug: string, chapter: number) {
  if (typeof window === "undefined") return;
  window.localStorage.setItem(storageKey(slug), String(chapter));
}

export function ReadingProgressButton({ mangaSlug, chapters }: Props) {
  const [lastRead, setLastRead] = useState<number | null>(null);

  useEffect(() => {
    setLastRead(readLastReadChapter(mangaSlug));
  }, [mangaSlug]);

  if (chapters.length === 0) return null;
  const first = chapters[0];
  const resumeChapter =
    lastRead !== null ? chapters.find((c) => c.number === lastRead) : null;
  const target = resumeChapter ?? first;

  return (
    <Link
      href={`/manga/${mangaSlug}/${target.number}`}
      className="flex items-center justify-center gap-3 w-full py-3 mb-6 px-4 text-sm font-semibold bg-accent hover:bg-accent-hover text-white rounded-xl transition-colors active:scale-[0.98]"
    >
      {resumeChapter ? (
        <>
          <span>继续阅读</span>
          <span className="opacity-50">·</span>
          <span className="truncate">
            #{resumeChapter.number} {resumeChapter.title}
          </span>
        </>
      ) : (
        "开始阅读"
      )}
    </Link>
  );
}