import { NewsArticle } from "@/interface/post";
import CopyIcon from "@/public/icons/CopyIcon";
import FacebookIcon from "@/public/icons/FacebookIcon";
import WhatsAppIcon from "@/public/icons/WhatsAppIcon";
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 AddCard from "../common/addCard/AddCard";
import LatestNewsHorizontal from "../common/latestNews/LatestNewsHorizontal";
import timestampToEnglishDateWithTime from "@/utils/timestampToBangleDateWithTime";
import LatestNewsVertical from "../common/latestNews/LatestNewsVertical";
import AddBanner from "../common/addBanner/AddBanner";
import elips from "@/public/elips.svg"
import AdsComponent from "../common/googleAds/GoogleAds";

interface Tag {
  tag: string;
}

interface SingleNews {
  id: number;
  title: string;
  stitle: string;
  encode_title: string;
  image_thumb: string;
  image_large: string;
  slug: string;
  news: string;
  video: string;
  category_name: string;
  category: string;
  reporter: string;
  reporter_image: string;
  post_date: string;
  time_stamp: number;
  tags: Tag[];
  relatedPost: NewsArticle[];
  ads?: any;
  end_point?: string;
}

const SingleNewsDetails = ({
  data,
  clss,
  end_point,
}: {
  data: SingleNews;
  clss?: string;
  end_point?: string;
}) => {
  const [currentUrl, setCurrentUrl] = useState("");
  const [hostName, setHostName] = useState("");
  const [copied, setCopied] = useState(false);

  const {
    id,
    title,
    stitle,
    encode_title,
    image_thumb,
    image_large,
    slug,
    news,
    video,
    reporter,
    reporter_image,
    post_date,
    category_name,
    category,
    time_stamp,
    tags,
    relatedPost,
  } = data;

  // console.log(data,"singlePost")
  // split news with <p/>

  useEffect(() => {
    const currentUrl = window.location.href;
    const hostUrl = window.location.host;
    // Scroll to the top of the page

    setHostName(hostUrl);
    setCurrentUrl(currentUrl);
  }, []);

  const autoplay = `${video}&autoplay=1&mute=1`

  const [isHovered, setIsHovered] = useState(false)

  const adsSlot1 = "1431883232"
  const adsSlot2 = "8681432265"
  const adsSlot3 = "8974497186"
  const adsSlot4 = "7742920966"

  return (
    <>
      <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={clss}> */}


        <div className="container px-4 md:px-[37px] lg:px-[38px] xl:px-[40px] mx-auto print:px-0">
          <div className="grid grid-cols-1 md:grid-cols-12 gap-6 print:!block">
            <div className="col-span-12 lg:col-span-8 xl:col-span-9 relative after:bg-[var(--border-color)] dark:after:bg-[var(--border-dark)] print:!col-span-12 print:after:bg-transparent mr-0 lg:mr-[40px] xl:mr-[50px]">
              <article>
                <div className="mb-3">
                  <nav className="print:hidden pb-2">
                    <ol className="w-fit flex items-center gap-1 text-sm mb-[15px] dark:border-[var(--border-dark)]">
                      <li>
                        <Link
                          className="block text-[var(--gray-1)]  dark:text-[var(--slate)]"
                          href={`/${category?.toLowerCase()}`}
                        >
                          {<Link className="hover:text-[#B42424] text-[#CCCCCC]"
                            href="/">Home / </Link>}
                          <span className="hover:text-[#B42424] text-[#CCCCCC]"> {category_name} / </span>  {<Link className="text-[#B42424]" href={`/${title?.toLowerCase()}`}>
                            {title.length > 15 ? `${title.slice(0, 15)}...` : title}
                          </Link>}
                        </Link>
                      </li>
                    </ol>
                  </nav>
                  <h1 className="text-[var(--dark)] text-[20px] md:text-[26px] leading-[40px] lg:leading-[50px] mb-[13px] dark:text-white print:dark:text-[var(--dark)]  print:text-2xl print:mb-2">
                    {title}
                  </h1>
                  <div className="flex">
                    {/* <div className="text-[#7A7373] text-[16px] mb-[27px] ">Published On : {timestampToEnglishDateWithTime(time_stamp)} </div>
                <pre className="text-[#7A7373] text-[14px]"> | </pre> */}
                    <div className="text-[#7A7373] text-[16px] mb-[27px] "> Updated On : {timestampToEnglishDateWithTime(time_stamp)}</div>
                  </div>

                </div>
                <div className="clss "
                  onMouseEnter={() => setIsHovered(true)}
                  onMouseLeave={() => setIsHovered(false)}>
                  {video ? (
                    <iframe
                      className="aspect-video h-auto w-full rounded-[5px]"
                      width={200}
                      height={113}
                      src={autoplay}
                      title={title}
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture rounded-[5px]"
                    ></iframe>
                  ) : (
                    <figure>
                      <Image
                        alt={title}
                        width={1200}
                        height={675}
                        decoding="async"
                        className="w-full h-auto  rounded-t-[5px]"
                        src={image_large}
                      />
                    </figure>
                  )}
                  <div className="w-full h-[50px] bg-[#F0F0F0] py-2 px-4 text-[#7A7373] text-[20px] rounded-b-[5px] text-center">www.newsonewsu.com</div>
                </div>

                <div className="mt-5 flex flex-col md:flex-row  gap-3 items-center justify-start relative after:bg-[var(--border-color)] dark:after:bg-[var(--border-dark)] print:after:bg-transparent">
                  <div className="w-full">
                    <div className="flex flex-row gap-2  items-center text-[var(--dark)] text-sm dark:text-white print:dark:text-[var(--dark)]">
                      <Image
                        alt={title}
                        loading="lazy"
                        width={192}
                        height={192}
                        decoding="async"
                        className="w-9 h-9 rounded-full author-image print:hidden rounded-[5px]"
                        src={elips}
                      />
                      <h1 className="px-3 font-normal text-[16px]">ನ್ಯೂಸೋ ನ್ಯೂಸು ವೆಬ್‌</h1>
                    </div>
                    {/* <div className="flex flex-row gap-2  items-center text-[var(--dark)] text-sm dark:text-white print:dark:text-[var(--dark)]">
                    <Image
                      alt={title}
                      loading="lazy"
                      width={192}
                      height={192}
                      decoding="async"
                      className="w-9 h-9 rounded-full author-image print:hidden rounded-[5px]"
                      src={reporter_image}
                    />
                    <div className="flex pr-1 text-[#7A7373] text-[16px]">
                      <div className="pr-1">{reporter} </div>
                    </div>
                  </div> */}
                  </div>

                  <div className="w-full print:hidden flex items-center whitespace-nowrap  md:justify-end min-h-[40px] md:min-h-[48px] select-none">
                    <h1 className="text-[#7A7373]  dark:text-white" ><pre className="text-[16px]">Share Via  </pre></h1>
                    <div className="flex items-center ">
                      <FacebookShareButton
                        url={`https://${hostName}/${category}/${encode_title}`}
                        // title={title}
                        // quote={stitle}
                        className="flex justify-center cursor-pointer text-xs h-[32px] w-[36px] mr-2 !bg-[var(--slate)] dark:!bg-[var(--gray-1)] dark:!text-white rounded-full items-center border"
                      >
                        <FacebookIcon />
                      </FacebookShareButton>

                      <WhatsappShareButton
                        url={`https://${hostName}/${category}/${encode_title}`}
                        className="flex justify-center cursor-pointer text-xs h-[32px] w-[36px] mr-2 !bg-[var(--slate)] dark:!bg-[var(--gray-1)] dark:!text-white rounded-full items-center border"
                      >
                        <WhatsAppIcon />
                      </WhatsappShareButton>

                      <TwitterShareButton
                        url={`https://${hostName}/${category}/${encode_title}`}
                        // title={title}
                        className="flex justify-center cursor-pointer text-xs h-[32px] w-[36px] mr-2 !bg-[var(--slate)] dark:!bg-[var(--gray-1)] dark:!text-white rounded-full items-center border "
                      >
                        <svg
                          className="w-4 h-4 fill-black dark:fill-white"
                          viewBox="0 0 512 512"
                        >
                          <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
                        </svg>
                      </TwitterShareButton>
                      <div className="relative">
                        <div
                          className={`flex justify-center cursor-pointer text-xs h-[32px] w-[36px] mr-2 rounded-full items-center transition-colors duration-300 ${copied
                            ? "bg-black text-white"
                            : "bg-[var(--slate)] dark:bg-[var(--gray-1)] dark:text-white"
                            }`}
                          onClick={() =>
                            navigator.clipboard.writeText(
                              `https://${hostName}/${category}/${encode_title}`
                            ).then(() => {
                              setCopied(true);
                              setTimeout(() => setCopied(false), 3000); // Reset after 3s
                            })
                          }
                        >
                          <CopyIcon />
                        </div>
                        {copied && (
                          <div className="absolute top-full mt-1 left-1/2 -translate-x-1/2 bg-black text-white text-[10px] px-2 py-1 rounded shadow">
                            Copied!
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                </div>
                <div className="text-[var(--dark)] mt-3 text-xl leading-8 print:leading-7 dark:text-white break-words print:dark:text-[var(--dark)] print:text-base">
                  <div>
                    <strong>{stitle}</strong>

                    <div className="my-ckeditor-content my-3 flex flex-col">
                      <div
                        className="[&>p]:mt-5"
                        dangerouslySetInnerHTML={{ __html: news }}
                      />


                    </div>
                  </div>
                </div>
              </article>

              <div className="print:hidden gap-3 py-3 flex flex-wrap">
                {tags.map((singleTag) => {
                  const { tag } = singleTag;
                  return (
                    <Link
                      key={tag}
                      className="bg-[var(--slate-2)] dark:bg-[var(--gray-2)] text-sm leading-none text-[var(--dark)] p-2 dark:text-white       text-center flex items-center"
                      href={`/topic/${tag}`}
                    >
                      {tag}
                    </Link>
                  );
                })}
              </div>

              <div className="container mx-auto print:hidden">
                <div className="border-[#B42424] dark:border-[#B42424] border-b-[5px] mb-3 pb-1"></div>

                <div className="relative mt-6 mb-6 before:absolute before:bg-[var(--border-color)] after:bg-[var(--border-color)] print:hidden dark:before:bg-[var(--border-color)] dark:after:bg-[var(--border-dark)]">
                  <p className="text-[var(--primary)] text-xl md:text-2xl dark:text-white font-bold">
                    Related News
                  </p>
                </div>

                {/* Latest news here */}
                {/* <LatestNewsHorizontal /> */}
                <div className="grid grid-cols-1 md:grid-cols-12 gap-6 items-start print:hidden dark:after:[&>*]:bg-[var(--border-color)]">
                  {relatedPost?.slice(0, 4)?.map((post) => {
                    const {
                      news_id,
                      post_title,
                      image_thumb,
                      image_alt,
                      category,
                      encode_titl,
                    } = post;

                    return (
                      <div
                        key={news_id}
                        className="col-span-12 lg:col-span-3 relative dark:bg-black "
                      >
                        <Link
                          className="group"
                          href={`/${category.toLocaleLowerCase()}/${encode_titl}`}
                        >
                          <div className="overflow-hidden rounded-[5px] float-left relative">
                            <div>
                              <Image
                                alt={post_title}
                                width={330}
                                height={186}
                                decoding="async"
                                className="w-[124px] h-auto lg:w-full lg:h-auto xl:w-[500px] xl:h-auto object-cover group-hover:scale-105 duration-700 ease-out"
                                src={image_thumb}
                                loading="lazy"
                              />
                            </div>
                          </div>
                          <h2 className="line-clamp-2 text-[16px] left-9 text-[var(--dark)] px-3 sm:px-[10px] md:px-[10px] lg:px-1 lg:pt-2 xl:px-1 xl:pt-2 mb-2 mr-2 md:mr-0 ml-1 dark:text-white ">
                            {post_title}
                          </h2>
                        </Link>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>

            <div className="col-span-12 lg:col-span-4 xl:col-span-3">
              <div className="lg:sticky lg:top-[4rem]">

                {/* {(data.ads?.news_view_31 || data.ads?.news_view_32) && (
                <div className="col-span-12 md:col-span-12 lg:col-span-4 xl:col-span-3  dark:after:bg-[var(--border-dark)] mb-2 lg:mb-[35px] xl:mb-[40px]">
                  <div className="w-full flex flex-row lg:flex-col lg:h-full lg:flex lg:items-center justify-center gap-4">
                    {data.ads?.news_view_31 && (
                      <div className="w-full flex items-center justify-center">
                        <div className="h-[250px]">
                          <AddCard imgPath={data.ads?.news_view_31} />
                        </div>
                      </div>
                    )}

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

                {(adsSlot1 || adsSlot2) && (
                  <div className="col-span-12 md:col-span-12 lg:col-span-4 xl:col-span-3 relative ">


                    <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>

                )}
                <div className="mb-3 mt-3">


                  <div className="col-span-12 lg:col-span-4 xl:col-span-3 ">
                    <div className="border-[#B42424] dark:border-[#B42424] border-b-[5px] mb-3 pb-1"></div>

                    <div className="border-[var(--border-color)]  dark:border-[var(--border-dark)]  mb-3 pb-1">
                      {/* side bar for latest news as well as for most read */}

                      <div className="flex items-center justify-between">
                        <div>
                          <h2 className="text-2xl py-2  font-bold">Latest news</h2>
                        </div>
                      </div>
                    </div>

                    {/* latest new vertical  */}
                    <LatestNewsVertical end_point={end_point} />
                    {/* side bar for latest news as well as for most read */}

                  </div>

                  {adsSlot1 || adsSlot3 || adsSlot2 ? (
                    <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)] mt-2 lg:mt-[35px] xl:mt-[40px]">

                      {/* <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 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: "250px",
                                textAlign: "center",
                              }} />

                            </div>
                          </div>
                        )}
                        {adsSlot3 && (
                          <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={adsSlot3} style={{
                                display: "block",
                                width: "100%",
                                minHeight: "250px",
                                textAlign: "center",

                              }} />

                            </div>
                          </div>
                        )}
                        {adsSlot2 && (
                          <div className="bg-[#f9f9f9] w-full flex items-center justify-center hidden sm:hidden lg:flex xl:flex">
                            <div className="h-[250px] min-w-[300px] w-full">
                              <AdsComponent adSlot={adsSlot2} style={{
                                display: "block",
                                width: "100%",
                                minHeight: "250px",
                                textAlign: "center",

                              }} />

                            </div>
                          </div>
                        )}
                      </div>
                    </div>
                  ) : null}
                </div>
              </div>
            </div>
          </div>
        </div>
      {/* </div> */}
    </>
  );
};

export default SingleNewsDetails;