src/components/asset-management/AssignmentForm.tsx

import React, { useState, useRef, useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { format } from 'date-fns';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import { Calendar } from '@/components/ui/calendar';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  FormDescription,
} from '@/components/ui/form';
import { SearchableDropdown } from './shared/SearchableDropdown';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Loader2, Save, X, Calendar as CalendarIcon, User } from 'lucide-react';

import {
  AssetAssignment,
  AssetAssignmentCreateRequest,
  AssetAssignmentUpdateRequest,
  AssetAssignmentFormSchema,
} from '@/types/asset-management';
import { Employee } from '@/types';
import { useAssets } from '@/hooks/asset-management/useAssets';

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

const CustomDatePicker: React.FC<CustomDatePickerProps> = ({
  value,
  onChange,
  placeholder = "Pick a date",
  disabled
}) => {
  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);
      }
    };

    if (isOpen) {
      document.addEventListener("mousedown", handleClickOutside);
      return () => {
        document.removeEventListener("mousedown", handleClickOutside);
      };
    }
  }, [isOpen]);

  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 min-h-[44px] md:min-h-[40px] touch-manipulation"
        aria-label={value ? `Selected date: ${format(value, "PPP")}` : placeholder}
      >
        <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 inset-0 z-[99999] flex justify-center items-center bg-black/50 overflow-auto">
          <div className="bg-background border rounded-lg p-4 shadow-lg max-w-sm w-full mx-4">
            <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 || null);
                setIsOpen(false);
              }}
              disabled={disabled}
              initialFocus
              className="rounded border"
            />
            <div className="mt-2 flex justify-end gap-2">
              <Button
                size="sm"
                variant="outline"
                onClick={() => {
                  onChange(null);
                  setIsOpen(false);
                }}
                className="min-h-[44px] md:min-h-0 touch-manipulation"
                aria-label="Clear date selection"
              >
                Clear
              </Button>
              <Button
                size="sm"
                variant="outline"
                onClick={() => setIsOpen(false)}
                className="min-h-[44px] md:min-h-0 touch-manipulation"
                aria-label="Close date picker"
              >
                Close
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

interface AssignmentFormProps {
  assignment?: AssetAssignment;
  preselectedAssetId?: number;
  preselectedEmployeeId?: number;
  employees?: Employee[];
  onSubmit: (data: AssetAssignmentCreateRequest | AssetAssignmentUpdateRequest) => Promise<void>;
  onCancel: () => void;
  isSubmitting?: boolean;
  title?: string;
}

type AssignmentFormValues = {
  assetID: number;
  employeeID: number;
  employeeName: string;
  assetCode: string;
  assignedDate: Date;
  returnedDate: Date | null;
  remarks: string;
};

