import React, { useEffect, useRef, useState } from 'react';
import Layout from './components/Layout';
import FileLoader from './components/FileLoader';
import ReorderPanel from './components/ReorderPanel';
import ActionsPanel from './components/ActionsPanel';
import PagePreviewModal from './components/PagePreviewModal';
import WorkspacePanel from './components/WorkspacePanel';
import ActionDialog, {
  type ActionDialogAction,
} from './components/ActionDialog';
import HelpDialog from './components/HelpDialog';
import { PDFDocument } from 'pdf-lib';
import type {
  StoredWorkspace,
  WorkspaceSummary,
} from './workspace/workspaceTypes';
import type {
  WorkspaceCommand,
  WorkspaceCommandRecord,
  WorkspaceCommandState,
} from './workspace/workspaceCommands';
import {
  createSnapshotCommand,
  reviveWorkspaceCommand,
  toWorkspaceCommandRecord,
} from './workspace/workspaceCommands';
import {
  deleteWorkspaceFromIndexedDb,
  listWorkspaces,
  loadWorkspaceFromIndexedDb,
  saveWorkspaceToIndexedDb,
} from './workspace/workspaceDb';
import type { PageRef, PdfFile, SplitResult } from './pdf/pdfTypes';
import {
  loadPdfFromFile,
  mergePdfFiles,
  splitIntoSinglePages,
  exportPages,
} from './pdf/pdfService';
import {
  generateThumbnailsProgressive,
  generateThumbnailsWithRotationsProgressive,
} from './pdf/pdfThumbnailService';

const THUMBNAIL_MAX_HEIGHT = 150;
const THUMBNAIL_MAX_WIDTH = 140;
const THUMBNAIL_CONCURRENCY = 3;

function createId(prefix: string): string {
  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
    return crypto.randomUUID();
  }

  return `${prefix}_${Date.now()}_${Math.random().toString(36).slice(2)}`;
}

function defaultWorkspaceNameFromPdfName(pdfName: string): string {
  return pdfName.replace(/\.pdf$/i, '') || 'Untitled workspace';
}

function createPageRefId(): string {
  return createId('page');
}

function createInitialPageRefs(pageCount: number): PageRef[] {
  return Array.from({ length: pageCount }, (_, sourcePageIndex) => ({
    id: createPageRefId(),
    sourcePageIndex,
    rotation: 0,
  }));
}

function normalizeRotation(rotation: number | undefined): number {
  return (((rotation ?? 0) % 360) + 360) % 360;
}

function thumbnailCacheKey(
  pdfId: string,
  sourcePageIndex: number,
  rotation: number
): string {
  return [
    pdfId,
    sourcePageIndex,
    normalizeRotation(rotation),
    THUMBNAIL_MAX_WIDTH,
    THUMBNAIL_MAX_HEIGHT,
  ].join(':');
}

function isEditableKeyboardTarget(target: EventTarget | null): boolean {
  if (!(target instanceof HTMLElement)) return false;

  const tagName = target.tagName.toLowerCase();
  return (
    target.isContentEditable ||
    tagName === 'input' ||
    tagName === 'textarea' ||
    tagName === 'select'
  );
}

