"use client";

import React, { useEffect, useState } from "react";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import Image from "next/image";
import Coverage from "./coverage";
import Division from "./division";
import { useTranslations } from "next-intl";
import { useParams } from "next/navigation";

const AreaCoverageWorkUnits = () => {
  const [openPolda, setOpenPolda] = useState(false);
  const [openSatker, setOpenSatker] = useState(false);
  const t = useTranslations("LandingPage");
  const params = useParams();
  const locale = params?.locale;

  useEffect(() => {
    if (openPolda || openSatker) {
      document.body.classList.add("overflow-hidden");
    } else {
      document.body.classList.remove("overflow-hidden");
    }

    return () => {
      document.body.classList.remove("overflow-hidden");
    };
  }, [openPolda, openSatker]);

  return (
    <>
      {locale === "in" && (
        <div className="mx-auto px-4 lg:px-0 py-6">
          <h2 className="text-start text-lg md:text-xl font-bold text-[#bb3523] border-b-2 border-[#bb3523] mb-4 uppercase">
            {t("areaCoverage", { defaultValue: "Area Coverage" })}
          </h2>
          <div className="flex flex-col justify-center lg:flex-row gap-8 ">
            {/* POLDA */}

            <Dialog open={openPolda} onOpenChange={setOpenPolda}>
              <DialogTrigger asChild>
                <button
                  onClick={() => setOpenPolda(true)}
                  className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 w-full border-2 border-transparent hover:border-[#bb3523] transition-all duration-300"
                >
                  <Image
                    priority={true}
                    width={1920}
                    height={1080}
                    alt="indo"
                    src="/assets/indo.png"
                    className="h-32 w-32 group-hover:scale-110 group-hover:border-[#bb3523] "
                  />
                  <p className="text-base font-bold">{t("regionalPolice", { defaultValue: "Regional Police" })}</p>
                </button>
              </DialogTrigger>
              <DialogContent
                size="md"
                className="max-h-[90vh] overflow-hidden flex flex-col"
                data-lenis-prevent
              >
                <DialogHeader className="flex flex-col justify-center">
                  <DialogTitle>
                    <p className="text-center">{t("regionalPolice", { defaultValue: "Regional Police" })}</p>
                  </DialogTitle>
                  <DialogTitle>
                    <div className="h-1 w-[150px] bg-[#bb3523] mx-auto mb-6 rounded"></div>
                  </DialogTitle>
                </DialogHeader>
                <div className="overflow-y-auto px-1 flex-1">
                  <Coverage />
                </div>
                <div className="text-right mt-4">
                  <DialogClose asChild>
                    <button className="text-[#bb3523] font-bold">
                      {t("close", { defaultValue: "Close" })}
                    </button>
                  </DialogClose>
                </div>
              </DialogContent>
            </Dialog>

            {/* SATKER */}

            <Dialog open={openSatker} onOpenChange={setOpenSatker}>
              <DialogTrigger asChild>
                <button className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 w-full border-2 border-transparent hover:border-[#bb3523] transition-all duration-300">
                  <Image
                    priority={true}
                    width={1920}
                    height={1080}
                    alt="polri"
                    src="/assets/logo-polri.png"
                    className="h-32 w-32 group-hover:scale-110 group-hover:border-[#bb3523] transition-transform duration-300"
                  />
                  <p className="text-base font-bold">{t("policeDivision", { defaultValue: "Police Division" })}</p>
                </button>
              </DialogTrigger>
              <DialogContent size="md" data-lenis-prevent>
                <DialogHeader className="flex flex-col justify-center">
                  <DialogTitle>
                    <p className="text-center">{t("policeDivision", { defaultValue: "Police Division" })}</p>
                  </DialogTitle>
                  <DialogTitle>
                    <div className="h-1 w-[150px] bg-[#bb3523] mx-auto mb-6 rounded"></div>
                  </DialogTitle>
                </DialogHeader>
                <Division />
                <div className="text-right mt-4">
                  <DialogClose asChild>
                    <button className="text-[#bb3523] font-bold">
                      {t("close", { defaultValue: "Close" })}
                    </button>
                  </DialogClose>
                </div>
              </DialogContent>
            </Dialog>
          </div>
        </div>
      )}
    </>
  );
};

export default AreaCoverageWorkUnits;