"use client";

import Breadcrumbs from "@/components/user/components/Breadcrumbs";
import { useTranslation } from "@/hooks/useTranslation";
import { getGenre } from "@/libs/axios/modules/genre";
import { updatePreferenceAge, updatePreferenceGenre } from "@/libs/axios/modules/user";
import { AgeRangeModel, GenreModel, UserModel } from "@/models";
import { AnimatePresence, motion } from "framer-motion";
import { ArrowRight, Check, Plus, Search, X } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { toast } from "react-toastify";

type AgeData = {
    title: string;
    start: number;
    end: number;
    description: string;
};

const AGE_OPTIONS: AgeData[] = [
    { title: "5+", start: 5, end: 12, description: "Konten ramah untuk semua usia" },
    { title: "13+", start: 13, end: 17, description: "Konten untuk remaja" },
    { title: "18+", start: 18, end: 100, description: "Konten dewasa" },
];

function AgeModal({
    open, current, onSelect, onClose,
}: {
    open: boolean;
    current?: AgeRangeModel | null;
    onSelect: (age: AgeData) => void;
    onClose: () => void;
}) {
    const [selected, setSelected] = useState<AgeData | undefined>();

    useEffect(() => {
        if (open && current) setSelected(AGE_OPTIONS.find((a) => a.title === current.title));
    }, [open, current]);

    useEffect(() => {
        document.body.style.overflow = open ? "hidden" : "";
        return () => { document.body.style.overflow = ""; };
    }, [open]);

    const onSubmit = () => {
        if (!selected) return;
        onSelect(selected);
        onClose();
    };

    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-end md:items-center justify-center">
                        <motion.div
                            className="bg-white w-full md:max-w-sm md:rounded-3xl rounded-t-3xl overflow-hidden shadow-xl"
                            initial={{ y: "100%" }} animate={{ y: 0 }} exit={{ y: "100%" }}
                            transition={{ type: "spring", stiffness: 300, damping: 30 }}
                        >
                            <div className="px-6 pt-6 pb-4">
                                <h2 className="text-xl font-semibold text-slate-800">Preferensi Usia</h2>
                                <p className="text-sm text-slate-500 mt-0.5">Ini membantu kami menyesuaikan konten yang ditampilkan</p>
                            </div>
                            <div className="px-6 flex flex-col gap-3 pb-4">
                                {AGE_OPTIONS.map((opt) => (
                                    <button
                                        key={opt.title}
                                        onClick={() => setSelected(opt)}
                                        className={`w-full flex items-center justify-between px-5 py-4 rounded-2xl border transition-all cursor-pointer text-left
                                            ${selected?.title === opt.title ? "border-primary-500 bg-primary-50" : "border-slate-100 bg-slate-50 hover:border-slate-200"}`}
                                    >
                                        <div>
                                            <p className={`font-semibold text-base ${selected?.title === opt.title ? "text-primary-600" : "text-slate-800"}`}>{opt.title}</p>
                                            <p className="text-xs text-slate-400 mt-0.5">{opt.description}</p>
                                        </div>
                                        <div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all
                                            ${selected?.title === opt.title ? "border-primary-500 bg-primary-500" : "border-slate-200"}`}>
                                            {selected?.title === opt.title && <div className="w-2 h-2 rounded-full bg-white" />}
                                        </div>
                                    </button>
                                ))}
                            </div>
                            <div className="px-6 pb-6 pt-2">
                                <button
                                    onClick={onSubmit}
                                    disabled={!selected}
                                    className={`w-full py-4 rounded-2xl font-semibold text-sm transition-all
                                        ${selected ? "bg-primary-500 text-white hover:bg-primary-600 cursor-pointer" : "bg-slate-100 text-slate-300 cursor-not-allowed"}`}
                                >
                                    Pilih
                                </button>
                            </div>
                        </motion.div>
                    </div>
                </>
            )}
        </AnimatePresence>
    );
}

function GenreModal({
    open, currentGenres, onSave, onClose,
}: {
    open: boolean;
    currentGenres: GenreModel[];
    onSave: (genres: GenreModel[]) => void;
    onClose: () => void;
}) {
    const { t } = useTranslation();
    const [genres, setGenres] = useState<GenreModel[]>([]);
    const [selected, setSelected] = useState<GenreModel[]>([]);
    const [search, setSearch] = useState("");
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        if (open) { setSelected(currentGenres); fetchGenres(); }
    }, [open]);

    useEffect(() => {
        document.body.style.overflow = open ? "hidden" : "";
        return () => { document.body.style.overflow = ""; };
    }, [open]);

    const fetchGenres = async () => {
        setLoading(true);
        try {
            const { data: res } = await getGenre({ limit: 0 });
            if (res?.data) setGenres(res.data);
        } catch (err) { console.error(err); }
        finally { setLoading(false); }
    };

    const toggleItem = (item: GenreModel) => {
        const exists = selected.find((v) => v.id === item.id);
        if (exists) {
            setSelected(selected.filter((v) => v.id !== item.id));
        } else {
            if (selected.length >= 7) { toast.error("errors.maxLength"); return; }
            setSelected([...selected, item]);
        }
    };

    const filtered = genres.filter((g) => g.title.toLowerCase().includes(search.toLowerCase()));

    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-end md:items-center justify-center">
                        <motion.div
                            className="flex flex-col bg-slate-50 w-full h-full md:rounded-3xl md:max-w-lg md:max-h-[85vh] md:m-auto shadow-xl overflow-hidden"
                            initial={{ y: "100%" }} animate={{ y: 0 }} exit={{ y: "100%" }}
                            transition={{ type: "spring", stiffness: 300, damping: 30 }}
                        >
                            <div className="flex items-center justify-between px-4 py-4 bg-slate-50 shrink-0">
                                <div className="flex items-center gap-2">
                                    <button onClick={onClose} className="w-9 h-9 flex items-center justify-center rounded-xl hover:bg-slate-200 transition-colors cursor-pointer">
                                        <X className="w-5 h-5 text-slate-700" />
                                    </button>
                                    <span className="font-semibold text-lg text-slate-800">Pilih Genre ({selected.length}/7)</span>
                                </div>
                                <button
                                    onClick={() => { if (selected.length > 0) { onSave(selected); onClose(); } }}
                                    disabled={selected.length === 0}
                                    className={`px-5 py-1.5 rounded-full text-sm font-semibold transition-all
                                        ${selected.length > 0 ? "bg-primary-500 text-white hover:bg-primary-600 cursor-pointer" : "bg-slate-200 text-slate-400 cursor-not-allowed"}`}
                                >
                                    Simpan
                                </button>
                            </div>
                            <div className="px-4 pb-3 shrink-0">
                                <div className="flex items-center gap-2 bg-white rounded-xl px-3 py-2.5 border border-slate-100">
                                    <Search className="w-4 h-4 text-slate-400 shrink-0" />
                                    <input
                                        type="text" value={search} onChange={(e) => setSearch(e.target.value)}
                                        placeholder="Cari genre..."
                                        className="flex-1 text-sm text-slate-800 placeholder:text-slate-400 outline-none bg-transparent"
                                    />
                                </div>
                            </div>
                            <div className="flex-1 overflow-y-auto px-4 pb-4">
                                {loading ? (
                                    <div className="flex flex-col gap-2">
                                        {Array.from({ length: 8 }).map((_, i) => <div key={i} className="h-14 bg-slate-100 rounded-2xl animate-pulse" />)}
                                    </div>
                                ) : (
                                    <div className="flex flex-col">
                                        {filtered.map((item) => {
                                            const isSel = !!selected.find((v) => v.id === item.id);
                                            return (
                                                <button key={item.id} onClick={() => toggleItem(item)}
                                                    className={`flex items-center justify-between py-4 border-b cursor-pointer transition-colors text-left ${isSel ? "border-primary-200" : "border-slate-100"}`}
                                                >
                                                    <span className={`text-base font-medium capitalize ${isSel ? "text-primary-600" : "text-slate-800"}`}>{item.title}</span>
                                                    <div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all shrink-0 ${isSel ? "bg-primary-500 border-primary-500" : "border-slate-200"}`}>
                                                        {isSel && <div className="w-2 h-2 rounded-full bg-white" />}
                                                    </div>
                                                </button>
                                            );
                                        })}
                                    </div>
                                )}
                            </div>
                        </motion.div>
                    </div>
                </>
            )}
        </AnimatePresence>
    );
}

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

