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

const AreaCoverageWorkUnits = () => {
  const [openPolda, setOpenPolda] = useState(false);
  const [openSatker, setOpenSatker] = useState(false);

  useEffect(() => {
    if (openPolda || openSatker) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }

    return () => {
      document.body.style.overflow = "";
    };
  }, [openPolda, openSatker]);
  return (
    <div className="mx-auto px-4 lg:px-12 py-6">
      <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
        Liputan <span className="text-[#bb3523]">Wilayah</span> &{" "}
        <span className="text-[#bb3523]">Satker</span>
      </h2>
      <div className="h-1 w-[250px] bg-[#bb3523] mx-auto mb-6 rounded"></div>
      <div className="flex flex-col justify-center lg:flex-row gap-8 ">
        {/* POLDA */}
        <Dialog open={openPolda} onOpenChange={setOpenPolda}>
          <DialogTrigger className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 px-24 border-2 border-transparent hover:border-[#bb3523] transition-all duration-300">
            <Image
              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">Polda Jajaran</p>
          </DialogTrigger>
          <DialogContent size="md" className="h-[90vh] overflow-y-auto  ">
            <DialogHeader className="flex flex-col justify-center">
              <DialogTitle>
                <p className="text-center">Polda Jajaran</p>
              </DialogTitle>
              <DialogTitle>
                <div className="h-1 w-[150px] bg-[#bb3523] mx-auto mb-6 rounded"></div>
              </DialogTitle>
            </DialogHeader>

            <div className="max-h-[70vh] overflow-y-auto">
              <Coverage />
            </div>

            <div className="text-right mt-4">
              <DialogClose asChild>
                <button className="text-[#bb3523] font-bold">Tutup</button>
              </DialogClose>
            </div>
          </DialogContent>
        </Dialog>

        {/* SATKER */}
        <Dialog open={openSatker} onOpenChange={setOpenSatker}>
          <DialogTrigger className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 px-24 border-2 border-transparent hover:border-[#bb3523] transition-all duration-300">
            <Image
              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">Satuan Kerja Polri</p>
          </DialogTrigger>
          <DialogContent size="md">
            <DialogHeader className="flex flex-col justify-center">
              <DialogTitle>
                <p className="text-center">Satuan Kerja Polri</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">Tutup</button>
              </DialogClose>
            </div>
          </DialogContent>
        </Dialog>
      </div>
    </div>
  );
};

export default AreaCoverageWorkUnits;