src/components/tasks/UploadAttachmentDialog.tsx

import React, { useState, useRef, useEffect } from 'react';
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { FileUp, Loader2, File, FileText, Image, Film, Music, Archive, ChevronDown, Search, HelpCircle } from "lucide-react";
import CustomDialog from '@/components/CustomDialog';
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

export interface FileUploadData {
  file: File;
  description: string;
  documentType?: string; // Optional document type field
}

// Document type interface
export interface DocumentType {
  name: string;
  description: string;
}

interface UploadAttachmentDialogProps {
  isOpen: boolean;
  onClose: () => void;
  selectedFiles: FileUploadData[];
  onUpdateDescription: (index: number, description: string) => void;
  onUpdateDocumentType?: (index: number, documentType: string) => void; // Optional handler for document type
  onUpload: () => void;
  isUploading: boolean;
  entityType: string;
  documentTypes?: DocumentType[] | string[]; // Can accept either structure
}

/**

 * A custom dialog component for uploading attachments with descriptions

 */
const UploadAttachmentDialog: React.FC<UploadAttachmentDialogProps> = ({

  isOpen,

  onClose,

  selectedFiles,

  onUpdateDescription,

  onUpdateDocumentType,

  onUpload,

  isUploading,

  entityType,

  documentTypes = []

}) => {
  // State for custom dropdowns
  const [openDropdowns, setOpenDropdowns] = useState<Record<number, boolean>>({});
  const dropdownRefs = useRef<Record<number, HTMLDivElement | null>>({});
  const [dropdownPositions, setDropdownPositions] = useState<Record<number, 'top' | 'bottom'>>({});
  const [dropdownWidths, setDropdownWidths] = useState<Record<number, number>>({});
  const [searchQueries, setSearchQueries] = useState<Record<number, string>>({});

  // Check if documentTypes has the new structure
  const hasDetailedDocTypes = documentTypes.length > 0 &&
    typeof documentTypes[0] !== 'string' &&
    'name' in documentTypes[0];

  // Helper to get file extension from filename
  const getFileExtension = (filename: string): string => {
    return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
  };

  // Helper to get file icon based on file type
  const getFileIcon = (file: File) => {
    const fileType = file.type.toLowerCase();
    const fileName = file.name.toLowerCase();

    if (fileType.includes('image') || fileName.match(/\.(jpg|jpeg|png|gif|webp)$/i)) {
      return <Image className="h-5 w-5 text-purple-500" />;
    }

    if (fileType.includes('pdf') || fileName.endsWith('.pdf')) {
      return <FileText className="h-5 w-5 text-red-500" />;
    }

    if (fileType.includes('word') || fileName.match(/\.(doc|docx)$/i)) {
      return <FileText className="h-5 w-5 text-blue-500" />;
    }

    if (fileType.includes('excel') || fileName.match(/\.(xls|xlsx)$/i)) {
      return <FileText className="h-5 w-5 text-green-500" />;
    }

    if (fileType.includes('video') || fileName.match(/\.(mp4|mov|avi|wmv)$/i)) {
      return <Film className="h-5 w-5 text-orange-500" />;
    }

    if (fileType.includes('audio') || fileName.match(/\.(mp3|wav|ogg)$/i)) {
      return <Music className="h-5 w-5 text-blue-500" />;
    }

    if (fileType.includes('zip') || fileName.match(/\.(zip|rar|7z|tar|gz)$/i)) {
      return <Archive className="h-5 w-5 text-yellow-500" />;
    }

    return <File className="h-5 w-5 text-gray-500" />;
  };

  const handleCancel = () => {
    if (!isUploading) {
      onClose();
    }
  };

  // Get normalized document types for filtering
  const getNormalizedDocTypes = (): Array<{ name: string, description: string }> => {
    if (hasDetailedDocTypes) {
      return documentTypes as DocumentType[];
    } else {
      return (documentTypes as string[]).map(name => ({
        name,
        description: ""
      }));
    }
  };

  // Determine dropdown position when toggling open
  const toggleDropdown = (index: number) => {
    if (isUploading) return;

    if (!openDropdowns[index]) {
      // Only calculate position when opening
      const dropdownRef = dropdownRefs.current[index];
      if (dropdownRef) {
        const rect = dropdownRef.getBoundingClientRect();
        const spaceBelow = window.innerHeight - rect.bottom;
        const requiredSpace = Math.min(documentTypes.length * 28, 200) + 50; // Extra space for search box

        setDropdownPositions(prev => ({
          ...prev,
          [index]: spaceBelow < requiredSpace ? 'top' : 'bottom'
        }));

        // Store the exact width
        setDropdownWidths(prev => ({
          ...prev,
          [index]: rect.width
        }));
      }
    }

    setOpenDropdowns(prev => ({
      ...prev,
      [index]: !prev[index]
    }));

    // Reset search when opening
    if (!openDropdowns[index]) {
      setSearchQueries(prev => ({
        ...prev,
        [index]: ''
      }));
    }
  };

  // Update search query
  const handleSearchChange = (index: number, value: string) => {
    setSearchQueries(prev => ({
      ...prev,
      [index]: value
    }));
  };

  // Handle selecting a document type
  const handleSelectDocumentType = (index: number, type: string) => {
    if (onUpdateDocumentType) {
      onUpdateDocumentType(index, type);
    }

    // Close the dropdown
    setOpenDropdowns(prev => ({
      ...prev,
      [index]: false
    }));
  };

  // Filter document types based on search query
  const getFilteredDocumentTypes = (index: number) => {
    const query = searchQueries[index] || '';
    const normalizedDocTypes = getNormalizedDocTypes();

    if (!query) return normalizedDocTypes;

    return normalizedDocTypes.filter(docType =>
      docType.name.toLowerCase().includes(query.toLowerCase()) ||
      docType.description.toLowerCase().includes(query.toLowerCase())
    );
  };

  // Get document type name to display in dropdown
  const getDocumentTypeDisplay = (fileData: FileUploadData) => {
    if (!fileData.documentType) return "Select document type";

    // If using new structure, find the matching document type
    if (hasDetailedDocTypes) {
      const docTypes = documentTypes as DocumentType[];
      const foundType = docTypes.find(dt => dt.name === fileData.documentType);
      return foundType ? foundType.name : fileData.documentType;
    }

    return fileData.documentType;
  };

  // Close dropdowns when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      Object.entries(dropdownRefs.current).forEach(([indexStr, ref]) => {
        const index = parseInt(indexStr);
        if (ref && !ref.contains(event.target as Node) && openDropdowns[index]) {
          setOpenDropdowns(prev => ({
            ...prev,
            [index]: false
          }));
        }
      });
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [openDropdowns]);

  // Determine if we should show document type selection
  const showDocumentTypes = documentTypes.length > 0 && onUpdateDocumentType;

  // Validation: Check if all files have a description and at least one file is selected
  const isFormValid = selectedFiles.length > 0 &&
    selectedFiles.every(fileData => fileData.description.trim() !== '');

  return (
    <CustomDialog

      isOpen={isOpen}

      onClose={handleCancel}

      title={`Upload ${entityType} Documents`}

      description={`Add files to this ${entityType.toLowerCase()}. You can provide a description for each file.`}

      allowClose={!isUploading}

      isPending={isUploading}

    >

      <div className="space-y-4 py-2">

        {selectedFiles.map((fileData, index) => (

          <div key={index} className="space-y-2 border rounded-lg p-3 relative">

            <div className="flex items-center gap-2">

              {getFileIcon(fileData.file)}

              <span className="text-sm font-medium">{fileData.file.name}</span>

              <span className="text-xs text-muted-foreground ml-auto">

                {(fileData.file.size / 1024).toFixed(1)} KB

              </span>

            </div>



            {/* Custom Document Type Dropdown - Only show if document types are provided */}

            {showDocumentTypes && (

              <div className="space-y-1">

                <Label htmlFor={`doctype-${index}`} className="text-xs">Document Type</Label>

                <div

                  ref={ref => dropdownRefs.current[index] = ref}

                  className="relative"

                >

                  <div

                    className={cn(

                      "flex items-center justify-between rounded-md border border-input px-3 py-2 text-sm ring-offset-background",

                      isUploading ? "bg-muted text-muted-foreground" : "bg-transparent",

                      "cursor-pointer select-none"

                    )}

                    onClick={() => toggleDropdown(index)}

                    id={`doctype-${index}`}

                  >

                    <span className={fileData.documentType ? "text-foreground" : "text-muted-foreground"}>

                      {getDocumentTypeDisplay(fileData)}

                    </span>

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

                  </div>



                  {openDropdowns[index] && (

                    <div

                      className={cn(

                        "fixed z-[1010] rounded-md border bg-popover shadow-md",

                        dropdownPositions[index] === 'top'

                          ? "bottom-full mb-1" // Position above the trigger

                          : "mt-1"    // Position below the trigger

                      )}

                      style={{

                        width: `${dropdownWidths[index]}px`,

                        maxHeight: '250px',

                        overflowY: 'auto',

                        left: dropdownRefs.current[index]?.getBoundingClientRect().left,

                        [dropdownPositions[index] === 'top' ? 'bottom' : 'top']:

                          dropdownPositions[index] === 'top'

                            ? window.innerHeight - dropdownRefs.current[index]?.getBoundingClientRect().top

                            : dropdownRefs.current[index]?.getBoundingClientRect().bottom

                      }}

                    >

                      <div className="p-2 border-b sticky top-0 bg-popover">

                        <div className="relative">

                          <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />

                          <Input

                            placeholder="Search document types..."

                            value={searchQueries[index] || ''}

                            onChange={(e) => handleSearchChange(index, e.target.value)}

                            className="pl-8 h-8 text-sm"

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

                          />

                        </div>

                      </div>



                      <div className="p-1">

                        {getFilteredDocumentTypes(index).length > 0 ? (

                          getFilteredDocumentTypes(index).map((docType) => (

                            <TooltipProvider key={docType.name} delayDuration={300}>

                              <Tooltip>

                                <TooltipTrigger asChild>

                                  <div

                                    className={cn(

                                      "flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",

                                      "hover:bg-accent hover:text-accent-foreground",

                                      fileData.documentType === docType.name && "bg-accent/50"

                                    )}

                                    onClick={() => handleSelectDocumentType(index, docType.name)}

                                  >

                                    <span className="flex-1 truncate">{docType.name}</span>

                                    {docType.description && (

                                      <HelpCircle className="h-3.5 w-3.5 ml-1 text-muted-foreground opacity-70" />

                                    )}

                                  </div>

                                </TooltipTrigger>

                                {docType.description && (

                                  <TooltipContent className="max-w-xs p-2 text-xs" side="right">

                                    {docType.description}

                                  </TooltipContent>

                                )}

                              </Tooltip>

                            </TooltipProvider>

                          ))

                        ) : (

                          <div className="px-2 py-3 text-sm text-muted-foreground text-center">

                            No matching document types

                          </div>

                        )}

                      </div>

                    </div>

                  )}

                </div>

              </div>

            )}



            <div className="space-y-1">

              <Label htmlFor={`desc-${index}`} className="text-xs ">Description <span className="text-red-500">*</span></Label>

              <Textarea

                id={`desc-${index}`}

                placeholder="Add a description for this file..."

                value={fileData.description}

                onChange={(e) => onUpdateDescription(index, e.target.value)}

                className="resize-none h-20 text-sm"

                disabled={isUploading}

              />

            </div>

            <div>

              <p className="text-xs text-muted-foreground text-red-500 ">*Required</p>

            </div>

          </div>

        ))}

      </div>



      <div className="flex justify-end gap-2 mt-6 pt-4 border-t">

        <Button

          type="button"

          variant="outline"

          onClick={handleCancel}

          disabled={isUploading}

        >

          Cancel

        </Button>

        <Button

          type="button"

          onClick={onUpload}

          disabled={isUploading || !isFormValid}

          className="min-w-24"

        >

          {isUploading ? (

            <>

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

              Uploading...

            </>

          ) : (

            <>

              <FileUp className="h-4 w-4 mr-2" />

              Upload

            </>

          )}

        </Button>
      </div>
    </CustomDialog>
  );
};

export default UploadAttachmentDialog;