import type { DatasetCreateResponse, ExportCreateResponse, ExportRead } from '../../types'

interface ExportCenterProps {
  selectedProjectId: string | null
  selectedDataset: DatasetCreateResponse | null
  selectedDetectionRunId: string
  selectedSegmentationRunId: string
  exports: ExportRead[]
  latestExport: ExportCreateResponse | null
  exportError: string | null
  loadingExports: boolean
  exporting: boolean
  onRefresh: () => void
  onExportDataset: () => void
  onExportDetectionRun: () => void
  onExportSegmentationRun: () => void
  onExportProjectMetadata: () => void
  onExportProjectReport: () => void
  onPreviewContent: (exportId: string) => void
  onDownload: (exportId: string) => void
}

function isVectorDatasetType(datasetType: string): boolean {
  return datasetType === 'vector' || datasetType === 'geojson'
}

export function ExportCenter({
  selectedProjectId,
  selectedDataset,
  selectedDetectionRunId,
  selectedSegmentationRunId,
  exports,
  latestExport,
  exportError,
  loadingExports,
  exporting,
  onRefresh,
  onExportDataset,
  onExportDetectionRun,
  onExportSegmentationRun,
  onExportProjectMetadata,
  onExportProjectReport,
  onPreviewContent,
  onDownload,
}: ExportCenterProps): JSX.Element {
  const canExportDataset = Boolean(selectedDataset && isVectorDatasetType(selectedDataset.dataset_type))

  return (
    <section>
      <h2>Export Center</h2>
      <button type="button" onClick={onRefresh} disabled={!selectedProjectId || loadingExports}>
        Refresh exports
      </button>
      <button type="button" onClick={onExportProjectMetadata} disabled={!selectedProjectId || exporting}>
        Export project metadata JSON
      </button>
      <button type="button" onClick={onExportProjectReport} disabled={!selectedProjectId || exporting}>
        Export project report HTML
      </button>
      <button type="button" onClick={onExportDataset} disabled={!canExportDataset || exporting}>
        Export selected vector GeoJSON
      </button>
      <button type="button" onClick={onExportDetectionRun} disabled={!selectedDetectionRunId || exporting}>
        Export selected detection run GeoJSON
      </button>
      <button type="button" onClick={onExportSegmentationRun} disabled={!selectedSegmentationRunId || exporting}>
        Export selected segmentation run GeoJSON
      </button>
      {exportError ? <p className="error">{exportError}</p> : null}
      {latestExport ? (
        <p>
          Latest export: {latestExport.export_type} {'->'} {latestExport.path}
        </p>
      ) : null}
      {exports.length === 0 ? <p>No exports registered yet.</p> : null}
      <ul>
        {exports.map((item) => (
          <li key={item.id}>
            <strong>{item.export_type}</strong>
            <div>status: {item.status}</div>
            <div>path: {item.storage_path}</div>
            <div>export id: {item.id}</div>
            <button type="button" onClick={() => onPreviewContent(item.id)}>
              Preview JSON content
            </button>
            <button type="button" onClick={() => onDownload(item.id)}>
              Download artifact
            </button>
          </li>
        ))}
      </ul>
    </section>
  )
}