"use client"; 

import Link from "next/link";
import React, { useEffect, useState } from "react";
import { URL } from "../url";
import Image from "next/image";
import "bootstrap-icons/font/bootstrap-icons.css";
import { FaFacebookF, FaTwitter, FaYoutube, FaInstagram } from "react-icons/fa";
function NewsDetails(data) {
  const getYoutubeId = (url) => {
    const regExp =
      /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|live\/)([^#&?]*).*/;
    const match = url.match(regExp);
    return match && match[2].length === 11 ? match[2] : null;
  };
  const newsList = data?.newsList?.docs || [];
  const news = data?.news || {};
  const categoriesList = data?.categoriesList || [];
  // const {id} = data?.params ;
  const darkGlowAnimation = `
@keyframes darkGlow {
  0% { color: #0ff; text-shadow: 0 0 20px #0ff; }
  10% { color: #00bfff; text-shadow: 0 0 25px #00bfff; }
  20% { color: #007bff; text-shadow: 0 0 25px #007bff; }
  30% { color: #6f00ff; text-shadow: 0 0 25px #6f00ff; }
  40% { color: #8a2be2; text-shadow: 0 0 25px #8a2be2; }
  50% { color: #ff1493; text-shadow: 0 0 25px #ff1493; }
  60% { color: #ff4500; text-shadow: 0 0 25px #ff4500; }
  70% { color: #ff0000; text-shadow: 0 0 25px #ff0000; }
  80% { color: #b22222; text-shadow: 0 0 25px #b22222; }
  90% { color: #9400d3; text-shadow: 0 0 25px #9400d3; }
  100% { color: #0ff; text-shadow: 0 0 20px #0ff; }
}

.animated-dark-glow {
  animation: darkGlow 6s infinite ease-in-out;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.5s ease;
}
`;
  console.log(news);
  console.log(news);

  const newsData = {
    headline: "Pakistan India Fighter Jets | Chinese Arms | Operation Sindoor",
    subheadline:
      "पाकिस्तान बोला - चीनी हथियारों ने भारत के खिलाफ बेहतरीन काम किया | सेना के प्रवक्ता बोले - हमने 7 फाइटर जेट्स गिराए, भारत ने एक भी नहीं",
    date: "09 October 2025",
    author: "Update Bharat",
  };

  const activeTab = ""; // Default active tab

  const tabs = [
    {
      slug: "",
      label: "All News",
      name: "All News",
      icon: "../images/fire-element.png",
    },
  ];

  const allcategory = [...tabs, ...categoriesList];
  console.log(allcategory);

  function formatDate(dateString) {
    const date = new Date(dateString);

    const day = date.getDate().toString().padStart(2, "0");
    const month = (date.getMonth() + 1).toString().padStart(2, "0");
    const year = date.getFullYear();

    const hours = date.getHours();
    const minutes = date.getMinutes().toString().padStart(2, "0");

    // 12-hour format
    const ampm = hours >= 12 ? "PM" : "AM";
    const formattedHour = hours % 12 || 12;

    return `${day}-${month}-${year} ${formattedHour}:${minutes} ${ampm}`;

  }
  const [currentUrl, setCurrentUrl] = useState("");

  useEffect(() => {
    if (typeof window !== "undefined") {
      // 👇 Yahan apni live domain lagao (example: https://dhanwan.online)
      const liveBaseUrl = "https://updatebharat.com";
      const path = window.location.pathname;
      setCurrentUrl(liveBaseUrl + path);
    }
  }, []);



  const url = `https://updatebharat.com/news/${news.slug}`;

  const whatsappShareUrl = `https://api.whatsapp.com/send?text=${encodeURIComponent(url)}`;


  return (
    <div> 
      <div className="container-fluid mt-3">
        <div className="row">
          {/* ===== Desktop Sidebar + Content ===== */}
          <div className="d-none d-md-flex">
            <div
              className="col-md-2 border-end hide-scrollbar"
              style={{ height: "100vh", overflowY: "auto" }}
            >
              <ul className="nav flex-column nav-pills">
                {allcategory?.map((tab, i) => (
                  <li className="nav-item my-1" key={i}>
                    <Link
                      className={`nav-link d-flex align-items-center ${
                        activeTab === tab.slug ? "active" : ""
                      }`}
                      href={`/${tab.slug}`}
                      // onClick={() => setActiveTab(tab.key)}
                      //   onClick={() => redirect(`/${tab.key}`)}
                      style={{ cursor: "pointer" }}
                    >
                      {tab.name === "All News" ? (
                        <img
                          className="tab-img-heading"
                          src={tab.icon || URL?.API_BASE_URL + tab.image}
                          alt={tab.name}
                          width={20}
                          height={20}
                          style={{ width: "20px", marginRight: "8px" }}
                        />
                      ) : (
                        <Image
                          className="tab-img-heading"
                          src={tab.icon || URL?.API_BASE_URL + tab.image}
                          alt={tab.name}
                          width={20}
                          height={20}
                          style={{ width: "20px", marginRight: "8px" }}
                        />
                      )}
                      <span className="tab-lable-heading">{tab.name}</span>
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

            <div
              className="col-md-7 hide-scrollbar"
              style={{ height: "100vh", overflowY: "auto" }}
            >
              <div className="container py-4">
                {/* Header */}
                <header className="text-center mb-4 border-bottom pb-3">
                  <h1 className="fw-bold text-danger  mt-2">{news.title}</h1>
                  <p className="text-secondary">{news.short_description}</p>
                  <small className="text-muted">
                    {formatDate(news.createdAt)} | {newsData.author}
                  </small>
                </header>

                {/* Main Image */}
                <div className="text-center mb-4">
                  <img
                    src={URL?.API_BASE_URL + news.feature_image}
                    alt="Main news"
                    className="img-fluid rounded shadow"
                  />
                </div>

                {/* Highlight Section */}

                <div
                  dangerouslySetInnerHTML={{ __html: news?.description }}
                ></div>

                {/* <div className="bg-light border-start border-4 border-danger p-3 mb-4">
                  <p className="mb-0">{newsData.highlight}</p>
                </div>

           
                {newsData.sections.map((section, index) => (
                  <div key={index} className="row align-items-center mb-5">
                    <div className="mb-3 mb-md-0">
                      <img
                        src={section.image}
                        alt={section.title}
                        className="img-fluid rounded shadow-sm"
                      />
                    </div>
                    <div className="">
                      <h4 className="fw-bold text-danger mb-2 mt-4">
                        {section.title}
                      </h4>
                      <p>{section.content}</p>
                    </div>
                  </div>
                ))}

        
                <div className="alert alert-secondary text-center mt-4">
                  <strong>नोट:</strong> {newsData.bottomNote}
                </div> */}

               <footer className="text-center mt-5 border-top pt-3 text-muted">
  {/* ===== Social Share Section ===== */}
{/* ===== Social Share Section ===== */}
   <div className="my-3">
      <h6 className="fw-bold mb-3">📢 Share this news:</h6>
      <div className="d-flex justify-content-center gap-3">
        {/* WhatsApp Share Button */}
        <a
          href={whatsappShareUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="btn btn-success rounded-circle d-flex align-items-center justify-content-center"
          style={{ width: "40px", height: "40px" }}
          title="Share on WhatsApp"
        >
          <i className="bi bi-whatsapp fs-5 text-white"></i>
        </a>
      </div>
    </div>
  © {new Date().getFullYear()} {newsData.author} | All Rights Reserved
</footer>

              </div>

              <div className="tab-content p-3">
                {allcategory?.map(
                  (tab, i) =>
                    activeTab === tab.slug && (
                      <div key={i} className="tab-pane fade show active">
                        <div className="py-3 my-3 text-center bg-dark">
                          <h2 className="fw-bold text-white animated-dark-glow">
                            Related News
                          </h2>
                        </div>

                        <h2 className="fw-bold my-2">{tab.label}</h2>
                        {newsList?.map((item, index) => (
                          <div
                            key={index}
                            className="row mb-3 border-bottom pb-2"
                          >
                            <div className="col-7">
                              <Link
                                className="text-decoration-none"
                                href={"/news/" + item.slug}
                                state={item}
                              >
                                <h6 className="fw-bold">
                                  <span className="text-danger fw-bold">
                                    {item.title}{" "}
                                  </span>
                                  :
                                  <span className=" fw-bold">
                                    {" "}
                                    {item.short_description}
                                  </span>
                                </h6>
                              </Link>
                            </div>
                            <div className="col-5 d-flex justify-content-center align-items-center">
                              <div
                                className="position-relative w-100 rounded overflow-hidden shadow"
                                style={{ height: "12rem" }}
                              >
                                <Image
                                  src={URL?.API_BASE_URL + item.feature_image}
                                  alt={item.title}
                                  fill
                                  className="object-cover"
                                />
                              </div>
                              {/* <iframe
                              width="100%"
                              height="auto"
                              src={`https://www.youtube.com/embed/${getYoutubeId(
                                item.videoUrl
                              )}`}
                              title="YouTube video"
                              frameBorder="0"
                              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                              allowFullScreen
                            ></iframe> */}
                            </div>
                          </div>
                        ))}
                      </div>
                    )
                )}
              </div>
            </div>

            <div
              className="col-md-3 border-start hide-scrollbar p-3"
              style={{ height: "100vh", overflowY: "auto" }}
            >
              Sidebar Content
            </div>
          </div>

          {/* ===== Mobile Horizontal Tabs ===== */}
          <div className="d-md-none">
            <ul className="nav nav-tabs d-flex flex-nowrap overflow-auto my-1 overflow-y-hidden">
              {allcategory.map((tab, i) => (
                <li className="nav-item " key={i}>
                  <Link
                    className={`nav-link d-flex align-items-center ${
                      activeTab === tab.slug ? "active" : ""
                    }`}
                    // onClick={() => setActiveTab(tab.key)}
                    href={`/${tab.slug}`}
                    // onClick={() => redirect(`/${tab.key}`)}
                    style={{ cursor: "pointer" }}
                  >
                    {tab.name === "All News" ? (
                      <img
                        className="tab-img-heading"
                        src={tab.icon || URL?.API_BASE_URL + tab.image}
                        alt={tab.name}
                        width={20}
                        height={20}
                        style={{ width: "20px", marginRight: "8px" }}
                      />
                    ) : (
                      <Image
                        className="tab-img-heading"
                        src={tab.icon || URL?.API_BASE_URL + tab.image}
                        alt={tab.name}
                        width={20}
                        height={20}
                        style={{ width: "20px", marginRight: "8px" }}
                      />
                    )}
                    {/* <Image
                      src={tab.icon || URL?.API_BASE_URL + tab.image}
                      alt={tab.name}
                      width={20}
                      height={20}
                      style={{ width: "20px", marginRight: "8px" }}
                    /> */}
                    <span className="text-nowrap">{tab.name}</span>
                  </Link>
                </li>
              ))}
            </ul>

            {/* Mobile Content */}
            <div className="tab-content border-0 border-top-0 mt-4">
              <div className="py-4">
                {/* Header */}
                <header className="text-center mb-4 border-bottom pb-3">
                  {/* <h1 className="fw-bold text-danger  mt-2">
                    {newsData.headline}
                  </h1>
                  <p className="text-secondary">{newsData.subheadline}</p> */}

                  <h1 className="fw-bold text-danger  mt-2">{news.title}</h1>
                  <p className="text-secondary">{news.short_description}</p>
                  <small className="text-muted">
                    {formatDate(news.createdAt)} | {newsData.author}
                  </small>
                </header>

                {/* Main Image */}
                {/* <div className="text-center mb-4">
                  <img
                    src={newsData.mainImage}
                    alt="Main news"
                    className="img-fluid rounded shadow"
                  />
                </div> */}
                <div className="text-center mb-4">
                  <img
                    src={URL?.API_BASE_URL + news.feature_image}
                    alt="Main news"
                    className="img-fluid rounded shadow"
                  />
                </div>

                <div
                  dangerouslySetInnerHTML={{ __html: news?.description }}
                ></div>
                {/* Highlight Section */}
                {/* <div className="bg-light border-start border-4 border-danger p-3 mb-4">
                  <p className="mb-0">{newsData.highlight}</p>
                </div> */}

                {/* Article Sections */}
                {newsData?.sections?.map((section, index) => (
                  <div key={index} className="row align-items-center mb-5">
                    <div className="mb-3 mb-md-0">
                      <img
                        src={section.image}
                        alt={section.title}
                        className="img-fluid rounded shadow-sm"
                      />
                    </div>
                    <div className="">
                      <h4 className="fw-bold text-danger mb-2 mt-4">
                        {section.title}
                      </h4>
                      <p>{section.content}</p>
                    </div>
                  </div>
                ))}

                {/* Bottom Note */}
                {/* <div className="alert alert-secondary text-center mt-4">
                  <strong>नोट:</strong> {newsData.bottomNote}
                </div> */}
  {/* ===== Social Share Section ===== */}
{/* ===== Social Share Section ===== */}
<div className="my-3">
  <h6 className="fw-bold mb-3">📢 Share this news:</h6>

  <div className="d-flex justify-content-center gap-3">
    {(() => {
      // ✅ Safe check for window
      const currentUrl =
        typeof window !== "undefined" ? window.location.href : "";

      return (
        <>
          {/* WhatsApp */}
          <a
            href={`https://api.whatsapp.com/send?text=${encodeURIComponent(
              `${news?.title}\n\n🔗 Read full news here:\n${currentUrl}`
            )}`}
            target="_blank"
            rel="noopener noreferrer"
            className="btn btn-success rounded-circle d-flex align-items-center justify-content-center"
            style={{ width: "40px", height: "40px" }}
            title="Share on WhatsApp"
          >
            <i className="bi bi-whatsapp fs-5 text-white"></i>
          </a>

          {/* Facebook */}
          <a
            href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
              currentUrl
            )}`}
            target="_blank"
            rel="noopener noreferrer"
            className="btn btn-primary rounded-circle d-flex align-items-center justify-content-center"
            style={{ width: "40px", height: "40px" }}
            title="Share on Facebook"
          >
            <i className="bi bi-facebook fs-5 text-white"></i>
          </a>

          {/* Twitter */}
          <a
            href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
              news?.title
            )}&url=${encodeURIComponent(currentUrl)}`}
            target="_blank"
            rel="noopener noreferrer"
            className="btn btn-info rounded-circle d-flex align-items-center justify-content-center"
            style={{ width: "40px", height: "40px" }}
            title="Share on Twitter"
          >
            <i className="bi bi-twitter fs-5 text-white"></i>
          </a>

          {/* Instagram */}
          <a
            href="https://www.instagram.com/"
            target="_blank"
            rel="noopener noreferrer"
            className="btn btn-danger rounded-circle d-flex align-items-center justify-content-center"
            style={{ width: "40px", height: "40px" }}
            title="Open Instagram"
          >
            <i className="bi bi-instagram fs-5 text-white"></i>
          </a>
        </>
      );
    })()}
  </div>
</div>


                {/* Footer */}
                <footer className="text-center mt-5 border-top pt-3 text-muted">
                  © {new Date().getFullYear()} {newsData.author} | All Rights
                  Reserved
                </footer>
              </div>

              {allcategory.map(
                (tab, i) =>
                  activeTab === tab.slug && (
                    <div key={i} className="tab-pane fade show active">
                      <div className="py-3 my-3 text-center bg-dark">
                        <h2 className="fw-bold  text-white animated-dark-glow">
                          Related News
                        </h2>
                      </div>

                      <h4 className="fw-bold">{tab.label}</h4>
                      {newsList?.map((item, index) => (
                        <div
                          key={index}
                          className="row mb-3 border-bottom pb-2"
                        >
                          <div className="col-7">
                            <Link
                              className="text-decoration-none"
                              href={"/news/" + item.slug}
                              state={item}
                            >
                              <h6 className="fw-bold">
                                <span className="text-danger fw-bold">
                                  {item.title}{" "}
                                </span>
                                :
                                <span className=" fw-bold">
                                  {" "}
                                  {item.short_description}
                                </span>
                              </h6>
                            </Link>
                          </div>
                          <div className="col-5 d-flex justify-content-center align-items-center">
                            <div
                              className="position-relative w-100 rounded overflow-hidden shadow"
                              style={{ height: "12rem" }}
                            >
                              <Image
                                src={URL?.API_BASE_URL + item.feature_image}
                                alt={item.title}
                                fill
                                className="object-cover"
                              />
                            </div>
                            {/* <iframe
                              width="100%"
                              height="auto"
                              src={`https://www.youtube.com/embed/${getYoutubeId(
                                item.videoUrl
                              )}`}
                              title="YouTube video"
                              frameBorder="0"
                              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                              allowFullScreen
                            ></iframe> */}
                          </div>
                        </div>
                      ))}
                    </div>
                  )
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default NewsDetails;
