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: "SIBER", slug: "siber", logo: "/assets/satker/siber.png" },
  { name: "DIVKUM", slug: "divkum", logo: "/assets/satker/divkum.png" },
  { name: "PUSKEU", slug: "puskeu", logo: "/assets/satker/puskeu.png" },
  { name: "YANMA", slug: "yanma", logo: "/assets/satker/logo-yanma.png" },
  { name: "SSDM", slug: "ssdm", logo: "/assets/satker/ssdm.png" },
  { name: "ITWASUM", slug: "itwasum", logo: "/assets/satker/itwasum.png" },
  { name: "STIK-PTIK", slug: "stik-ptik", logo: "/assets/satker/stik-ptik.png" },
  { name: "SATUAN KERJA POLRI", slug: "satuan-kerja-polri", logo: "/assets/satker/satuan-kerja-polri.png" },
  { name: "BRIMOB", slug: "brimob", logo: "/assets/satker/brimob.png" },
  { name: "DIV HUMAS", slug: "div-humas", logo: "/assets/satker/div-humas.png" },
  { name: "PUSLITBANG", slug: "puslitbang", logo: "/assets/satker/puslitbang.png" },
  { name: "BINMAS", slug: "binmas", logo: "/assets/satker/binmas.png" },
  { name: "DIV TIK", slug: "div-tik", logo: "/assets/satker/div-tik.png" },
  { name: "SPRIPIM", slug: "spripim", logo: "/assets/satker/spripim.png" },
  { name: "DIVPROPRAM", slug: "divpropram", logo: "/assets/satker/div-propram.png" },
  { name: "KORPS SABHARA BAHARKAM", slug: "korps-sabhara-baharkam", logo: "/assets/satker/khorp-sabhara-baharkam.png" },
  { name: "PUSDOKKES", slug: "pusdokkes", logo: "/assets/satker/pusdokkes.png" },
  { name: "BAHARKAM", slug: "baharkam", logo: "/assets/satker/baharkam.png" },
  { name: "POLAIRUD", slug: "polairud", logo: "/assets/satker/polairud.png" },
  { name: "POLAIR", slug: "polair", logo: "/assets/satker/polair.png" },
  { name: "POLUDARA", slug: "poludara", logo: "/assets/satker/poludara.png" },
  { name: "LEMDIKLAT", slug: "lemdiklat", logo: "/assets/satker/lemdiklat.png" },
  { name: "AKPOL", slug: "akpol", logo: "/assets/satker/akpol.png" },
  { name: "KORLANTAS", slug: "korlantas", logo: "/assets/satker/korlantas.png" },
  { name: "PUSINAFIS", slug: "pusinafis", logo: "/assets/satker/pusinafis.png" },
  { name: "PUSJARAH", slug: "pusjarah", logo: "/assets/satker/pusjarah.png" },
  { name: "PUSIKNAS", slug: "pusiknas", logo: "/assets/satker/pusiknas.png" },
  { name: "SLOG", slug: "slog", logo: "/assets/satker/slog.png" },
  { name: "BAINTELKAM", slug: "baintelkam", logo: "/assets/satker/baintelkam.jpg" },
  { name: "BARESKRIM", slug: "bareskrim", logo: "/assets/satker/bareskrim.png" },
  { name: "DIVHUBINTER", slug: "divhubinter", logo: "/assets/satker/divhubinter.png" },
  { name: "SETUM", slug: "setum", logo: "/assets/satker/setum.png" },
  { name: "PUSLABFOR", slug: "puslabfor", logo: "/assets/satker/puslabfor.png" },
  { name: "DENSUS 88", slug: "densus-88", logo: "/assets/satker/densus88.png" },
  { name: "SAHLI KAPOLRI", slug: "sahli-kapolri", logo: "/assets/satker/sahli-kapolri.png" },
  { name: "SOPS", slug: "sops", logo: "/assets/satker/sops.png" },
  { name: "SRENA", slug: "srena", logo: "/assets/satker/srena.png" },
  { name: "SESPIM POLRI", slug: "sespim-polri", logo: "/assets/satker/sespim-polri.png" },
  { name: "SETUPA POLRI", slug: "setupa-polri", logo: "/assets/satker/setupa-polri.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">
      {/* Header */}
      {/* <Reveal> */}
      {/* <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
          {pathname?.split("/")[1] == "in" ? (
            <>
              {t("coverageOnly")}&nbsp;<span className="text-[#bb3523]">{t("division")}</span>{" "}
            </>
          ) : (
            <>
              {t("division")}&nbsp;
              <span className="text-[#bb3523]">{t("coverageOnly")}</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")} 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")}
            <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 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") : t("seeMore")}
            </Button>
          </div>
        )} */}
      {/* </Reveal> */}
    </div>
  );
};

export default Division;