{showReply && ( )}

{showReply ? "Balasan" : `Komentar (${comments.length})`}

{!showReply ? ( loading ? (

{Array.from({ length: 4 }).map((_, i) => (

))}

) : comments.length === 0 ? (

Belum ada komentar

) : (

{comments.map((c, i) => (

{c.user?.name}

{c.text}

{format(new Date(c.created_at), "dd MMM yyyy")}

))}

) ) : (

{replyTo && (

{replyTo.user?.name}

{replyTo.text}

{format(new Date(replyTo.created_at), "dd MMM yyyy")}

)} {replyLoading ? (

) : replyComments.map((r, i) => (

{r.user?.name}

{r.text}

{format(new Date(r.created_at), "dd MMM yyyy")}

))}

)}

{token && (

showReply ? setReplyText(e.target.value) : setText(e.target.value)}
                                            placeholder={t("give me your feedback")}
                                            rows={1}
                                            className={`flex-1 text-sm outline-none resize-none bg-transparent leading-relaxed py-1 ${darkMode ? "text-white placeholder:text-zinc-500" : "text-slate-800 placeholder:text-slate-400"}`}
                                            onKeyDown={(e) => {
                                                if (e.key === "Enter" && !e.shiftKey) {
                                                    e.preventDefault();
                                                    showReply ? submitReply() : submitComment();
                                                }
                                            }}
                                        />
                                        <button
                                            onClick={showReply ? submitReply : submitComment}
                                            disabled={!(showReply ? replyText : text).trim()}
                                            className={`w-8 h-8 rounded-full flex items-center justify-center shrink-0 transition-all cursor-pointer
                                                ${(showReply ? replyText : text).trim() ? "bg-primary-500 text-white" : darkMode ? "bg-zinc-700 text-zinc-500" : "bg-slate-200 text-slate-400"}`}
                                        >
                                            <Send className="w-3.5 h-3.5" />
                                        </button>
                                    </div>
                                </div>
                            )}
                        </motion.div>
                    </div>
                </>
            )}
        </AnimatePresence>
    );
}

function FloatingToolbar({
    chapter,
    chapters,
    darkMode,
    readingMinutes,
    onPrev,
    onNext,
    onChapters,
    onComments,
    onSettings,
    onBack,
    hasPrev,
    hasNext,
    nextLocked,
    claimable,
    handleClaim
}: {
    chapter: ChapterModel;
    chapters: ChapterModel[];
    darkMode: boolean;
    readingMinutes: number;
    onPrev: () => void;
    onNext: () => void;
    onChapters: () => void;
    onComments: () => void;
    onSettings: () => void;
    onBack: () => void;
    hasPrev: boolean;
    hasNext: boolean;
    nextLocked: boolean;
    claimable: number | null;
    handleClaim: () => void;
}) {
    const [expanded, setExpanded] = useState(false);

const bg = darkMode ? "bg-zinc-900/95 border-zinc-700" : "bg-white/95 border-slate-200";
    const iconColor = darkMode ? "text-zinc-300" : "text-slate-600";

return (
        <motion.div
            className="fixed bottom-6 left-0 right-0 flex justify-center z-50 px-4"
            initial={{ y: 100, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ delay: 0.5, type: "spring", stiffness: 200, damping: 22 }}
        >
            <motion.div
                layout
                transition={{ type: "spring", stiffness: 400, damping: 35 }}
                className={`${bg} backdrop-blur-xl border rounded-[28px] shadow-2xl overflow-hidden`}
            >
                <div className="flex items-center gap-1 px-2 py-2">
                    <button onClick={onBack}
                        className={`w-10 h-10 rounded-full flex items-center justify-center transition-colors cursor-pointer hover:bg-slate-100/20 ${iconColor}`}>
                        <ArrowLeft className="w-4 h-4" />
                    </button>

<button onClick={onChapters}
                        className={`flex items-center gap-2 px-4 py-2.5 rounded-full transition-colors cursor-pointer ${darkMode ? "bg-zinc-700 hover:bg-zinc-600" : "bg-slate-100 hover:bg-slate-200"}`}>
                        <BookOpen className={`w-3.5 h-3.5 ${darkMode ? "text-zinc-300" : "text-slate-600"}`} />
                        <span className={`text-xs font-bold ${darkMode ? "text-white" : "text-slate-800"}`}>
                            Bab {chapter.order}
                        </span>
                        {/* <span className={`text-[10px] ${darkMode ? "text-zinc-400" : "text-slate-400"}`}>
                            {readingMinutes}m
                        </span> */}
                    </button>

<button onClick={onNext} disabled={!hasNext}
                        className={`w-10 h-10 rounded-full flex items-center justify-center transition-colors cursor-pointer relative
                            ${!hasNext ? "opacity-30 cursor-not-allowed" : "hover:bg-slate-100/20"} ${iconColor}`}>
                        <ChevronRight className="w-4 h-4" />
                        {nextLocked && hasNext && (
                            <span className="absolute -top-0.5 -right-0.5 w-3 h-3 rounded-full bg-amber-400 flex items-center justify-center">
                                <Lock className="w-1.5 h-1.5 text-white" />
                            </span>
                        )}
                    </button>

<button onClick={onComments}
                        className={`w-10 h-10 rounded-full flex items-center justify-center transition-colors cursor-pointer hover:bg-slate-100/20 relative ${iconColor}`}>
                        <MessageCircle className="w-4 h-4" />
                        {(chapter.total_comments ?? 0) > 0 && (
                            <span className="absolute -top-0.5 -right-0.5 min-w-3.5 h-3.5 rounded-full bg-primary-500 text-[9px] font-bold text-white flex items-center justify-center px-0.5">
                                {chapter.total_comments}
                            </span>
                        )}
                    </button>

{/* {claimable && (
                        <button
                            onClick={handleClaim}
                            className="bg-white text-primary-500 flex items-center gap-2 px-2 cursor-pointer rounded-full py-1 hover:bg-gray-100"
                        >
                            <Image src={"/assets/Coin/GreenCoin.png"} alt="Green Coin Kutu Buku" height={20} width={20} />
                            <span>
                                {
                                    claimable === 3 ? '100' :
                                        (claimable === 10 ? '100' :
                                            (claimable === 20 ? '125' :
                                                claimable === 30 ? '125' :
                                                    (claimable === 45 ? '150' :
                                                        (claimable === 60 ? '200' :
                                                            (claimable === 120 ? '200' :
                                                                (claimable === 180 ? '1000' : ''
                                                                ))))))
                                }
                            </span>
                        </button>
                    )} */}
                </div>
            </motion.div>
        </motion.div>
    );
}

