"use client";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { UserRound } from "lucide-react";
import { useEffect, useState } from "react";
import { toast } from "sonner";

const fieldShell =
  "h-[52px] w-full rounded-lg border-0 bg-[#F4F5FA] px-4 text-[15px] text-[#1C1D22] shadow-none placeholder:text-[#8B8D97] focus-visible:ring-0 focus-visible:ring-offset-0";

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

export default function AddLeaveDialog({ open, onOpenChange }: Props) {
  const [leaveType, setLeaveType] = useState("");
  const [from, setFrom] = useState("");
  const [to, setTo] = useState("");
  const [reason, setReason] = useState("");

  useEffect(() => {
    if (!open) {
      setLeaveType("");
      setFrom("");
      setTo("");
      setReason("");
    }
  }, [open]);

  const handleAdd = () => {
    if (!leaveType.trim()) {
      toast.error("Please select a leave type.");
      return;
    }
    if (!from.trim() || !to.trim()) {
      toast.error("Please choose from and to dates.");
      return;
    }
    toast.success("Leave saved (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-[520px] [&>button]:right-4 [&>button]:top-4 [&>button]:inline-flex [&>button]:h-10 [&>button]:w-10 [&>button]:items-center [&>button]:justify-center [&>button]:rounded-full [&>button]:border-0 [&>button]:bg-[#e7edf3] [&>button]:p-0 [&>button]:opacity-100 [&>button]:shadow-none [&>button]:hover:bg-[#dce6ef] [&>button]:hover:opacity-100 [&>button]:focus:ring-0 [&>button]:focus:ring-offset-0 [&>button>svg]:size-[18px] [&>button>svg]:shrink-0 [&>button>svg]:stroke-[2.25] [&>button>svg]:text-[#1C1D22]"
      >
        <DialogHeader className="space-y-4 text-left">
          <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-[#d8dbe2] bg-white">
            <UserRound className="h-5 w-5 text-[#28303f]" strokeWidth={1.5} aria-hidden />
          </div>
          <DialogTitle className="text-2xl font-bold leading-tight tracking-tight text-[#1C1D22]">
            Add New Leave
          </DialogTitle>
        </DialogHeader>

        <div className="mt-6 space-y-4">
          <Select value={leaveType || undefined} onValueChange={setLeaveType}>
            <SelectTrigger
              className={`${fieldShell} h-[52px] border-0 focus:ring-0 focus:ring-offset-0 data-[placeholder]:text-[#8B8D97]`}
            >
              <SelectValue placeholder="Leave Type" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="medical">Medical Leave</SelectItem>
              <SelectItem value="casual">Casual Leave</SelectItem>
              <SelectItem value="maternity">Maternity Leave</SelectItem>
              <SelectItem value="paternity">Paternity Leave</SelectItem>
              <SelectItem value="annual">Annual Leave</SelectItem>
              <SelectItem value="sick">Sick Leave</SelectItem>
            </SelectContent>
          </Select>

          <div className="space-y-1.5">
            <label htmlFor="leave-from" className="text-[13px] font-medium text-[#8B8D97]">
              From
            </label>
            <Input
              id="leave-from"
              type="date"
              value={from}
              onChange={(e) => setFrom(e.target.value)}
              className={`${fieldShell} min-w-0 [color-scheme:light]`}
            />
          </div>

          <div className="space-y-1.5">
            <label htmlFor="leave-to" className="text-[13px] font-medium text-[#8B8D97]">
              To
            </label>
            <Input
              id="leave-to"
              type="date"
              value={to}
              onChange={(e) => setTo(e.target.value)}
              className={`${fieldShell} min-w-0 [color-scheme:light]`}
            />
          </div>

          <Textarea
            placeholder="Leave Reason"
            value={reason}
            onChange={(e) => setReason(e.target.value)}
            className="min-h-[140px] resize-y rounded-lg border-0 bg-[#F4F5FA] px-4 py-3 text-[15px] text-[#1C1D22] placeholder:text-[#8B8D97] focus-visible:ring-0 focus-visible:ring-offset-0"
            rows={5}
          />
        </div>

        <div className="mt-8 flex flex-row flex-wrap justify-center gap-3">
          <Button
            type="button"
            variant="outline"
            className="h-11 min-w-[120px] rounded-md border-[#074473] bg-white px-8 text-sm font-semibold text-[#074473] hover:bg-[#eef4f8]"
            onClick={() => onOpenChange(false)}
          >
            Cancel
          </Button>
          <Button
            type="button"
            className="h-11 min-w-[120px] rounded-md bg-[#074473] px-8 text-sm font-semibold text-white hover:bg-[#074473]/90"
            onClick={handleAdd}
          >
            Add
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}