"use client";

import Breadcrumbs from "@/components/user/components/Breadcrumbs";
import { useTranslation } from "@/hooks/useTranslation";
import { storeReferralCode } from "@/libs/axios/modules/user";
import { UserModel } from "@/models";
import { AnimatePresence, motion } from "framer-motion";
import { Check, Copy, Gift, Share2, Ticket, X } from "lucide-react";
import { useRouter } from "next/navigation";
import { useCallback, useState } from "react";
import { toast } from "react-toastify";

function ReferralInputModal({
    open,
    onSubmit,
    onClose,
}: {
    open: boolean;
    onSubmit: (code: string) => Promise<void>;
    onClose: () => void;
}) {
    const { t } = useTranslation();
    const [code, setCode] = useState("");
    const [loading, setLoading] = useState(false);

    const handleSubmit = async () => {
        if (!code.trim()) return;
        setLoading(true);
        await onSubmit(code.trim());
        setLoading(false);
        setCode("");
    };

    return (
        <AnimatePresence>
            {open && (
                <>
                    <motion.div
                        className="fixed inset-0 z-9999 bg-black/40 backdrop-blur-sm"
                        onClick={onClose}
                        initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
                    />
                    <div className="fixed inset-0 z-10000 flex items-center justify-center p-4">
                        <motion.div
                            className="bg-white rounded-2xl shadow-xl p-6 w-full max-w-sm flex flex-col gap-5"
                            initial={{ scale: 0.92, opacity: 0 }}
                            animate={{ scale: 1, opacity: 1 }}
                            exit={{ scale: 0.92, opacity: 0 }}
                            transition={{ type: "spring", stiffness: 300, damping: 25 }}
                        >
                            <div className="flex items-center justify-between">
                                <p className="font-semibold text-lg text-slate-800 capitalize">
                                    {t("enter your friend's referral code")}
                                </p>
                                <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>

                            <input
                                type="text"
                                value={code}
                                onChange={(e) => setCode(e.target.value.toUpperCase())}
                                onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
                                placeholder={t("enter your friend's referral code")}
                                className="w-full border-2 border-primary-500 rounded-xl px-4 py-3 text-sm text-slate-800 placeholder:text-slate-400 outline-none focus:ring-2 focus:ring-primary-100 transition-all tracking-widest font-semibold"
                            />

                            <div className="flex flex-col gap-2">
                                <button
                                    onClick={handleSubmit}
                                    disabled={!code.trim() || loading}
                                    className={`w-full py-3 rounded-full font-semibold text-sm transition-all
                                        ${code.trim() && !loading
                                            ? "bg-primary-500 text-white hover:bg-primary-600 cursor-pointer"
                                            : "bg-slate-100 text-slate-300 cursor-not-allowed"}`}
                                >
                                    {loading ? "Memproses..." : t("submit")}
                                </button>
                                <button
                                    onClick={onClose}
                                    className="w-full py-3 rounded-full font-semibold text-sm bg-slate-100 text-slate-600 hover:bg-slate-200 transition-all cursor-pointer"
                                >
                                    {t("close")}
                                </button>
                            </div>
                        </motion.div>
                    </div>
                </>
            )}
        </AnimatePresence>
    );
}

interface Props {
    token: string;
    user: UserModel;
}

