"use client";

import AddCard from "@/components/common/addCard/AddCard";
import { NewsItem } from "@/interface/post";
import CopyIcon from "@/public/icons/CopyIcon";
import FacebookIcon from "@/public/icons/FacebookIcon";
import WhatsAppIcon from "@/public/icons/WhatsAppIcon";
import ThreeDotsLoader from "@/ui/threeDotsLoader/ThreeDotsLoader";
import fetcher from "@/utils/fetcher";
import timestampToBangleDateWithTime from "@/utils/timestampToBangleDateWithTime";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import {
    FacebookShareButton,
    TwitterShareButton,
    WhatsappShareButton,
} from "react-share";
import useSWR from "swr";
import add1 from "/public/images/add1.png";
import SearchPageSkeleton from "@/components/skeleton/SearchPageSkeleton";
import Spin from "@/ui/spin/Spin";
import AdsComponent from "@/components/common/googleAds/GoogleAds";

export default function LatestNewsPage() {
    const [currentUrl, setCurrentUrl] = useState("");
    // const [pageNumber, setPageNumber] = useState(0);
    // const [isLoadingMore, setIsLoadingMore] = useState(false);

    const {
        data,
        error,
        isLoading,
    }: { data: any; error: any; isLoading: boolean } = useSWR(
        "/home-page",
        fetcher
    );
console.log(data,"data")
    useEffect(() => {
        // {(pageNumber > 0) && setIsLoadingMore (true)}
        setCurrentUrl(window.location.href);
    }, []);

    if (error) return <div>There was an Error!</div>;

    if (isLoading) return <SearchPageSkeleton />;

    // ✅ Extracting only video posts from all categories
    // const itemsPerPage = 3
    // const videoPosts = data?.newsByCategory
    //     ?.flatMap((category: any) => category.post) // Get all posts from each category
    //     ?.filter((post: NewsItem) => post.video); // Keep only video posts
    // const totalPages = Math.ceil(videoPosts.length / itemsPerPage);

    return (
        <section className="pt-[40px]">

            <div className="container px-5 md:[35px] mx-auto">
                <div className="container flex items-center justify-center px-4 sm:px-[60px] md:px-[36px] lg:px-[36px] mx-auto">
                    <div
                        className="w-full bg-[#f9f9f9] p-2 text-center mt-5"
                        style={{ minWidth: "300px" }} // Add this
                    >
                        <AdsComponent
                            adSlot="1431883232"
                            style={{
                                display: "block",
                                minHeight: "90px",
                                width: "100%",
                                textAlign: "center",
                            }}
                        />
                    </div>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-12 gap-6">
                    <div className="col-span-12">
                        <Link className="block w-fit text-[16px] pb-[25px]" href="/">
                            <h1 className="block text-[var(--gray-1)] dark:text-[var(--slate)]">
                                <Link className="hover:text-[#B42424]" href="/">Home</Link> / <span className="text-[#B42424]">Videos</span>
                            </h1>
                        </Link>
                        <div className="border-b-[2px] mb-3 ">
                            <h1 className="text-xl md:text-2xl font-bold text-[var(--primary)] dark:text-[var(--primary)]">
                                Latest Videos
                            </h1>
                        </div>
                    </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-12 gap-6">
                    <div className="col-span-12">
                        <div className="flex flex-col pb-6">
                            {data?.videoCategory.length > 0 ? (
                                data?.videoCategory?.map((itm: NewsItem) => {
                                    const { news_id, title, image_thumb, category, encode_titl, youtube_url } = itm;

                                    return (
                                        <div
                                            key={news_id}
                                            className="mb-6 last:mb-0 relative after:content-[''] after:absolute after:-bottom-4 after:left-0 after:w-full after:h-[1px] after:bg-[#D6D6D6] last-of-type:after:hidden
                                            last:after:hidden"
                                        >
                                            <Link className="group" href={youtube_url}>
                                            {/* <Link className="group" href={`/${category.toLowerCase()}/${encode_titl}`}> */}
                                                <div className="overflow-hidden rounded-[5px] float-left relative">
                                                    <iframe
                                                        className="w-[128px] h-[86px] lg:w-[110px] lg:h-[75px] xl:w-[128px] xl:h-[72px] object-cover group-hover:scale-105 duration-700 ease-out"
                                                        src={youtube_url}
                                                        title="Video"
                                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                                    ></iframe>
                                                </div>
                                                <div>
                                                    <h3 className="text-[16px] text-[var(--dark)] px-[16px] dark:text-white line-clamp-2">
                                                        {title}
                                                    </h3>
                                                </div>
                                            </Link>


                                        </div>


                                    );
                                })
                            ) : (
                                <p className="text-center text-gray-500">No videos found.</p>
                            )}
                            <div className="container flex items-center justify-center  mx-auto">
                                <div
                                    className="w-full bg-[#f9f9f9] p-2 text-center mt-5"
                                    style={{ minWidth: "300px" }} // Add this
                                >
                                    <AdsComponent
                                        adSlot="7742920966"
                                        style={{
                                            display: "block",
                                            minHeight: "90px",
                                            width: "100%",
                                            textAlign: "center",
                                        }}
                                    />
                                </div>
                            </div>

                        </div>
                        {/* <div className="flex justify-center">
                            <button className="text-[#B42424] bg-transparent border border-[#B42424] px-4 py-2 rounded-full hover:bg-[#B42424] hover:text-white transition duration-300"
                                disabled={pageNumber + 1 >= totalPages}
                                onClick={() => setPageNumber((prev) => prev + 1 )}>
                                See More <span className="text-lg tranform -rotate-90">»</span>
                                {isLoadingMore && <Spin clss="w-7 h-7" />}
                            </button>
                        </div> */}
                    </div>
                </div>
            </div>
        </section>
    );
}