pdf-tools/src/components/ReorderPanel.tsx

import React, { useEffect, useState } from 'react';

interface ReorderPanelProps {
  pageCount: number;
  thumbnails: string[] | null;
  isBusy: boolean;
  hasPdf: boolean;
  rotations: Record<number, number>;
  onRotate: (pageIndex: number) => void;
  onExportReordered: (order: number[]) => void;
  reorderDownloadUrl: string | null;
  reorderFilename: string | null;
}

const ReorderPanel: React.FC<ReorderPanelProps> = ({
  pageCount,
  thumbnails,
  isBusy,
  hasPdf,
  rotations,
  onRotate,
  onExportReordered,
  reorderDownloadUrl,
  reorderFilename,
}) => {
  const [order, setOrder] = useState<number[]>([]);
  const [draggingIndex, setDraggingIndex] = useState<number | null>(null);

  useEffect(() => {
    if (pageCount > 0) {
      setOrder(Array.from({ length: pageCount }, (_, i) => i));
    } else {
      setOrder([]);
    }
  }, [pageCount]);

  const handleDragStart = (index: number) => (e: React.DragEvent) => {
    setDraggingIndex(index);
    e.dataTransfer.effectAllowed = 'move';
  };

  const handleDragOver = (index: number) => (e: React.DragEvent) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
  };

  const handleDrop = (index: number) => (e: React.DragEvent) => {
    e.preventDefault();
    if (draggingIndex === null || draggingIndex === index) return;

    setOrder((prev) => {
      const updated = [...prev];
      const [moved] = updated.splice(draggingIndex, 1);
      updated.splice(index, 0, moved);
      return updated;
    });
    setDraggingIndex(null);
  };

  const handleDragEnd = () => {
    setDraggingIndex(null);
  };

  const handleDelete = (visualIndex: number) => () => {
    setOrder((prev) => prev.filter((_, idx) => idx !== visualIndex));
  };

  const handleRotateClick = (pageIndex: number) => () => {
    onRotate(pageIndex);
  };

  const handleExport = () => {
    if (!hasPdf || order.length === 0) return;
    onExportReordered(order);
  };

  if (!hasPdf) {
    return (
      <div className="card">
        <h2>Reorder pages</h2>
        <p>Load a PDF first to reorder, delete, or rotate its pages.</p>
      </div>
    );
  }

  return (
    <div className="card">
      <h2>Reorder / delete / rotate</h2>
      <p>
        Drag pages to reorder them. Use rotate and delete controls below each
        thumbnail. All changes stay in memory until you export a new PDF.
      </p>

      <div
        style={{
          display: 'flex',
          flexWrap: 'wrap',
          gap: '0.5rem',
          marginBottom: '0.75rem',
        }}
      >
        {order.map((pageIndex, visualIndex) => {
          const thumb = thumbnails?.[pageIndex];
          const isDragging = visualIndex === draggingIndex;
          const rotation = rotations[pageIndex] ?? 0;

          return (
            <div
              key={`${pageIndex}-${visualIndex}`}
              draggable
              onDragStart={handleDragStart(visualIndex)}
              onDragOver={handleDragOver(visualIndex)}
              onDrop={handleDrop(visualIndex)}
              onDragEnd={handleDragEnd}
              style={{
                width: '130px',
                padding: '0.4rem',
                borderRadius: '0.5rem',
                border: isDragging ? '2px solid #2563eb' : '1px solid #e5e7eb',
                background: isDragging ? '#dbeafe' : '#f9fafb',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                gap: '0.25rem',
                cursor: 'grab',
              }}
            >
              {thumb ? (
                <img
                  src={thumb}
                  alt={`Page ${pageIndex + 1}`}
                  style={{
                    maxHeight: '90px',
                    width: 'auto',
                    borderRadius: '0.25rem',
                    border: '1px solid #e5e7eb',
                    background: 'white',
                  }}
                />
              ) : (
                <div
                  style={{
                    width: '60px',
                    height: '80px',
                    borderRadius: '0.25rem',
                    border: '1px dashed #d1d5db',
                    background: '#f3f4f6',
                  }}
                />
              )}
              <span style={{ fontSize: '0.8rem' }}>Page {pageIndex + 1}</span>
              <span style={{ fontSize: '0.7rem', color: '#6b7280' }}>
                Pos {visualIndex + 1} · Rot {rotation}°
              </span>

              <div
                style={{
                  display: 'flex',
                  gap: '0.25rem',
                  marginTop: '0.25rem',
                }}
              >
                <button
                  type="button"
                  onClick={handleRotateClick(pageIndex)}
                  style={{
                    border: 'none',
                    borderRadius: '999px',
                    padding: '0.15rem 0.4rem',
                    fontSize: '0.75rem',
                    background: '#e5e7eb',
                    cursor: 'pointer',
                  }}
                >
                  ↻ 90°
                </button>
                <button
                  type="button"
                  onClick={handleDelete(visualIndex)}
                  style={{
                    border: 'none',
                    borderRadius: '999px',
                    padding: '0.15rem 0.4rem',
                    fontSize: '0.75rem',
                    background: '#fecaca',
                    color: '#b91c1c',
                    cursor: 'pointer',
                  }}
                  title="Remove this page from the exported PDF"
                >
                  ✕
                </button>
              </div>
            </div>
          );
        })}
      </div>

      <div className="button-row">
        <button
          className="primary"
          disabled={!hasPdf || isBusy || order.length === 0}
          onClick={handleExport}
        >
          {isBusy ? 'Exporting…' : 'Export reordered PDF'}
        </button>
      </div>

      {reorderDownloadUrl && reorderFilename && (
        <div style={{ marginTop: '0.5rem', fontSize: '0.9rem' }}>
          <strong>Reordered result:</strong>{' '}
          <a
            href={reorderDownloadUrl}
            download={reorderFilename}
            className="download-link"
          >
            Download {reorderFilename}
          </a>
        </div>
      )}
    </div>
  );
};

export default ReorderPanel;