"use client";

import { useTranslation } from "@/hooks/useTranslation";
import {
    getCoinsDailyReading,
    getListCoinsDailyReading,
    getListCoinsDailyReadingAuthenticated,
} from "@/libs/axios/modules/reward";
import { getTopup, postTopup } from "@/libs/axios/modules/topup";
import { getProfile } from "@/libs/axios/modules/user";
import { QuestModel, TopupModel, UserModel } from "@/models";
import { AnimatePresence, motion } from "framer-motion";
import { Coins, ExternalLink, RefreshCw, X } from "lucide-react";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { useCallback, useEffect, useState } from "react";
import { toast } from "react-toastify";

function PaymentModal({
    open,
    url,
    onClose,
}: {
    open: boolean;
    url: string;
    onClose: () => void;
}) {
    useEffect(() => {
        document.body.style.overflow = open ? "hidden" : "";
        return () => { document.body.style.overflow = ""; };
    }, [open]);

    return (
        <AnimatePresence>
            {open && (
                <>
                    <motion.div
                        className="fixed inset-0 z-9999 bg-black/60 backdrop-blur-sm"
                        onClick={onClose}
                        initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
                    />
                    <div className="fixed inset-0 z-10000 flex items-end md:items-center justify-center p-0 md:p-4">
                        <motion.div
                            className="bg-white w-full h-full md:rounded-3xl md:max-w-lg md:max-h-[90vh] overflow-hidden shadow-2xl flex flex-col"
                            initial={{ y: "100%", opacity: 0 }}
                            animate={{ y: 0, opacity: 1 }}
                            exit={{ y: "100%", opacity: 0 }}
                            transition={{ type: "spring", stiffness: 300, damping: 30 }}
                        >
                            <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100 shrink-0">
                                <div className="flex items-center gap-3">
                                    <div className="w-8 h-8 rounded-full bg-primary-50 flex items-center justify-center">
                                        <Coins className="w-4 h-4 text-primary-500" />
                                    </div>
                                    <div>
                                        <p className="font-bold text-sm text-slate-800">Pembayaran</p>
                                        <p className="text-xs text-slate-400">Selesaikan pembayaran di bawah ini</p>
                                    </div>
                                </div>
                                <div className="flex items-center gap-2">
                                    <a
                                        href={url}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="w-8 h-8 flex items-center justify-center rounded-xl hover:bg-slate-100 transition-colors cursor-pointer"
                                        title="Buka di tab baru"
                                    >
                                        <ExternalLink className="w-4 h-4 text-slate-500" />
                                    </a>
                                    <button
                                        onClick={onClose}
                                        className="w-8 h-8 flex items-center justify-center rounded-xl hover:bg-slate-100 transition-colors cursor-pointer"
                                    >
                                        <X className="w-4 h-4 text-slate-500" />
                                    </button>
                                </div>
                            </div>

                            <div className="flex-1 relative">
                                <iframe
                                    src={url}
                                    className="w-full h-full border-0"
                                    title="Payment Gateway"
                                    allow="payment"
                                />
                            </div>

                            <div className="px-5 py-3 bg-slate-50 border-t border-slate-100 shrink-0">
                                <p className="text-xs text-slate-400 text-center">
                                    Setelah pembayaran selesai, tutup halaman ini dan refresh untuk melihat saldo terbaru
                                </p>
                            </div>
                        </motion.div>
                    </div>
                </>
            )}
        </AnimatePresence>
    );
}

