pn-new-crm/src/components/documents/new-document-menu.tsx

'use client';

import { useState } from 'react';
import Link from 'next/link';
import { useQueryClient } from '@tanstack/react-query';
import { ChevronDown, FileSignature, Plus, Upload } from 'lucide-react';

import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { FileUploadZone } from '@/components/files/file-upload-zone';

/**
 * Dropdown that replaces the bare "+ New document" button on the documents
 * hub. Splits the action into the two real flows so reps know which one
 * they want before they click:
 *   - "Upload file" → opens a dialog with FileUploadZone scoped to the
 *     current folder + entity context. No signing flow attached.
 *   - "Generate document for signing" → links to /documents/new wizard.
 *
 * Folder/entity context is passed through so uploaded files land in the
 * right place (entity FK + folder_id). Drops do the same via FileUploadZone's
 * existing folderId / entity props.
 */
interface NewDocumentMenuProps {
  portSlug: string;
  /** Selected folderId, or null for the root folder, or undefined when the
   *  user is on the hub landing page (no folder selected). */
  folderId?: string | null;
  /** Entity context for system-managed entity folders. When set, uploaded
   *  files are wired to the right FK column on the files table. */
  entityType?: 'client' | 'company' | 'yacht';
  entityId?: string;
  /** Visual variant: "default" for big banner placement, "sm" for the
   *  inline-with-breadcrumb placement on folder views. */
  size?: 'default' | 'sm';
}

export function NewDocumentMenu({
  portSlug,
  folderId,
  entityType,
  entityId,
  size = 'default',
}: NewDocumentMenuProps) {
  const [uploadOpen, setUploadOpen] = useState(false);
  const queryClient = useQueryClient();

  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button size={size}>
            <Plus className="mr-1.5 h-4 w-4" />
            New document
            <ChevronDown className="ml-1.5 h-4 w-4 opacity-80" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-64">
          <DropdownMenuItem onSelect={() => setUploadOpen(true)} className="gap-2 py-2.5">
            <Upload className="h-4 w-4" />
            <div className="flex flex-col">
              <span>Upload file</span>
              <span className="text-xs text-muted-foreground">
                Drop or browse — stored in the current folder
              </span>
            </div>
          </DropdownMenuItem>
          <DropdownMenuItem asChild className="gap-2 py-2.5">
            <Link href={`/${portSlug}/documents/new`}>
              <FileSignature className="h-4 w-4" />
              <div className="flex flex-col">
                <span>Generate document for signing</span>
                <span className="text-xs text-muted-foreground">
                  EOI, contract, or custom — sent via Documenso
                </span>
              </div>
            </Link>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>

      <Dialog open={uploadOpen} onOpenChange={setUploadOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Upload file</DialogTitle>
            <DialogDescription>
              {folderId === undefined
                ? 'File will be added to the root.'
                : entityType && entityId
                  ? `File will be filed under this ${entityType}.`
                  : 'File will be added to the current folder.'}
            </DialogDescription>
          </DialogHeader>
          <FileUploadZone
            folderId={folderId ?? null}
            entityType={entityType}
            entityId={entityId}
            clientId={entityType === 'client' ? entityId : undefined}
            companyId={entityType === 'company' ? entityId : undefined}
            yachtId={entityType === 'yacht' ? entityId : undefined}
            onUploadComplete={(file) => {
              if (!file) {
                // Trailing "batch done" call — invalidate hub caches so the
                // newly-uploaded file appears in the Recent files / folder
                // listings without a manual reload.
                queryClient.invalidateQueries({ queryKey: ['files'] });
                queryClient.invalidateQueries({ queryKey: ['documents'] });
                setUploadOpen(false);
              }
            }}
          />
        </DialogContent>
      </Dialog>
    </>
  );
}