"use client";

import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { CalendarDays, CalendarFold } from "lucide-react";
import { useEffect, useState } from "react";
import { toast } from "sonner";

type Props = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
};

const fieldClassName =
  "h-[40px] rounded-md border border-[#EFF1F7] bg-[#F9FAFD] px-3 text-sm text-[#1C1D22] placeholder:text-[#A7ACB9] focus-visible:ring-0 focus-visible:ring-offset-0";

export default function AddHolidayDialog({ open, onOpenChange }: Props) {
  const [holidayName, setHolidayName] = useState("");
  const [holidayDate, setHolidayDate] = useState("");

  useEffect(() => {
    if (!open) {
      setHolidayName("");
      setHolidayDate("");
    }
  }, [open]);

  const handleAdd = () => {
    if (!holidayName.trim()) {
      toast.error("Please enter holiday name.");
      return;
    }
    if (!holidayDate.trim()) {
      toast.error("Please select holiday date.");
      return;
    }
    toast.success("Holiday added (demo). Connect your API to persist.");
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-[480px] gap-0 rounded-2xl border-0 bg-white p-6 shadow-xl sm:max-w-[440px] [&>button]:right-4 [&>button]:top-4 [&>button]:inline-flex [&>button]:h-7 [&>button]:w-7 [&>button]:items-center [&>button]:justify-center [&>button]:rounded-md [&>button]:border-0 [&>button]:bg-[#E8F1F8] [&>button]:p-0 [&>button]:opacity-100 [&>button]:shadow-none [&>button]:hover:bg-[#DFEBF5] [&>button]:hover:opacity-100 [&>button]:focus:ring-0 [&>button]:focus:ring-offset-0 [&>button>svg]:size-4 [&>button>svg]:text-[#425466]">
        <DialogHeader className="space-y-3 text-left">
          <div className="flex size-8 items-center justify-center rounded-lg border border-[#DCE6F0] bg-white">
            <CalendarFold className="size-4 text-[#00467A]" strokeWidth={1.8} aria-hidden />
          </div>
          <DialogTitle className="text-lg font-semibold text-[#101828]">Add New Holiday</DialogTitle>
        </DialogHeader>

        <div className="mt-5 space-y-3">
          <Input
            value={holidayName}
            onChange={(event) => setHolidayName(event.target.value)}
            placeholder="Holiday Name"
            className={fieldClassName}
          />

          <div className="relative">
            <Input
              type="text"
              value={holidayDate}
              onChange={(event) => setHolidayDate(event.target.value)}
              placeholder="dd / mm / yyyy"
              className={`${fieldClassName} pr-10`}
            />
            <CalendarDays
              className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#6B7280]"
              aria-hidden
            />
          </div>
        </div>

        <div className="mt-5 grid grid-cols-2 gap-3">
          <Button
            type="button"
            variant="outline"
            className="h-[38px] rounded-md border-[#E4E7EC] bg-white text-sm font-semibold text-[#344054] hover:bg-[#F9FAFB]"
            onClick={() => onOpenChange(false)}
          >
            Cancel
          </Button>
          <Button
            type="button"
            className="h-[38px] rounded-md bg-[#074473] text-sm font-semibold text-white hover:bg-[#074473]/90"
            onClick={handleAdd}
          >
            Add
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}