export default function ProfileReferralCodePage({ token, user: initialUser }: Props) {
    const { t } = useTranslation();
    const router = useRouter();
    const [user, setUser] = useState<UserModel>(initialUser);
    const [showModal, setShowModal] = useState(false);
    const [copied, setCopied] = useState(false);

    const steps: string[] = [
        t("share your referral code to target users"),
        t("enter your referral code when the target user creates an account"),
        t("you and your referral code user will be rewarded with coins"),
    ];

    const copyToClipboard = useCallback(() => {
        navigator.clipboard.writeText(user.referralCode ?? "");
        setCopied(true);
        toast.success(t("success.copy"));
        setTimeout(() => setCopied(false), 2000);
    }, [user.referralCode, t]);

    const shareReferralCode = useCallback(async () => {
        const message = `Just signed up and loving it! Use my referral code ${user.referralCode} for a sweet coins when you join.`;
        if (navigator.share) {
            try {
                await navigator.share({ title: t("share your referral code to target users"), text: message });
            } catch { /* user cancelled */ }
        } else {
            await navigator.clipboard.writeText(message);
            toast.success("Link disalin ke clipboard");
        }
    }, [user.referralCode, t]);

    const handleReferralSubmit = useCallback(async (code: string) => {
        try {
            const { data: res } = await storeReferralCode(token, { referral_code: code });
            if (res?.data) {
                setUser({ ...res.data, isReferred: true });
                toast.success(t("success.referral_code"));
                setTimeout(() => {
                    toast.info(t("you will receive a bonus after collecting at least 800 green coins"));
                }, 3500);
                setShowModal(false);
            }
        } catch (err: any) {
            const message = err?.data?.message ?? err?.message ?? "Terjadi kesalahan";
            toast.error(message);
            throw err;
        }
    }, [token, t]);

    return (
        <div className="flex flex-col gap-6 w-full">
            <Breadcrumbs
                title="Dashboard"
                subtitle={[
                    { title: "Profil", href: "/user/profile" },
                    { title: "Referral Code", href: "/user/profile/referral" },
                ]}
                href="/user"
            />

            <div className="bg-white rounded-2xl shadow-sm overflow-hidden">
                <div className="flex flex-col items-center py-10 px-6 bg-linear-to-b from-primary-50 to-white">
                    <div className="w-24 h-24 rounded-full bg-primary-100 flex items-center justify-center mb-4!">
                        <Ticket className="w-12 h-12 text-primary-500" />
                    </div>
                    <p className="text-base font-semibold text-slate-700 text-center">
                        {t("share your referral code to target users")}
                    </p>
                </div>

                <div className="mx-6! mb-4! border border-slate-100 rounded-2xl flex items-end p-5 gap-4">
                    <div className="flex-1 min-w-0">
                        <p className="text-xs text-slate-400 capitalize mb-1!">{t("your referral code")}</p>
                        <p className="text-2xl font-bold text-slate-800 tracking-widest">
                            {user.referralCode ?? "—"}
                        </p>
                    </div>
                    <button
                        onClick={copyToClipboard}
                        className={`flex items-center gap-1.5 px-4 py-2 rounded-full border text-sm font-medium transition-all cursor-pointer shrink-0
                            ${copied
                                ? "border-green-500 text-green-600 bg-green-50"
                                : "border-primary-500 text-primary-500 hover:bg-primary-50"}`}
                    >
                        {copied ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
                        {copied ? "Tersalin" : t("copy")}
                    </button>
                </div>

                <div className="mx-6! mb-5! p-3 bg-yellow-50 border border-yellow-300 rounded-xl">
                    <p className="text-xs font-medium text-yellow-800">
                        {t("Referral points will be credited after your friend claims their coins at minute 60")}
                    </p>
                </div>

                <div className="px-6 pb-4 flex flex-col gap-3">
                    <button
                        onClick={shareReferralCode}
                        className="w-full flex items-center justify-center gap-2 py-4 rounded-full bg-primary-500 text-white font-semibold text-sm hover:bg-primary-600 transition-all cursor-pointer"
                    >
                        <Share2 className="w-4 h-4" />
                        {t("share code")}
                    </button>

                    {!user.isReferred && (
                        <button
                            onClick={() => setShowModal(true)}
                            className="w-full py-4 rounded-full border-2 border-primary-500 text-primary-500 font-semibold text-sm hover:bg-primary-50 transition-all cursor-pointer capitalize"
                        >
                            {t("enter your friend's referral code")}
                        </button>
                    )}
                </div>
            </div>

            <div className="bg-white rounded-2xl shadow-sm p-6">
                <div className="flex items-center gap-2 mb-5!">
                    <Gift className="w-5 h-5 text-primary-500" />
                    <p className="font-semibold text-base text-slate-800 capitalize">
                        {t("how to use referral code")}
                    </p>
                </div>
                <div className="flex flex-col gap-4">
                    {steps.map((step, index) => (
                        <div key={index} className="flex items-start gap-4">
                            <div className="w-6 h-6 rounded-full bg-slate-800 flex items-center justify-center shrink-0 mt-0.5!">
                                <span className="text-xs font-bold text-white">{index + 1}</span>
                            </div>
                            <p className="text-sm font-medium text-slate-700 leading-relaxed flex-1">
                                {step}
                            </p>
                        </div>
                    ))}
                </div>
            </div>

            <ReferralInputModal
                open={showModal}
                onSubmit={handleReferralSubmit}
                onClose={() => setShowModal(false)}
            />
        </div>
    );
}