import { useCallback, useEffect, useRef } from 'react';
import type { DragEvent } from 'react';
import { isPlainObject, isFunctionValue } from '../../utils/typeGuards';

type Identifier = string | number;
type FolderIdentifier = Identifier | 'root';

interface DocumentLike {
  id?: Identifier | null;
  title?: string;
  [key: string]: unknown;
}

type ApplySelectionFn = (
  keys: string[],
  options?: { anchor?: string | null; interactedKeys?: string[] },
) => void;

type HandleEntrySelectionFn = (
  key: string,
  event: { preventDefault?: () => void },
) => void;

interface UseDocumentDragHandlersOptions {
  selectedEntries: string[];
  selectedDocumentIds: Identifier[];
  selectedFolderIds: FolderIdentifier[];
  applySelection: ApplySelectionFn;
  handleEntrySelection: HandleEntrySelectionFn;
  documentLookup: Map<Identifier, DocumentLike>;
  setDraggedDocumentIds: (ids: Identifier[] | []) => void;
  setDraggedFolderId: (id: FolderIdentifier | null) => void;
  resolveDocumentRowKey: (id: Identifier) => string | null;
  resolveFolderRowKey: (id: FolderIdentifier) => string | null;
  documentsViewMode: string;
}

const useDocumentDragHandlers = ({
  selectedEntries,
  selectedDocumentIds,
  selectedFolderIds,
  applySelection,
  handleEntrySelection,
  documentLookup,
  setDraggedDocumentIds,
  setDraggedFolderId,
  resolveDocumentRowKey,
  resolveFolderRowKey,
  documentsViewMode,
}: UseDocumentDragHandlersOptions) => {
  const dragPreviewRef = useRef<HTMLDivElement | null>(null);

  const destroyDragPreview = useCallback(() => {
    const node = dragPreviewRef.current;
    if (node && node.parentNode) {
      node.parentNode.removeChild(node);
    }
    dragPreviewRef.current = null;
  }, []);

  useEffect(() => destroyDragPreview, [destroyDragPreview]);

  const createDragPreview = useCallback(
    ({ documents = [], folders = [] }: { documents?: DocumentLike[]; folders?: Array<FolderIdentifier | Identifier> } = {}) => {
      destroyDragPreview();

      const docEntries = (documents || []).filter(Boolean);
      const folderEntries = (folders || []).filter(Boolean);
      const totalCount = docEntries.length + folderEntries.length;
      if (!totalCount) {
        return null;
      }

      const maxVisible = 4;
      const size = 64;
      const canvasSize = Math.round(size * 1.6);

      const visibleItems = [];
      docEntries.slice(0, maxVisible).forEach((doc) => {
        visibleItems.push({ type: 'document', payload: doc });
      });

      if (visibleItems.length < maxVisible) {
        folderEntries
          .slice(0, maxVisible - visibleItems.length)
          .forEach((folderId) => visibleItems.push({ type: 'folder', payload: folderId }));
      }

      const wrapper = document.createElement('div');
      wrapper.className = 'document-drag-preview';
      wrapper.style.setProperty('--drag-preview-size', `${canvasSize}px`);
      wrapper.style.width = `${canvasSize}px`;
      wrapper.style.height = `${canvasSize}px`;

      visibleItems.forEach((item, index) => {
        const layer = document.createElement('div');
        layer.className = 'document-drag-preview__item';
        layer.style.setProperty('--index', String(index));
        const rotationMagnitude = Math.random() * 8 + 2;
        const rotation = (index % 2 === 0 ? 1 : -1) * rotationMagnitude;
        layer.style.setProperty('--rotation-deg', `${rotation}deg`);

        if (item.type === 'document') {
          const doc = item.payload;
          const rowEl = doc?.id
            ? (document.getElementById(`document-row-${doc.id}`)
              || document.getElementById(`document-card-${doc.id}`))
            : null;
          const wrapperEl = rowEl instanceof HTMLElement
            ? rowEl.querySelector<HTMLElement>('.document-thumbnail-wrapper')
            : null;
          const thumbnailEl = rowEl instanceof HTMLElement
            ? rowEl.querySelector<HTMLImageElement>('.document-thumbnail')
            : null;
          const placeholderEl = rowEl instanceof HTMLElement
            ? rowEl.querySelector<HTMLElement>('.thumb-placeholder')
            : null;
          const aspectAttr = wrapperEl?.dataset?.thumbnailAspect;
          const aspectRatio = aspectAttr ? parseFloat(aspectAttr) : null;

          let thumbWidth = size;
          let thumbHeight = size;
          if (Number.isFinite(aspectRatio) && aspectRatio > 0) {
            if (aspectRatio >= 1) {
              thumbWidth = size;
              thumbHeight = Math.max(size / aspectRatio, size * 0.5);
            } else {
              thumbHeight = size;
              thumbWidth = Math.max(size * aspectRatio, size * 0.5);
            }
          }
          layer.style.width = `${Math.round(thumbWidth)}px`;
          layer.style.height = `${Math.round(thumbHeight)}px`;

          const thumbSrc = thumbnailEl?.currentSrc || thumbnailEl?.src || null;
          if (thumbSrc) {
            layer.classList.add('document-drag-preview__item--image');
            layer.style.backgroundImage = `url("${thumbSrc}")`;
          } else if (placeholderEl instanceof HTMLElement) {
            const clone = placeholderEl.cloneNode(true) as HTMLElement;
            clone.style.pointerEvents = 'none';
            layer.appendChild(clone);
          } else {
            layer.textContent = doc?.title || 'Document';
          }
        } else {
          const payload = item.payload;
          const folderId = (() => {
            if (isPlainObject(payload) && 'id' in payload) {
              return (payload as { id?: FolderIdentifier }).id ?? null;
            }
            const maybeTrim = (payload as { trim?: () => string })?.trim;
            if (isFunctionValue(maybeTrim)) {
              const nextValue = maybeTrim.call(payload);
              return nextValue || null;
            }
            return null;
          })();
          const rowEl = folderId
            ? (document.getElementById(`folder-row-${folderId}`)
              || document.getElementById(`folder-card-${folderId}`))
            : null;
          const iconEl = rowEl instanceof HTMLElement
            ? rowEl.querySelector('.thumb-icon, .folder-card__icon')
            : null;
          layer.style.width = `${size}px`;
          layer.style.height = `${size}px`;
          layer.classList.add('document-drag-preview__item--folder');

          let content: HTMLElement | null = null;
          if (iconEl instanceof HTMLElement) {
            const cloneSource = iconEl.classList.contains('folder-card__icon')
              ? iconEl.querySelector('svg') || iconEl
              : iconEl;
            const clone = cloneSource.cloneNode(true);
            if (clone instanceof HTMLElement) {
              content = clone;
              content.classList.add('document-drag-preview__folder-thumb');
              const svg = content.querySelector('svg');
              if (svg) {
                svg.setAttribute('width', '48');
                svg.setAttribute('height', '48');
              }
            }
          }

          if (!content) {
            content = document.createElement('div');
            content.className = 'document-drag-preview__folder-placeholder';
            content.textContent = 'Folder';
          }

          layer.appendChild(content);
        }

        wrapper.appendChild(layer);
      });

      if (totalCount > 1) {
        const badge = document.createElement('div');
        badge.className = 'document-drag-preview__count';
        badge.textContent = `${totalCount}`;
        wrapper.appendChild(badge);
      }

      document.body.appendChild(wrapper);
      dragPreviewRef.current = wrapper;
      return wrapper;
    },
    [destroyDragPreview],
  );

  const handleDocumentDragStart = useCallback(
    (event: DragEvent<HTMLElement>, documentOrId: DocumentLike | Identifier | null) => {
      const documentId: Identifier | null = Object(documentOrId) === documentOrId
        ? (documentOrId as DocumentLike)?.id ?? null
        : (documentOrId as Identifier | null);
      if (!documentId) {
        return;
      }

      const documentKey = resolveDocumentRowKey(documentId);
      if (!documentKey) {
        return;
      }

      const isGridView = documentsViewMode === 'grid';
      const isAlreadySelected = selectedDocumentIds.includes(documentId);
      const selection: Identifier[] = isAlreadySelected
        ? [...selectedDocumentIds]
        : isGridView
          ? [...selectedDocumentIds, documentId]
          : [documentId];
      const folderSelection: FolderIdentifier[] = [];

      if (!isAlreadySelected && !isGridView) {
        applySelection([documentKey], {
          anchor: documentKey,
          interactedKeys: [documentKey],
        });
      }

      const previewDocs = selection
        .map((id) => documentLookup.get(id) || documentLookup.get(String(id)) || null)
        .filter(Boolean);
      const previewNode = createDragPreview({
        documents: previewDocs,
        folders: folderSelection,
      });

      setDraggedDocumentIds(selection);
      if (folderSelection.length) {
        setDraggedFolderId(folderSelection[0] || null);
      }
      event.dataTransfer.effectAllowed = 'move';
      try {
        event.dataTransfer.setData(
          'application/x-papercrate-doc-list',
          JSON.stringify(selection),
        );
        if (folderSelection.length) {
          event.dataTransfer.setData(
            'application/x-papercrate-folder-list',
            JSON.stringify(folderSelection),
          );
          if (folderSelection.length === 1) {
            event.dataTransfer.setData('application/x-papercrate-folder', folderSelection[0]);
          }
        }
      } catch (error) {
        console.warn('[documents] Failed to populate drag payload', error);
      }
      if (previewNode) {
        const width = previewNode.offsetWidth || 96;
        const height = previewNode.offsetHeight || 96;
        event.dataTransfer.setDragImage(previewNode, width / 2, height / 2);
      }
      event.currentTarget.classList.add('dragging');
    },
    [
      selectedDocumentIds,
      applySelection,
      documentLookup,
      createDragPreview,
      setDraggedFolderId,
      setDraggedDocumentIds,
      documentsViewMode,
      resolveDocumentRowKey,
    ],
  );

  const handleDocumentDragEnd = useCallback(
    (event: DragEvent<HTMLElement>) => {
      setDraggedDocumentIds([]);
      event.currentTarget.classList.remove('dragging');
      destroyDragPreview();
      setDraggedFolderId(null);
    },
    [destroyDragPreview, setDraggedFolderId, setDraggedDocumentIds],
  );

  const handleFolderDragStart = useCallback(
    (event: DragEvent<HTMLElement>, folderId: FolderIdentifier) => {
      if (folderId === 'root') {
        return;
      }
      event.stopPropagation();
      const folderKey = resolveFolderRowKey(folderId);
      const isAlreadySelected = folderKey ? selectedEntries.includes(folderKey) : false;

      let effectiveFolderSelection: FolderIdentifier[] = selectedFolderIds;
      let effectiveDocumentSelection: Identifier[] = selectedDocumentIds;

      if (!isAlreadySelected && folderKey) {
        effectiveFolderSelection = [folderId];
        effectiveDocumentSelection = [];
        handleEntrySelection(folderKey, { preventDefault: () => {} });
      }

      const uniqueFolders = effectiveFolderSelection.length
        ? Array.from(new Set(effectiveFolderSelection.filter(Boolean)))
        : [folderId];

      setDraggedFolderId(folderId);
      if (effectiveDocumentSelection.length) {
        setDraggedDocumentIds(effectiveDocumentSelection);
      }

      event.dataTransfer.effectAllowed = 'move';
      try {
        event.dataTransfer.setData(
          'application/x-papercrate-folder-list',
          JSON.stringify(uniqueFolders),
        );
        if (uniqueFolders.length === 1) {
          event.dataTransfer.setData('application/x-papercrate-folder', uniqueFolders[0]);
        }
        if (effectiveDocumentSelection.length) {
          event.dataTransfer.setData(
            'application/x-papercrate-doc-list',
            JSON.stringify(effectiveDocumentSelection),
          );
        }
      } catch (error) {
        console.warn('[documents] Failed to populate folder drag payload', error);
      }

      const previewNode = createDragPreview({
        documents: effectiveDocumentSelection
          .map((id) => documentLookup.get(id) || documentLookup.get(String(id)) || null)
          .filter(Boolean),
        folders: uniqueFolders,
      });
      event.currentTarget.classList.add('dragging');

      if (previewNode) {
        const width = previewNode.offsetWidth || 96;
        const height = previewNode.offsetHeight || 96;
        event.dataTransfer.setDragImage(previewNode, width / 2, height / 2);
      }
    },
    [
      selectedFolderIds,
      selectedEntries,
      selectedDocumentIds,
      handleEntrySelection,
      setDraggedFolderId,
      setDraggedDocumentIds,
      documentLookup,
      createDragPreview,
      resolveFolderRowKey,
    ],
  );

  const handleFolderDragEnd = useCallback(
    (event?: DragEvent<HTMLElement>) => {
      if (event?.currentTarget) {
        event.currentTarget.classList.remove('dragging');
      }
      setDraggedFolderId(null);
      setDraggedDocumentIds([]);
      destroyDragPreview();
    },
    [setDraggedFolderId, setDraggedDocumentIds, destroyDragPreview],
  );

  return {
    handleDocumentDragStart,
    handleDocumentDragEnd,
    handleFolderDragStart,
    handleFolderDragEnd,
  };
};

export default useDocumentDragHandlers;