interface Props {
    chapter: ChapterModel;
    chapters: ChapterModel[];
    novel: PostModel;
    token: string;
}

export default function ChapterDetailPage({ chapter: initialChapter, chapters, novel, token }: Props) {
    const { t, language } = useTranslation();
    const router = useRouter();

const [chapter, setChapter] = useState<ChapterModel>(initialChapter);
    const [darkMode, setDarkMode] = useState(false);
    const [fontSize, setFontSize] = useState(16);
    const [fontFamily, setFontFamily] = useState<string>("Georgia");
    const [lineSpacing, setLineSpacing] = useState(2);
    const [showSettings, setShowSettings] = useState(false);
    const [showChapters, setShowChapters] = useState(false);
    const [showComments, setShowComments] = useState(false);
    const [readingMinutes, setReadingMinutes] = useState(0);
    const [claimable, setClaimable] = useState<number | null>(null);

const lastInteractionRef = useRef<number>(Date.now());
    const chapterSecondsRef = useRef(0);
    const totalSecondsRef = useRef(0);
    const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);

const markInteraction = useCallback(() => {
        lastInteractionRef.current = Date.now();
    }, []);

const TODAY = format(new Date(), "yyyy-MM-dd");
    const getChapterKey = (chapterId: string) => `reading_${chapterId}_${TODAY}`;
    const getTotalKey = () => `reading_total_${TODAY}`;

useEffect(() => {
        const handleActivity = () => markInteraction();
        window.addEventListener("touchstart", handleActivity);
        window.addEventListener("touchmove", handleActivity);
        window.addEventListener("scroll", handleActivity);
        window.addEventListener("click", handleActivity);

return () => {
            window.removeEventListener("touchstart", handleActivity);
            window.removeEventListener("touchmove", handleActivity);
            window.removeEventListener("scroll", handleActivity);
            window.removeEventListener("click", handleActivity);
        };
    }, [markInteraction]);

useEffect(() => {
        chapterSecondsRef.current = getChapterSeconds(chapter.id);

totalSecondsRef.current = getTotalSeconds();
        setReadingMinutes(Math.floor(totalSecondsRef.current / 60));

lastInteractionRef.current = Date.now();

if (chapterSecondsRef.current >= MAX_CHAPTER_MINUTES * 60) {
            // toast.info("Kamu sudah membaca bab ini hari ini 📖", { toastId: "chapter-limit" });
            return;
        }

intervalRef.current = setInterval(() => {
            const idleSeconds = (Date.now() - lastInteractionRef.current) / 1000;
            if (idleSeconds > MAX_IDLE_MINUTES * 60) return;

chapterSecondsRef.current += 1;
            totalSecondsRef.current += 1;

saveChapterSeconds(chapter.id, chapterSecondsRef.current);
            saveTotalSeconds(totalSecondsRef.current);

setReadingMinutes(Math.floor(totalSecondsRef.current / 60));

if (chapterSecondsRef.current >= MAX_CHAPTER_MINUTES * 60) {
                clearInterval(intervalRef.current!);
                // toast.info("Ayo lanjut ke bab berikutnya! 📖", { toastId: "chapter-limit" });
            }
        }, 1_000);

return () => { if (intervalRef.current) clearInterval(intervalRef.current); };
    }, [chapter.id]);

