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";

const regions = [
  { name: "Polda Metro Jaya", slug: "metro-jaya", logo: "/assets/polda/polda-metro.png" },
  { name: "Polda Jawa Barat", slug: "jawa-barat", logo: "/assets/polda/polda-jabar.png" },
  { name: "Polda Banten", slug: "banten", logo: "/assets/polda/polda-banten.png" },
  { name: "Polda Jawa Tengah", slug: "jawa-tengah", logo: "/assets/polda/polda-jateng.png" },
  { name: "Polda D.I Yogyakarta", slug: "di-yogyakarta", logo: "/assets/polda/polda-diy.png" },
  { name: "Polda Jawa Timur", slug: "jawa-timur", logo: "/assets/polda/polda-jatim.png" },
  { name: "Polda Aceh", slug: "aceh", logo: "/assets/polda/polda-aceh.png" },
  { name: "Polda Sumatera Utara", slug: "sumatera-utara", logo: "/assets/polda/polda-sumut.png" },
  { name: "Polda Sumatera Barat", slug: "sumatera-barat", logo: "/assets/polda/polda-sumbar.png" },
  { name: "Polda Riau", slug: "riau", logo: "/assets/polda/polda-riau.png" },
  { name: "Polda Kep. Riau", slug: "kepulauan-riau", logo: "/assets/polda/polda-kepri.png" },
  { name: "Polda Jambi", slug: "jambi", logo: "/assets/polda/polda-jambi.png" },
  { name: "Polda Sumatera Selatan", slug: "sumatera-selatan", logo: "/assets/polda/polda-sumsel.png" },
  { name: "Polda Kep. Bangka Belitung", slug: "bangka-belitung", logo: "/assets/polda/polda-bangkabelitung.png" },
  { name: "Polda Bengkulu", slug: "bengkulu", logo: "/assets/polda/polda-bengkulu.png" },
  { name: "Polda Lampung", slug: "lampung", logo: "/assets/polda/polda-lampung.png" },
  { name: "Polda Nusa Tenggara Barat", slug: "ntb", logo: "/assets/polda/polda-ntb.png" },
  { name: "Polda Nusa Tenggara Timur", slug: "ntt", logo: "/assets/polda/polda-ntt.png" },
  { name: "Polda Bali", slug: "bali", logo: "/assets/polda/polda-bali.png" },
  { name: "Polda Kalimantan Barat", slug: "kalimantan-barat", logo: "/assets/polda/polda-kalbar.png" },
  { name: "Polda Kalimantan Tengah", slug: "kalimantan-tengah", logo: "/assets/polda/polda-kalteng.png" },
  { name: "Polda Kalimantan Selatan", slug: "kalimantan-selatan", logo: "/assets/polda/polda-kalsel.png" },
  { name: "Polda Kalimantan Timur", slug: "kalimantan-timur", logo: "/assets/polda/polda-kaltim.png" },
  { name: "Polda Kalimantan Utara", slug: "kalimantan-utara", logo: "/assets/polda/polda-kalut.png" },
  { name: "Polda Sulawesi Tengah", slug: "sulawesi-tengah", logo: "/assets/polda/polda-sulteng.png" },
  { name: "Polda Sulawesi Utara", slug: "sulawesi-utara", logo: "/assets/polda/polda-sulut.png" },
  { name: "Polda Gorontalo", slug: "gorontalo", logo: "/assets/polda/polda-gorontalo.png" },
  { name: "Polda Sulawesi Barat", slug: "sulawesi-barat", logo: "/assets/polda/polda-sulbar.png" },
  { name: "Polda Sulawesi Selatan", slug: "sulawesi-selatan", logo: "/assets/polda/polda-sulsel.png" },
  { name: "Polda Sulawesi Tenggara", slug: "sulawesi-tenggara", logo: "/assets/polda/polda-sultenggara.png" },
  { name: "Polda Maluku Utara", slug: "maluku-utara", logo: "/assets/polda/polda-malut.png" },
  { name: "Polda Maluku", slug: "maluku", logo: "/assets/polda/polda-maluku.png" },
  { name: "Polda Papua Barat", slug: "papua-barat", logo: "/assets/polda/polda-papbar.png" },
  { name: "Polda Papua", slug: "papua", logo: "/assets/polda/polda-papua.png" },
  { name: "Satuan Kerja POLRI", slug: "satker-polri", logo: "/assets/polda/polda-satker.jpeg" },
  { name: "Internasional", slug: "internasional", logo: "/assets/polda/internasional.png" },
];

const Coverage: React.FC = () => {
  const [seeAllValue, setSeeAllValue] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");
  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((polda) => polda.name.toLowerCase().includes(value));
    setFilteredList(filtered);
  };

  return (
    <div className="max-w-screen-xl mx-auto px-4 lg:px-12 py-6">
      <Reveal>
        {/* Header */}
        <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("area")}</span>{" "}
            </>
          ) : (
            <>
              {t("area")}&nbsp;
              <span className="text-[#bb3523]">{t("coverageOnly")}</span>
            </>
          )}
        </h2>

        {/* <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
          Liputan <span className="text-[#bb3523]">Wilayah</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 text-white flex justify-center items-center gap-2 rounded-md hover:bg-red-700">
            {t("searchRegional")}
            <Icon icon="ri:arrow-right-s-line" fontSize={20} />
          </button>
        </div>

        {/* Grid Wilayah */}
        <div className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-9 gap-6">
          <div className="flex flex-col items-center text-center group">
            <Link href="/polda/polda-kaltara" className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
              <img src="/assets/polda/polda-kalut.png" alt="polda-kaltara" className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
            </Link>
            <p className="text-md font-semibold">Polda Kalimantan Utara</p>
          </div>
          {filteredList && filteredList.length > 0 ? (
            filteredList.map((region, index) =>
              !seeAllValue ? (
                index < 8 ? (
                  <Link href={`/polda/${region.slug}`} key={index} className="flex flex-col items-center text-center group">
                    <div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
                      <img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
                    </div>
                    <p className="text-md font-semibold">{region.name}</p>
                  </Link>
                ) : (
                  ""
                )
              ) : (
                <Link href={`/polda/${region.slug}`} key={index} className="flex flex-col items-center text-center group">
                  <div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
                    <img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
                  </div>
                  <p className="text-md font-semibold">{region.name}</p>
                </Link>
              )
            )
          ) : (
            <p className="text-center text-[#bb3523] font-semibold">{t("notFound")}</p>
          )}
        </div>

        {filteredList && filteredList.length > 8 && (
          <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 Coverage;