"use client";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import type { CandidateRow } from "@/types/candidate";
import { Briefcase, Calendar, Clock, X } from "lucide-react";
import { useEffect, useState } from "react";

type InterviewType = "office" | "remote";

type Props = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  candidate: CandidateRow | null;
};

export default function ScheduleInterviewDialog({ open, onOpenChange, candidate }: Props) {
  const [date, setDate] = useState("");
  const [time, setTime] = useState("");
  const [interviewType, setInterviewType] = useState<InterviewType>("office");

  useEffect(() => {
    if (open) {
      setDate("");
      setTime("");
      setInterviewType("office");
    }
  }, [open]);

  const handleAdd = () => {
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        className="max-w-md gap-0 overflow-hidden border-[#E8EDF2] p-0 shadow-lg sm:max-w-md [&>button]:hidden"
        aria-describedby={candidate ? "schedule-candidate-desc" : undefined}
        onOpenAutoFocus={(e) => e.preventDefault()}
      >
        <div className="border-b border-[#F0F2F5] px-6 pb-4 pt-6">
          <div className="flex items-start justify-between gap-4">
            <div className="flex items-start gap-3">
              <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-[#F4F5FA] ring-1 ring-[#E8EDF2]">
                <Briefcase className="size-5 text-[#383E49]" strokeWidth={1.5} aria-hidden />
              </div>
              <DialogHeader className="space-y-0 p-0 text-left">
                <DialogTitle className="text-lg font-bold leading-tight text-[#1A1A1A]">
                  Schedule Interview
                </DialogTitle>
                {candidate ? (
                  <p id="schedule-candidate-desc" className="sr-only">
                    Scheduling interview for {candidate.name}
                  </p>
                ) : null}
              </DialogHeader>
            </div>
            <button
              type="button"
              onClick={() => onOpenChange(false)}
              className="flex size-9 shrink-0 items-center justify-center rounded-full bg-[#F4F5FA] text-[#383E49] ring-1 ring-[#E8EDF2] transition hover:bg-[#ECEEF2]"
              aria-label="Close"
            >
              <X className="size-4" />
            </button>
          </div>
        </div>

        <div className="space-y-5 px-6 py-6">
          <div className="relative">
            <Input
              type="text"
              value={date}
              onChange={(e) => setDate(e.target.value)}
              placeholder="Schedule Date"
              className="h-11 rounded-lg border-[#EEF1F4] bg-[#F8F9FC] pr-10 text-[13px] text-[#272833] placeholder:text-[#ABAFB1]"
            />
            <Calendar
              className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#858C94]"
              aria-hidden
            />
          </div>

          <div className="relative">
            <Input
              type="text"
              value={time}
              onChange={(e) => setTime(e.target.value)}
              placeholder="Schedule Time"
              className="h-11 rounded-lg border-[#EEF1F4] bg-[#F8F9FC] pr-10 text-[13px] text-[#272833] placeholder:text-[#ABAFB1]"
            />
            <Clock
              className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#858C94]"
              aria-hidden
            />
          </div>

          <div className="space-y-3">
            <Label className="text-sm font-bold text-[#272833]">Select Type</Label>
            <div className="flex flex-wrap gap-6">
              <label className="flex cursor-pointer items-center gap-2 text-sm font-medium text-[#272833]">
                <input
                  type="radio"
                  name="interview-type"
                  checked={interviewType === "office"}
                  onChange={() => setInterviewType("office")}
                  className="size-4 accent-[#074473]"
                />
                Office
              </label>
              <label className="flex cursor-pointer items-center gap-2 text-sm font-medium text-[#272833]">
                <input
                  type="radio"
                  name="interview-type"
                  checked={interviewType === "remote"}
                  onChange={() => setInterviewType("remote")}
                  className="size-4 accent-[#074473]"
                />
                Remote
              </label>
            </div>
          </div>
        </div>

        <DialogFooter className="flex-row justify-end gap-3 border-t border-[#F0F2F5] bg-[#FAFBFC] px-6 py-4 sm:justify-end">
          <Button
            type="button"
            variant="outline"
            className="h-10 min-w-[100px] rounded-md border-[#D1D5DB] bg-white font-medium text-[#272833] hover:bg-[#F9FAFB]"
            onClick={() => onOpenChange(false)}
          >
            Cancel
          </Button>
          <Button
            type="button"
            className="h-10 min-w-[100px] rounded-md bg-[#074473] font-medium text-white hover:bg-[#074473]/90"
            onClick={handleAdd}
          >
            Add
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}