import AddCard from "@/components/common/addCard/AddCard";
import AdsComponent from "@/components/common/googleAds/GoogleAds";
import { NewsItem } from "@/interface/post";
import { id } from "date-fns/locale";
import Image from "next/image";
import Link from "next/link";
import { useState } from "react";
interface TopNewsProps {
  data: NewsItem[];
  sideData: NewsItem[];
  ads?: any;
}

const TopNews = ({ data, ads, sideData }: TopNewsProps) => {
  const adsSlot1 = "1431883232"
  const adsSlot2 = "8681432265"
  const [hovered, setHovered] = useState<number | null>(null);



  // const playlistUrl = "https://www.youtube.com/embed?listType=Playlist&list=UUyR26TGeXEs11KNoC4KgTTw";
  // const autoplayUrl = `${playlistUrl}&autoplay=1&mute=1`;

  const getYoutubeEmbedUrl = (
    url: string,

    { autoplay = false, mute = true }: { autoplay?: boolean; mute?: boolean }
  ) => {
    if (!url) return "";

    const videoId =
      url.includes("embed")
        ? url.split("/embed/")[1]?.split("?")[0]
        : url.split("v=")[1]?.split("&")[0];

    const params = new URLSearchParams({
      autoplay: autoplay ? "1" : "0",
      mute: mute ? "1" : "0",
      controls: "1",
      rel: "0",
    });

    return `https://www.youtube.com/embed/${videoId}?${params.toString()}`;
  };

  console.log(sideData, "sideData")




  // const videoPosts = sideData?.newsByCategory
  //   ?.flatMap((category: any) => category.post) // Get all posts from each category
  // ?.filter((post: NewsItem) => post.video)


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

      <div className="container px-4 mx-auto">

        <div className="grid grid-cols-1 md:grid-cols-12 gap-6 relative after:bg-[var(--border-color)] dark:after:bg-[var(--border-dark)]">

          <div className={`col-span-12 relative after:bg-[var(--border-color)] dark:after:bg-[var(--border-dark)]`}>

            <div className="grid grid-cols-1 md:grid-cols-12 gap-6">
              <div className="col-span-12 md:col-span-12 lg:col-span-6 xl:col-span-6 relative after:bg-[var(--border-color)] dark:after:bg-[var(--border-dark)] mx-5 lg:ml-5 xl:ml-5 lg:mr-0 xl:mr-0 ">
                {/* <div className="border-[#B42424] dark:border-[#B42424] border-b-[5px] mb-3 pb-1"></div>
<div className="flex items-center justify-start">
<Link href={`/${slug}`}>
<h2 className="category-text"><b>{category_name}</b></h2>
</Link>
 
</div> */}

                {data?.slice(0, 1)?.map((item, i) => {
                  const {
                    category_name,
                    image_large,
                    post_title,
                    stitle,
                    news_id,
                    category,
                    encode_titl,
                    post_date,
                  } = item || {};
                  return (
                    <div key={i} className="-mx-4 md:px-4">
                      <Link
                        className="group flex flex-col gap-0 md:flex-row md:gap-3 lg:flex-col lg:gap-0"
                        href={`/${category.toLocaleLowerCase()}/${encode_titl}`}
                      >
                        <div className="overflow-hidden rounded-[5px] w-full md:w-full lg:w-full relative">
                          <div>
                            <Image
                              alt={post_title}
                              width={560}
                              height={393}
                              decoding="async"
                              className="w-full h-auto duration-700 ease-out transform group-hover:scale-105 "
                              src={image_large}
                              loading="lazy"
                            />
                          </div>
                          <div className="absolute rounded-[5px] bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-black/100 via-black/20 text-white flex items-end px-3 py-5">
                            <h3 className="text-sm  md:text-[16px] font-normal ">{post_title}</h3>
                          </div>
                        </div>
                      </Link>
                      <div className="w-auto relative">
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-[15px] mb-[35px] pt-[21px]">
                          {data?.slice(1, 4)?.map((itm, i) => {
                            const {
                              post_title,
                              image_large,
                              image_thumb,
                              post_date,
                              stitle,
                              category_name,
                              news_id,
                              category,
                              encode_titl,
                            } = itm || {};
                            return (
                              <div
                                key={i}
                                className="relative rounded-[5px] bg-[#EFEFEF] dark:bg-black"
                              >
                                <Link
                                  className="group"
                                  href={`/${category.toLocaleLowerCase()}/${encode_titl}`}
                                >
                                  <div className="overflow-hidden rounded-[5px] relative float-left">

                                    <Image
                                      alt={post_title}
                                      width={330}
                                      height={186}
                                      decoding="async"
                                      className="w-[129px] h-auto ml-3 my-3 md:ml-0 md:my-0 rounded-[5px] md:w-[350px] lg:w-[250px] lg:h-[95px] xl:w-[223px] xl:h-[148px] object-cover duration-700 ease-out transform group-hover:scale-105"
                                      src={image_thumb}
                                      loading="lazy"
                                    />

                                  </div>
                                  <h2 className="text-sm px-3 sm:px-[10px] md:px-1 lg:px-1 pt-[10px] md:pt-[12px] md:my-[12px] lg:pt-[12px] lg:my-[12px] xl:pt-[12px] xl:my-[12px] text-[var(--dark)] dark:text-white line-clamp-2 overflow-hidden">
                                    {post_title}
                                  </h2>
                                  {/* <p className="hidden lg:block">
<span className="text-[var(--gray-2)] dark:text-[var(--gray-3)] mt-2 text-base line-clamp-2">
{stitle}
</span>
</p> */}
                                  {/* <div className="text-sm pl-5 text-[var(--dark)] dark:text-white line-clamp-2">
<TimeBefore title={post_date} />
</div> */}
                                </Link>
                              </div>
                            );
                          })}
                        </div>
                      </div>
                      <div className="block">
                        {/* <Link
                          // className="group flex flex-col gap-0 md:flex-row md:gap-3 lg:flex-col lg:gap-0"
                          href={`/latest-news`}>
                          <button className="text-[#B42424] bg-transparent border border-[#B42424] px-4 py-2 rounded-full hover:bg-[#B42424] hover:text-white transition duration-300">
                            View More <span className="text-lg">»</span>
                          </button>
                        </Link> */}
                      </div>
                    </div>
                  );
                })}
              </div>
              <div className="col-span-12 md:col-span-12 lg:col-span-6 xl:col-span-6 relative after:bg-[var(--border-color)] dark:after:bg-[var(--border-dark)] mx-5 lg:mr-5 xl:mr-5 lg:ml-0 xl:ml-0 ">
                {/* <div className="border-[#B42424] dark:border-[#B42424] border-b-[5px] mb-3 pb-1"></div>
<div className="flex items-center justify-start">
<Link href={`/${slug}`}>
<h2 className="category-text"><b>{category_name}</b></h2>
</Link>
</div> */}
                {/* {data?.slice(4, 5)?.map((item, i) => {
                  const {
                    category_name,
                    image_large,
                    post_title,
                    stitle,
                    news_id,
                    category,
                    encode_titl,
                    post_date,
                    video,
                  } = item || {};
                  return ( */}




                <div className="-mx-4 md:px-4">
                  {/* <Link
                        className={`${!ads?.home_12 ? "group flex flex-col gap-0 md:flex-row md:gap-3 lg:flex-col lg:h-[285px] xl:h-[348px] lg:gap-0" : "group flex flex-col gap-0 md:flex-row md:gap-3 lg:flex-col lg:h-[140px] xl:h-[242px] lg:gap-0"}`}
                        href={`/${category.toLocaleLowerCase()}/${encode_titl}`}
                      > */}
                  {sideData?.slice(0, 1).map((itm: NewsItem) => {
                    const { news_id, title, youtube_url, id } = itm;

                    return (
                      <div key={news_id} className="">
                        <div className="w-full aspect-video rounded-[5px] overflow-hidden">
                          <iframe
                            className="w-full h-full"
                            src={getYoutubeEmbedUrl(youtube_url, {
                              autoplay: true,
                              mute: true,
                            })}
                            title={title || "Video"}
                            allow="autoplay; encrypted-media; picture-in-picture"
                            frameBorder={0}
                          />
                        </div>
                      </div>
                    );
                  })}



                  {/* <div className="w-full md:w-1/2 lg:w-full">
<h3 className="text-2xl left-9 mx-4 md:mx-0 text-[var(--dark)] mt-2 md:mt-0 lg:mt-2 mb-0 md:mb-2 dark:text-white font-semibold">
{post_title}
</h3>
<p className="hidden md:block text-base text-[var(--gray-2)] dark:text-[var(--gray-3)]">
<span className="line-clamp-2">{stitle || ""}</span>
</p>
<TimeBefore title={post_date} clss="ml-4 md:ml-0" />
</div> */}
                  {/* </Link> */}

                  <div className="w-auto relative">
                    <div className="flex flex-col mb-[35px] pt-[21px]">
                      {/* {sideData > 0 && */}
                      {sideData?.slice(1, 4)?.map((itm: NewsItem) => {
                        const { news_id, title, image_thumb, category, encode_titl, youtube_url, id, thumbnail } = itm;

                        return (
                          <div
                            key={news_id}
                            className="mb-[21px] last:mb-0 relative after:bg-[var(--border-color)] dark:after:bg-[var(--border-dark)]"
                            onMouseEnter={() => setHovered(id)}
                            onMouseLeave={() => setHovered(null)}
                          >
                            <Link
                              className="group"
                              href={youtube_url}
                            >
                              <div
                                className="md:ml-0 xl:mb-0 overflow-hidden rounded-[5px] float-left relative w-[124px] h-[86px] sm:w-[154px] sm:h-[107px] lg:w-[110px] lg:h-[52.5px] xl:w-[143px] xl:h-[76.5px]"
                              >
                                <div className="relative w-full h-full">
                                  <div className={hovered === id ? "hidden" : "flex justify-center items-center"}>
                                    <img
                                      className="w-full h-full object-fit duration-700 ease-out"
                                      src={thumbnail}
                                      alt=""
                                    />
                                    <img
                                      className="absolute inset-0 m-auto w-full h-full pointer-events-none"
                                      src="/images/ytlogo.png"
                                      alt="YouTube"
                                    />
                                  </div>

                                  <iframe
                                    className={`absolute inset-0 w-full h-full object-cover duration-700 ease-out ${hovered === id ? "block" : "hidden"
                                      }`}
                                    src={getYoutubeEmbedUrl(youtube_url, {
                                      autoplay: hovered === id,
                                      mute: true,
                                    })}
                                    title={title}
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                  />
                                </div>
                              </div>

                              <h3 className="text-sm text-[#5A5A5A] px-[16px] dark:text-white line-clamp-2 ">
                                {title}
                              </h3>
                            </Link>
                          </div>
                        );
                      })}


                    </div>
                  </div>
                  <div className="block">
                    {/* <Link
// className="group flex flex-col gap-0 md:flex-row md:gap-3 lg:flex-col lg:gap-0"
href={`/${slug?.toLowerCase()}`}>
<button className="text-[#B42424] bg-transparent border border-[#B42424] px-4 py-2 rounded-full hover:bg-[#B42424] hover:text-white transition duration-300">
View More <span className="text-lg">»</span>
</button>
</Link> */}
                  </div>
                </div>

              </div>
            </div>
            {/* <Link
                          // className="group flex flex-col gap-0 md:flex-row md:gap-3 lg:flex-col lg:gap-0"
                          href={`/latest-news`}>
                          <button className="text-[#B42424] bg-transparent border border-[#B42424] px-4 py-2 rounded-full hover:bg-[#B42424] hover:text-white transition duration-300">
                            View More <span className="text-lg">»</span>
                          </button>
                        </Link> */}
          </div>

          {/* two news content */}

          {/* sidebar home ads 12 here */}
          {/* {(ads?.home_12 || ads?.home_13) && (
            <div className="col-span-12 md:col-span-12 lg:col-span-4 xl:col-span-3 relative after:bg-[var(--border-color)] after:absolute after:w-full after:h-[1px] after:-bottom-3 after:right-0 after:last:h-0 md:after:w-[1px] md:after:h-full md:after:top-0 md:after:-right-3 md:after:last:w-0 dark:after:bg-[var(--border-dark)]">
              
              <div className="w-full flex flex-row lg:flex-col lg:h-full lg:flex lg:items-center xl:justify-start lg:justify-center gap-4">
                {ads?.home_12 && (
                  <div className="w-full flex items-center justify-center">
                    <div className="h-[250px]">
                      <AddCard imgPath={ads?.home_12} />

                    </div>
                  </div>
                )}
                {ads?.home_13 && (
                  <div className="w-full flex items-center justify-center hidden sm:flex lg:hidden xl:flex ">
                    <div className="h-[250px]">
                      <AddCard imgPath={ads?.home_13} />
                    </div>
                  </div>
                )}
              </div>
            </div>
            
          )} */}
          {/* custom ads */}

          {/* sidebar home ads 12 here */}
          {/* Google ads */}


          {(adsSlot1 || adsSlot2) && (
            <div className="col-span-12 w-full lg:h-0 lg:opacity-0 lg:pointer-events-none lg:overflow-hidden">

              <div className="w-full flex flex-row lg:flex-col lg:h-full lg:flex lg:items-center xl:justify-start lg:justify-center gap-4">
                {adsSlot1 && (
                  <div className="bg-[#f9f9f9] w-full flex items-center justify-center">
                    <div className=" h-[250px] min-w-[300px] w-full">
                      <AdsComponent adSlot={adsSlot1} style={{
                        display: "block",
                        width: "100%",
                        minHeight: "251px",
                        textAlign: "center",
                        // border: "1px dashed red"
                      }}
                      />


                    </div>
                  </div>
                )}
                {adsSlot2 && (
                  <div className="bg-[#f9f9f9]  w-full flex items-center justify-center hidden sm:flex  ">
                    <div className="h-[250px] min-w-[300px] w-full">

                      <AdsComponent adSlot={adsSlot2} style={{
                        display: "block",
                        width: "100%",
                        minHeight: "251px",
                        textAlign: "center",

                      }}
                      />

                    </div>
                  </div>
                )}
              </div>
            </div>

          )}

          {/* Google ads */}

          {/* sidebar section */}
          {/* <div className="md:mt-3 mb-7 md:mb-0">
<div className="border-[var(--border-color)] dark:border-[var(--border-dark)] border-b-[2px] mb-3 pb-1">
<div className="flex items-center justify-between">
<Link href={`/${slug}`}>
<h2 className="category-text">{category_name}</h2>
</Link>
</div>
</div>
{post?.slice(1, 3)?.map((itm) => {
const {
category_name,
image_thumb,
post_title,
stitle,
news_id,
category,
encode_titl,
post_by_name,
post_by_image,
} = itm || {};
return (
<Link
key={news_id}
className="flex gap-3 group"
href={`/${category.toLocaleLowerCase()}/${encode_titl}`}
>
<div>
<Image
alt={post_by_name}
width={100}
height={100}
decoding="async"
className="w-24 md:w-36 lg:w-24 rounded-full"
src={post_by_image}
loading="lazy"
/>
</div>
<div>
<h2 className="text-lg text-[var(--dark)] dark:text-white ">
{post_title}
</h2>
<p className="font-normal mt-2 text-gray-500 dark:text-gray-300">
{post_by_name}
</p>
</div>
</Link>
);
})}
</div> */}
          {/* sidebar section */}

        </div>
        {/* 1st row od 3 content */}

        {/* <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-6 relative after:bg-[var(--border-color)] after:absolute after:w-full after:h-[1px] after:right-0 after:left-0 after:-bottom-3 after:[&>*]:absolute after:[&>*]:bg-[var(--border-color)] after:[&>*]:w-full after:[&>*]:h-[1px] after:[&>*]:-bottom-3 after:[&>*]:left-0 md:after:[&>*]:w-[1px] md:after:[&>*]:h-full md:after:[&>*]:top-0 md:after:[&>*]:-left-3 md:after:[&>*:nth-child(3)]:w-0 md:after:[&>*:nth-child(4)]:w-0 md:after:[&>*:nth-child(6)]:w-0 md:after:first:[&>*]:w-0 lg:after:[&>*:nth-child(3)]:w-[1px] lg:after:[&>*:nth-child(4)]:w-[1px] lg:after:[&>*:nth-child(6)]:w-[1px] lg:after:[&>*:nth-child(5)]:w-0 dark:after:[&>*]:bg-[var(--border-dark)] md:before:[&>*]:absolute md:before:[&>*]:bg-[var(--border-color)] md:before:[&>*]:w-full md:before:[&>*]:h-[1px] md:before:[&>*]:-bottom-3 md:before:[&>*]:right-0 md:before:[&>*:nth-child(4)]:h-0 lg:before:[&>*:nth-child(n+4)]:h-0 dark:before:[&>*]:bg-[var(--border-dark)] dark:after:bg-[var(--border-dark)]"> */}
        {/* {data?.slice(5, 8)?.map((itm) => {
const {
post_title,
image_thumb,
post_date,
stitle,
category_name,
news_id,
category,
encode_titl,
} = itm || {};
return (
<div key={news_id} className="relative">
<Link
className="group"
href={`/${category.toLocaleLowerCase()}/${encode_titl}`}
>
<div className="ml-2 md:ml-0 lg:ml-2 mb-2 overflow-hidden float-right relative">
<Image
alt={post_title}
width={160}
height={90}
decoding="async"
className="w-[124px] h-auto lg:w-[110px] lg:h-[75px] object-cover group-hover:scale-105 duration-700 ease-out"
src={image_thumb}
loading="lazy"
/>
</div>
<h3 className="text-lg text-[var(--dark)] dark:text-white ">
{post_title}
</h3>
</Link>
<TimeBefore
title={post_date}
// clss="xl:absolute bottom-0"
/>
</div>
);
})} */}
        {/* 1st row od 3 content */}
        {/* <div className="md:col-span-2 md:row-span-2 lg:col-span-1 md:order-1 lg:order-none relative">
<div className="w-full flex items-center justify-center">
<div className="home-right-b h-[250px]">
home ads 13 here
<AddCard imgPath={ads?.home_13} />
</div>
</div>
</div> */}
        {/* 2nd row od 3 content */}
        {/* {data?.slice(8, 12)?.map((itm) => {
const {
post_title,
image_thumb,
post_date,
stitle,
category_name,
news_id,
category,
encode_titl,
} = itm || {};
return (
<div key={news_id} className="relative">
<Link
className="group"
href={`/${category.toLocaleLowerCase()}/${encode_titl}`}
>
<div className="ml-2 md:ml-0 lg:ml-2 mb-2 overflow-hidden float-right relative">
<Image
alt={post_title}
width={160}
height={90}
decoding="async"
className="w-[124px] h-auto lg:w-[110px] lg:h-[75px] object-cover group-hover:scale-105 duration-700 ease-out"
src={image_thumb}
loading="lazy"
/>
</div>
<h3 className="text-lg text-[var(--dark)] dark:text-white ">
{post_title}
</h3>
</Link>
<TimeBefore
title={post_date}
// clss="xl:absolute bottom-0"
clss="ml-4 md:ml-0"
/>
</div>
);
})}
2nd row od 3 content
</div> */}
      </div>
    </section>
  );
};
export default TopNews;