import { MessageSquare, Upload } from "lucide-react";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { useRef } from "react";

interface FileAttachmentDropdownProps {
  onFileSelect: (
    files: FileList,
    type: "chat-context" | "upload-to-codebase",
  ) => void;
  closeMenu?: () => void;
}

export function FileAttachmentDropdown({
  onFileSelect,
  closeMenu,
}: FileAttachmentDropdownProps) {
  const chatContextFileInputRef = useRef<HTMLInputElement>(null);
  const uploadToCodebaseFileInputRef = useRef<HTMLInputElement>(null);

  const handleChatContextClick = () => {
    chatContextFileInputRef.current?.click();
  };

  const handleUploadToCodebaseClick = () => {
    uploadToCodebaseFileInputRef.current?.click();
  };

  const handleFileChange = (
    e: React.ChangeEvent<HTMLInputElement>,
    type: "chat-context" | "upload-to-codebase",
  ) => {
    if (e.target.files && e.target.files.length > 0) {
      onFileSelect(e.target.files, type);
      // Clear the input value so the same file can be selected again
      e.target.value = "";
      // Close the parent menu after file selection
      closeMenu?.();
    }
  };

  const menuItems = (
    <>
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger asChild>
            <DropdownMenuItem
              onSelect={(e) => {
                // Prevent default so menu doesn't close in order to keep the hidden inputs in the DOM
                // Manually close menu after file selection
                e.preventDefault();
                handleChatContextClick();
              }}
              className="py-3 px-4"
            >
              <MessageSquare size={16} className="mr-2" />
              Attach file as chat context
            </DropdownMenuItem>
          </TooltipTrigger>
          <TooltipContent side="right">
            Example use case: screenshot of the app to point out a UI issue
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>

      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger asChild>
            <DropdownMenuItem
              onSelect={(e) => {
                // Prevent default so menu doesn't close in order to keep the hidden inputs in the DOM
                // Manually close menu after file selection
                e.preventDefault();
                handleUploadToCodebaseClick();
              }}
              className="py-3 px-4"
            >
              <Upload size={16} className="mr-2" />
              Upload file to codebase
            </DropdownMenuItem>
          </TooltipTrigger>
          <TooltipContent side="right">
            Example use case: add an image to use for your app
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    </>
  );

  const hiddenInputs = (
    <>
      <input
        type="file"
        data-testid="chat-context-file-input"
        ref={chatContextFileInputRef}
        onChange={(e) => handleFileChange(e, "chat-context")}
        className="hidden"
        multiple
        accept=".jpg,.jpeg,.png,.gif,.webp,.txt,.md,.js,.ts,.html,.css,.json,.csv"
      />
      <input
        type="file"
        data-testid="upload-to-codebase-file-input"
        ref={uploadToCodebaseFileInputRef}
        onChange={(e) => handleFileChange(e, "upload-to-codebase")}
        className="hidden"
        multiple
        accept=".jpg,.jpeg,.png,.gif,.webp,.txt,.md,.js,.ts,.html,.css,.json,.csv"
      />
    </>
  );

  return (
    <>
      {menuItems}
      {hiddenInputs}
    </>
  );
}
