"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 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="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="dark:bg-[#1F1A17]"
    >
      <div className="w-full h-full flex">
        <div className="min-w-max md:w-1/12 flex items-center justify-center">
          <Link href={"/"}>
            <Image
              height={100}
              width={100}
              src="/logohumas.png"
              alt="logo"
              className="min-w-max"
            />
          </Link>
        </div>
        <div className="w-auto md:w-11/12  hidden md:flex flex-col justify-cente pt-3 space-y-3">
          <div className="flex items-center justify-end gap-1 md:gap-5">
            <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>
            </div>
            <a
              className="cursor-pointer"
              onClick={() =>
                language === "id" ? setLanguage("en") : setLanguage("id")
              }
            >
              {language === "id" ? <IdnIcon /> : <UKIcon />}
            </a>
          </div>
          <div className="flex flex-wrap items-center justify-around ">
            <Link href={"/"}>
              <div>{t("beranda")}</div>
            </Link>
            <div>
              <Dropdown className=" dark:bg-[#1F1A17]">
                <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>
            </div>
            <div>
              {/* <Link href="http://103.82.242.92:5555/" target="_blank">
                Portal PPID
              </Link> */}
              <Link href="http://siberpresisi.com/" target="_blank">
                Portal PPID
              </Link>
            </div>
            <div>
              <Dropdown className="dark:bg-[#1F1A17]">
                <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>
            </div>
            <div>
              <Link href={"/kontak-kami"}>{t("kontak")}</Link>
            </div>
            <div className="flex items-center gap-3">
              <div className="hidden lg:block">{searchInput}</div>
              <div>
                <ThemeSwitch />
              </div>
              {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 className="bg-[#DD8306] text-white">Login</Button>
                </Link>
              )}
            </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>
  );
}