import { useMemo, useState } from 'react'
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'
}

function canPreviewJson(item: ExportRead): boolean {
  if (item.export_type === 'project_report_html') {
    return false
  }
  if (item.metadata_json?.format === 'html') {
    return false
  }
  return true
}

function compactPath(value: string): string {
  const parts = value.split('/').filter(Boolean)
  if (parts.length <= 2) {
    return value
  }
  return parts.slice(-2).join('/')
}

function formatExportType(value: string): string {
  return value
    .split('_')
    .filter(Boolean)
    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
    .join(' ')
}

function exportMatchesSearch(item: ExportRead, query: string): boolean {
  const normalizedQuery = query.trim().toLowerCase()
  if (!normalizedQuery) {
    return true
  }
  return [item.export_type, item.status, item.id, item.storage_path]
    .filter(Boolean)
    .some((value) => String(value).toLowerCase().includes(normalizedQuery))
}

export function ExportCenter({
  selectedProjectId,
  selectedDataset,
  selectedDetectionRunId,
  selectedSegmentationRunId,
  exports,
  latestExport,
  exportError,
  loadingExports,
  exporting,
  onRefresh,
  onExportDataset,
  onExportDetectionRun,
  onExportSegmentationRun,
  onExportProjectMetadata,
  onExportProjectReport,
  onPreviewContent,
  onDownload,
}: ExportCenterProps): JSX.Element {
  const [showAllExports, setShowAllExports] = useState(false)
  const [exportTypeFilter, setExportTypeFilter] = useState('all')
  const [exportStatusFilter, setExportStatusFilter] = useState('all')
  const [exportSearchQuery, setExportSearchQuery] = useState('')
  const canExportDataset = Boolean(selectedDataset && isVectorDatasetType(selectedDataset.dataset_type))
  const geojsonExports = exports.filter((item) => item.export_type.includes('geojson')).length
  const reportExports = exports.filter((item) => item.export_type === 'project_report_html').length
  const handoffStatus = selectedProjectId ? 'project selected' : 'select project'
  const exportTypes = useMemo(() => Array.from(new Set(exports.map((item) => item.export_type))).sort(), [exports])
  const exportStatuses = useMemo(() => Array.from(new Set(exports.map((item) => item.status))).sort(), [exports])
  const filteredExports = useMemo(
    () =>
      exports.filter((item) => {
        const typeMatches = exportTypeFilter === 'all' || item.export_type === exportTypeFilter
        const statusMatches = exportStatusFilter === 'all' || item.status === exportStatusFilter
        return typeMatches && statusMatches && exportMatchesSearch(item, exportSearchQuery)
      }),
    [exports, exportTypeFilter, exportStatusFilter, exportSearchQuery],
  )
  const visibleExports = showAllExports ? filteredExports : filteredExports.slice(0, 10)
  const hiddenExportCount = Math.max(filteredExports.length - visibleExports.length, 0)
  const hasActiveExportFilters = exportTypeFilter !== 'all' || exportStatusFilter !== 'all' || exportSearchQuery.trim().length > 0

  return (
    <section className="export-center" data-testid="export-center">
      <div className="panel-title-row">
        <div>
          <h2>Export Center</h2>
          <p className="muted">Create handoff artifacts from persisted datasets, AI runs and project metadata.</p>
        </div>
        <span className="count-pill">{exports.length} exports</span>
      </div>
      <div className="quality-summary-grid">
        <div>
          <span>GeoJSON</span>
          <strong>{geojsonExports}</strong>
        </div>
        <div>
          <span>Reports</span>
          <strong>{reportExports}</strong>
        </div>
        <div>
          <span>Selected dataset</span>
          <strong>{selectedDataset?.name ?? 'none'}</strong>
        </div>
      </div>
      <div className="handoff-summary-card">
        <div className="panel-title-row">
          <div>
            <h3>Handoff readiness</h3>
            <p className="muted">Pick the artifact that matches the current review state before sharing data outside the workbench.</p>
          </div>
          <span className="status-badge">{handoffStatus}</span>
        </div>
        <div className="handoff-readiness-grid">
          <div>
            <span>Vector dataset</span>
            <strong>{canExportDataset ? selectedDataset?.name : 'none ready'}</strong>
          </div>
          <div>
            <span>Detection run</span>
            <strong>{selectedDetectionRunId || 'none'}</strong>
          </div>
          <div>
            <span>Segmentation run</span>
            <strong>{selectedSegmentationRunId || 'none'}</strong>
          </div>
          <div>
            <span>Latest handoff artifact</span>
            <strong>{latestExport ? formatExportType(latestExport.export_type) : 'none'}</strong>
          </div>
        </div>
      </div>
      <div className="export-action-grid">
        <div className="handoff-action-grid">
          <div className="handoff-action-card">
            <span>Refresh</span>
            <strong>Export registry</strong>
            <p>Reload the persisted artifact list for the selected project.</p>
            <button
              type="button"
              className="secondary-action"
              onClick={onRefresh}
              disabled={!selectedProjectId || loadingExports}
              data-testid="refresh-exports"
            >
              Refresh exports
            </button>
          </div>
          <div className="handoff-action-card handoff-action-card-primary">
            <span>Project report</span>
            <strong>HTML summary</strong>
            <p>Generate the human-readable V1 handoff report from persisted project state.</p>
            <button type="button" className="primary-action" onClick={onExportProjectReport} disabled={!selectedProjectId || exporting}>
              Export project report HTML
            </button>
          </div>
          <div className="handoff-action-card">
            <span>Metadata</span>
            <strong>Project JSON</strong>
            <p>Export project, dataset, QA and artifact metadata for machine-readable review.</p>
            <button
              type="button"
              className="secondary-action"
              onClick={onExportProjectMetadata}
              disabled={!selectedProjectId || exporting}
              data-testid="export-project-metadata"
            >
              Export project metadata JSON
            </button>
          </div>
          <div className="handoff-action-card">
            <span>Vector dataset</span>
            <strong>Selected GeoJSON</strong>
            <p>Export the active vector/reference dataset when it is selected and ready.</p>
            <button type="button" className="secondary-action" onClick={onExportDataset} disabled={!canExportDataset || exporting}>
              Export selected vector GeoJSON
            </button>
          </div>
          <div className="handoff-action-card">
            <span>Detection run</span>
            <strong>Detections GeoJSON</strong>
            <p>Export persisted detection geometries for the selected analysis run.</p>
            <button type="button" className="secondary-action" onClick={onExportDetectionRun} disabled={!selectedDetectionRunId || exporting}>
              Export selected detection run GeoJSON
            </button>
          </div>
          <div className="handoff-action-card">
            <span>Segmentation run</span>
            <strong>Segmentations GeoJSON</strong>
            <p>Export persisted segmentation polygons for the selected analysis run.</p>
            <button type="button" className="secondary-action" onClick={onExportSegmentationRun} disabled={!selectedSegmentationRunId || exporting}>
              Export selected segmentation run GeoJSON
            </button>
          </div>
        </div>
      </div>
      {loadingExports ? (
        <div className="result-state result-state-loading">
          <strong>Loading export registry.</strong>
          <p>Retrieving persisted artifacts for the selected project.</p>
        </div>
      ) : null}
      {exportError ? (
        <div className="result-state result-state-error">
          <strong>Export action failed.</strong>
          <p>{exportError}</p>
        </div>
      ) : null}
      {latestExport ? (
        <div className="latest-export-card">
          <span>Latest export</span>
          <strong>{formatExportType(latestExport.export_type)}</strong>
          <p>{latestExport.path}</p>
        </div>
      ) : null}
      {exports.length === 0 ? (
        <div className="result-state result-state-empty">
          <strong>No exports registered yet.</strong>
          <p>Create metadata, GeoJSON or HTML report artifacts once the active project has data to hand off.</p>
        </div>
      ) : null}
      {exports.length > 0 ? (
        <div className="export-history-controls" aria-label="Export history filters">
          <label>
            Search exports
            <input
              type="search"
              placeholder="Type, id or path"
              value={exportSearchQuery}
              onChange={(event) => setExportSearchQuery(event.target.value)}
            />
          </label>
          <label>
            Type
            <select value={exportTypeFilter} onChange={(event) => setExportTypeFilter(event.target.value)}>
              <option value="all">All types</option>
              {exportTypes.map((type) => (
                <option key={type} value={type}>
                  {type}
                </option>
              ))}
            </select>
          </label>
          <label>
            Status
            <select value={exportStatusFilter} onChange={(event) => setExportStatusFilter(event.target.value)}>
              <option value="all">All statuses</option>
              {exportStatuses.map((status) => (
                <option key={status} value={status}>
                  {status}
                </option>
              ))}
            </select>
          </label>
          <button
            type="button"
            className="secondary-action"
            onClick={() => {
              setExportSearchQuery('')
              setExportTypeFilter('all')
              setExportStatusFilter('all')
              setShowAllExports(false)
            }}
            disabled={!hasActiveExportFilters && !showAllExports}
          >
            Reset view
          </button>
        </div>
      ) : null}
      {filteredExports.length > 10 ? (
        <div className="list-limit-banner">
          <span>
            Showing {visibleExports.length} of {filteredExports.length} matching exports.
            {hiddenExportCount > 0 ? ` ${hiddenExportCount} older artifacts hidden.` : ' All matching artifacts shown.'}
          </span>
          <button type="button" className="secondary-action" onClick={() => setShowAllExports((value) => !value)}>
            {showAllExports ? 'Show latest 10' : 'Show all exports'}
          </button>
        </div>
      ) : null}
      {exports.length > 0 && filteredExports.length === 0 ? (
        <div className="result-state result-state-empty">
          <strong>No exports match the current filters.</strong>
          <p>Clear the search, type or status filter to return to the latest artifacts.</p>
        </div>
      ) : null}
      <ul className="export-list">
        {visibleExports.map((item) => (
          <li className="export-card" key={item.id}>
            <div className="export-card-header">
              <div>
                <span className="export-type-badge">{formatExportType(item.export_type)}</span>
                <div className="entity-meta">
                  <span>export id: {item.id}</span>
                  {item.analysis_run_id ? <span>analysis run: {item.analysis_run_id}</span> : null}
                  {item.created_at ? <span>created: {item.created_at}</span> : null}
                </div>
              </div>
              <span className={item.status === 'ready' ? 'status-badge status-badge-ready' : 'status-badge'}>{item.status}</span>
            </div>
            <p title={item.storage_path}>{compactPath(item.storage_path)}</p>
            <div className="button-row">
              {canPreviewJson(item) ? (
                <button type="button" className="secondary-action" onClick={() => onPreviewContent(item.id)}>
                  Preview JSON content
                </button>
              ) : (
                <span className="status-badge">download-only HTML artifact</span>
              )}
              <button type="button" className="primary-action" onClick={() => onDownload(item.id)}>
                Download artifact
              </button>
            </div>
          </li>
        ))}
      </ul>
    </section>
  )
}