"use client";

import { genres } from "@/data/genre";
import { useRouterNavigation } from "@/hooks/useRouterNavigation";
import { saveOnboarding } from "@/libs/cookies/onboarding";
import { Onboarding } from "@/models/onboarding";
import Image from "next/image";
import { useCallback, useEffect, useState } from "react";
import Age from "./age";
import Gender from "./gender";
import Genre from "./genre";

const TOTAL_STEPS = 3;

const StepForm = ({ onComplete }: { onComplete?: () => void } = {}) => {
    const { navigate } = useRouterNavigation();
    const [selected, setSelected] = useState<Onboarding>({
        sex: "",
        interstedGenre: [],
        ageRange: null
    });
    const [step, setStep] = useState(1);

    const nextStep = useCallback(() => {
        setStep((prev) => Math.min(prev + 1, TOTAL_STEPS));
    }, []);

    const onConfirm = useCallback(() => {
        if (!selected.interstedGenre.length) {
            alert("Pilih setidaknya satu genre sebelum melanjutkan.");
            return;
        }

        saveOnboarding(selected);

        if (onComplete) {
            onComplete();
        } else {
            navigate("/");
        }
    }, [selected.interstedGenre, onComplete]);

    useEffect(() => {
        setStep((current) => {
            if (
                selected?.sex &&
                selected?.ageRange === null &&
                selected?.interstedGenre.length === 0
            )
                return 2;
            else if (
                selected?.sex &&
                selected?.ageRange &&
                selected?.interstedGenre.length === 0
            )
                return 3;
            else return current;
        });
    }, []);

    return (
        <div className="flex flex-col items-center gap-6">
            <Image
                src="/assets/Main/Logo/logo kutubuku.png"
                alt="kutubuku #dikit2jadibukit"
                width={200}
                height={100}
                priority
            />
            <div className="bg-white rounded-xl shadow-md w-full max-w-xl flex flex-col p-10 gap-5">
                <div className="flex gap-2">
                    {[1, 2, 3].map((num) => {
                        const canNavigate = num <= step;
                        return (
                            <button
                                key={num}
                                type="button"
                                disabled={!canNavigate}
                                onClick={() => setStep(num)}
                                className={`h-1 flex-1 rounded-full transition-colors 
            ${canNavigate
                                        ? "bg-primary-300 cursor-pointer"
                                        : "bg-[#E0E0E0] cursor-not-allowed"
                                    }`}
                            />
                        );
                    })}
                </div>

                {step === 1 && <Gender nextStep={nextStep} selected={selected} setSelected={setSelected} />}
                {step === 2 && <Age nextStep={nextStep} selected={selected} setSelected={setSelected} />}
                {step === 3 && <Genre genres={genres} onConfirm={onConfirm} selected={selected} setSelected={setSelected} />}
            </div>
        </div>
    );
};

export default StepForm;