// components/TambahIklanModal.tsx
"use client";

import * as React from "react";
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { CalendarIcon, Plus } from "lucide-react";
import { useTranslations } from "next-intl";
import DatePicker from "react-datepicker";
import { id } from "date-fns/locale";
import "react-datepicker/dist/react-datepicker.css";

export function CalendarPolriAdd() {
  const [open, setOpen] = React.useState(false);
  const t = useTranslations("Schedule");
  const [eventDate, setEventDate] = React.useState<Date | null>(new Date());
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button onClick={() => setOpen(true)} color="primary" size="md">
          <Plus className="mr-2 h-4 w-4" /> {t("calendar-polri")}{" "}
          {t("schedule")}
        </Button>
      </DialogTrigger>
      <DialogContent size="md">
        <DialogHeader>
          <DialogTitle>Buat Jadwal Kalender Polri</DialogTitle>
        </DialogHeader>

        <div className="space-y-4">
          <div>
            <p className="font-medium mb-1">Tanggal Acara</p>
            <div className="relative">
              <DatePicker
                selected={eventDate}
                onChange={(date) => setEventDate(date)}
                dateFormat="dd MMMM yyyy"
                locale={id}
                className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
              <CalendarIcon className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500 pointer-events-none" />
            </div>
          </div>
          <div>
            <p className="font-medium">Publish Area</p>
            <div className="flex flex-wrap gap-4 mt-2">
              {["Semua", "Nasional", "Polda", "Satker", "International"].map(
                (label) => (
                  <label key={label} className="flex items-center gap-2">
                    <Checkbox id={label} />
                    <span>{label}</span>
                  </label>
                )
              )}
            </div>
          </div>

          <div>
            <p className="font-medium">Nama Acara</p>
            <Input placeholder="Masukkan nama acara" />
          </div>

          <div className="border-2 border-dashed rounded-md p-4 flex flex-col items-center justify-center text-center text-sm text-muted-foreground">
            <svg
              className="w-6 h-6 mb-2 text-blue-500"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 12v9m0-9l3 3m-3-3l-3 3m6-11a4 4 0 00-8 0v1H4a2 2 0 00-2 2v4h20v-4a2 2 0 00-2-2h-4v-1z"
              />
            </svg>
            <div>
              Drag your file(s) or{" "}
              <span className="text-blue-500 underline cursor-pointer">
                browse
              </span>
            </div>
            <div className="text-xs mt-1">Max 10 MB files are allowed</div>
          </div>

          <div>
            <p className="font-medium">Deskripsi</p>
            <Textarea placeholder="Masukkan deskripsi acara" rows={4} />
          </div>

          <div className="text-right">
            <Button
              type="submit"
              className="bg-blue-600 text-white hover:bg-blue-700"
            >
              Submit
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}