"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.classList.add("overflow-hidden");
    } else {
      document.body.classList.remove("overflow-hidden");
    }

    return () => {
      document.body.classList.remove("overflow-hidden");
    };
  }, [openPolda, openSatker]);
  return (
    <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">
        Liputan <span className="text-[#bb3523]">Wilayah</span> & <span className="text-[#bb3523]">Satker</span>
      </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 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>
            </button>
          </DialogTrigger>
          <DialogContent size="md" className="max-h-[90vh] overflow-hidden flex flex-col  ">
            <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="overflow-y-auto px-1 flex-1">
              <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 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 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>
            </button>
          </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;