import React, { useState } from "react";
import { Button } from "../ui/button";
import { Reveal } from "./Reveal";
import { Icon } from "@iconify/react/dist/iconify.js";
import { Link } from "@/i18n/routing";
import { useTranslations } from "next-intl";
import { usePathname } from "next/navigation";
import Image from "next/image";

const regions = [
  { name: "ITWASUM POLRI", slug: "itwasum", logo: "/logo/satker/ITWASUM.png" },
  {
    name: "BAINTELKAM POLRI ",
    slug: "baintelkam",
    logo: "/logo/satker/BAINTELKAM.png",
  },
  {
    name: "BAHARKAM POLRI",
    slug: "baharkam",
    logo: "/logo/satker/BAHARKAM.png",
  },
  {
    name: "BARESKRIM POLRI",
    slug: "bareskrim",
    logo: "/logo/satker/BARESKRIM.png",
  },
  {
    name: "LEMDIKLAT POLRI",
    slug: "lemdiklat",
    logo: "/logo/satker/LEMDIKLAT.png",
  },
  { name: "KORBRIMOB POLRI", slug: "brimob", logo: "/logo/satker/BRIMOB.png" },
  { name: "STAMAOPS POLRI", slug: "sops", logo: "/logo/satker/SOPS.png" },
  { name: "STAMARENA POLRI", slug: "srena", logo: "/logo/satker/SRENA.png" },
  { name: "SSDM POLRI", slug: "ssdm", logo: "/logo/satker/SSDM.png" },
  { name: "SLOG POLRI", slug: "slog", logo: "/logo/satker/SLOG.png" },
  {
    name: "SAHLI KAPOLRI",
    slug: "stafahli",
    logo: "/logo/satker/STAFAHLI.png",
  },
  {
    name: "DIVPROPRAM POLRI",
    slug: "divpropram",
    logo: "/logo/satker/DIVPROPAM.png",
  },
  { name: "DIVKUM", slug: "divkum", logo: "/logo/satker/DIVKUM.png" },
  {
    name: "DIVHUBINTER POLRI",
    slug: "divhubinter",
    logo: "/logo/satker/DIVHUBINTER.png",
  },
  { name: "DIVTIK POLRI", slug: "div-tik", logo: "/logo/satker/DIV-TIK.png" },
  {
    name: "KORLANTAS POLRI",
    slug: "korlantas",
    logo: "/logo/satker/KORLANTAS.png",
  },
  {
    name: "DENSUS 88 POLRI",
    slug: "densus-88",
    logo: "/logo/satker/DENSUS-88.png",
  },
  {
    name: "PUSDOKKES POLRI",
    slug: "pusdokkes",
    logo: "/logo/satker/PUSDOKKES.png",
  },
  {
    name: "PUSLITBANG POLRI",
    slug: "puslitbang",
    logo: "/logo/satker/PUSLITBANG.png",
  },
  { name: "PUSKEU POLRI", slug: "puskeu", logo: "/logo/satker/PUSKEU.png" },
  {
    name: "PUSJARAH POLRI",
    slug: "pusjarah",
    logo: "/logo/satker/PUSJARAH.png",
  },
  { name: "SETUM POLRI", slug: "setum", logo: "/logo/satker/SETUM.png" },
  { name: "YANMA POLRI", slug: "yanma", logo: "/logo/satker/YANMA.png" },
  { name: "SPRIPIM POLRI", slug: "spripim", logo: "/logo/satker/SPRIPIM.png" },
  {
    name: "KORPOLAIRUD BAHARKAM POLRI",
    slug: "polairud",
    logo: "/logo/satker/POLAIRUD.png",
  },
  {
    name: "KORSABHARA BAHARKAM POLRI",
    slug: "korps-sabhara-baharkam",
    logo: "/logo/satker/KORPS-SABHARA-BAHARKAM.png",
  },
  {
    name: "KORBINMAS BAHARKAM POLRI",
    slug: "binmas",
    logo: "/logo/satker/BINMAS.png",
  },
  {
    name: "DITTIPIDUM BARESKRIM POLRI",
    slug: "dittipidum",
    logo: "/logo/satker/DITTIPIDUM.png",
  },
  {
    name: "DITTIPIDEKSUS BARESKRIM POLRI",
    slug: "dittipideksus",
    logo: "/logo/satker/DITTIPIDEKSUS.png",
  },
  {
    name: "DITTIPIDKOR BARESKRIM POLRI",
    slug: "dittipidkor",
    logo: "/logo/satker/DITTIPIDKOR.png",
  },
  {
    name: "DITTIPIDNARKOBA BARESKRIM POLRI",
    slug: "dittipidnarkoba",
    logo: "/logo/satker/DITTIPIDNARKOBA.png",
  },
  {
    name: "DITTIPIDTER BARESKRIM POLRI",
    slug: "dittipidter",
    logo: "/logo/satker/DITTIPIDTER.png",
  },
  {
    name: "DITTIPIDSIBER BARESKRIM POLRI",
    slug: "dittipidsiber",
    logo: "/logo/satker/DITTIPIDSIBER.png",
  },
  {
    name: "DIT PPA-PPO BARESKRIM POLRI",
    slug: "dit-ppa-ppo",
    logo: "/logo/satker/DITPPAPPO.png",
  },
  {
    name: "PUSLABFOR BARESKRIM POLRI",
    slug: "puslabfor",
    logo: "/assets/satker/puslabfor.png",
  },
  {
    name: "PUSIKNAS BARESKRIM POLRI",
    slug: "pusiknas",
    logo: "/logo/satker/PUSKINAS.png",
  },
  {
    name: "STIK LEMDIKLAT POLRI",
    slug: "stik-ptik",
    logo: "/logo/satker/STIK-PTIK.png",
  },
  {
    name: "AKPOL LEMDIKLAT POLRI",
    slug: "akpol",
    logo: "/logo/satker/AKPOL.png",
  },
  {
    name: "SESPIM LEMDIKLAT POLRI",
    slug: "sespim-polri",
    logo: "/logo/satker/SESPIM-POLRI.png",
  },
  {
    name: "SETUKPA LEMDIKLAT POLRI",
    slug: "setupa-polri",
    logo: "/logo/satker/SETUPA-POLRI.png",
  },
  {
    name: "SEPOLWAN LEMDIKLAT POLRI",
    slug: "sepolwan-polri",
    logo: "/logo/satker/SEPOLWAN-POLRI.png",
  },
  {
    name: "SEBASA LEMDIKLAT POLRI",
    slug: "sebasa-polri",
    logo: "/logo/satker/SEBASA-POLRI.png",
  },
  {
    name: "RUMKIT BHAYANGKARA TK I",
    slug: "rumkit-bhayangkara",
    logo: "/logo/satker/RUMKIT-BHAYANGKARA.png",
  },
  { name: "POLAIR", slug: "polair", logo: "/logo/satker/POLAIR.png" },
  { name: "POLUDARA", slug: "poludara", logo: "/logo/satker/POLUDARA.png" },
  { name: "PUSINAFIS", slug: "pusinafis", logo: "/logo/satker/PUSINAFIS.png" },
  // { name: "SIBER", slug: "siber", logo: "/logo/satker/SIBER.png" },
  // { name: "SATUAN KERJA POLRI", slug: "satuan-kerja-polri", logo: "/logo/satker/SATUAN-KERJA-POLRI.png" },
  // { name: "DIV HUMAS", slug: "div-humas", logo: "/logo/satker/DIV-HUMAS.png" },
];

