src/components/time-logs/AddTimeLogDialog.tsx

import React, { useState, useEffect } from "react";
import { format, isSameDay, parseISO } from "date-fns";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { TimeLog, timeLogApi, TimeLogCreateRequest } from "@/services/timeLogApi";
import { Task, tasksApi } from "@/services/tasksApi";
import { useAuth } from "@/lib/auth-context";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { PopoverContent, PopoverTrigger, Popover } from "@/components/ui/popover";
import { Calendar } from "@/components/ui/calendar";
import { cn } from "@/lib/utils";
import { CalendarIcon, Check, Clock, Loader2, X, AlertCircle } from "lucide-react";
import { CustomSelect } from "@/components/ui/custom-select";
import { showToast } from "@/components/toast-utils";
import { CustomDateInput } from "@/components/ui/custom-date-input";
import { Dropdown } from "@/components/ui/dropdown";
import SlateRichTextEditor from "@/components/custom/SlateRichTextEditor";

interface AddTimeLogDialogProps {
  isOpen: boolean;
  onClose: () => void;
  taskId?: number; // Optional taskId - when provided, the task dropdown will be pre-selected and disabled
  onTimeLogAdded?: () => void; // Optional callback after successful creation
  editMode?: boolean; // Whether we're editing an existing time log
  timeLogToEdit?: TimeLog | null; // The time log to edit when in edit mode
}

