"use client";

import React, { useEffect, useState } from "react";
// import { Link } from "react-router-dom";
import { FaFacebookF, FaTwitter, FaYoutube, FaInstagram } from "react-icons/fa";
import { FiMenu, FiX, FiSearch } from "react-icons/fi";
import "bootstrap/dist/css/bootstrap.min.css";
import Link from "next/link";

function Navbar() {
  const [language, setLanguage] = useState("English");
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [showSearch, setShowSearch] = useState(false);

  const toggleSidebar = () => setSidebarOpen(!sidebarOpen);
  const toggleSearch = () => setShowSearch(!showSearch);

  const [date, setDate] = useState("");

  useEffect(() => {
    const today = new Date();
    const options = {
      weekday: "long",
      day: "numeric",
      month: "long",
      year: "numeric",
    };
    const formattedDate = today.toLocaleDateString("en-GB", options);
    setDate(formattedDate);
  }, []);
  return (
    <header className="Navbar bg-dark text-white">
      {/* ===== Top Bar ===== */}
      <div className="TopBar d-flex justify-content-between align-items-center px-3 py-1 border-bottom">
        <span className="small">📅 {date}</span>

        <div className="d-flex gap-3 align-items-center">
          <Link href="#" className="small btn btn-sm border-white text-white">
            Login
          </Link>
          <Link href="#" className="small btn btn-sm border-white text-white">
            Registration
          </Link>

          {/* Language Dropdown */}
          <li className="nav-item dropdown list-unstyled  d-none d-lg-flex">
            <button
              className="btn border-white text-white mannu-language dropdown-toggle LangBtn"
              id="langDropdown"
              data-bs-toggle="dropdown"
            >
              🌐 {language}
            </button>
            <ul className="dropdown-menu LangMenu">
              <li>
                <button
                  className="dropdown-item"
                  onClick={() => setLanguage("English")}
                >
                  English
                </button>
              </li>
              <li>
                <button
                  className="dropdown-item"
                  onClick={() => setLanguage("Arabic")}
                >
                  Arabic
                </button>
              </li>
              <li>
                <button
                  className="dropdown-item"
                  onClick={() => setLanguage("Bengali")}
                >
                  Bengali
                </button>
              </li>
            </ul>
          </li>

          <div className="d-flex gap-2 SocialIcons d-none d-lg-flex">
            <Link
              href="https://facebook.com"
              className="IconBtn facebook"
              target="_blank"
            >
              <FaFacebookF />
            </Link>
            <Link
              href="https://twitter.com"
              className="IconBtn twitter"
              target="_blank"
            >
              <FaTwitter />
            </Link>
            <Link
              href="https://youtube.com"
              className="IconBtn youtube"
              target="_blank"
            >
              <FaYoutube />
            </Link>
            <Link
              href="https://instagram.com"
              className="IconBtn instagram"
              target="_blank"
            >
              <FaInstagram />
            </Link>
          </div>
        </div>
      </div>

      {/* ===== Main Navbar ===== */}
      <nav className="d-flex justify-content-between align-items-center px-3 py-2">
        <Link href="/" className="navbar-brand text-white fs-4">
          <img
            src="/image/logo.png"
            alt="Logo"
            style={{ width: "100%", maxWidth: "100px" }}
          ></img>
          {/* M<span className="text-danger">K</span> */}
        </Link>

        {/* Desktop Menu */}
        <ul className="d-none d-xl-flex list-unstyled mb-0 gap-4">
          <li>
            <Link href="/" className="text-white">
              HOME
            </Link>
          </li>
          {/* <li>
            <Link href="#" className="text-white">
              POLITICS
            </Link>
          </li> */}
          {/* <li>
            <Link href="#" className="text-white">
              INTERNATIONAL NEWS
            </Link>
          </li> */}
          <li>
            <Link href="/business" className="text-white">
              BUSINESS
            </Link>
          </li>
          <li>
            <Link href="/cricket" className="text-white">
              CRICKET
            </Link>
          </li>
          <li>
            <Link href="/crime" className="text-white">
              CRIME
            </Link>
          </li>
          <li>
            <Link href="/football" className="text-white">
              SPORTS
            </Link>
          </li>
          <li>
            <Link href="/world-news" className="text-white">
              WORLD NEWS
            </Link>
          </li>
        </ul>

        {/* Search Icon */}
        <button
          className="btn SearchBtn text-white border-white d-none d-xl-block"
          onClick={toggleSearch}
        >
          <FiSearch />
        </button>

        {/* Mobile Search Button at end */}
        <div className="d-flex d-xl-none ms-auto">
          <button
            className="btn SearchBtn text-white border-white"
            onClick={toggleSearch}
          >
            <FiSearch />
          </button>
        </div>

        <button className="btn text-white d-xl-none" onClick={toggleSidebar}>
          {sidebarOpen ? <FiX size={24} /> : <FiMenu size={24} />}
        </button>
      </nav>

      {/* ===== Search Box (Desktop Toggle) ===== */}
      {showSearch && (
        <div className="SearchBox px-3 py-2 border-bottom">
          <form className="d-flex">
            <input
              type="text"
              placeholder="Country (देश), State (राज्य), District (ज़िला), Village/Gaav (गाँव)"
              className="form-control me-2 py-0"
            />
            <button className="btn btn-danger rounded-pill px-3" type="submit">
              Search
            </button>
          </form>
        </div>
      )}

      {/* ===== Sidebar for Mobile ===== */}
      <div
        className={`Sidebar bg-dark text-white p-3 position-fixed top-0 start-0 h-100 ${
          sidebarOpen ? "d-block" : "d-none"
        }`}
        style={{ width: "260px", zIndex: 1050 }}
      >
        <ul className="list-unstyled">
          <li>
            <Link href="#" className="text-white">
              HOME
            </Link>
          </li>
          <li>
            <Link href="#" className="text-white">
              POLITICS
            </Link>
          </li>
          <li>
            <Link href="#" className="text-white">
              INTERNATIONAL NEWS
            </Link>
          </li>
          <li>
            <Link href="#" className="text-white">
              BUSINESS
            </Link>
          </li>
          <li>
            <Link href="#" className="text-white">
              LIFE STYLE
            </Link>
          </li>
          <li>
            <Link href="#" className="text-white">
              TRAVEL
            </Link>
          </li>
          <li>
            <Link href="#" className="text-white">
              SPORTS
            </Link>
          </li>
          <li>
            <Link href="#" className="text-white">
              QUIZZES
            </Link>
          </li>
        </ul>

        {/* Language Dropdown */}
        <li className="nav-item dropdown list-unstyled d-flex justify-content-center  d-lg-none">
          <button
            className="btn border-white text-white mannu-language dropdown-toggle LangBtn"
            id="langDropdown"
            data-bs-toggle="dropdown"
          >
            🌐 {language}
          </button>
          <ul className="dropdown-menu LangMenu">
            <li>
              <button
                className="dropdown-item"
                onClick={() => setLanguage("English")}
              >
                English
              </button>
            </li>
            <li>
              <button
                className="dropdown-item"
                onClick={() => setLanguage("Arabic")}
              >
                Arabic
              </button>
            </li>
            <li>
              <button
                className="dropdown-item"
                onClick={() => setLanguage("Bengali")}
              >
                Bengali
              </button>
            </li>
          </ul>
        </li>
      </div>
    </header>
  );
}

export default Navbar;
