src/components/tasks/SimpleAddTaskDialog.tsx

import React, { useState, useEffect, useRef } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import { CalendarIcon, Loader2, X, ChevronDown, Check, Search } from "lucide-react";
import { format } from "date-fns";

import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Calendar } from "@/components/ui/calendar";
import { toast } from "@/lib/custom-toast";
import { tasksApi, TaskCreateRequest } from "@/services/tasksApi";
import { Employee } from "@/types";
import { cn } from "@/lib/utils";
import SlateRichTextEditor from "@/components/custom/SlateRichTextEditor";

// Form schema
const formSchema = z.object({
  title: z.string().min(1, "Title is required"),
  description: z.string().min(1, "Description is required"),
  type: z.string().min(1, "Type is required"),
  priority: z.string().min(1, "Priority is required"),
  status: z.string().min(1, "Status is required"),
  assignedTo: z.number().nullable(),
  estimates: z.string().optional(),
  stateDate: z.date(),
  endDate: z.date().nullable().optional(),
});

// Custom dropdown component
interface DropdownOption {
  value: string;
  label: string;
}

interface CustomDropdownProps {
  options: DropdownOption[];
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
}

const CustomDropdown: React.FC<CustomDropdownProps> = ({

  options,

  value,

  onChange,

  placeholder = "Select option"

}) => {
  const [isOpen, setIsOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const dropdownRef = useRef<HTMLDivElement>(null);
  const searchInputRef = useRef<HTMLInputElement>(null);
  
  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };
    
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);
  
  // Focus search input when dropdown opens
  useEffect(() => {
    if (isOpen && searchInputRef.current && options.length > 5) {
      setTimeout(() => {
        searchInputRef.current?.focus();
      }, 10);
    }
  }, [isOpen, options.length]);
  
  // Clear search when dropdown closes
  useEffect(() => {
    if (!isOpen) {
      setSearchQuery('');
    }
  }, [isOpen]);
  
  const selectedOption = options.find(option => option.value === value);
  
  // Filter options based on search query
  const filteredOptions = searchQuery 
    ? options.filter(option => 
        option.label.toLowerCase().includes(searchQuery.toLowerCase())
      )
    : options;
  
  return (
    <div className="relative w-full" ref={dropdownRef}>

      <button

        type="button"

        onClick={() => setIsOpen(!isOpen)}

        className="flex w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"

      >

        <span className={selectedOption ? "" : "text-muted-foreground"}>

          {selectedOption ? selectedOption.label : placeholder}

        </span>

        <ChevronDown className="h-4 w-4 opacity-50" />

      </button>

      

      {isOpen && (

        <div className="absolute z-10 mt-1 w-full rounded-md border border-input bg-popover shadow-md">

          {options.length > 5 && (

            <div className="p-2 border-b border-input">

              <div className="flex items-center gap-2 bg-background rounded-md border border-input px-2">

                <Search className="h-3.5 w-3.5 opacity-70" />

                <input

                  ref={searchInputRef}

                  type="text"

                  placeholder="Search..."

                  value={searchQuery}

                  onChange={e => setSearchQuery(e.target.value)}

                  onClick={e => e.stopPropagation()}

                  className="flex w-full h-8 bg-transparent py-1 text-sm outline-none placeholder:text-muted-foreground"

                />

                {searchQuery && (

                  <button

                    type="button"

                    onClick={e => {

                      e.stopPropagation();

                      setSearchQuery('');

                      searchInputRef.current?.focus();

                    }}

                    className="h-4 w-4 p-0 opacity-70 hover:opacity-100"

                  >

                    <X className="h-3 w-3" />

                    <span className="sr-only">Clear search</span>

                  </button>

                )}

              </div>

            </div>

          )}

          

          <ul className="max-h-[200px] overflow-auto py-1">

            {filteredOptions.length === 0 ? (

              <li className="px-3 py-2 text-sm text-muted-foreground text-center">No options found</li>

            ) : (

              filteredOptions.map((option) => (

                <li

                  key={option.value}

                  onClick={() => {

                    onChange(option.value);

                    setIsOpen(false);

                  }}

                  className={cn(

                    "flex items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground",

                    value === option.value && "bg-accent/50"

                  )}

                >

                  <span className="flex-grow">{option.label}</span>

                  {value === option.value && <Check className="h-4 w-4" />}

                </li>

              ))

            )}

          </ul>

        </div>

      )}

    </div>
  );
};

// Custom DatePicker component
interface CustomDatePickerProps {
  value: Date | null;
  onChange: (date: Date | null) => void;
  placeholder?: string;
}