useEffect(() => {
        let claim = null;

if (readingMinutes >= 3 && readingMinutes < 10) claim = 3;
        else if (readingMinutes >= 10 && readingMinutes < 20) claim = 10;
        else if (readingMinutes >= 20 && readingMinutes < 30) claim = 20;
        else if (readingMinutes >= 30 && readingMinutes < 45) claim = 30;
        else if (readingMinutes >= 45 && readingMinutes < 60) claim = 45;
        else if (readingMinutes >= 60 && readingMinutes < 120) claim = 60;
        else if (readingMinutes >= 120 && readingMinutes < 180) claim = 120;
        else if (readingMinutes >= 180) claim = 180;

setClaimable(claim);
    }, [readingMinutes]);

useEffect(() => {
        const thresholds = [3, 10, 20, 30, 45, 60, 120, 180];
        const hit = thresholds.findLast((t) => readingMinutes >= t) ?? null;
        if (!hit || !token) { setClaimable(null); return; }

const currentIndex = chapters.findIndex((c) => c.id === chapter.id);
    const prevChapter = currentIndex > 0 ? chapters[currentIndex - 1] : null;
    const nextChapter = currentIndex < chapters.length - 1 ? chapters[currentIndex + 1] : null;

const openApp = () => {
        const appSchemeUrl = `kutubuku://novel/${novel.id}`;
        const playStoreUrl = "https://play.google.com/store/apps/details?id=com.kutubuku";

const fallbackTimer = setTimeout(() => {
            window.location.href = playStoreUrl;
        }, 1500);

const onVisibilityChange = () => {
            if (document.hidden) {
                clearTimeout(fallbackTimer);
                document.removeEventListener("visibilitychange", onVisibilityChange);
            }
        };
        document.addEventListener("visibilitychange", onVisibilityChange);

window.location.href = appSchemeUrl;
    };

const nextRequiresApp = chapter.order > 5 || !!nextChapter?.is_paid;

const goToNextChapter = () => {
        if (chapter.order > 5) {
            openApp();
            return;
        }
        if (nextChapter) goToChapter(nextChapter);
    };

const handleClaim = async () => {
        if (!token || !claimable) return;
        try {
            const { data: countRes } = await countCoinsClaim(token, {
                post_id: novel.id,
                minutes: readingMinutes,
            });

const CLAIM_TITLES: Record<number, string> = {
                3: "Hadiah untuk Anda yang rajin membaca selama 3 menit",
                10: "Hadiah untuk Anda yang rajin membaca selama 10 menit",
                20: "Hadiah untuk Anda yang rajin membaca selama 20 menit",
                30: "Hadiah untuk Anda yang rajin membaca selama 30 menit",
                45: "Hadiah untuk Anda yang rajin membaca selama 45 menit",
                60: "Hadiah untuk Anda yang rajin membaca selama 60 menit",
                120: "Hadiah untuk Anda yang rajin membaca selama 120 menit",
                180: "Hadiah untuk Anda yang rajin membaca selama 180 menit",
            };

const title = CLAIM_TITLES[claimable];
            const filtered = countRes.data.filter((item: any) => item.title === title);

if (filtered.length >= 2) {
                // toast.error(t("you have reached today's claim limit"));
                setClaimable(null);
                return;
            }

const fourHoursAgo = new Date(Date.now() - 4 * 60 * 60 * 1000);
            const recentClaims = filtered.filter(
                (item: any) => new Date(item.created_at) > fourHoursAgo
            );
            if (recentClaims.length > 0) {
                // toast.error(t("you can't claim again at this minute"));
                setClaimable(null);
                return;
            }

const { data: res } = await postCoinsClaim(token, {
                post_id: novel.id,
                minutes: readingMinutes,
            });
            if (res?.data) {
                // toast.success(t("success.claim"));
                setClaimable(null);
            }
        } catch (err: any) {
            // toast.error(err?.data?.message ?? "Gagal klaim");
        }
    };

const getTotalSeconds = (): number => {
        try {
            const raw = localStorage.getItem(getTotalKey());
            return raw ? parseInt(raw) : 0;
        } catch { return 0; }
    };

const saveChapterSeconds = (chapterId: string, seconds: number) => {
        localStorage.setItem(getChapterKey(chapterId), String(seconds));
    };

const saveTotalSeconds = (seconds: number) => {
        localStorage.setItem(getTotalKey(), String(seconds));
    };

const bodyColor = darkMode ? "#e8e4dc" : "#2c2416";
    const bg = darkMode ? "bg-[#1a1a1a]" : "bg-[#ffffff]";
    const textColor = darkMode ? "text-[#e8e4dc]" : "text-[#2c2416]";

return (
        <div
            className={`min-h-screen w-full transition-colors duration-300 flex justify-center ${bg}`}
            onClick={markInteraction}
        >
            <div className="max-w-2xl mx-auto px-5 sm:px-8 pt-12 pb-40">

<motion.div
                    key={chapter.id}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.5 }}
                    className="mb-10!"
                >
                    <p className={`text-xs font-semibold uppercase tracking-[0.2em] mb-3! ${darkMode ? "text-zinc-500" : "text-slate-400"}`}>
                        {novel.title}
                    </p>
                    <h1
                        className={`font-bold leading-tight mb-2! ${textColor}`}
                        style={{ fontFamily, fontSize: fontSize + 10 }}
                    >
                        Bab {chapter.order}
                    </h1>
                    <h2
                        className={`font-bold leading-tight ${textColor}`}
                        style={{ fontFamily, fontSize: fontSize + 8 }}
                    >
                        {chapter.title}
                    </h2>
                    <div className={`mt-6! h-px ${darkMode ? "bg-zinc-700" : "bg-slate-200"}`} />
                </motion.div>

<motion.div
                    key={`body-${chapter.id}`}
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    transition={{ delay: 0.2, duration: 0.6 }}
                    className={`chapter-content leading-relaxed ${textColor}`}
                    style={{ fontFamily, fontSize, lineHeight: lineSpacing }}
                    dangerouslySetInnerHTML={{ __html: chapter.description ?? "" }}
                />

<motion.div
                    initial={{ opacity: 0, y: 16 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.5 }}
                    className={`mt-16! pt-8 border-t ${darkMode ? "border-zinc-700" : "border-slate-200"}`}
                >
                    <div className="flex items-center justify-between gap-4">
                        <button
                            onClick={() => setShowComments(true)}
                            className={`flex items-center gap-2 px-4 py-3 rounded-2xl text-sm font-medium transition-colors cursor-pointer
                                ${darkMode ? "bg-zinc-800 text-zinc-300 hover:bg-zinc-700" : "bg-slate-100 text-slate-600 hover:bg-slate-200"}`}
                        >
                            <MessageCircle className="w-4 h-4" />
                            {chapter.total_comments ?? 0} Komentar
                        </button>

{nextChapter && (
                            <button
                                onClick={goToNextChapter}
                                className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-2xl text-sm font-bold transition-all cursor-pointer
                                    ${nextRequiresApp
                                        ? "bg-amber-50 text-amber-600 border border-amber-200"
                                        : "bg-primary-500 text-white hover:bg-primary-600"}`}
                            >
                                {nextRequiresApp ? <Lock className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
                                {nextRequiresApp ? "Buka di Aplikasi" : "Bab Selanjutnya"}
                            </button>
                        )}
                    </div>
                </motion.div>
            </div>

<FloatingToolbar
                chapter={chapter}
                chapters={chapters}
                darkMode={darkMode}
                readingMinutes={readingMinutes}
                onPrev={() => prevChapter && goToChapter(prevChapter)}
                onNext={goToNextChapter}
                onChapters={() => setShowChapters(true)}
                onComments={() => setShowComments(true)}
                onSettings={() => setShowSettings(true)}
                onBack={() => router.push(`/${language}/novel/${withSlug(novel.id, novel.slug)}`)}
                hasPrev={!!prevChapter}
                hasNext={!!nextChapter}
                nextLocked={nextRequiresApp}
                claimable={claimable}
                handleClaim={handleClaim}
            />

<SettingsPanel
                open={showSettings}
                fontSize={fontSize}
                fontFamily={fontFamily}
                lineSpacing={lineSpacing}
                darkMode={darkMode}
                onFontSize={setFontSize}
                onFontFamily={setFontFamily}
                onLineSpacing={setLineSpacing}
                onDarkMode={setDarkMode}
                onClose={() => setShowSettings(false)}
            />
            <ChaptersPanel
                open={showChapters}
                chapters={chapters}
                currentId={chapter.id}
                novelTitle={novel.title}
                onSelect={goToChapter}
                onClose={() => setShowChapters(false)}
                darkMode={darkMode}
            />
            <CommentsPanel
                open={showComments}
                chapterId={chapter.id}
                token={token}
                darkMode={darkMode}
                onClose={() => setShowComments(false)}
            />
        </div>
    );
}