export default function ProfilePreferencesPage({ token, user: initialUser }: Props) {
    const { t } = useTranslation();

    // local state agar UI update langsung setelah save, tanpa perlu refetch
    const [user, setUser] = useState<UserModel>(initialUser);
    const [showAgeModal, setShowAgeModal] = useState(false);
    const [showGenreModal, setShowGenreModal] = useState(false);

    const updateGenres = useCallback(async (genres: GenreModel[]) => {
        try {
            const { data: res } = await updatePreferenceGenre(token, { genres: genres.map((v) => v.id) });
            if (res?.data) { setUser(res.data); toast.success("Genre preferensi diperbarui"); }
        } catch (err) { console.error(err); toast.error("Gagal memperbarui genre"); }
    }, [token]);

    const updateAge = useCallback(async (age: AgeData) => {
        try {
            const { data: res } = await updatePreferenceAge(token, { age: JSON.stringify(age) });
            if (res?.data) { setUser(res.data); toast.success("Preferensi usia diperbarui"); }
        } catch (err) { console.error(err); toast.error("Gagal memperbarui preferensi usia"); }
    }, [token]);

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

            <div className="bg-white rounded-2xl shadow-sm overflow-hidden">
                <div className="px-6 pt-6 pb-2">
                    <p className="text-xs font-medium text-slate-400 uppercase tracking-wider">{t("age")}</p>
                </div>
                <button
                    onClick={() => setShowAgeModal(true)}
                    className="w-full flex items-center justify-between px-6 py-4 hover:bg-slate-50 transition-colors cursor-pointer"
                >
                    <div className="flex flex-col gap-0.5 text-left">
                        <span className="text-lg font-semibold text-slate-800">
                            {user.preference?.age?.title ?? "Belum dipilih"}
                        </span>
                        {user.preference?.age && (
                            <span className="text-xs text-slate-400">
                                {AGE_OPTIONS.find((a) => a.title === user.preference?.age?.title)?.description}
                            </span>
                        )}
                    </div>
                    <ArrowRight className="w-4 h-4 text-slate-400 shrink-0" />
                </button>
            </div>

            <div className="bg-white rounded-2xl shadow-sm overflow-hidden">
                <div className="px-6 pt-6 pb-3">
                    <p className="text-xs font-medium text-slate-400 uppercase tracking-wider">{t("favorite genre")}</p>
                </div>
                <div className="px-4 pb-6">
                    <div className="flex flex-wrap">
                        {user.preference?.genres?.map((genre, i) => (
                            <div key={i} className="w-1/2 p-1.5">
                                <div className="flex items-center justify-center py-3 px-4 bg-slate-50 border border-slate-100 rounded-3xl gap-2">
                                    <Check className="w-3.5 h-3.5 text-primary-500 shrink-0" />
                                    <span className="text-sm font-medium text-slate-700 capitalize text-center truncate">{genre.title}</span>
                                </div>
                            </div>
                        ))}
                        <div className="w-1/2 p-1.5">
                            <button
                                onClick={() => setShowGenreModal(true)}
                                className="w-full py-3 px-4 bg-slate-50 border border-dashed border-slate-200 rounded-3xl flex items-center justify-center hover:bg-slate-100 hover:border-slate-300 transition-colors cursor-pointer"
                            >
                                <Plus className="w-4 h-4 text-slate-400" />
                            </button>
                        </div>
                    </div>
                    {(!user.preference?.genres || user.preference.genres.length === 0) && (
                        <p className="text-sm text-slate-400 text-center py-4">Belum ada genre yang dipilih</p>
                    )}
                </div>
            </div>

            <AgeModal
                open={showAgeModal}
                current={user.preference?.age}
                onSelect={updateAge}
                onClose={() => setShowAgeModal(false)}
            />
            <GenreModal
                open={showGenreModal}
                currentGenres={user.preference?.genres ?? []}
                onSave={updateGenres}
                onClose={() => setShowGenreModal(false)}
            />
        </div>
    );
}