const CustomDatePicker: React.FC<CustomDatePickerProps> = ({

  value,

  onChange,

  placeholder = "Pick a date"

}) => {
  const [isOpen, setIsOpen] = useState(false);
  const datePickerRef = useRef<HTMLDivElement>(null);
  
  // Close date picker when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (datePickerRef.current && !datePickerRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };
    
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);
  
  return (
    <div className="relative w-full" ref={datePickerRef}>

      <button

        type="button"

        onClick={() => setIsOpen(!isOpen)}

        className="flex w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"

      >

        <span className={value ? "" : "text-muted-foreground"}>

          {value ? format(value, "PPP") : placeholder}

        </span>

        <CalendarIcon className="h-4 w-4 opacity-50" />

      </button>

      

      {isOpen && (

        <div className="fixed top-0 left-0 right-0 z-50 flex justify-center pt-4 px-4 pb-20 items-start bg-black/50 overflow-auto min-h-screen">

          <div className="bg-white dark:bg-gray-900 rounded-lg p-4 shadow-lg">

            <div className="flex justify-between items-center mb-2">

              <h3 className="text-base font-medium">Select Date</h3>

              <Button 

                variant="ghost" 

                size="sm" 

                className="h-8 w-8 p-0" 

                onClick={() => setIsOpen(false)}

              >

                <X className="h-4 w-4" />

              </Button>

            </div>

            <Calendar

              mode="single"

              selected={value || undefined}

              onSelect={(date) => {

                onChange(date);

                setIsOpen(false);

              }}

              initialFocus

              className="rounded border"

            />

            <div className="mt-2 flex justify-end">

              <Button 

                size="sm" 

                variant="outline" 

                onClick={() => setIsOpen(false)}

              >

                Close

              </Button>

            </div>

          </div>

        </div>

      )}

    </div>
  );
};

interface SimpleAddTaskDialogProps {
  issueId: number;
  onTaskAdded: () => void;
  employees: Employee[];
  isOpen: boolean;
  onClose: () => void;
}

