'use client';

import { useState } from 'react';
import Link from 'next/link';
import type { Route } from 'next';
import { useRouter } from 'next/navigation';
import { useQueryClient } from '@tanstack/react-query';
import { CheckCircle2, ChevronDown, FileSignature, Pen, Plus, Upload } from 'lucide-react';
import { toast } from 'sonner';

import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { FileUploadZone } from '@/components/files/file-upload-zone';
import { InterestPicker } from '@/components/interests/interest-picker';
import { UploadForSigningDialog } from '@/components/documents/upload-for-signing-dialog';

/**
 * 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 [uploadForSigningOpen, setUploadForSigningOpen] = useState(false);
  const [markSignedOpen, setMarkSignedOpen] = useState(false);
  const [markSignedInterestId, setMarkSignedInterestId] = useState<string | null>(null);
  const [markSignedDocType, setMarkSignedDocType] = useState<'eoi' | 'reservation' | 'contract'>(
    'eoi',
  );
  const queryClient = useQueryClient();
  const router = useRouter();

  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button size={size}>
            <Plus className="mr-1.5 h-4 w-4" aria-hidden />
            New document
            <ChevronDown className="ml-1.5 h-4 w-4 opacity-80" aria-hidden />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-64">
          <DropdownMenuItem onSelect={() => setUploadOpen(true)} className="gap-2 py-2.5">
            <Upload className="h-4 w-4" aria-hidden />
            <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 onSelect={() => setUploadForSigningOpen(true)} className="gap-2 py-2.5">
            <Pen className="h-4 w-4" aria-hidden />
            <div className="flex flex-col">
              <span>Upload &amp; send for signature</span>
              <span className="text-xs text-muted-foreground">
                Drop a PDF, place fields, send via Documenso
              </span>
            </div>
          </DropdownMenuItem>
          <DropdownMenuItem asChild className="gap-2 py-2.5">
            <Link href={`/${portSlug}/documents/new`}>
              <FileSignature className="h-4 w-4" aria-hidden />
              <div className="flex flex-col">
                <span>Generate document for signing</span>
                <span className="text-xs text-muted-foreground">
                  EOI, contract, or custom - sent for e-signature
                </span>
              </div>
            </Link>
          </DropdownMenuItem>
          <DropdownMenuItem onSelect={() => setMarkSignedOpen(true)} className="gap-2 py-2.5">
            <CheckCircle2 className="h-4 w-4" aria-hidden />
            <div className="flex flex-col">
              <span>Mark as signed (offline)</span>
              <span className="text-xs text-muted-foreground">
                Already paper-signed - record without going through Documenso
              </span>
            </div>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>

      {/* Mark-as-signed picker dialog. Reps choose interest + doc type;
          we navigate to the matching per-interest tab with an
          action=upload-signed query param so the existing tab's own
          ExternalEoi / external-reservation / external-contract upload
          dialog handles the file capture + the pipeline transition.
          This keeps a single source of truth for the per-type side
          effects (eoiStatus / reservationDocStatus / contractDocStatus
          flips, stage advance, audit log) instead of recreating them
          at the hub level. */}
      <Dialog open={markSignedOpen} onOpenChange={setMarkSignedOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Mark as signed (offline)</DialogTitle>
            <DialogDescription>
              Pick the deal + document type. We&apos;ll open the relevant tab where you can upload
              the signed copy (or just mark it signed without a file).
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-2">
            <div className="space-y-1.5">
              <Label className="text-xs">Interest / deal</Label>
              <InterestPicker
                value={markSignedInterestId}
                onChange={(id) => setMarkSignedInterestId(id)}
              />
            </div>
            <div className="space-y-1.5">
              <Label className="text-xs">Document type</Label>
              <RadioGroup
                value={markSignedDocType}
                onValueChange={(v) => setMarkSignedDocType(v as 'eoi' | 'reservation' | 'contract')}
                className="flex flex-col gap-2"
              >
                <Label className="flex cursor-pointer items-center gap-2 text-sm">
                  <RadioGroupItem value="eoi" /> EOI
                </Label>
                <Label className="flex cursor-pointer items-center gap-2 text-sm">
                  <RadioGroupItem value="reservation" /> Reservation Agreement
                </Label>
                <Label className="flex cursor-pointer items-center gap-2 text-sm">
                  <RadioGroupItem value="contract" /> Contract
                </Label>
              </RadioGroup>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setMarkSignedOpen(false)}>
              Cancel
            </Button>
            <Button
              disabled={!markSignedInterestId}
              onClick={() => {
                if (!markSignedInterestId) return;
                router.push(
                  `/${portSlug}/interests/${markSignedInterestId}?tab=${markSignedDocType}&action=upload-signed` as never,
                );
                setMarkSignedOpen(false);
              }}
            >
              Open
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={uploadOpen} onOpenChange={setUploadOpen}>
        <DialogContent className="sm:max-w-2xl">
          <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) {
                // Per-file completion: emit a landing-context toast so
                // the rep knows where the file went. Prefer the entity
                // page when uploaded under one (clients/Acme), fall
                // back to the documents folder view, fall back to a
                // bare confirmation. The action link uses router.push
                // for client-side nav.
                const destination: { label: string; href: Route } | null =
                  entityType && entityId
                    ? {
                        label: `View ${entityType}`,
                        href: `/${portSlug}/${entityType === 'company' ? 'companies' : entityType + 's'}/${entityId}` as Route,
                      }
                    : folderId
                      ? {
                          label: 'Open folder',
                          href: `/${portSlug}/documents?folderId=${folderId}` as Route,
                        }
                      : null;
                toast.success(`Uploaded ${file.filename ?? 'file'}`, {
                  action: destination
                    ? {
                        label: destination.label,
                        onClick: () => router.push(destination.href),
                      }
                    : undefined,
                });
              } else {
                // 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>

      {uploadForSigningOpen && (
        <UploadForSigningDialog
          open={uploadForSigningOpen}
          onOpenChange={setUploadForSigningOpen}
          interestId={null}
          documentType="generic"
          entity={entityType && entityId ? { type: entityType, id: entityId } : undefined}
          folderId={folderId ?? null}
        />
      )}
    </>
  );
}
