import React from 'react';
import type {
  PdfDownload,
  SplitPdfDownload,
} from '../hooks/usePdfGeneratedOutputs';

interface ActionsPanelProps {
  hasPdf: boolean;
  isBusy: boolean;

  selectedCount: number;

  onSplit: () => void;
  onExtractSelected: () => void;
  onOpenSelectionAsWorkspace: () => void;
  onExportReordered: () => void;

  splitDownloads: SplitPdfDownload[];
  subsetDownload: PdfDownload | null;
  exportDownload: PdfDownload | null;
}

const ActionsPanel: React.FC<ActionsPanelProps> = ({
  hasPdf,
  isBusy,
  selectedCount,
  onSplit,
  onExtractSelected,
  onOpenSelectionAsWorkspace,
  onExportReordered,
  splitDownloads,
  subsetDownload,
  exportDownload,
}) => {
  const disabled = !hasPdf || isBusy;

  const handleExtractSelectedClick = () => {
    if (selectedCount === 0) return;
    onExtractSelected();
  };

  const handleOpenSelectionAsWorkspaceClick = () => {
    if (selectedCount === 0) return;
    onOpenSelectionAsWorkspace();
  };

  return (
    <div className="card">
      <h2>Tools</h2>
      <p style={{ fontSize: '0.85rem', color: '#6b7280' }}>
        Use these tools on the current in-memory document (reordered, rotated,
        with deletions). Nothing is uploaded to a server.
      </p>

      <div
        className="button-row"
        style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}
      >
        <button
          className="secondary"
          disabled={disabled}
          onClick={onExportReordered}
          style={{ flex: '1 1 45%' }}
        >
          🧾 Export new PDF
        </button>

        <button
          className="secondary"
          disabled={disabled || selectedCount === 0}
          onClick={handleExtractSelectedClick}
          style={{ flex: '1 1 45%' }}
          title={
            selectedCount === 0
              ? 'Select at least one page'
              : 'Create a PDF from selected pages'
          }
        >
          📤 Extract selected ({selectedCount})
        </button>

        <button
          className="secondary"
          disabled={disabled || selectedCount === 0}
          onClick={handleOpenSelectionAsWorkspaceClick}
          style={{ flex: '1 1 45%' }}
          title={
            selectedCount === 0
              ? 'Select at least one page'
              : 'Open selected pages as a new unsaved workspace'
          }
        >
          🧩 Open selection as workspace
        </button>

        <button
          className="secondary"
          disabled={disabled}
          onClick={onSplit}
          style={{ flex: '1 1 45%' }}
        >
          📂 Split into single PDFs
        </button>
      </div>

      {subsetDownload && (
        <div style={{ marginTop: '0.5rem', fontSize: '0.9rem' }}>
          <strong>Subset result:</strong>{' '}
          <a
            className="download-link"
            href={subsetDownload.url}
            download={subsetDownload.filename}
          >
            Download {subsetDownload.filename}
          </a>
        </div>
      )}

      {exportDownload && (
        <div style={{ marginTop: '0.5rem', fontSize: '0.9rem' }}>
          <strong>Exported document:</strong>{' '}
          <a
            className="download-link"
            href={exportDownload.url}
            download={exportDownload.filename}
          >
            Download {exportDownload.filename}
          </a>
        </div>
      )}

      {splitDownloads.length > 0 && (
        <div style={{ marginTop: '0.75rem', fontSize: '0.9rem' }}>
          <strong>Single-page PDFs:</strong>
          <div>
            {splitDownloads.map((download) => (
              <a
                key={download.id}
                className="download-link"
                href={download.url}
                download={download.filename}
              >
                {download.filename}
              </a>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default ActionsPanel;