function DailyReadingCard({
    dailyCoins,
    quests,
    loading,
    isLoggedIn,
}: {
    dailyCoins: number;
    quests: QuestModel[];
    loading: boolean;
    isLoggedIn: boolean;
}) {
    const { t, language } = useTranslation();
    const router = useRouter();

    return (
        <motion.div
            initial={{ opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            className="bg-white rounded-2xl shadow-sm p-6 flex flex-col gap-6 "
        >
            <div className="flex items-start justify-between gap-4">
                <div className="flex flex-col gap-1">
                    <p className="font-bold text-base text-slate-800 capitalize">{t("daily reading rewards")}</p>
                    <p className="text-xs text-slate-400 leading-relaxed">
                        {t("earn 1 coin by reading each chapter for at least 3 minutes")}
                    </p>
                </div>
                <div className="flex items-center gap-2 shrink-0">
                    <Image src="/assets/Coin/GreenCoin.png" alt="coin" width={24} height={24} />
                    <span className="font-bold text-base text-slate-800">
                        {isLoggedIn ? dailyCoins.toLocaleString("id").padStart(2, "0") : t("coins")}
                    </span>
                </div>
            </div>

            {loading ? (
                <div className="flex gap-4 animate-pulse">
                    {Array.from({ length: 6 }).map((_, i) => (
                        <div key={i} className="flex flex-col gap-2 items-center">
                            <div className="w-10 h-4 bg-slate-100 rounded" />
                            <div className="w-px h-4 bg-slate-100" />
                        </div>
                    ))}
                </div>
            ) : quests.length > 0 ? (
                <div className="overflow-x-auto pb-1">
                    <div className="flex items-center justify-between gap-0 min-w-max">
                        {quests.map((item, i) => (
                            <div key={i} className="flex flex-col items-center gap-2">
                                <div className="flex items-center gap-1 px-3">
                                    <Image src="/assets/Coin/GreenCoin.png" alt="coin" width={14} height={14} />
                                    <span className={`text-xs font-bold ${item.checklist ? "text-primary-500" : "text-slate-400"}`}>
                                        {String(item.coins).padStart(2, "0")}
                                    </span>
                                </div>
                                <div className="relative flex items-center w-full px-3">
                                    <div className={`h-0.5 flex-1 ${item.checklist ? "bg-primary-500" : "bg-slate-200"}`} />
                                    <div className={`absolute left-1/2 -translate-x-1/2 w-2.5 h-2.5 rounded-full border-2
                                        ${item.checklist ? "bg-primary-500 border-primary-500" : "bg-white border-slate-300"}`}
                                    />
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            ) : null}

            <button
                onClick={() => isLoggedIn ? router.push(`/${language}`) : router.push(`/${language}/login`)}
                className="w-full py-3 rounded-2xl border border-primary-500 text-primary-500 font-semibold text-sm hover:bg-primary-50 transition-colors cursor-pointer capitalize flex items-center justify-center gap-2"
            >
                {isLoggedIn ? t("read novel") : t("login")}
            </button>
        </motion.div>
    );
}

function TopupCard({
    data,
    loading,
    token,
    onPaymentUrl,
}: {
    data: TopupModel[];
    loading: boolean;
    token?: string;
    onPaymentUrl: (url: string) => void;
}) {
    const { t } = useTranslation();
    const [loadingId, setLoadingId] = useState<string | null>(null);

    const handleTopup = async (item: TopupModel) => {
        if (!token) { toast.error(t("you need to login first")); return; }
        setLoadingId(item.id);
        try {
            const { data: res } = await postTopup(token, { id: item.id });
            if (res?.data?.url) {
                onPaymentUrl(res.data.url);
            }
        } catch (err: any) {
            toast.error(err?.data?.message ?? err?.message ?? "Terjadi kesalahan");
        } finally {
            setLoadingId(null);
        }
    };

    function stripHtml(html: string) {
        if (typeof window === "undefined") return html;
        const doc = new DOMParser().parseFromString(html, "text/html");
        return doc.body.textContent || "";
    }

    return (
        <motion.div
            initial={{ opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
            className="bg-white rounded-2xl shadow-sm p-6 flex flex-col gap-6"
        >
            <div className="flex flex-col gap-1">
                <p className="font-bold text-base text-slate-800 capitalize">{t("top up coin")}</p>
                <p className="text-xs text-slate-400 capitalize">
                    {t("select what you need")} · {t("pay")} · {t("done")}
                </p>
            </div>

            {loading ? (
                <div className="flex flex-col gap-3">
                    {Array.from({ length: 4 }).map((_, i) => (
                        <div key={i} className="h-16 bg-slate-100 rounded-2xl animate-pulse" />
                    ))}
                </div>
            ) : (
                <div className="flex flex-col gap-3">
                    {data.map((item, i) => (
                        <motion.button
                            key={item.id}
                            initial={{ opacity: 0, x: -8 }}
                            animate={{ opacity: 1, x: 0 }}
                            transition={{ delay: i * 0.05 }}
                            onClick={() => handleTopup(item)}
                            disabled={!!loadingId}
                            className={`flex items-center justify-between px-4 py-4 bg-slate-50 hover:bg-slate-100 active:scale-[0.98] rounded-2xl transition-all cursor-pointer text-left
                                ${loadingId === item.id ? "opacity-70" : ""}`}
                        >
                            <div className="flex items-center gap-3">
                                <div className="w-10 h-10 rounded-full bg-primary-50 flex items-center justify-center shrink-0">
                                    <Coins className="w-5 h-5 text-primary-500" />
                                </div>
                                <div>
                                    <p className="font-bold text-slate-800 text-base leading-tight">
                                        {parseInt(item.title).toLocaleString("id")} Koin
                                    </p>
                                </div>
                            </div>
                            <div className="flex items-center gap-2 shrink-0">
                                <div className="px-3 py-1.5 rounded-xl border border-primary-500">
                                    <p className="text-sm font-semibold text-primary-500">
                                        Rp {item.price.toLocaleString("id")}
                                    </p>
                                </div>
                                {loadingId === item.id ? (
                                    <div className="w-4 h-4 border-2 border-primary-500 border-t-transparent rounded-full animate-spin" />
                                ) : (
                                    <ExternalLink className="w-4 h-4 text-slate-300" />
                                )}
                            </div>
                        </motion.button>
                    ))}
                </div>
            )}
        </motion.div>
    );
}

interface Props {
    token?: string;
    initialUser?: UserModel | null;
}

export default function RewardPage({ token, initialUser }: Props) {
    const { t } = useTranslation();
    const [user, setUser] = useState<UserModel | null>(initialUser ?? null);
    const [topup, setTopup] = useState<TopupModel[]>([]);
    const [quests, setQuests] = useState<QuestModel[]>([]);
    const [dailyCoins, setDailyCoins] = useState(0);
    const [loading, setLoading] = useState(true);
    const [refreshing, setRefreshing] = useState(false);
    const [paymentUrl, setPaymentUrl] = useState<string | null>(null);
    const isLoggedIn = !!token;

    const fetchAll = useCallback(async () => {
        try {
            const [topupRes, questsRes] = await Promise.all([
                getTopup(),
                token
                    ? getListCoinsDailyReadingAuthenticated(token)
                    : getListCoinsDailyReading(),
            ]);
            if (topupRes.data?.data) setTopup(topupRes.data.data);
            if (questsRes.data?.data) setQuests(questsRes.data.data);

            if (token) {
                const [profileRes, dailyReadingRes] = await Promise.all([
                    getProfile(token),
                    getCoinsDailyReading(token, { minutes: 0 }),
                ]);
                if (profileRes.data?.data) setUser(profileRes.data.data);
                if (dailyReadingRes.data?.data) setDailyCoins(dailyReadingRes.data.data);
            }
        } catch (err) {
            console.error(err);
        } finally {
            setLoading(false);
            setRefreshing(false);
        }
    }, [token]);

    useEffect(() => { fetchAll(); }, [fetchAll]);

    const handleRefresh = async () => {
        setRefreshing(true);
        await fetchAll();
    };

    return (
        <div className="w-full max-w-2xl mx-auto px-4 py-6 flex flex-col gap-4 md:pt-32">

            {/* <div className="flex items-center justify-between mb-2">
                <div>
                    <h1 className="text-xl font-bold text-slate-800 capitalize">{t("reward")}</h1>
                    {user && (
                        <div className="flex items-center gap-1.5 mt-1">
                            <Image src="/assets/Coin/GreenCoin.png" alt="coin" width={16} height={16} />
                            <span className="text-sm text-slate-500">
                                <span className="font-bold text-slate-700">{user.totalPoints?.toLocaleString("id") ?? 0}</span> koin tersedia
                            </span>
                        </div>
                    )}
                </div>
                <button
                    onClick={handleRefresh}
                    disabled={refreshing}
                    className="w-9 h-9 flex items-center justify-center rounded-xl border border-slate-200 hover:bg-slate-50 transition-colors cursor-pointer"
                >
                    <RefreshCw className={`w-4 h-4 text-slate-500 ${refreshing ? "animate-spin" : ""}`} />
                </button>
            </div>

            <DailyReadingCard
                dailyCoins={dailyCoins}
                quests={quests}
                loading={loading}
                isLoggedIn={isLoggedIn}
            /> */}

            <TopupCard
                data={topup}
                loading={loading}
                token={token}
                onPaymentUrl={(url) => setPaymentUrl(url)}
            />

            <PaymentModal
                open={!!paymentUrl}
                url={paymentUrl ?? ""}
                onClose={() => setPaymentUrl(null)}
            />
        </div>
    );
}