const AssignmentForm: React.FC<AssignmentFormProps> = ({
  assignment,
  preselectedAssetId,
  preselectedEmployeeId,
  employees = [],
  onSubmit,
  onCancel,
  isSubmitting = false,
  title
}) => {
  const isEditing = !!assignment;
  const formTitle = title || (isEditing ? 'Edit Assignment' : 'Create New Assignment');

  const { data: assets = [], isLoading: isLoadingAssets } = useAssets();
  const employeeFieldRef = useRef<HTMLButtonElement>(null);

  const form = useForm<AssignmentFormValues>({
    resolver: zodResolver(AssetAssignmentFormSchema),
    defaultValues: {
      assetID: assignment?.assetID || preselectedAssetId || 0,
      employeeID: assignment?.employeeID || preselectedEmployeeId || 0,
      employeeName: assignment?.employeeName || '',
      assetCode: assignment?.assetCode || '',
      assignedDate: assignment ? new Date(assignment.assignedDate) : new Date(),
      returnedDate: assignment?.returnedDate ? new Date(assignment.returnedDate) : null,
      remarks: assignment?.remarks || '',
    },
  });

  // Get preselected asset details
  const preselectedAsset = preselectedAssetId 
    ? assets.find(a => a.assetID === preselectedAssetId)
    : null;

  // Auto-populate asset field when preselectedAssetId is provided
  useEffect(() => {
    if (preselectedAssetId && assets.length > 0 && !assignment) {
      const asset = assets.find(a => a.assetID === preselectedAssetId);
      if (asset) {
        form.setValue('assetID', asset.assetID);
        form.setValue('assetCode', asset.assetCode);
      }
    }
  }, [preselectedAssetId, assets, assignment, form]);

  // Auto-focus employee selection field when asset is pre-selected
  useEffect(() => {
    if (preselectedAssetId && !assignment && employeeFieldRef.current) {
      // Small delay to ensure the form is fully rendered
      const timer = setTimeout(() => {
        employeeFieldRef.current?.focus();
      }, 100);
      return () => clearTimeout(timer);
    }
  }, [preselectedAssetId, assignment]);

  const handleSubmit = async (values: AssignmentFormValues) => {
    try {
      // Validate dates before submission
      if (values.returnedDate && values.returnedDate <= values.assignedDate) {
        form.setError('returnedDate', {
          type: 'manual',
          message: 'Returned date must be after the assigned date.'
        });
        return;
      }

      // Convert dates to ISO strings
      const assignedDateISO = values.assignedDate.toISOString();
      const returnedDateISO = values.returnedDate ? values.returnedDate.toISOString() : null;

      if (isEditing && assignment) {
        const updateData: AssetAssignmentUpdateRequest = {
          assignmentID: assignment.assignmentID,
          assetID: values.assetID,
          employeeID: values.employeeID,
          employeeName: values.employeeName,
          assetCode: values.assetCode,
          assignedDate: assignedDateISO,
          returnedDate: returnedDateISO,
          remarks: values.remarks,
        };
        await onSubmit(updateData);
      } else {
        const createData: AssetAssignmentCreateRequest = {
          assetID: values.assetID,
          employeeID: values.employeeID,
          employeeName: values.employeeName,
          assetCode: values.assetCode,
          assignedDate: assignedDateISO,
          returnedDate: returnedDateISO,
          remarks: values.remarks,
        };
        await onSubmit(createData);
      }
    } catch (error) {
      console.error('Form submission error:', error);

      // Set form errors if validation failed
      if (error instanceof Error) {
        if (error.message.includes('Asset with ID') && error.message.includes('does not exist')) {
          form.setError('assetID', {
            type: 'manual',
            message: 'The selected asset does not exist. Please select a valid asset.'
          });
        } else if (error.message.includes('Employee with ID') && error.message.includes('does not exist')) {
          form.setError('employeeID', {
            type: 'manual',
            message: 'The selected employee does not exist. Please select a valid employee.'
          });
        } else if (error.message.includes('already assigned')) {
          form.setError('assetID', {
            type: 'manual',
            message: 'This asset is already assigned to another employee. Please select a different asset or return the current assignment first.'
          });
        } else if (error.message.includes('date')) {
          form.setError('assignedDate', {
            type: 'manual',
            message: 'Invalid date format. Please select a valid date.'
          });
        } else {
          // Set a general form error
          form.setError('root', {
            type: 'manual',
            message: error.message
          });
        }
      }
    }
  };

  const getEmployeeDisplayName = (employee: Employee) => {
    return `${employee.firstName} ${employee.lastName}`;
  };

  return (
    <Card className="w-full mx-auto">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <User className="h-5 w-5" />
          {formTitle}
        </CardTitle>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
            {/* Display form-level errors */}
            {form.formState.errors.root && (
              <div className="bg-destructive/15 border border-destructive/20 rounded-md p-3">
                <p className="text-sm text-destructive font-medium">
                  {form.formState.errors.root.message}
                </p>
              </div>
            )}

            {/* Display pre-selected asset information prominently */}
            {preselectedAsset && !assignment && (
              <div className="bg-primary/5 border border-primary/20 rounded-lg p-4">
                <div className="flex items-start gap-3">
                  <div className="flex-shrink-0 w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center">
                    <User className="h-5 w-5 text-primary" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <h4 className="text-sm font-semibold text-foreground mb-1">
                      Assigning Asset
                    </h4>
                    <div className="space-y-1">
                      <p className="text-sm text-muted-foreground">
                        <span className="font-medium text-foreground">Code:</span> {preselectedAsset.assetCode}
                      </p>
                      <p className="text-sm text-muted-foreground">
                        <span className="font-medium text-foreground">Type:</span> {preselectedAsset.assetType}
                      </p>
                      <p className="text-sm text-muted-foreground">
                        <span className="font-medium text-foreground">Model:</span> {preselectedAsset.brandModel}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            )}

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* Asset Selection */}
              <FormField
                control={form.control}
                name="assetID"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Asset *</FormLabel>
                    <FormDescription>
                      {preselectedAssetId && !assignment 
                        ? 'Asset is pre-selected for this assignment.'
                        : 'Select the asset to assign to the employee.'}
                    </FormDescription>
                    <FormControl>
                      <SearchableDropdown
                        options={assets.map(asset => ({
                          value: asset.assetID.toString(),
                          label: `${asset.assetCode} - ${asset.assetType} - ${asset.brandModel}`
                        }))}
                        value={field.value?.toString() || ''}
                        onChange={(value) => {
                          const assetId = parseInt(value);
                          field.onChange(assetId);
                          // Auto-populate asset code when asset is selected
                          const selectedAsset = assets.find(asset => asset.assetID === assetId);
                          if (selectedAsset) {
                            form.setValue('assetCode', selectedAsset.assetCode);
                          }
                        }}
                        placeholder="Select an asset"
                        searchPlaceholder="Search assets by code, type, or model..."
                        disabled={isLoadingAssets || (!!preselectedAssetId && !assignment)}
                        error={!!form.formState.errors.assetID}
                        aria-label="Asset selection"
                        aria-describedby={form.formState.errors.assetID ? 'assetID-error' : undefined}
                        emptyMessage="No assets found matching your search"
                      />
                    </FormControl>
                    <FormMessage id="assetID-error" />
                  </FormItem>
                )}
              />

              {/* Employee Selection */}
              <FormField
                control={form.control}
                name="employeeID"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Employee *</FormLabel>
                    <FormDescription>
                      Select the employee to assign the asset to.
                    </FormDescription>
                    <FormControl>
                      <div ref={(el) => {
                        if (el && preselectedAssetId && !assignment) {
                          const trigger = el.querySelector('[role="combobox"]') as HTMLElement;
                          if (trigger) {
                            (employeeFieldRef as any).current = trigger;
                          }
                        }
                      }}>
                        <SearchableDropdown
                          options={employees.map(employee => ({
                            value: employee.id.toString(),
                            label: `#${employee.empCode} - ${getEmployeeDisplayName(employee)} - ${employee.email}`
                          }))}
                          value={field.value?.toString() || ''}
                          onChange={(value) => {
                            const employeeId = parseInt(value);
                            field.onChange(employeeId);
                            // Auto-populate employee name when employee is selected
                            const selectedEmployee = employees.find(employee => employee.id === employeeId);
                            if (selectedEmployee) {
                              form.setValue('employeeName', getEmployeeDisplayName(selectedEmployee));
                            }
                          }}
                          placeholder="Select an employee"
                          searchPlaceholder="Search employees by name, email, or ID..."
                          error={!!form.formState.errors.employeeID}
                          aria-label="Employee selection"
                          aria-describedby={form.formState.errors.employeeID ? 'employeeID-error' : undefined}
                          emptyMessage="No employees found matching your search"
                        />
                      </div>
                    </FormControl>
                    <FormMessage id="employeeID-error" />
                  </FormItem>
                )}
              />

              {/* Employee Name (Auto-populated) */}
              <FormField
                control={form.control}
                name="employeeName"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Employee Name *</FormLabel>
                    <FormControl>
                      <input
                        {...field}
                        type="text"
                        placeholder="Employee name will be auto-populated"
                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                        readOnly
                      />
                    </FormControl>
                    <FormDescription>
                      This field is automatically populated when you select an employee.
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Asset Code (Auto-populated) */}
              <FormField
                control={form.control}
                name="assetCode"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Asset Code *</FormLabel>
                    <FormControl>
                      <input
                        {...field}
                        type="text"
                        placeholder="Asset code will be auto-populated"
                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                        readOnly
                      />
                    </FormControl>
                    <FormDescription>
                      This field is automatically populated when you select an asset.
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Assigned Date */}
              <FormField
                control={form.control}
                name="assignedDate"
                render={({ field }) => (
                  <FormItem className="flex flex-col">
                    <FormLabel>Assigned Date *</FormLabel>
                    <FormControl>
                      <CustomDatePicker
                        value={field.value}
                        onChange={field.onChange}
                        placeholder="Pick a date"
                        disabled={(date) => date < new Date("1900-01-01")}
                      />
                    </FormControl>
                    <FormDescription>
                      The date when the asset was assigned to the employee.
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Returned Date */}
              <FormField
                control={form.control}
                name="returnedDate"
                render={({ field }) => (
                  <FormItem className="flex flex-col">
                    <FormLabel>Returned Date</FormLabel>
                    <FormControl>
                      <CustomDatePicker
                        value={field.value}
                        onChange={field.onChange}
                        placeholder="Not returned yet"
                        disabled={(date) => {
                          const assignedDate = form.getValues('assignedDate');
                          return (
                            date < new Date("1900-01-01") ||
                            (assignedDate && date < assignedDate)
                          );
                        }}
                      />
                    </FormControl>
                    <FormDescription>
                      Leave empty if the asset is still assigned. The returned date must be after the assigned date.
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            {/* Remarks */}
            <FormField
              control={form.control}
              name="remarks"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Remarks *</FormLabel>
                  <FormControl>
                    <Textarea
                      placeholder="Enter any additional notes about this assignment..."
                      className="min-h-20"
                      {...field}
                    />
                  </FormControl>
                  <FormDescription>
                    Provide any relevant information about this assignment (purpose, conditions, etc.).
                  </FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* Form Actions */}
            <div className="flex flex-col sm:flex-row justify-end gap-3 pt-4">
              <Button
                type="button"
                variant="outline"
                onClick={onCancel}
                disabled={isSubmitting}
                className="flex items-center justify-center gap-2 min-h-[44px] md:min-h-0 touch-manipulation w-full sm:w-auto"
                aria-label="Cancel assignment form"
              >
                <X className="h-4 w-4" />
                <span>Cancel</span>
              </Button>
              <Button
                type="submit"
                disabled={isSubmitting}
                className="flex items-center justify-center gap-2 min-h-[44px] md:min-h-0 touch-manipulation w-full sm:w-auto"
                aria-label={isEditing ? 'Update assignment' : 'Create assignment'}
              >
                {isSubmitting ? (
                  <Loader2 className="h-4 w-4 animate-spin" />
                ) : (
                  <Save className="h-4 w-4" />
                )}
                <span>
                  {isSubmitting
                    ? (isEditing ? 'Updating...' : 'Creating...')
                    : (isEditing ? 'Update Assignment' : 'Create Assignment')
                  }
                </span>
              </Button>
            </div>
          </form>
        </Form>
      </CardContent>
    </Card>
  );
};

export default AssignmentForm;