import Navbar from '../components/Navbar.jsx';
import HeroImage from '../assets/img/hero.png';
import Recommendations from "../components/Recommendations.jsx";
import {useState, useEffect} from "react";
import { useAuth } from '../contexts/AuthContext';
import TopCreators from "../components/TopCreators.jsx";
import TrendingVideos from "../components/TrendingVideos.jsx";
import { getRecommendations, getTrendingVideos, getTopCreators } from '../services/recommendation.service.js';
import { useNavigate } from 'react-router-dom';
import SeeLater from "../components/SeeLater.jsx";
import {getSeeLater} from "../services/playlist.service.js";

export default function Home() {
    const { isAuthenticated, user } = useAuth();
    const [recommendations, setRecommendations] = useState([]);
    const [loading, setLoading] = useState(true);
    const [topCreators, setTopCreators] = useState([]);
    const [trendingVideos, setTrendingVideos] = useState([]);
    const [seeLaterVideos, setSeeLaterVideos] = useState([]);
    const [alerts, setAlerts] = useState([]);

    const navigate = useNavigate();

    useEffect(() => {
        const fetchData = async () => {
            if (isAuthenticated) {
                const token = localStorage.getItem('token');
                try {
                    setRecommendations(await getRecommendations(token, addAlert));
                } finally {
                    setLoading(false);
                }
            } else {
                try {
                    setRecommendations(await getRecommendations(null, addAlert));
                } finally {
                    setLoading(false);
                }
            }

            try {
                setTrendingVideos(await getTrendingVideos(addAlert));
            } finally {
                setLoading(false);
            }

            if (isAuthenticated) {
                try {
                    const token = localStorage.getItem('token');
                    setSeeLaterVideos(await getSeeLater(token, addAlert));
                } finally {
                    setLoading(false);
                }
            } else {
                try {
                    setTopCreators(await getTopCreators(addAlert));
                } finally {
                    setLoading(false);
                }
            }

        };
        fetchData();
    }, []);

    const addAlert = (type, message) => {
        const newAlert = { type, message, id: Date.now() };
        setAlerts([...alerts, newAlert]);
    };

    const onCloseAlert = (alertToRemove) => {
        setAlerts(alerts.filter(alert => alert !== alertToRemove));
    };

    return (
        <div className=" lg:min-w-screen lg:min-h-screen  bg-linear-to-br from-left-gradient to-right-gradient">
            <Navbar isSearchPage={false} />
            
            <main className=" px-5 lg:px-36">

                {/* Hero section */}
                <div className="flex flex-col items-center w-full pt-[128px] lg:pt-[304px]">
                    <img src={HeroImage} alt="" className=" w-1700/1920 lg:w-1046/1920" />

                    {isAuthenticated ? (
                        <h1 className="font-montserrat text-4xl lg:text-8xl font-black w-1200/1920 text-center text-white -translate-y-1/2">
                            Bienvenue {user?.username} !
                        </h1>
                    ) : (
                        <>
                            <h1 className="font-montserrat text-4xl lg:text-8xl font-black w-1200/1920 text-center text-white -translate-y-1/2">
                                Regarder des vidéos comme jamais auparavant
                            </h1>


                            <div className="flex justify-center gap-10 -translate-y-[100px] mt-10">
                                <button className="bg-white text-black font-montserrat p-3 rounded-sm text-xl lg:text-2xl font-bold">
                                    <a href="/login">
                                        <p>Se connecter</p>
                                    </a>
                                </button>
                                <button className="bg-primary p-3 rounded-sm text-white font-montserrat text-xl lg:text-2xl font-bold cursor-pointer">
                                    <a href="/register">
                                        <p>Créer un compte</p>
                                    </a>
                                </button>
                            </div>


                        </>
                    )}
                </div>

                {/* Recommendations section */}
                <Recommendations videos={recommendations} />

                {/* Top Creators section */}

                {
                    isAuthenticated ? (
                        <SeeLater videos={seeLaterVideos} />
                    ) : (
                        <TopCreators creators={topCreators} navigate={navigate} />
                    )
                }



                {/* Trending Videos section */}
                <TrendingVideos videos={trendingVideos} />
            </main>

        </div>
    );
}