"use client";

import { useEffect, useState } from "react";
import { getUserHome } from "../lib/auth";
import HomeBanner from "../components/homepage/HomeBanner";
import BlogSection from "../components/homepage/BlogSection";
import ProductCategory from "../components/homepage/ProductCategory";
import NewsSection from "../components/homepage/NewsSection";
import VideoSection from "../components/homepage/VideoSection";
import Header from "../components/layout/Header";
import Footer from "../components/layout/Footer";
import AstrologerList from "../components/dashboard/AstrologerList";
import { getAstrologers } from "../lib/auth";


export default function Dashboard() {
  const [loading, setLoading] = useState(true);
  const [astrologers, setAstrologers] = useState<any[]>([]);

  const [homeData, setHomeData] = useState<any>({
    banner: [],
    blog: [],
    productCategory: [],
    astrotalkInNews: [],
    astrologyVideo: [],
    mySessions: [],
    astrologers: [],
    topOrders: [],
  });

  useEffect(() => {
    const init = async () => {
      setLoading(true);

      await Promise.all([
        loadHome(),
        loadData(),
      ]);

      setLoading(false);
    };

    init();
  }, []);

  const loadHome = async () => {
    try {
      
      const token = localStorage.getItem("token");

        const response = await getUserHome(token!);

        setHomeData(response);
    } catch (err) {
      console.log(err);
    }
  };

  const loadData = async () => {
    try {
      const token = localStorage.getItem("token");

      if (!token) return;

      const response = await getAstrologers(token);

      if (response.status === 200) {
        setAstrologers(response.recordList || []);
      }
    } catch (err) {
      console.log(err);
    }
  };

  if (loading)
      return <div className="text-center py-5">Loading...</div>;

  return (
    <>
    <Header />
    <HomeBanner banners={homeData.banner} />
    <div className="container py-4">
      <AstrologerList astrologers={astrologers} />

      <BlogSection blogs={homeData.blog} />

      <ProductCategory products={homeData.productCategory} />

      <NewsSection news={homeData.astrotalkInNews} />

      <VideoSection videos={homeData.astrologyVideo} />

    </div>
    <Footer />
    </>
  );
}