import React from "react";

import Link from "next/link";
import { useRouter } from "next/navigation";

function HomeComponent() {
  const navigate = useRouter();
  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 [activeTab, setActiveTab] = useState("topnews");

  const activeTab = "topnews";

  const tabs = [
    {
      key: "topnews",
      label: "टॉप न्यूज़",
      icon: "https://img.icons8.com/fluency/48/fire-element.png",
      news: [
        {
          title: "PM मोदी ने नया प्रोजेक्ट लॉन्च किया",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/QMLsdDJbUGA",
        },
        {
          title: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
      ],
    },

    {
      key: "bihar",
      label: "बिहार चुनाव",
      icon: "https://images.bhaskarassets.com/web2images/521/2020/09/16/bihar-election1_1600243943.png",
      news: [
        {
          title: "बिहार चुनाव की तैयारी तेज",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "RJD और JDU आमने-सामने",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/QMLsdDJbUGA",
        },
      ],
    },

    {
      key: "bhaskarkhas",
      label: "भास्कर खास",
      icon: "https://img.icons8.com/fluency/48/star.png",
      news: [
        {
          title: "Exclusive Report 1",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "Special Interview",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/QMLsdDJbUGA",
        },
      ],
    },

    {
      key: "cricket",
      label: "क्रिकेट",
      icon: "https://img.icons8.com/external-icongeek26-flat-icongeek26/64/external-cricket-india-icongeek26-flat-icongeek26.png",
      news: [
        {
          title: "भारत ने पाकिस्तान को हराया",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/QMLsdDJbUGA",
        },
        {
          title: "सचिन तेंदुलकर का बयान",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
      ],
    },

    {
      key: "dboriginal",
      label: "DB ओरिजिनल",
      icon: "https://img.icons8.com/fluency/48/documentary.png",
      news: [
        {
          title: "Original Report 1",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "Special Story",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/QMLsdDJbUGA",
        },
      ],
    },

    {
      key: "sports",
      label: "स्पोर्ट्स",
      icon: "https://img.icons8.com/color/48/ranners-crossing-finish-line.png",
      news: [
        {
          title: "हॉकी टीम की जीत",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "फुटबॉल वर्ल्डकप अपडेट",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/QMLsdDJbUGA",
        },
      ],
    },

    {
      key: "bollywood",
      label: "बॉलीवुड",
      icon: "https://img.icons8.com/fluency/48/movie-projector.png",
      news: [
        {
          title: "नई फिल्म का ट्रेलर लॉन्च",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "सलमान खान का बयान",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/QMLsdDJbUGA",
        },
      ],
    },

    {
      key: "jobedu",
      label: "जॉब - एजुकेशन",
      icon: "https://img.icons8.com/fluency/48/graduation-cap.png",
      news: [
        {
          title: "SSC परीक्षा रिजल्ट घोषित",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "UPSC तैयारी टिप्स",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/QMLsdDJbUGA",
        },
      ],
    },

    {
      key: "business",
      label: "बिजनेस",
      icon: "https://img.icons8.com/fluency/48/money.png",
      news: [
        {
          title: "शेयर मार्केट में उछाल",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "रुपया डॉलर के मुकाबले गिरा",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/QMLsdDJbUGA",
        },
      ],
    },

    {
      key: "lifestyle",
      label: "लाइफस्टाइल",
      icon: "https://img.icons8.com/color/48/pullups-skin-type-3.png",
      news: [
        {
          title: "फिटनेस टिप्स",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "फैशन ट्रेंड्स",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/QMLsdDJbUGA",
        },
      ],
    },

    {
      key: "jeevanmantra",
      label: "जीवन मंत्र",
      icon: "https://img.icons8.com/fluency/48/open-book.png",
      news: [
        {
          title: "आज का विचार",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "आध्यात्मिक कहानी",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/QMLsdDJbUGA",
        },
      ],
    },

    {
      key: "woman",
      label: "वुमन",
      icon: "https://img.icons8.com/color/48/woman-opening-door.png",
      news: [
        {
          title: "महिला उद्यमी की कहानी",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "सेल्फ डिफेंस टिप्स",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/QMLsdDJbUGA",
        },
      ],
    },

    {
      key: "desh",
      label: "देश",
      icon: "https://img.icons8.com/fluency/48/india-map.png",
      news: [
        {
          title: "दिल्ली में प्रदूषण",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "कश्मीर अपडेट",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/QMLsdDJbUGA",
        },
      ],
    },

    {
      key: "videsh",
      label: "विदेश",
      icon: "https://img.icons8.com/color/48/world-map-continents.png",
      news: [
        {
          title: "अमेरिका चुनाव अपडेट",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "चीन की इकॉनमी",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/QMLsdDJbUGA",
        },
      ],
    },

    {
      key: "rashifal",
      label: "राशिफल",
      icon: "https://www.shutterstock.com/shutterstock/photos/459966448/display_1500/stock-vector-zodiac-signs-with-moon-in-center-459966448.jpg",
      news: [
        {
          title: "मेष राशि का फल",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "कन्या राशि का फल",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/QMLsdDJbUGA",
        },
      ],
    },

    {
      key: "techauto",
      label: "टेक - ऑटो",
      icon: "https://img.icons8.com/color/48/hill-descent-control--v2.png",
      news: [
        {
          title: "नया इलेक्ट्रिक स्कूटर लॉन्च",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "AI टेक्नोलॉजी अपडेट",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/QMLsdDJbUGA",
        },
      ],
    },

    {
      key: "health",
      label: "हेल्थ",
      icon: "https://img.icons8.com/color/48/hospital-3.png",
      news: [
        {
          title: "डेंगू से बचाव",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "योग के फायदे",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/QMLsdDJbUGA",
        },
      ],
    },

    {
      key: "madhurima",
      label: "मधुरिमा",
      icon: "https://images.bhaskarassets.com/web2images/521/2021/02/12/madhurima-icon-1_1613127122.png",
      news: [
        {
          title: "कहानी 1",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "कविता 2",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/QMLsdDJbUGA",
        },
      ],
    },

    {
      key: "magazine",
      label: "मैगजीन",
      icon: "https://img.icons8.com/fluency/48/magazine.png",
      news: [
        {
          title: "मैगजीन एडिशन 1",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "स्पेशल आर्टिकल",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/QMLsdDJbUGA",
        },
      ],
    },

    {
      key: "lifescience",
      label: "लाइफ - साइंस",
      icon: "https://img.icons8.com/color/48/dna-helix.png",
      news: [
        {
          title: "नया रिसर्च",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "अंतरिक्ष खोज",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/QMLsdDJbUGA",
        },
      ],
    },

    {
      key: "utility",
      label: "यूटिलिटी",
      icon: "https://img.icons8.com/color/48/light.png",
      news: [
        {
          title: "ट्रेन टाइमटेबल",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/h9tf2EAN1dk",
        },
        {
          title: "बिजली बिल अपडेट",
          title1: "दिल्ली में प्रदूषण बढ़ा",
          videoUrl: "https://www.youtube.com/live/QMLsdDJbUGA",
        },
      ],
    },
  ];

  return (
    <div className="">
      {/* Slider */}

      {/* Tabs & Content */}
      <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">
                {tabs.map((tab) => (
                  <li className="nav-item my-1" key={tab.key}>
                    <button
                      className={`nav-link d-flex align-items-center ${
                        activeTab === tab.key ? "active" : ""
                      }`}
                      // onClick={() => setActiveTab(tab.key)}
                      onClick={() => navigate(`/${tab.key}`)}
                      style={{ cursor: "pointer" }}
                    >
                      <img
                        className="tab-img-heading"
                        src={tab.icon}
                        alt={tab.label}
                        style={{ width: "20px", marginRight: "8px" }}
                      />
                      <span className="tab-lable-heading">{tab.label}</span>
                    </button>
                  </li>
                ))}
              </ul>
            </div>

            <div
              className="col-md-7 hide-scrollbar"
              style={{ height: "100vh", overflowY: "auto" }}
            >
              <div className="tab-content p-3">
                {tabs.map(
                  (tab) =>
                    activeTab === tab.key && (
                      <div key={tab.key} className="tab-pane fade show active">
                        <h2 className="fw-bold my-2">{tab.label}</h2>

                        {/* कई न्यूज़ */}
                        {tab.news.map((item, index) => (
                          <div
                            key={index}
                            className="row mb-3 border-bottom pb-2"
                          >
                            <div className="col-7">
                              <Link
                                className="text-decoration-none"
                                href="/homedetails"
                                state={item}
                              >
                                <h5 className="fw-bold">
                                  <span className="text-danger fw-bold">
                                    {item.title}
                                  </span>{" "}
                                  : <span>{item.title1}</span>
                                </h5>
                              </Link>
                            </div>
                            <div className="col-5 d-flex d-flex justify-content-center align-items-center">
                              <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">
              {tabs.map((tab) => (
                <li className="nav-item " key={tab.key}>
                  <button
                    className={`nav-link d-flex align-items-center ${
                      activeTab === tab.key ? "active" : ""
                    }`}
                    // onClick={() => setActiveTab(tab.key)}
                    onClick={() => navigate(`/${tab.key}`)}
                    style={{ cursor: "pointer" }}
                  >
                    <img
                      src={tab.icon}
                      alt={tab.label}
                      style={{ width: "20px", marginRight: "8px" }}
                    />
                    <span className="text-nowrap">{tab.label}</span>
                  </button>
                </li>
              ))}
            </ul>

            {/* Mobile Content */}
            <div className="tab-content border-0 border-top-0 mt-4">
              {tabs.map(
                (tab) =>
                  activeTab === tab.key && (
                    <div key={tab.key} className="tab-pane fade show active">
                      <h4 className="fw-bold">{tab.label}</h4>
                      {tab.news.map((item, index) => (
                        <div
                          key={index}
                          className="row mb-3 border-bottom pb-2"
                        >
                          <div className="col-7">
                            <Link
                              className="text-decoration-none"
                              href="/homedetails"
                              state={item}
                            >
                              <h6 className="fw-bold">
                                <span className="text-danger fw-bold">
                                  {item.title}{" "}
                                </span>
                                :
                                <span className=" fw-bold"> {item.title1}</span>
                              </h6>
                            </Link>
                          </div>
                          <div className="col-5 d-flex justify-content-center align-items-center">
                            <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 HomeComponent;