const Division = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const [seeAllValue, setSeeAllValue] = useState(false);
  const [filteredList, setFilteredList] = useState<typeof regions | undefined>(
    regions
  );
  const pathname = usePathname();
  const t = useTranslations("LandingPage");

  const handleSearch = () => {
    const value = searchTerm.toLowerCase();

    const filtered = regions.filter((satker) =>
      satker.name.toLowerCase().includes(value)
    );
    setFilteredList(filtered);
  };

  const shimmer = (w: number, h: number) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="g">
      <stop stop-color="#bcbcbd" offset="20%" />
      <stop stop-color="#f9fafb" offset="50%" />
      <stop stop-color="#bcbcbd" offset="70%" />
    </linearGradient>
  </defs>
  <rect width="${w}" height="${h}" fill="#bcbcbd" />
  <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
  <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
</svg>`;

  const toBase64 = (str: string) =>
    typeof window === "undefined"
      ? Buffer.from(str).toString("base64")
      : window.btoa(str);

  return (
    <div className="mx-auto px-4 w-full">
      {/* <Reveal> */}
      {/* <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-3">
          {pathname?.split("/")[1] == "in" ? (
            <>
              {t("coverageOnly", { defaultValue: "Coverage Only" })}&nbsp;<span className="text-[#bb3523]">{t("division", { defaultValue: "Division" })}</span>{" "}
            </>
          ) : (
            <>
              {t("division", { defaultValue: "Division" })}&nbsp;
              <span className="text-[#bb3523]">{t("coverageOnly", { defaultValue: "Coverage Only" })}</span>
            </>
          )}
        </h2> */}
      {/* <div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div> */}

      {/* Pencarian */}
      {/* <div className="flex items-center justify-center gap-4 mb-6">
          <input onChange={(e) => setSearchTerm(e.target.value)} type="text" placeholder={t("search", { defaultValue: "Search" })} className="w-4/5 px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#bb3523] focus:outline-none" />
          <button onClick={handleSearch} className="px-2 w-1/5 lg:px-4 py-2 bg-[#bb3523] text-xs lg:text-base flex justify-center items-center gap-2 text-white rounded-md hover:bg-red-700">
            {t("searchDivision", { defaultValue: "Search Division" })}
            <Icon icon="ri:arrow-right-s-line" fontSize={20} />
          </button>
        </div> */}

      {/* Grid Wilayah */}
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6 px-4 overflow-y-auto max-h-[60vh]">
        {filteredList?.map((region: any) => (
          <Link
            href={`/satker/${region.slug}`}
            className="flex flex-col items-center text-center p-3 border rounded-lg shadow-md hover:shadow-lg transition-all"
          >
            <div className="mb-1 flex items-center justify-center">
              <Image
                priority={true}
                placeholder={`data:image/svg+xml;base64,${toBase64(
                  shimmer(700, 475)
                )}`}
                width={1920}
                height={1080}
                src={region.logo}
                alt={region.name}
                className="w-14 h-14 object-contain"
              />
            </div>
            <p className="text-xs font-semibold">{region.name}</p>
          </Link>
        ))}
      </div>
      {/* {filteredList && filteredList.length > 9 && (
          <div className="flex justify-center py-5">
            <Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
              {seeAllValue ? t("seeLess", { defaultValue: "See Less" }) : t("seeMore", { defaultValue: "See More" })}
            </Button>
          </div>
        )} */}
      {/* </Reveal> */}
    </div>
  );
};

export default Division;