// "use client";

// import { Button } from "@/components/ui/button";
// import {
//   Dialog,
//   DialogContent,
//   DialogFooter,
//   DialogHeader,
//   DialogTitle,
//   DialogTrigger,
// } from "@/components/ui/dialog";
// import { z } from "zod";
// import { useForm } from "react-hook-form";
// import { zodResolver } from "@hookform/resolvers/zod";
// import {
//   Form,
//   FormControl,
//   FormDescription,
//   FormField,
//   FormItem,
//   FormLabel,
//   FormMessage,
// } from "@/components/ui/form";
// import { useRouter } from "@/i18n/routing";
// import { Input } from "@/components/ui/input";
// import { Checkbox } from "@/components/ui/checkbox";
// import { getUserRoles, postCategory } from "@/service/settings/settings";
// import { Fragment, useEffect, useState } from "react";
// import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
// import { Icon } from "@iconify/react/dist/iconify.js";
// import { Textarea } from "@/components/ui/textarea";
// import { close, error, loading } from "@/config/swal";
// import { useToast } from "@/components/ui/use-toast";
// import { stringify } from "querystring";
// import { useDropzone } from "react-dropzone";
// import { CloudUpload } from "lucide-react";
// import Image from "next/image";
// import { Upload } from "tus-js-client";
// import { getCookiesDecrypt } from "@/lib/utils";
// import Cookies from "js-cookie";
// import { useTranslations } from "next-intl";

// const wilayahList = [
//   { id: "mabes", label: "Mabes" },
//   { id: "polda", label: "Polda" },
//   { id: "satker", label: "Satker" },
// ];

// const jumlahList = [5, 10, 15, 20, 25, 30];

// export default function CreateSettingTracking() {
//   const t = useTranslations("Menu");
//   const [isOpen, setIsOpen] = useState(false);

//   const form = useForm({
//     defaultValues: {
//       wilayah: [] as string[],
//       jumlah: [] as number[],
//     },
//   });

//   const onSubmit = (values: any) => {
//     console.log("Submitted values:", values);
//     setIsOpen(false);
//   };

//   return (
//     <Dialog open={isOpen} onOpenChange={setIsOpen}>
//       <DialogTrigger asChild>
//         <Button onClick={() => setIsOpen(true)}>Tambah Setting Tracking</Button>
//       </DialogTrigger>

//       <DialogContent className="sm:max-w-md">
//         <DialogHeader>
//           <DialogTitle>Add Setting Tracking Berita Harian</DialogTitle>
//         </DialogHeader>

//         <Form {...form}>
//           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
//             {/* Wilayah */}
//             <FormField
//               control={form.control}
//               name="wilayah"
//               render={({ field }) => (
//                 <FormItem>
//                   <FormLabel>Wilayah</FormLabel>
//                   <div className="flex gap-4">
//                     {wilayahList.map((item) => (
//                       <div key={item.id} className="flex items-center gap-2">
//                         <Checkbox
//                           checked={field.value.includes(item.id)}
//                           onCheckedChange={(checked) => {
//                             const updated = checked
//                               ? [...field.value, item.id]
//                               : field.value.filter((val) => val !== item.id);
//                             field.onChange(updated);
//                           }}
//                         />
//                         <label className="text-sm">{item.label}</label>
//                       </div>
//                     ))}
//                   </div>
//                 </FormItem>
//               )}
//             />

//             <FormField
//               control={form.control}
//               name="jumlah"
//               render={({ field }) => (
//                 <FormItem>
//                   <FormLabel>Jumlah Tracking Berita Harian</FormLabel>
//                   <div className="flex gap-4 flex-wrap">
//                     {jumlahList.map((num) => (
//                       <div key={num} className="flex items-center gap-2">
//                         <Checkbox
//                           checked={field.value.includes(num)}
//                           onCheckedChange={(checked) => {
//                             const updated = checked
//                               ? [...field.value, num]
//                               : field.value.filter((val) => val !== num);
//                             field.onChange(updated);
//                           }}
//                         />
//                         <label className="text-sm">{num}</label>
//                       </div>
//                     ))}
//                   </div>
//                 </FormItem>
//               )}
//             />

//             <DialogFooter>
//               <Button type="submit">Tambah Setting</Button>
//             </DialogFooter>
//           </form>
//         </Form>
//       </DialogContent>
//     </Dialog>
//   );
// }