const App: React.FC = () => {
  const [actionDialog, setActionDialog] = useState<{
    title: string;
    content: React.ReactNode;
    actions: ActionDialogAction[];
  } | null>(null);
  const [helpOpen, setHelpOpen] = useState(false);

  const [pdf, setPdf] = useState<PdfFile | null>(null);
  const [isBusy, setIsBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const [workspaces, setWorkspaces] = useState<WorkspaceSummary[]>([]);
  const [activeWorkspaceId, setActiveWorkspaceId] = useState<string | null>(null);
  const [workspaceName, setWorkspaceName] = useState('');
  const [workspaceDirty, setWorkspaceDirty] = useState(false);
  const [workspaceMessage, setWorkspaceMessage] = useState<string | null>(null);
  const [workspaceHistory, setWorkspaceHistory] = useState<WorkspaceCommandRecord[]>([]);
  const [redoHistory, setRedoHistory] = useState<WorkspaceCommandRecord[]>([]);

  const [pages, setPages] = useState<PageRef[]>([]);
  const [reorderThumbnails, setReorderThumbnails] = useState<Record<string, string>>({});

  const [selectedPageIds, setSelectedPageIds] = useState<string[]>([]);
  const [lastSelectedVisualIndex, setLastSelectedVisualIndex] = useState<number | null>(null);

  const [splitResults, setSplitResults] = useState<SplitResult[]>([]);
  const [subsetUrl, setSubsetUrl] = useState<string | null>(null);
  const [subsetFilename, setSubsetFilename] = useState<string | null>(null);
  const [exportUrl, setExportUrl] = useState<string | null>(null);
  const [exportFilename, setExportFilename] = useState<string | null>(null);

  const [previewPageId, setPreviewPageId] = useState<string | null>(null);

  const [pendingFile, setPendingFile] = useState<File | null>(null);
  const [showMergeOptions, setShowMergeOptions] = useState(false);
  const [mergeMode, setMergeMode] = useState<'overwrite' | 'append' | 'insertAt'>('append');
  const [mergeInsertAt, setMergeInsertAt] = useState<string>('');

  const thumbnailCacheRef = useRef<Map<string, string>>(new Map());
  const latestPagesRef = useRef<PageRef[]>([]);
  const previousPageRotationsRef = useRef<Map<string, number>>(new Map());

  const resetGeneratedUrls = () => {
    if (subsetUrl) {
      URL.revokeObjectURL(subsetUrl);
      setSubsetUrl(null);
      setSubsetFilename(null);
    }

    if (exportUrl) {
      URL.revokeObjectURL(exportUrl);
      setExportUrl(null);
      setExportFilename(null);
    }
  };

  const refreshWorkspaces = async () => {
    try {
      const summaries = await listWorkspaces();
      setWorkspaces(summaries);
    } catch (e) {
      console.error(e);
      setError('Failed to read saved workspaces from browser storage.');
    }
  };

  useEffect(() => {
    void refreshWorkspaces();
  }, []);

  const resetWorkspaceState = () => {
    setPdf(null);
    setActiveWorkspaceId(null);
    setWorkspaceName('');
    setWorkspaceDirty(false);
    setWorkspaceMessage(null);
    setWorkspaceHistory([]);
    setSplitResults([]);
    setSelectedPageIds([]);
    setLastSelectedVisualIndex(null);
    resetGeneratedUrls();
    setReorderThumbnails({});
    thumbnailCacheRef.current.clear();
    previousPageRotationsRef.current.clear();
    latestPagesRef.current = [];
    setPages([]);
    setPreviewPageId(null);
    setWorkspaceHistory([]);
    setRedoHistory([]);
  };

  const getCurrentCommandState = (): WorkspaceCommandState => ({
    pages,
    selectedPageIds,
    lastSelectedVisualIndex,
  });

  const applyCommandState = (state: WorkspaceCommandState) => {
    setPages(state.pages);
    latestPagesRef.current = state.pages;
    setSelectedPageIds(state.selectedPageIds);
    setLastSelectedVisualIndex(state.lastSelectedVisualIndex);
  };

  const invalidateWorkspaceOutputs = () => {
    setSplitResults([]);
    resetGeneratedUrls();
    setWorkspaceDirty(true);
    setWorkspaceMessage(null);
  };

  const executeWorkspaceCommand = (command: WorkspaceCommand) => {
    const nextState = command.do(getCurrentCommandState());

    applyCommandState(nextState);
    setWorkspaceHistory((prev) => [...prev, toWorkspaceCommandRecord(command)]);
    setRedoHistory([]);
    invalidateWorkspaceOutputs();
  };

  const createWorkspaceCommand = (params: {
    type: string;
    label: string;
    before: WorkspaceCommandState;
    after: WorkspaceCommandState;
    details?: Record<string, unknown>;
  }): WorkspaceCommand =>
    createSnapshotCommand({
      id: createId('command'),
      type: params.type,
      label: params.label,
      before: params.before,
      after: params.after,
      details: params.details,
    });

  const handleUndo = () => {
    const record = workspaceHistory[workspaceHistory.length - 1];
    if (!record) return;

    const command = reviveWorkspaceCommand(record);
    const previousState = command.undo(getCurrentCommandState());

    applyCommandState(previousState);
    setWorkspaceHistory((prev) => prev.slice(0, -1));
    setRedoHistory((prev) => [...prev, record]);
    invalidateWorkspaceOutputs();
  };

  const handleRedo = () => {
    const record = redoHistory[redoHistory.length - 1];
    if (!record) return;

    const command = reviveWorkspaceCommand(record);
    const nextState = command.do(getCurrentCommandState());

    applyCommandState(nextState);
    setRedoHistory((prev) => prev.slice(0, -1));
    setWorkspaceHistory((prev) => [...prev, record]);
    invalidateWorkspaceOutputs();
  };

  const handleSaveWorkspace = async (): Promise<boolean> => {
    if (!pdf || pages.length === 0) return false;

    setError(null);

    const now = new Date().toISOString();
    const name = workspaceName.trim() || defaultWorkspaceNameFromPdfName(pdf.name);
    const workspaceId = activeWorkspaceId ?? createId('workspace');

    const existing = workspaces.find((workspace) => workspace.id === workspaceId);

    const workspace: StoredWorkspace = {
      schemaVersion: 1,
      id: workspaceId,
      name,
      createdAt: existing?.createdAt ?? now,
      updatedAt: now,

      pdfId: pdf.id,
      pdfName: pdf.name,
      sourcePageCount: pdf.pageCount,

      pages,
      selectedPageIds,
      history: workspaceHistory,
      redoHistory,
    };

    setIsBusy(true);

    try {
      await saveWorkspaceToIndexedDb({
        workspace,
        pdfArrayBuffer: pdf.arrayBuffer,
      });

      setActiveWorkspaceId(workspaceId);
      setWorkspaceName(name);
      setWorkspaceDirty(false);
      setWorkspaceMessage(`Workspace "${name}" saved.`);
      await refreshWorkspaces();

      return true;
    } catch (e) {
      console.error(e);
      setError(
        'Failed to save workspace. The browser storage quota may be full.'
      );
      return false;
    } finally {
      setIsBusy(false);
    }
  };

  const performResetWorkspace = () => {
    resetWorkspaceState();
  };

  const handleResetWorkspace = () => {
    if (!pdf) return;

    if (!workspaceDirty) {
      performResetWorkspace();
      return;
    }

    openActionDialog({
      title: 'Reset workspace?',
      content: (
        <>
          <p style={{ marginTop: 0 }}>
            This workspace has unsaved changes.
          </p>
          <p style={{ marginBottom: 0 }}>
            Do you want to save it before resetting?
          </p>
        </>
      ),
      actions: [
        {
          label: 'Cancel',
          variant: 'secondary',
          onClick: closeActionDialog,
        },
        {
          label: 'Reset without saving',
          variant: 'danger',
          onClick: () => {
            closeActionDialog();
            performResetWorkspace();
          },
        },
        {
          label: 'Save and reset',
          variant: 'primary',
          autoFocus: true,
          onClick: async () => {
            closeActionDialog();
            const saved = await handleSaveWorkspace();
            if (saved) {
              performResetWorkspace();
            }
          },
        },
      ],
    });
  };

  const handleLoadWorkspace = async (workspaceId: string) => {
    setError(null);
    setIsBusy(true);

    try {
      const loaded = await loadWorkspaceFromIndexedDb(workspaceId);

      if (!loaded) {
        setError('Workspace not found.');
        await refreshWorkspaces();
        return;
      }

      resetGeneratedUrls();

      const doc = await PDFDocument.load(loaded.pdfArrayBuffer);

      const loadedPdf: PdfFile = {
        id: loaded.workspace.pdfId,
        name: loaded.workspace.pdfName,
        pageCount: doc.getPageCount(),
        arrayBuffer: loaded.pdfArrayBuffer,
        doc,
      };

      setPdf(loadedPdf);
      setPages(loaded.workspace.pages);
      latestPagesRef.current = loaded.workspace.pages;

      setSelectedPageIds(loaded.workspace.selectedPageIds ?? []);
      setLastSelectedVisualIndex(null);
      setSplitResults([]);
      setPreviewPageId(null);

      setReorderThumbnails({});
      thumbnailCacheRef.current.clear();
      previousPageRotationsRef.current.clear();

      setActiveWorkspaceId(loaded.workspace.id);
      setWorkspaceName(loaded.workspace.name);
      setWorkspaceHistory(loaded.workspace.history ?? []);
      setRedoHistory(loaded.workspace.redoHistory ?? []);
      setWorkspaceDirty(false);
      setWorkspaceMessage(`Workspace "${loaded.workspace.name}" loaded.`);
    } catch (e) {
      console.error(e);
      setError('Failed to load workspace from browser storage.');
    } finally {
      setIsBusy(false);
    }
  };

  const handleDeleteWorkspace = (workspaceId: string) => {
    const workspace = workspaces.find((item) => item.id === workspaceId);
    const name = workspace?.name ?? 'this workspace';

    openActionDialog({
      title: 'Delete workspace?',
      content: (
        <>
          <p style={{ marginTop: 0 }}>
            Delete the saved workspace <strong>{name}</strong> from this browser?
          </p>
          <p style={{ marginBottom: 0 }}>
            The currently open in-memory document will not be closed, but the saved
            workspace entry will be removed.
          </p>
        </>
      ),
      actions: [
        {
          label: 'Cancel',
          variant: 'secondary',
          onClick: closeActionDialog,
        },
        {
          label: 'Delete workspace',
          variant: 'danger',
          autoFocus: true,
          onClick: () => {
            closeActionDialog();
            void performDeleteWorkspace(workspaceId);
          },
        },
      ],
    });
  };

  const performDeleteWorkspace = async (workspaceId: string) => {
    setError(null);

    try {
      await deleteWorkspaceFromIndexedDb(workspaceId);

      if (activeWorkspaceId === workspaceId) {
        setActiveWorkspaceId(null);
        setWorkspaceDirty(true);
        setWorkspaceMessage(
          'Saved workspace deleted. Current in-memory document remains open.'
        );
      }

      await refreshWorkspaces();
    } catch (e) {
      console.error(e);
      setError('Failed to delete workspace.');
    }
  };

  const loadFileAsNew = async (file: File) => {
    setError(null);
    resetWorkspaceState();

    setIsBusy(true);
    try {
      const loaded = await loadPdfFromFile(file);
      const initialPages = createInitialPageRefs(loaded.pageCount);

      setPdf(loaded);
      setPages(initialPages);
      latestPagesRef.current = initialPages;

      setWorkspaceName(defaultWorkspaceNameFromPdfName(loaded.name));
      setWorkspaceHistory([]);
      setRedoHistory([]);
      setWorkspaceDirty(true);
      setWorkspaceMessage(null);
    } catch (e) {
      console.error(e);
      setError('Failed to load PDF (see console).');
    } finally {
      setIsBusy(false);
    }
  };

  const handleFileLoaded = (file: File) => {
    if (!pdf || pages.length === 0) {
      void loadFileAsNew(file);
    } else {
      setPendingFile(file);
      setShowMergeOptions(true);
      setMergeMode('append');
      setMergeInsertAt(String(pages.length + 1));
    }
  };

  const handleMergeCancel = () => {
    setPendingFile(null);
    setShowMergeOptions(false);
  };

  const handleMergeConfirm = async () => {
    if (!pendingFile) return;

    if (!pdf || mergeMode === 'overwrite') {
      await loadFileAsNew(pendingFile);
      setPendingFile(null);
      setShowMergeOptions(false);
      return;
    }

    setError(null);
    setIsBusy(true);

    try {
      // 1) Materialize the current in-memory workspace (page refs + rotations)
      const currentBlob = await exportPages(pdf, pages);
      const currentArrayBuffer = await currentBlob.arrayBuffer();
      const currentDoc = await PDFDocument.load(currentArrayBuffer);
      const currentPdf: PdfFile = {
        id: pdf.id,
        name: pdf.name,
        doc: currentDoc,
        arrayBuffer: currentArrayBuffer,
        pageCount: pages.length,
      };

      // 2) Load the new PDF
      const newPdf = await loadPdfFromFile(pendingFile);

      // 3) Determine insert position (0-based)
      let insertAt = pages.length; // default: append at end
      if (mergeMode === 'insertAt') {
        const parsed = parseInt(mergeInsertAt, 10);
        if (Number.isFinite(parsed)) {
          insertAt = Math.min(Math.max(parsed - 1, 0), pages.length);
        }
      } else if (mergeMode === 'append') {
        insertAt = pages.length;
      }

      // 4) Merge
      const mergedPdf = await mergePdfFiles(currentPdf, newPdf, insertAt);
      const mergedPages = createInitialPageRefs(mergedPdf.pageCount);

      // 5) Reset state to the merged document
      setPdf(mergedPdf);

      setPages(mergedPages);
      latestPagesRef.current = mergedPages;
      setSelectedPageIds([]);
      setLastSelectedVisualIndex(null);
      setSplitResults([]);
      resetGeneratedUrls();
      setReorderThumbnails({});
      thumbnailCacheRef.current.clear();
      previousPageRotationsRef.current.clear();
      setPreviewPageId(null);
      setWorkspaceName(defaultWorkspaceNameFromPdfName(mergedPdf.name));
      setWorkspaceHistory([]);
      setRedoHistory([]);
      setWorkspaceDirty(true);
      setActiveWorkspaceId(null);
      setWorkspaceMessage(null);
    } catch (e) {
      console.error(e);
      setError('Failed to merge PDF (see console).');
    } finally {
      setIsBusy(false);
      setPendingFile(null);
      setShowMergeOptions(false);
    }
  };

  useEffect(() => {
    latestPagesRef.current = pages;
  }, [pages]);

  useEffect(() => {
    if (!pdf) {
      setReorderThumbnails({});
      thumbnailCacheRef.current.clear();
      previousPageRotationsRef.current.clear();
      return;
    }

    const controller = new AbortController();

    latestPagesRef.current = pages;
    thumbnailCacheRef.current.clear();
    previousPageRotationsRef.current = new Map(
      pages.map((page) => [page.id, normalizeRotation(page.rotation)])
    );
    setReorderThumbnails({});

    void generateThumbnailsProgressive(pdf.arrayBuffer, {
      maxHeight: THUMBNAIL_MAX_HEIGHT,
      maxWidth: THUMBNAIL_MAX_WIDTH,
      concurrency: THUMBNAIL_CONCURRENCY,
      signal: controller.signal,
      onThumbnail: ({ pageIndex, dataUrl }) => {
        if (controller.signal.aborted) return;

        thumbnailCacheRef.current.set(
          thumbnailCacheKey(pdf.id, pageIndex, 0),
          dataUrl
        );

        const currentPages = latestPagesRef.current;
        const updates: Record<string, string> = {};

        for (const page of currentPages) {
          if (
            page.sourcePageIndex === pageIndex &&
            normalizeRotation(page.rotation) === 0
          ) {
            updates[page.id] = dataUrl;
          }
        }

        if (Object.keys(updates).length === 0) return;

        setReorderThumbnails((prev) => ({
          ...prev,
          ...updates,
        }));
      },
    }).catch((e) => {
      if (!controller.signal.aborted) {
        console.error(e);
        setError('Failed to generate thumbnails (see console).');
      }
    });

    return () => {
      controller.abort();
    };
  }, [pdf]);

  useEffect(() => {
    if (!pdf) {
      previousPageRotationsRef.current.clear();
      return;
    }

    const previousRotations = previousPageRotationsRef.current;
    const changedPages = pages.filter(
      (page) =>
        normalizeRotation(previousRotations.get(page.id)) !==
        normalizeRotation(page.rotation)
    );

    previousPageRotationsRef.current = new Map(
      pages.map((page) => [page.id, normalizeRotation(page.rotation)])
    );

    if (changedPages.length === 0) return;

    const cachedUpdates: Record<string, string> = {};
    const pagesToRender: PageRef[] = [];

    for (const page of changedPages) {
      const rotation = normalizeRotation(page.rotation);
      const cached = thumbnailCacheRef.current.get(
        thumbnailCacheKey(pdf.id, page.sourcePageIndex, rotation)
      );

      if (cached) {
        cachedUpdates[page.id] = cached;
      } else {
        pagesToRender.push(page);
      }
    }

    if (Object.keys(cachedUpdates).length > 0) {
      setReorderThumbnails((prev) => ({
        ...prev,
        ...cachedUpdates,
      }));
    }

    if (pagesToRender.length === 0) return;

    const controller = new AbortController();
    const groups = new Map<number, PageRef[]>();

    for (const page of pagesToRender) {
      const rotation = normalizeRotation(page.rotation);
      const group = groups.get(rotation) ?? [];
      group.push(page);
      groups.set(rotation, group);
    }

    const renderGroups = async () => {
      for (const [rotation, groupPages] of groups) {
        if (controller.signal.aborted) return;

        const pageIndices = Array.from(
          new Set(groupPages.map((page) => page.sourcePageIndex))
        );
        const rotationsBySourcePage: Record<number, number> = {};

        for (const pageIndex of pageIndices) {
          rotationsBySourcePage[pageIndex] = rotation;
        }

        await generateThumbnailsWithRotationsProgressive(
          pdf.arrayBuffer,
          rotationsBySourcePage,
          {
            maxHeight: THUMBNAIL_MAX_HEIGHT,
            maxWidth: THUMBNAIL_MAX_WIDTH,
            concurrency: Math.min(THUMBNAIL_CONCURRENCY, pageIndices.length),
            pageIndices,
            signal: controller.signal,
            onThumbnail: ({ pageIndex, dataUrl }) => {
              if (controller.signal.aborted) return;

              thumbnailCacheRef.current.set(
                thumbnailCacheKey(pdf.id, pageIndex, rotation),
                dataUrl
              );

              const updates: Record<string, string> = {};

              for (const page of latestPagesRef.current) {
                if (
                  page.sourcePageIndex === pageIndex &&
                  normalizeRotation(page.rotation) === rotation
                ) {
                  updates[page.id] = dataUrl;
                }
              }

              if (Object.keys(updates).length === 0) return;

              setReorderThumbnails((prev) => ({
                ...prev,
                ...updates,
              }));
            },
          }
        );
      }
    };

    void renderGroups().catch((e) => {
      if (!controller.signal.aborted) {
        console.error(e);
        setError('Failed to generate rotated thumbnails (see console).');
      }
    });

    return () => {
      controller.abort();
    };
  }, [pdf, pages]);

  useEffect(() => {
    if (previewPageId != null && !pages.some((page) => page.id === previewPageId)) {
      setPreviewPageId(null);
    }
  }, [previewPageId, pages]);

  const hasPdf = !!pdf;

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (isEditableKeyboardTarget(e.target)) return;

      if (e.key === 'F1' || e.key === '?') {
        e.preventDefault();
        setHelpOpen(true);
      }
    };

    window.addEventListener('keydown', handleKeyDown);

    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  // === UI interactions ===
  const handleRotatePageClockwise = (pageId: string) => {
    const before = getCurrentCommandState();
    const afterPages = pages.map((page) =>
      page.id === pageId
        ? { ...page, rotation: (normalizeRotation(page.rotation) + 90) % 360 }
        : page
    );

    executeWorkspaceCommand(
      createWorkspaceCommand({
        type: 'page.rotate',
        label: 'Rotated page clockwise',
        before,
        after: {
          ...before,
          pages: afterPages,
        },
        details: {
          pageId,
          degrees: 90,
        },
      })
    );
  };

  const handleRotatePageCounterclockwise = (pageId: string) => {
    const before = getCurrentCommandState();
    const afterPages = pages.map((page) =>
      page.id === pageId
        ? { ...page, rotation: (normalizeRotation(page.rotation) + 270) % 360 }
        : page
    );

    executeWorkspaceCommand(
      createWorkspaceCommand({
        type: 'page.rotate',
        label: 'Rotated page counterclockwise',
        before,
        after: {
          ...before,
          pages: afterPages,
        },
        details: {
          pageId,
          degrees: -90,
        },
      })
    );
  };

  const handleDeletePage = (pageId: string) => {
    const page = pages.find((item) => item.id === pageId);
    const visualIndex = page ? pages.indexOf(page) : -1;
    const pageLabel =
      visualIndex >= 0 ? `page at position ${visualIndex + 1}` : 'this page';

    openActionDialog({
      title: 'Delete page?',
      content: (
        <p style={{ margin: 0 }}>
          Delete <strong>{pageLabel}</strong> from the current workspace?
        </p>
      ),
      actions: [
        {
          label: 'Cancel',
          variant: 'secondary',
          onClick: closeActionDialog,
        },
        {
          label: 'Delete page',
          variant: 'danger',
          autoFocus: true,
          onClick: () => {
            closeActionDialog();
            performDeletePage(pageId);
          },
        },
      ],
    });
  };

  const performDeletePage = (pageId: string) => {
    const before = getCurrentCommandState();

    executeWorkspaceCommand(
      createWorkspaceCommand({
        type: 'page.delete',
        label: 'Deleted page',
        before,
        after: {
          pages: pages.filter((page) => page.id !== pageId),
          selectedPageIds: selectedPageIds.filter((id) => id !== pageId),
          lastSelectedVisualIndex: null,
        },
        details: {
          pageId,
        },
      })
    );
  };

  const handleReorder = (newPages: PageRef[]) => {
    const before = getCurrentCommandState();

    executeWorkspaceCommand(
      createWorkspaceCommand({
        type: 'pages.reorder',
        label: 'Reordered pages',
        before,
        after: {
          ...before,
          pages: newPages,
        },
        details: {
          pageCount: newPages.length,
        },
      })
    );
  };

  const handleToggleSelect = (
    pageId: string,
    visualIndex: number,
    e: React.MouseEvent<HTMLButtonElement>
  ) => {
    setSelectedPageIds((prev) => {
      if (e.shiftKey && lastSelectedVisualIndex !== null && pages.length > 0) {
        const from = Math.min(lastSelectedVisualIndex, visualIndex);
        const to = Math.max(lastSelectedVisualIndex, visualIndex);
        const rangeIds = pages.slice(from, to + 1).map((page) => page.id);

        const set = new Set(prev);
        rangeIds.forEach((id) => set.add(id));
        return Array.from(set);
      }

      if (prev.includes(pageId)) {
        return prev.filter((id) => id !== pageId);
      }

      return [...prev, pageId];
    });

    setLastSelectedVisualIndex(visualIndex);
  };

  const handleSelectAll = () => {
    setSelectedPageIds(pages.map((page) => page.id));
    setLastSelectedVisualIndex(null);
  };

  const handleClearSelection = () => {
    setSelectedPageIds([]);
    setLastSelectedVisualIndex(null);
  };
  
  const handleDeleteSelected = () => {
    if (selectedPageIds.length === 0) return;

    const idsToDelete = [...selectedPageIds];

    openActionDialog({
      title:
        idsToDelete.length === 1
          ? 'Delete selected page?'
          : 'Delete selected pages?',
      content: (
        <p style={{ margin: 0 }}>
          Delete{' '}
          <strong>
            {idsToDelete.length === 1
              ? '1 selected page'
              : `${idsToDelete.length} selected pages`}
          </strong>{' '}
          from the current workspace?
        </p>
      ),
      actions: [
        {
          label: 'Cancel',
          variant: 'secondary',
          onClick: closeActionDialog,
        },
        {
          label:
            idsToDelete.length === 1 ? 'Delete page' : 'Delete pages',
          variant: 'danger',
          autoFocus: true,
          onClick: () => {
            closeActionDialog();
            performDeleteSelected(idsToDelete);
          },
        },
      ],
    });
  };

  const performDeleteSelected = (pageIdsToDelete: string[]) => {
    if (pageIdsToDelete.length === 0) return;

    const before = getCurrentCommandState();
    const selectedSet = new Set(pageIdsToDelete);

    executeWorkspaceCommand(
      createWorkspaceCommand({
        type: 'pages.delete',
        label:
          pageIdsToDelete.length === 1
            ? 'Deleted selected page'
            : `Deleted ${pageIdsToDelete.length} selected pages`,
        before,
        after: {
          pages: pages.filter((page) => !selectedSet.has(page.id)),
          selectedPageIds: [],
          lastSelectedVisualIndex: null,
        },
        details: {
          count: pageIdsToDelete.length,
        },
      })
    );
  };

  const handleCopyPagesToSlot = (pageIds: string[], insertSlot: number) => {
    if (!pdf || pageIds.length === 0) return;

    const pageIdSet = new Set(pageIds);

    // Copy in current visual order, not in arbitrary selectedPageIds order.
    const sourcePages = pages.filter((page) => pageIdSet.has(page.id));

    if (sourcePages.length === 0) return;

    const copiedPages: PageRef[] = sourcePages.map((page) => ({
      ...page,
      id: createPageRefId(),
    }));

    const clampedSlot = Math.min(Math.max(insertSlot, 0), pages.length);

    const afterPages = [
      ...pages.slice(0, clampedSlot),
      ...copiedPages,
      ...pages.slice(clampedSlot),
    ];

    const thumbnailUpdates: Record<string, string> = {};

    sourcePages.forEach((sourcePage, index) => {
      const copiedPage = copiedPages[index];

      const thumbnail =
        reorderThumbnails[sourcePage.id] ??
        thumbnailCacheRef.current.get(
          thumbnailCacheKey(
            pdf.id,
            sourcePage.sourcePageIndex,
            sourcePage.rotation
          )
        );

      if (thumbnail) {
        thumbnailUpdates[copiedPage.id] = thumbnail;
      }
    });

    const before = getCurrentCommandState();

    executeWorkspaceCommand(
      createWorkspaceCommand({
        type: 'pages.copy',
        label:
          copiedPages.length === 1
            ? 'Copied page'
            : `Copied ${copiedPages.length} pages`,
        before,
        after: {
          pages: afterPages,
          selectedPageIds: copiedPages.map((page) => page.id),
          lastSelectedVisualIndex: null,
        },
        details: {
          count: copiedPages.length,
          insertSlot: clampedSlot,
        },
      })
    );

    if (Object.keys(thumbnailUpdates).length > 0) {
      setReorderThumbnails((prev) => ({
        ...prev,
        ...thumbnailUpdates,
      }));
    }
  };

  const closeActionDialog = () => {
    setActionDialog(null);
  };

  const openActionDialog = (dialog: {
    title: string;
    content: React.ReactNode;
    actions: ActionDialogAction[];
  }) => {
    setActionDialog(dialog);
  };

  const handleOpenPreview = (pageId: string) => {
    setPreviewPageId(pageId);
  };

  const handleClosePreview = () => {
    setPreviewPageId(null);
  };

  const handlePreviewPrevious = () => {
    setPreviewPageId((current) => {
      if (current == null || pages.length === 0) return current;

      const visualIndex = pages.findIndex((page) => page.id === current);
      if (visualIndex <= 0) return current;

      return pages[visualIndex - 1].id;
    });
  };

  const handlePreviewNext = () => {
    setPreviewPageId((current) => {
      if (current == null || pages.length === 0) return current;

      const visualIndex = pages.findIndex((page) => page.id === current);
      if (visualIndex < 0 || visualIndex >= pages.length - 1) return current;

      return pages[visualIndex + 1].id;
    });
  };

  useEffect(() => {
    if (!hasPdf || previewPageId !== null) return;

    const handleKeyDown = (e: KeyboardEvent) => {
      if (isEditableKeyboardTarget(e.target)) return;

      const key = e.key.toLowerCase();

      if ((e.ctrlKey || e.metaKey) && key === 'z') {
        e.preventDefault();
        if (e.shiftKey) {
          handleRedo();
        } else {
          handleUndo();
        }
        return;
      }

      if ((e.ctrlKey || e.metaKey) && key === 'y') {
        e.preventDefault();
        handleRedo();
        return;
      }

      if ((e.ctrlKey || e.metaKey) && key === 'a') {
        e.preventDefault();
        setSelectedPageIds(pages.map((page) => page.id));
        setLastSelectedVisualIndex(null);
        return;
      }

      if ((e.key === 'Delete' || e.key === 'Backspace') && selectedPageIds.length > 0) {
        e.preventDefault();
        handleDeleteSelected();
        return;
      }

      if (e.key === 'Escape' && selectedPageIds.length > 0) {
        e.preventDefault();
        setSelectedPageIds([]);
        setLastSelectedVisualIndex(null);
      }
    };

    window.addEventListener('keydown', handleKeyDown);

    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [hasPdf, previewPageId, pages, selectedPageIds, workspaceHistory, redoHistory]);

  const handleSplit = async () => {
    if (!pdf) return;
    setError(null);
    setIsBusy(true);
    try {
      const result = await splitIntoSinglePages(pdf);
      setSplitResults(result);
    } catch (e) {
      console.error(e);
      setError('Error while splitting PDF (see console).');
    } finally {
      setIsBusy(false);
    }
  };

  const handleExtractSelected = async () => {
    if (!pdf || selectedPageIds.length === 0) return
    setError(null);
    setIsBusy(true);

    if (subsetUrl) {
      URL.revokeObjectURL(subsetUrl);
      setSubsetUrl(null);
      setSubsetFilename(null);
    }

    try {
      const selectedSet = new Set(selectedPageIds);
      const selectedPages = pages.filter((page) => selectedSet.has(page.id));
      const blob = await exportPages(pdf, selectedPages);
      const url = URL.createObjectURL(blob);
      const base = pdf.name.replace(/\.pdf$/i, '');
      const filename = `${base}_selected.pdf`;
      setSubsetUrl(url);
      setSubsetFilename(filename);
    } catch (e) {
      console.error(e);
      setError('Error while extracting selected pages (see console).');
    } finally {
      setIsBusy(false);
    }
  };

  const handleExportReordered = async () => {
    if (!pdf || pages.length === 0) return;
    setError(null);
    setIsBusy(true);

    if (exportUrl) {
      URL.revokeObjectURL(exportUrl);
      setExportUrl(null);
      setExportFilename(null);
    }

    try {
      const blob = await exportPages(pdf, pages);
      const url = URL.createObjectURL(blob);
      const base = pdf.name.replace(/\.pdf$/i, '');
      const filename = `${base}_reordered.pdf`;
      setExportUrl(url);
      setExportFilename(filename);
    } catch (e) {
      console.error(e);
      setError('Error while exporting reordered PDF (see console).');
    } finally {
      setIsBusy(false);
    }
  };

  const previewVisualIndex =
    previewPageId != null
      ? pages.findIndex((page) => page.id === previewPageId)
      : -1;
  const previewPage =
    previewVisualIndex >= 0 ? pages[previewVisualIndex] : null;

  const canPreviewPrevious = previewVisualIndex > 0;
  const canPreviewNext =
    previewVisualIndex >= 0 && previewVisualIndex < pages.length - 1;

  return (
    <Layout onOpenHelp={() => setHelpOpen(true)}>
      <FileLoader pdf={pdf} onFileLoaded={handleFileLoaded} />

      <WorkspacePanel
        hasPdf={hasPdf}
        isBusy={isBusy}
        activeWorkspaceId={activeWorkspaceId}
        workspaceName={workspaceName}
        workspaceDirty={workspaceDirty}
        workspaceMessage={workspaceMessage}
        workspaces={workspaces}
        history={workspaceHistory}
        redoHistory={redoHistory}
        onWorkspaceNameChange={(value) => {
          setWorkspaceName(value);
          setWorkspaceDirty(true);
        }}
        onSaveWorkspace={handleSaveWorkspace}
        onLoadWorkspace={handleLoadWorkspace}
        onDeleteWorkspace={handleDeleteWorkspace}
        onRefreshWorkspaces={refreshWorkspaces}
        onResetWorkspace={handleResetWorkspace}
        onUndo={handleUndo}
        onRedo={handleRedo}
      />

      {showMergeOptions && pendingFile && pdf && pages.length > 0 && (
        <div
          className="card"
          style={{ border: '1px solid #bfdbfe', background: '#eff6ff' }}
        >
          <h2>Open file: merge or replace?</h2>
          <p style={{ fontSize: '0.85rem', color: '#374151' }}>
            You already have <strong>{pdf.name}</strong> with {pages.length}{' '}
            pages open. What should happen with{' '}
            <strong>{pendingFile.name}</strong>?
          </p>

          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              gap: '0.5rem',
              marginTop: '0.5rem',
              fontSize: '0.9rem',
            }}
          >
            <label
              style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}
            >
              <input
                type="radio"
                name="mergeMode"
                value="overwrite"
                checked={mergeMode === 'overwrite'}
                onChange={() => setMergeMode('overwrite')}
              />
              <span>Replace current document</span>
            </label>

            <label
              style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}
            >
              <input
                type="radio"
                name="mergeMode"
                value="append"
                checked={mergeMode === 'append'}
                onChange={() => setMergeMode('append')}
              />
              <span>Merge and append pages at the end</span>
            </label>

            <label
              style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}
            >
              <input
                type="radio"
                name="mergeMode"
                value="insertAt"
                checked={mergeMode === 'insertAt'}
                onChange={() => setMergeMode('insertAt')}
              />
              <span>
                Merge and insert starting at position{' '}
                <input
                  type="number"
                  min={1}
                  max={pages.length + 1}
                  value={mergeInsertAt}
                  onChange={(e) => setMergeInsertAt(e.target.value)}
                  style={{
                    width: '4rem',
                    padding: '0.15rem 0.3rem',
                    fontSize: '0.85rem',
                  }}
                />{' '}
                <span style={{ color: '#6b7280' }}>
                  (1 = before first page, {pages.length + 1} = after last page)
                </span>
              </span>
            </label>
          </div>

          <div className="button-row" style={{ marginTop: '0.75rem' }}>
            <button
              className="secondary"
              type="button"
              onClick={handleMergeCancel}
              disabled={isBusy}
            >
              Cancel
            </button>
            <button
              className="primary"
              type="button"
              onClick={handleMergeConfirm}
              disabled={isBusy}
            >
              {isBusy ? 'Working…' : 'Continue'}
            </button>
          </div>
        </div>
      )}

      <ReorderPanel
        pages={pages}
        thumbnails={reorderThumbnails}
        isBusy={isBusy}
        hasPdf={hasPdf}
        selectedPageIds={selectedPageIds}
        onRotateClockwise={handleRotatePageClockwise}
        onRotateCounterclockwise={handleRotatePageCounterclockwise}
        onDelete={handleDeletePage}
        onReorder={handleReorder}
        onCopyPagesToSlot={handleCopyPagesToSlot}
        onToggleSelect={handleToggleSelect}
        onSelectAll={handleSelectAll}
        onOpenPreview={handleOpenPreview}
        onClearSelection={handleClearSelection}
        onDeleteSelected={handleDeleteSelected}
      />


      <ActionsPanel
        hasPdf={hasPdf}
        isBusy={isBusy}
        selectedCount={selectedPageIds.length}
        onSplit={handleSplit}
        onExtractSelected={handleExtractSelected}
        onExportReordered={handleExportReordered}
        splitResults={splitResults}
        subsetDownloadUrl={subsetUrl}
        subsetFilename={subsetFilename}
        exportDownloadUrl={exportUrl}
        exportFilename={exportFilename}
      />

      {error && (
        <div
          className="card"
          style={{ border: '1px solid #fecaca', background: '#fef2f2' }}
        >
          <strong>Error:</strong> {error}
        </div>
      )}

      <PagePreviewModal
        isOpen={previewPage !== null}
        pdf={pdf}
        pageIndex={previewPage?.sourcePageIndex ?? null}
        rotation={previewPage?.rotation ?? 0}
        visualIndex={previewVisualIndex >= 0 ? previewVisualIndex : null}
        totalPages={pages.length}
        canGoPrevious={canPreviewPrevious}
        canGoNext={canPreviewNext}
        onPrevious={handlePreviewPrevious}
        onNext={handlePreviewNext}
        onClose={handleClosePreview}
      />

      <ActionDialog
        open={actionDialog !== null}
        title={actionDialog?.title ?? ''}
        actions={actionDialog?.actions ?? []}
        onClose={closeActionDialog}
      >
        {actionDialog?.content}
      </ActionDialog>

      <HelpDialog open={helpOpen} onClose={() => setHelpOpen(false)} />
    </Layout>
  );
};

export default App;
