"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { CloudConnectorsDialog } from "@/components/cloud-connectors-dialog"
import { Cloud, ChevronDown } from "lucide-react"

interface GoogleDriveFile {
  id: string
  name: string
  mimeType: string
  webViewLink?: string
  iconLink?: string
}

interface OneDriveFile {
  id: string
  name: string
  mimeType?: string
  webUrl?: string
  driveItem?: {
    file?: { mimeType: string }
    folder?: unknown
  }
}

interface CloudConnectorsDropdownProps {
  onFileSelected?: (files: GoogleDriveFile[] | OneDriveFile[], connectorType: string) => void
  buttonText?: string
  variant?: "default" | "outline" | "secondary" | "ghost" | "link" | "destructive"
  size?: "default" | "sm" | "lg" | "icon"
}

export function CloudConnectorsDropdown({ 
  onFileSelected,
  buttonText = "Cloud Files",
  variant = "outline",
  size = "default"
}: CloudConnectorsDropdownProps) {
  const [isDialogOpen, setIsDialogOpen] = useState(false)

  const handleOpenDialog = () => {
    setIsDialogOpen(true)
  }

  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant={variant} size={size}>
            <Cloud className="mr-2 h-4 w-4" />
            {buttonText}
            <ChevronDown className="ml-2 h-4 w-4" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-48">
          <DropdownMenuItem onClick={handleOpenDialog} className="cursor-pointer">
            <Cloud className="mr-2 h-4 w-4" />
            Select Cloud Files
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>

      <CloudConnectorsDialog
        isOpen={isDialogOpen}
        onOpenChange={setIsDialogOpen}
        onFileSelected={onFileSelected}
      />
    </>
  )
}