"use client";
import { siteConfig } from "@/config/site";
import { Input } from "@nextui-org/input";
import {
  Navbar,
  NavbarContent,
  NavbarItem,
  NavbarMenu,
  NavbarMenuItem,
  NavbarMenuToggle,
} from "@nextui-org/navbar";
import {
  Button,
  Dropdown,
  DropdownItem,
  DropdownMenu,
  DropdownTrigger,
} from "@nextui-org/react";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import {
  ChevronDownIcon,
  ChevronRightIcon,
  ChevronUpIcon,
  FbIcon,
  IdnIcon,
  IgIcon,
  SearchIcon,
  TtIcon,
  TwIcon,
  UKIcon,
  YtIcon,
} from "../../icons";
import { ThemeSwitch } from "../../theme-switch";
import Cookies from "js-cookie";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import storedLanguage from "@/store/language-store";

interface MenuItem {
  key: string;
  label: string;
  href: URL;
  submenu?: SubMenuItem[];
}

interface SubMenuItem {
  label: string;
  href: string;
}

interface DropdownOpenState {
  [key: string]: boolean;
}

export default function NavbarHumas() {
  const [dropdownOpen, setDropdownOpen] = useState<DropdownOpenState>({});
  const [isOpen, setIsOpen] = useState(false);
  const router = useRouter();
  const t = useTranslations("Navbar");
  const token = Cookies.get("access_token");
  const isAuthenticated = Cookies.get("is_authenticated");

  const language = storedLanguage((state) => state.locale);
  const setLanguage = storedLanguage((state) => state.setLocale);

  useEffect(() => {
    if (!isAuthenticated) {
      onLogout();
    }
  }, [token]);

  const onLogout = () => {
    Object.keys(Cookies.get()).forEach((cookieName) => {
      Cookies.remove(cookieName);
    });
    router.push("/auth");
  };

  const toggleDropdown = (key: any) => {
    setDropdownOpen({
      ...dropdownOpen,
      [key]: !dropdownOpen[key],
    });
  };

  const searchInput = (
    <Input
      aria-label="search"
      classNames={{
        inputWrapper: "bg-default-100",
        input: "text-sm",
      }}
      labelPlacement="outside"
      placeholder={t("search")}
      startContent={
        <SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
      }
      type="search"
    />
  );
  return (
    <Navbar
      isBordered
      maxWidth="full"
      height="8rem"
      className="backdrop-opacity-10"
      classNames={{ wrapper: "px-0" }}
    >
      <div className="w-full h-full flex">
        <div className="w-full hidden md:flex flex-col pt-3">
          <div className="flex items-center justify-end gap-1 md:gap-5 px-[50px]">
            <div className="flex gap-1 lg:gap-3 items-center">
              <Link
                href="https://www.facebook.com/DivHumasPolri?_rdc=1&_rdr"
                target="_blank"
              >
                <FbIcon />
              </Link>
              <Link
                href="https://www.instagram.com/divisihumaspolri/"
                target="_blank"
              >
                <IgIcon />
              </Link>
              <Link
                href="https://www.youtube.com/user/pidhumaspolri"
                target="_blank"
              >
                <YtIcon />
              </Link>
              <Link href="https://twitter.com/DivHumas_Polri" target="_blank">
                <TwIcon />
              </Link>
              <Link
                href="https://www.tiktok.com/@divhumas_polri"
                target="_blank"
              >
                <TtIcon />
              </Link>
              {token ? (
                // <Button className="bg-[#DD8306]" onPress={onLogout}>
                //   Logout
                // </Button>
                <Dropdown>
                  <DropdownTrigger>
                    <Button variant="bordered">Menu</Button>
                  </DropdownTrigger>
                  <DropdownMenu aria-label="Static Actions">
                    <DropdownItem
                      key="dashboard"
                      onPress={() => router.push("/admin/dashboard")}
                    >
                      Dashboard
                    </DropdownItem>
                    <DropdownItem key="dashboard">Profile</DropdownItem>

                    <DropdownItem
                      key="logout"
                      className="text-danger"
                      color="danger"
                      onPress={onLogout}
                    >
                      Logout
                    </DropdownItem>
                  </DropdownMenu>
                </Dropdown>
              ) : (
                <Link href="/auth">
                  <Button
                    variant="bordered"
                    className="font-bold text-black border-black dark:border-white dark:text-white px-0 pl-2 rounded-md py-0"
                    endContent={<ChevronRightIcon />}
                  >
                    {t("masuk")}
                  </Button>
                </Link>
              )}
            </div>
          </div>
          <div
            className={`flex flex-wrap items-center justify-between px-[50px] ${
              isOpen ? "bg-white dark:bg-[#1F1A17]" : "bg-transparent"
            }`}
          >
            <Link href={"/"}>
              <img src="/logohumas.png" alt="logo" className="w-[75px]" />
            </Link>

            <Dropdown
              className="bg-white dark:bg-[#1F1A17] "
              radius="none"
              classNames={{ base: "shadow-none" }}
              onOpenChange={(state) => setIsOpen(state)}
            >
              <NavbarItem>
                <DropdownTrigger>
                  <Button
                    disableRipple
                    className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
                    radius="sm"
                    variant="light"
                    endContent={<ChevronDownIcon className="pt-1" />}
                  >
                    {t("pelayananMasyarakat")}
                  </Button>
                </DropdownTrigger>
              </NavbarItem>
              <DropdownMenu
                aria-label="pelayanan-masyarakat"
                title="pelayanan-masyarakat"
                className="pt-4"
                classNames={{
                  list: "gap-2 flex flex-row flex-wrap",
                }}
                itemClasses={{
                  base: "w-[350px]",
                }}
              >
                <DropdownItem>
                  <Link
                    href={"/form-permohonan-informasi"}
                    className="flex  justify-between"
                  >
                    Formulir Permohonan Informasi
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="https://www.digitalkorlantas.id/sim/"
                    target="_blank"
                    className="flex  justify-between"
                  >
                    Pelayanan SIM
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="https://erikkes.id/"
                    target="_blank"
                    className="flex  justify-between"
                  >
                    Pelayanan e-Rikkes SIM
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="https://eppsi.id/"
                    target="_blank"
                    className="flex  justify-between"
                  >
                    Pelayanan Test Psikologi SIM
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="https://e-avis.korlantas.polri.go.id/"
                    target="_blank"
                    className="flex  justify-between"
                  >
                    Pelayanan e-Arvis
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="https://samsatdigital.id/"
                    target="_blank"
                    className="flex  justify-between"
                  >
                    Pelayanan Samsat Digital
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US"
                    target="_blank"
                    className="flex  justify-between"
                  >
                    Pelayanan SKCK
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam"
                    target="_blank"
                    className="flex  justify-between"
                  >
                    Pelayanan Propam Presisi
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="https://dumaspresisi.polri.go.id/"
                    target="_blank"
                    className="flex  justify-between"
                  >
                    Pelayanan Dumas Presisi
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="https://bos.polri.go.id/login"
                    target="_blank"
                    className="flex  justify-between"
                  >
                    Pelayanan Binmas
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="https://play.google.com/store/apps/details?id=id.go.ssdmpolri.pengaduanappsbarupolri2"
                    target="_blank"
                    className="flex  justify-between"
                  >
                    Whistle Blower System
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <Dropdown
              className=" dark:bg-[#1F1A17]"
              onOpenChange={(state) => setIsOpen(state)}
            >
              <NavbarItem>
                <DropdownTrigger>
                  <Button
                    disableRipple
                    className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
                    radius="sm"
                    variant="light"
                    endContent={<ChevronDownIcon className="pt-1" />}
                  >
                    {t("informasi_publik")}
                  </Button>
                </DropdownTrigger>
              </NavbarItem>
              <DropdownMenu
                // aria-label="tentang"
                title={t("tentang")}
                className="pt-4"
                classNames={{
                  // base: "flex",
                  // list: "border-2 gap-2 flex flex-row flex-wrap"
                  list: "gap-2 flex flex-row flex-wrap",
                }}
                itemClasses={{
                  // base: "border border-red-700 w-[350px]"
                  base: "w-[350px]",
                }}
              >
                <DropdownItem>
                  <Link
                    href="/static/humas-polri"
                    className="flex  justify-between"
                  >
                    {t("tentang")} Humas POLRI
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="/static/profile-kapolri"
                    className="flex  justify-between"
                  >
                    {t("profilPimpinan")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="/static/struktur-mabes"
                    className="flex  justify-between"
                  >
                    {t("strukturOrganisasi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="/static/visi-misi-polri"
                    className="flex  justify-between"
                  >
                    {t("visi")} & {t("misi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="/static/tugas-dan-fungsi-polri"
                    className="flex  justify-between"
                  >
                    {t("tugas")} & {t("fungsi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link href="/static/logo" className="flex  justify-between">
                    Logo
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <Dropdown
              className=" dark:bg-[#1F1A17]"
              onOpenChange={(state) => setIsOpen(state)}
            >
              <NavbarItem>
                <DropdownTrigger>
                  <Button
                    disableRipple
                    className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
                    radius="sm"
                    variant="light"
                    endContent={<ChevronDownIcon className="pt-1" />}
                  >
                    {t("publikasi")}
                  </Button>
                </DropdownTrigger>
              </NavbarItem>
              <DropdownMenu
                // aria-label="tentang"
                title={t("tentang")}
                className="pt-4"
                classNames={{
                  // base: "flex",
                  // list: "border-2 gap-2 flex flex-row flex-wrap"
                  list: "gap-2 flex flex-row flex-wrap",
                }}
                itemClasses={{
                  // base: "border border-red-700 w-[350px]"
                  base: "w-[350px]",
                }}
              >
                <DropdownItem>
                  <Link
                    href="/static/humas-polri"
                    className="flex  justify-between"
                  >
                    {t("tentang")} Humas POLRI
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="/static/profile-kapolri"
                    className="flex  justify-between"
                  >
                    {t("profilPimpinan")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="/static/struktur-mabes"
                    className="flex  justify-between"
                  >
                    {t("strukturOrganisasi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="/static/visi-misi-polri"
                    className="flex  justify-between"
                  >
                    {t("visi")} & {t("misi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="/static/tugas-dan-fungsi-polri"
                    className="flex  justify-between"
                  >
                    {t("tugas")} & {t("fungsi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link href="/static/logo" className="flex  justify-between">
                    Logo
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <Dropdown
              className=" dark:bg-[#1F1A17]"
              onOpenChange={(state) => setIsOpen(state)}
            >
              <NavbarItem>
                <DropdownTrigger>
                  <Button
                    disableRipple
                    className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
                    radius="sm"
                    variant="light"
                    endContent={<ChevronDownIcon className="pt-1" />}
                  >
                    {t("tentang")}
                  </Button>
                </DropdownTrigger>
              </NavbarItem>
              <DropdownMenu
                // aria-label="tentang"
                title={t("tentang")}
                className="pt-4"
                classNames={{
                  // base: "flex",
                  // list: "border-2 gap-2 flex flex-row flex-wrap"
                  list: "gap-2 flex flex-row flex-wrap",
                }}
                itemClasses={{
                  // base: "border border-red-700 w-[350px]"
                  base: "w-[350px]",
                }}
              >
                <DropdownItem>
                  <Link
                    href="/static/humas-polri"
                    className="flex  justify-between"
                  >
                    {t("tentang")} Humas POLRI
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="/static/profile-kapolri"
                    className="flex  justify-between"
                  >
                    {t("profilPimpinan")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="/static/struktur-mabes"
                    className="flex  justify-between"
                  >
                    {t("strukturOrganisasi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="/static/visi-misi-polri"
                    className="flex  justify-between"
                  >
                    {t("visi")} & {t("misi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="/static/tugas-dan-fungsi-polri"
                    className="flex  justify-between"
                  >
                    {t("tugas")} & {t("fungsi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link href="/static/logo" className="flex  justify-between">
                    Logo
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <Dropdown
              className=" dark:bg-[#1F1A17]"
              onOpenChange={(state) => setIsOpen(state)}
            >
              <NavbarItem>
                <DropdownTrigger>
                  <Button
                    disableRipple
                    className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
                    radius="sm"
                    variant="light"
                    endContent={<ChevronDownIcon className="pt-1" />}
                  >
                    {t("aplikasi_terkait")}
                  </Button>
                </DropdownTrigger>
              </NavbarItem>
              <DropdownMenu
                // aria-label="tentang"
                title={t("tentang")}
                className="pt-4"
                classNames={{
                  // base: "flex",
                  // list: "border-2 gap-2 flex flex-row flex-wrap"
                  list: "gap-2 flex flex-row flex-wrap",
                }}
                itemClasses={{
                  // base: "border border-red-700 w-[350px]"
                  base: "w-[350px]",
                }}
              >
                <DropdownItem>
                  <Link
                    href="/static/humas-polri"
                    className="flex  justify-between"
                  >
                    {t("tentang")} Humas POLRI
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="/static/profile-kapolri"
                    className="flex  justify-between"
                  >
                    {t("profilPimpinan")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="/static/struktur-mabes"
                    className="flex  justify-between"
                  >
                    {t("strukturOrganisasi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="/static/visi-misi-polri"
                    className="flex  justify-between"
                  >
                    {t("visi")} & {t("misi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link
                    href="/static/tugas-dan-fungsi-polri"
                    className="flex  justify-between"
                  >
                    {t("tugas")} & {t("fungsi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem>
                  <Link href="/static/logo" className="flex  justify-between">
                    Logo
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <div className="flex items-center gap-3">
              <div className="hidden lg:block">{searchInput}</div>

              <a
                className="cursor-pointer"
                onClick={() =>
                  language === "id" ? setLanguage("en") : setLanguage("id")
                }
              >
                {language === "id" ? <IdnIcon /> : <UKIcon />}
              </a>
              <div>
                <ThemeSwitch />
              </div>
            </div>
          </div>
        </div>
        <NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
          <ThemeSwitch />
          <NavbarMenuToggle />
          <NavbarMenu>
            {/* {searchInput} */}
            <div className="mt-1 flex flex-col gap-1">
              {siteConfig.humasMenuItems.map((item) => (
                <div key={item.key} className="relative">
                  <NavbarMenuItem>
                    {item.key === "login" ? (
                      token ? (
                        <Button
                          className="bg-[#DD8306] text-white"
                          onPress={onLogout}
                        >
                          Logout
                        </Button>
                      ) : (
                        <Link href="/auth">
                          <Button className="bg-[#DD8306] text-white">
                            Login
                          </Button>
                        </Link>
                      )
                    ) : item.key === "dashboard" ? (
                      token && (
                        <Link href="/admin/dashboard">
                          <span>{item.label}</span>
                        </Link>
                      )
                    ) : (
                      <div
                        onClick={() => toggleDropdown(item.key)}
                        className="flex items-end gap-2"
                      >
                        {item.href ? (
                          <Link href={item.href} target="_blank">
                            <span>{item.label}</span>
                          </Link>
                        ) : (
                          <span>{item.label}</span>
                        )}
                        {item.submenu &&
                          (dropdownOpen[item.key] ? (
                            <ChevronUpIcon />
                          ) : (
                            <ChevronDownIcon />
                          ))}
                      </div>
                    )}
                  </NavbarMenuItem>
                  {dropdownOpen[item.key] && item.submenu && (
                    <div className="pl-2">
                      {item.submenu.map((subItem, subIndex) => (
                        <div key={subIndex}>
                          <Link href={subItem.href}>{subItem.label}</Link>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              ))}
            </div>
          </NavbarMenu>
        </NavbarContent>
      </div>
    </Navbar>
  );
}