export default function AddTimeLogDialog({ 
  isOpen, 
  onClose,
  taskId,
  onTimeLogAdded,
  editMode = false,
  timeLogToEdit = null
}: AddTimeLogDialogProps) {
  const { userData } = useAuth();
  const queryClient = useQueryClient();
  
  // Form state
  const [workDate, setWorkDate] = useState<Date>(new Date());
  const [startTime, setStartTime] = useState("9:30 AM");
  const [endTime, setEndTime] = useState("10:00 AM");
  const [timeLogHours, setTimeLogHours] = useState("");
  const [remainingHours, setRemainingHours] = useState("");
  const [timeLogDescription, setTimeLogDescription] = useState("");
  const [selectedTask, setSelectedTask] = useState<number | null>(taskId || null);
  const [timeLogId, setTimeLogId] = useState<number | null>(null);
  
  // Validation state
  const [descriptionError, setDescriptionError] = useState(false);
  
  // Submission prevention state
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [lastSubmissionTime, setLastSubmissionTime] = useState<number>(0);

  // Function to calculate hours between two time strings with AM/PM format
  const calculateHoursSpent = (startTime: string, endTime: string): string => {
    if (!startTime || !endTime) return "";
    
    // Parse start time
    const startParts = startTime.split(' ');
    const [startHourMin, startAmPm] = [startParts[0], startParts[1]];
    let [startHour, startMinute] = startHourMin.split(':').map(Number);
    
    // Convert to 24-hour format for calculation
    if (startAmPm === 'PM' && startHour < 12) startHour += 12;
    if (startAmPm === 'AM' && startHour === 12) startHour = 0;
    
    // Parse end time
    const endParts = endTime.split(' ');
    const [endHourMin, endAmPm] = [endParts[0], endParts[1]];
    let [endHour, endMinute] = endHourMin.split(':').map(Number);
    
    // Convert to 24-hour format for calculation
    if (endAmPm === 'PM' && endHour < 12) endHour += 12;
    if (endAmPm === 'AM' && endHour === 12) endHour = 0;
    
    // Convert to minutes then calculate the difference
    const startMinutes = startHour * 60 + startMinute;
    const endMinutes = endHour * 60 + endMinute;
    
    // Handle case where end time is on the next day
    const diffMinutes = endMinutes >= startMinutes 
      ? endMinutes - startMinutes 
      : (24 * 60 - startMinutes) + endMinutes;
    
    // Convert minutes to hours with two decimal places
    return (diffMinutes / 60).toFixed(2);
  };
  
  // Add function to convert AM/PM time format to 24-hour format
  const convertTo24HourFormat = (timeStr: string): string => {
    if (!timeStr) return "";
    
    const timeParts = timeStr.split(' ');
    const [hourMin, ampm] = [timeParts[0], timeParts[1]];
    let [hour, minute] = hourMin.split(':').map(Number);
    
    // Convert to 24-hour format
    if (ampm === 'PM' && hour < 12) hour += 12;
    if (ampm === 'AM' && hour === 12) hour = 0;
    
    return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
  };
  
  // Reset form when dialog opens or taskId changes, or populate with edit data
  useEffect(() => {
    if (isOpen) {
      if (editMode && timeLogToEdit) {
        // Add debug logging
        console.log('Editing time log:', timeLogToEdit);
        console.log('Original time formats:', { 
          startTime: timeLogToEdit.startTime, 
          endTime: timeLogToEdit.endTime,
          hasAMPM: timeLogToEdit.startTime.includes(' ')
        });
        
        // Populate form with data from the time log being edited
        setTimeLogId(timeLogToEdit.id);
        setWorkDate(new Date(timeLogToEdit.workDate));
        
        // Fix for start and end time format issues:
        // Check if time already has AM/PM format, if not, convert from 24-hour format
        if (timeLogToEdit.startTime && !timeLogToEdit.startTime.includes(' ')) {
          // Convert from 24-hour format to AM/PM
          const convertFrom24Hour = (time24: string): string => {
            const [hour, minute] = time24.split(':').map(Number);
            const period = hour >= 12 ? 'PM' : 'AM';
            const hour12 = hour % 12 || 12; // Convert 0 to 12 for 12 AM
            return `${hour12}:${minute.toString().padStart(2, '0')} ${period}`;
          };
          
          setStartTime(convertFrom24Hour(timeLogToEdit.startTime));
          setEndTime(convertFrom24Hour(timeLogToEdit.endTime));
        } else {
          setStartTime(timeLogToEdit.startTime);
          setEndTime(timeLogToEdit.endTime);
        }
        
        setTimeLogHours(timeLogToEdit.hrsSpent.toString());
        setRemainingHours(timeLogToEdit.remainingHr.toString());
        // Ensure description is properly formatted for the rich text editor
        setTimeLogDescription(timeLogToEdit.comments || "");
        setSelectedTask(timeLogToEdit.taskId);
        setDescriptionError(false);
      } else {
        // Reset form for new time log - default start time to 9:30 AM
        setTimeLogId(null);
        setWorkDate(new Date());
        setStartTime("9:30 AM");
        setEndTime("10:00 AM");
        // Calculate hours spent
        setTimeLogHours(calculateHoursSpent("9:30 AM", "10:00 AM"));
        setTimeLogDescription("");
        setSelectedTask(taskId || null);
        setDescriptionError(false);
        
        // If taskId is provided, also fetch the task to get the remaining hours
        if (taskId) {
          tasksApi.getById(taskId).then(task => {
            if (task?.remainingHr) {
              setRemainingHours(task.remainingHr.toString());
            } else {
              setRemainingHours("");
            }
          }).catch(error => {
            console.error("Error fetching task details:", error);
            setRemainingHours("");
          });
        } else {
          setRemainingHours("");
        }
      }
    }
  }, [isOpen, taskId, editMode, timeLogToEdit]);

  // Fetch tasks for dropdown
  const { 
    data: tasks = [], 
    isLoading: isLoadingTasks,
    error: tasksError 
  } = useQuery({
    queryKey: ["tasks"],
    queryFn: () => tasksApi.getAll(),
  });

  // Create task dropdown options
  const taskOptions = tasks.map(task => ({
    label: `${task.title} (ID: ${task.id})`,
    value: task.id.toString()
  }));

  // Create mutation
  const createMutation = useMutation({
    mutationFn: () => {
      // Convert AM/PM time to 24-hour format for API
      const startTime24 = convertTo24HourFormat(startTime);
      const endTime24 = convertTo24HourFormat(endTime);
      
      return timeLogApi.create({
        workDate: format(workDate, "yyyy-MM-dd"),
        startTime: startTime24, // Using 24-hour format
        endTime: endTime24, // Using 24-hour format
        comments: timeLogDescription, // Rich text HTML content
        createdBy: userData?.userId ? `${userData.userId}` : "",
        updatedBy: userData?.userId ? `${userData.userId}` : "",
        taskId: selectedTask || 0,
        hrsSpent: parseFloat(timeLogHours) || 0,
        remainingHr: parseFloat(remainingHours) || 0,
      });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["timeLogs"] });
      if (taskId) {
        queryClient.invalidateQueries({ queryKey: ["tasks", taskId] });
      }
      showToast("success", "Time Log Created", "The time log was created successfully.");
      handleClose();
      if (onTimeLogAdded) {
        onTimeLogAdded();
      }
    },
    onError: (error) => {
      showToast("error", "Error", `Failed to create time log: ${error}`);
    },
    onSettled: () => {
      // Reset submitting state regardless of success or error
      setIsSubmitting(false);
    },
  });
  
  // Update mutation
  const updateMutation = useMutation({
    mutationFn: () => {
      if (!timeLogId) throw new Error("No time log ID for update");
      
      // Convert AM/PM time to 24-hour format for API
      const startTime24 = convertTo24HourFormat(startTime);
      const endTime24 = convertTo24HourFormat(endTime);
      
      return timeLogApi.update(timeLogId, {
        id: timeLogId,
        workDate: format(workDate, "yyyy-MM-dd"),
        startTime: startTime24, // Using 24-hour format
        endTime: endTime24, // Using 24-hour format
        comments: timeLogDescription, // Rich text HTML content
        createdBy: timeLogToEdit?.createdBy || (userData?.userId ? `${userData.userId}` : ""),
        updatedBy: userData?.userId ? `${userData.userId}` : "",
        taskId: selectedTask || 0,
        hrsSpent: parseFloat(timeLogHours) || 0,
        remainingHr: parseFloat(remainingHours) || 0,
      });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["timeLogs"] });
      if (selectedTask) {
        queryClient.invalidateQueries({ queryKey: ["tasks", selectedTask] });
      }
      showToast("success", "Time Log Updated", "The time log was updated successfully.");
      handleClose();
      if (onTimeLogAdded) {
        onTimeLogAdded();
      }
    },
    onError: (error) => {
      showToast("error", "Error", `Failed to update time log: ${error}`);
    },
    onSettled: () => {
      // Reset submitting state regardless of success or error
      setIsSubmitting(false);
    },
  });

  // Generate time options in half-hour intervals with AM/PM format
  const generateTimeOptions = (): { label: string; value: string }[] => {
    const options: { label: string; value: string }[] = [];
    
    for (let hour = 1; hour <= 12; hour++) {
      // AM options
      options.push({
        label: `${hour}:00 AM`,
        value: `${hour}:00 AM`
      });
      
      options.push({
        label: `${hour}:30 AM`,
        value: `${hour}:30 AM`
      });
    }
    
    for (let hour = 1; hour <= 12; hour++) {
      // PM options
      options.push({
        label: `${hour}:00 PM`,
        value: `${hour}:00 PM`
      });
      
      options.push({
        label: `${hour}:30 PM`,
        value: `${hour}:30 PM`
      });
    }
    
    return options;
  };
  
  const timeOptions = generateTimeOptions();
  
  // Function to get next time slot
  const getNextTimeSlot = (currentTime: string): string => {
    const timeIndex = timeOptions.findIndex(option => option.value === currentTime);
    if (timeIndex !== -1 && timeIndex < timeOptions.length - 1) {
      return timeOptions[timeIndex + 1].value;
    }
    // If current time is the last option, just return it (this is a fallback)
    return currentTime;
  };

  // Initialize timeLogHours on component mount
  useEffect(() => {
    if (startTime && endTime && !timeLogHours) {
      setTimeLogHours(calculateHoursSpent(startTime, endTime));
    }
  }, []);

  // Handle form submission
  const handleSubmit = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    
    const currentTime = Date.now();
    
    // Prevent multiple submissions with debounce (2 seconds)
    if (isSubmitting || (currentTime - lastSubmissionTime < 2000)) {
      return; // Already submitting or too soon after last submission
    }
    
    // Reset validation errors
    setDescriptionError(false);
    
    // Validate required fields
    if (!selectedTask) {
      showToast("error", "Error", "Please select a task");
      return;
    }
    
    if (!startTime || !endTime) {
      showToast("error", "Error", "Please select start and end times");
      return;
    }
    
    // Check if the description is empty or only contains HTML tags without text
    const strippedDescription = timeLogDescription.replace(/<[^>]*>/g, '').trim();
    if (!strippedDescription) {
      setDescriptionError(true);
      showToast("error", "Error", "Description is required");
      return;
    }
    
    // Set submitting state
    setIsSubmitting(true);
    setLastSubmissionTime(currentTime);
    
    // If in edit mode, update the time log, otherwise create a new one
    if (editMode && timeLogId) {
      updateMutation.mutate();
    } else {
      createMutation.mutate();
    }
  };

  // Function to get yesterday's date
  const getYesterday = () => {
    const yesterday = new Date();
    yesterday.setDate(yesterday.getDate() - 1);
    return yesterday;
  };
  
  // Handle clean close with reset
  const handleClose = () => {
    setWorkDate(new Date());
    setStartTime("9:30 AM");
    setEndTime("10:00 AM");
    setTimeLogHours(calculateHoursSpent("9:30 AM", "10:00 AM"));
    setRemainingHours("");
    setTimeLogDescription("");
    setSelectedTask(null);
    setTimeLogId(null);
    setDescriptionError(false);
    setIsSubmitting(false); // Reset submitting state
    setLastSubmissionTime(0); // Reset last submission time
    onClose();
  };

  if (!isOpen) return null;

  // Find selected task details if available
  const selectedTaskDetails = tasks.find(t => t.id === selectedTask);
  
  // Determine if the current operation is in progress
  const isPending = isSubmitting || (editMode ? updateMutation.isPending : createMutation.isPending);

  // Helper function to ensure content is HTML formatted
  const ensureHtmlFormat = (content: string): string => {
    if (!content) return '';
    
    // Check if the content already looks like HTML (contains HTML tags)
    const hasHtmlTags = /<[a-z][\s\S]*>/i.test(content);
    
    // If it's already HTML, return as is
    if (hasHtmlTags) {
      return content;
    }
    
    // Otherwise, wrap it in a paragraph tag
    return `<p>${content}</p>`;
  };

  return (
    <div
      className="fixed inset-0 bg-black/50 flex items-center justify-center z-[9999]"
      onClick={() => {
        // Prevent closing while submitting
        if (!isPending) {
          handleClose();
        }
      }}
    >
      <div
        className="bg-background rounded-lg shadow-lg w-full max-w-md p-6 relative"
        onClick={(e) => e.stopPropagation()}
        style={{ zIndex: 10000 }}
      >
        {/* Close button in the corner */}
        <Button
          variant="ghost"
          size="icon"
          className="absolute right-2 top-2"
          disabled={isPending}
          onClick={() => {
            // Prevent closing while submitting
            if (!isPending) {
              handleClose();
            }
          }}
        >
          <X className="h-4 w-4" />
        </Button>

        <h3 className="text-lg font-semibold mb-4">
          {editMode 
            ? "Edit Time Log"
            : selectedTaskDetails 
              ? `Log Time for ${selectedTaskDetails.title}` 
              : "Add New Time Log"}
        </h3>

        <div className="space-y-4">
          <div>
            <Label className="text-sm font-medium mb-1 block">Work Date</Label>
            <div className="grid grid-cols-2 gap-3">
              <div className="grid grid-cols-2 gap-2">
                <Button
                  variant={workDate && isSameDay(workDate, getYesterday()) ? "default" : "outline"}
                  className="w-full justify-center text-xs sm:text-sm"
                  onClick={() => {
                    const yesterday = getYesterday();
                    setWorkDate(yesterday);
                  }}
                  type="button"
                >
                  Yesterday
                </Button>
                <Button
                  variant={workDate && isSameDay(workDate, new Date()) ? "default" : "outline"}
                  className="w-full justify-center text-xs sm:text-sm"
                  onClick={() => {
                    const today = new Date();
                    setWorkDate(today);
                  }}
                  type="button"
                >
                  Today
                </Button>
              </div>
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    className={cn(
                      "w-full justify-center text-left font-normal",
                      !workDate && "text-muted-foreground"
                    )}
                  >
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {workDate ? format(workDate, "PPP") : <span>Pick a date</span>}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0 z-[10001]">
                  <Calendar
                    mode="single"
                    selected={workDate}
                    onSelect={(date) => date && setWorkDate(date)}
                    initialFocus
                    disabled={(date) => {
                      // Only allow today and yesterday in normal mode
                      // In edit mode, allow the current date from the time log
                      const yesterday = getYesterday();
                      if (editMode && timeLogToEdit) {
                        const timeLogDate = new Date(timeLogToEdit.workDate);
                        // Allow the original date, today and yesterday
                        return date > new Date() || 
                              (date < yesterday && !isSameDay(date, timeLogDate));
                      }
                      return date > new Date() || (date < yesterday);
                    }}
                  />
                </PopoverContent>
              </Popover>
            </div>
          </div>

          {(!taskId || !selectedTaskDetails) && (
            <div className="space-y-2" style={{ zIndex: 50, position: 'relative' }}>
              <Label className="text-sm font-medium mb-1 block">Task*</Label>
              {isLoadingTasks ? (
                <div className="flex items-center space-x-2">
                  <Loader2 className="h-4 w-4 animate-spin" />
                  <span className="text-sm text-muted-foreground">Loading tasks...</span>
                </div>
              ) : (
                <Dropdown
                  options={taskOptions}
                  value={selectedTask?.toString() || ""}
                  onValueChange={(value) => {
                    const taskId = parseInt(value);
                    setSelectedTask(taskId);
                    
                    // Auto-fill remaining hours from the task if available
                    const task = tasks.find(t => t.id === taskId);
                    if (task?.remainingHr) {
                      setRemainingHours(task.remainingHr.toString());
                    }
                  }}
                  placeholder="Select a task"
                  className="w-full"
                  disabled={!!taskId || (editMode && !!timeLogToEdit)}
                />
              )}
            </div>
          )}
          
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2" style={{ zIndex: 45, position: 'relative' }}>
              <Label className="text-sm font-medium mb-1 block">Start Time*</Label>
              <Dropdown
                options={timeOptions}
                value={startTime}
                onValueChange={(value) => {
                  setStartTime(value);
                  // Automatically set end time to next time slot
                  const nextSlot = getNextTimeSlot(value);
                  setEndTime(nextSlot);
                  // Calculate hours spent between start and end
                  const hoursSpent = calculateHoursSpent(value, nextSlot);
                  setTimeLogHours(hoursSpent);
                }}
                placeholder="Select start time"
                className="w-full"
              />
            </div>
            
            <div className="space-y-2" style={{ zIndex: 40, position: 'relative' }}>
              <Label className="text-sm font-medium mb-1 block">End Time*</Label>
              <Dropdown
                options={timeOptions}
                value={endTime}
                onValueChange={(value) => {
                  setEndTime(value);
                  if (startTime) {
                    // Calculate hours spent between start and end
                    const hoursSpent = calculateHoursSpent(startTime, value);
                    setTimeLogHours(hoursSpent);
                  }
                }}
                placeholder="Select end time"
                className="w-full"
              />
            </div>
          </div>
          
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label className="text-sm font-medium mb-1 block">Hours Spent*</Label>
              <Input
                type="number"
                min="0"
                step="0.5"
                value={timeLogHours}
                onChange={(e) => setTimeLogHours(e.target.value)}
                placeholder="Hours worked"
                className="bg-gray-50"
                readOnly
              />
              <p className="text-xs text-muted-foreground">Auto-calculated from time range</p>
            </div>
            
            <div className="space-y-2">
              <Label className="text-sm font-medium mb-1 block">Remaining Hours*</Label>
              <Input
                type="number"
                min="0"
                step="0.5"
                value={remainingHours}
                onChange={(e) => setRemainingHours(e.target.value)}
                placeholder="Hours remaining"
              />
            </div>
          </div>
          
          <div className="space-y-1">
            <div className="flex items-center justify-between">
              <Label className="text-sm font-medium mb-1 block flex items-center">
                Description* <span className="text-rose-500 ml-0.5">*</span>
              </Label>
              {descriptionError && (
                <div className="text-xs font-medium text-rose-500 flex items-center">
                  <AlertCircle className="h-3 w-3 mr-1" />
                  Required field
                </div>
              )}
            </div>
            <SlateRichTextEditor
              key={timeLogId || 'new-time-log'} // Add key to force re-render when time log changes
              initialValue={ensureHtmlFormat(timeLogDescription)}
              onChange={(value) => {
                setTimeLogDescription(value);
                if (value.trim()) {
                  setDescriptionError(false);
                }
              }}
              placeholder="What did you work on? Please provide detailed description of your work."
              minHeight="150px"
              className={cn(
                descriptionError && "border-rose-500 focus-visible:ring-rose-500"
              )}
            />
            <p className="text-xs text-muted-foreground">
              Provide a detailed description of the work completed during this time period.
            </p>
          </div>
          
          <Button 
            className="w-full py-2 px-4 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white disabled:opacity-50 disabled:cursor-not-allowed"
            onClick={handleSubmit}
            disabled={isPending}
          >
            {isPending ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                {editMode ? "Updating..." : "Saving..."}
              </>
            ) : editMode ? (
              <>
                <Check className="h-4 w-4 mr-2" /> Update Time Log
              </>
            ) : (
              <>
                <Clock className="h-4 w-4 mr-2" /> Log Time
              </>
            )}
          </Button>
        </div>
      </div>
    </div>
  );
}