const SimpleAddTaskDialog: React.FC<SimpleAddTaskDialogProps> = ({

  issueId,

  onTaskAdded,

  employees,

  isOpen,

  onClose,

}) => {
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  console.log("Simple Dialog isOpen state:", isOpen); // Debug log

  // Initialize the form
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      title: "",
      description: "",
      type: "Task",
      priority: "Medium",
      status: "New",
      assignedTo: null,
      estimates: "",
      stateDate: new Date(),
      endDate: null,
    },
  });

  // Reset form when dialog opens
  useEffect(() => {
    if (isOpen) {
      console.log("Simple Dialog opened, resetting form"); // Debug log
      form.reset();
    }
  }, [isOpen, form]);

  // Handle form submission
  const onSubmit = async (values: z.infer<typeof formSchema>) => {
    setIsSubmitting(true);
    
    try {
      // Prepare task data
      const taskData: TaskCreateRequest = {
        title: values.title,
        description: values.description,
        type: values.type,
        priority: values.priority,
        status: values.status,
        assignedTo: values.assignedTo,
        estimates: values.estimates || "0",
        esUnit: 1, // Default to hours
        stateDate: values.stateDate.toISOString().split('T')[0],
        endDate: values.endDate ? values.endDate.toISOString().split('T')[0] : null,
        remainingHr: 0,
        sprintName: null,
        issuesId: issueId,
      };
      
      console.log("Creating task with data:", taskData); // Debug log
      
      // Create the task
      await tasksApi.create(taskData);
      
      // Show success message
      toast.success("Task created successfully");
      
      // Close the dialog and refresh the tasks list
      onClose();
      onTaskAdded();
      
    } catch (error) {
      console.error("Error creating task:", error);
      toast.error("Failed to create task. Please try again.");
    } finally {
      setIsSubmitting(false);
    }
  };

  // Dropdown options
  const typeOptions = [
    { value: "Task", label: "Task" }
  ];
  
  const priorityOptions = [
    { value: "Low", label: "Low" },
    { value: "Medium", label: "Medium" },
    { value: "High", label: "High" },
    { value: "Critical", label: "Critical" },
  ];
  
  const statusOptions = [
    { value: "New", label: "New" },
    { value: "In Progress", label: "In Progress" },
    { value: "In Review", label: "In Review" },
    { value: "Completed", label: "Completed" },
    { value: "Closed", label: "Closed" },
  ];
  
  const assigneeOptions = [
    { value: "null", label: "Unassigned" },
    ...employees.map(emp => ({
      value: emp.id.toString(),
      label: `${emp.firstName} ${emp.lastName}`
    }))
  ];

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4">

      <div className="bg-white dark:bg-gray-900 rounded-lg w-full max-w-[550px] p-6 max-h-[90vh] overflow-y-auto">

        <div className="flex justify-between items-center mb-4">

          <div>

            <h2 className="text-lg font-semibold">Add New Task</h2>

            <p className="text-sm text-muted-foreground">Create a new task linked to this issue.</p>

          </div>

          <Button variant="ghost" size="icon" onClick={onClose}>

            <X className="h-4 w-4" />

          </Button>

        </div>

        

        <Form {...form}>

          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-5">

            <FormField

              control={form.control}

              name="title"

              render={({ field }) => (

                <FormItem>

                  <FormLabel>Title</FormLabel>

                  <FormControl>

                    <Input placeholder="Task title" {...field} />

                  </FormControl>

                  <FormMessage />

                </FormItem>

              )}

            />

            

            <FormField

              control={form.control}

              name="description"

              render={({ field }) => (

                <FormItem>

                  <FormLabel>Description</FormLabel>

                  <FormControl>

                    <SlateRichTextEditor 

                      initialValue={field.value || ''} 

                      onChange={(value) => field.onChange(value)} 

                      placeholder="Task description" 

                      minHeight="150px" 

                    />

                  </FormControl>

                  <FormMessage />

                </FormItem>

              )}

            />

            

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">

              <FormField

                control={form.control}

                name="type"

                render={({ field }) => (

                  <FormItem>

                    <FormLabel>Type</FormLabel>

                    <FormControl>

                      <CustomDropdown

                        options={typeOptions}

                        value={field.value}

                        onChange={field.onChange}

                        placeholder="Select type"

                      />

                    </FormControl>

                    <FormMessage />

                  </FormItem>

                )}

              />

              

              <FormField

                control={form.control}

                name="priority"

                render={({ field }) => (

                  <FormItem>

                    <FormLabel>Priority</FormLabel>

                    <FormControl>

                      <CustomDropdown

                        options={priorityOptions}

                        value={field.value}

                        onChange={field.onChange}

                        placeholder="Select priority"

                      />

                    </FormControl>

                    <FormMessage />

                  </FormItem>

                )}

              />

            </div>

            

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">

              <FormField

                control={form.control}

                name="status"

                render={({ field }) => (

                  <FormItem>

                    <FormLabel>Status</FormLabel>

                    <FormControl>

                      <CustomDropdown

                        options={statusOptions}

                        value={field.value}

                        onChange={field.onChange}

                        placeholder="Select status"

                      />

                    </FormControl>

                    <FormMessage />

                  </FormItem>

                )}

              />

              

              <FormField

                control={form.control}

                name="assignedTo"

                render={({ field }) => (

                  <FormItem>

                    <FormLabel>Assigned To</FormLabel>

                    <FormControl>

                      <CustomDropdown

                        options={assigneeOptions}

                        value={field.value ? field.value.toString() : "null"}

                        onChange={(value) => field.onChange(value === "null" ? null : parseInt(value))}

                        placeholder="Select assignee"

                      />

                    </FormControl>

                    <FormMessage />

                  </FormItem>

                )}

              />

            </div>

            

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">

              <FormField

                control={form.control}

                name="stateDate"

                render={({ field }) => (

                  <FormItem>

                    <FormLabel>Start Date</FormLabel>

                    <FormControl>

                      <CustomDatePicker

                        value={field.value}

                        onChange={field.onChange}

                        placeholder="Pick a start date"

                      />

                    </FormControl>

                    <FormMessage />

                  </FormItem>

                )}

              />

              

              <FormField

                control={form.control}

                name="endDate"

                render={({ field }) => (

                  <FormItem>

                    <FormLabel>Due Date</FormLabel>

                    <FormControl>

                      <CustomDatePicker

                        value={field.value}

                        onChange={field.onChange}

                        placeholder="Pick a due date"

                      />

                    </FormControl>

                    <FormMessage />

                  </FormItem>

                )}

              />

            </div>

            

            <FormField

              control={form.control}

              name="estimates"

              render={({ field }) => (

                <FormItem>

                  <FormLabel>Estimated Hours</FormLabel>

                  <FormControl>

                    <Input 

                      type="number"

                      placeholder="Estimated hours to complete"

                      {...field}

                    />

                  </FormControl>

                  <FormMessage />

                </FormItem>

              )}

            />

            

            <div className="flex justify-end gap-2 pt-2">

              <Button

                type="button"

                variant="outline"

                onClick={onClose}

                disabled={isSubmitting}

              >

                Cancel

              </Button>

              <Button type="submit" disabled={isSubmitting}>

                {isSubmitting ? (

                  <>

                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />

                    Creating...

                  </>

                ) : (

                  "Create Task"

                )}

              </Button>

            </div>

          </form>

        </Form>

      </div>
    </div>
  );
};

export default SimpleAddTaskDialog;