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 {
  const labels: Record<string, string> = {
    vector_selection_geojson: 'Kaartselectie (GeoJSON)',
    map_analysis_json: 'Gebiedsanalyse (JSON)',
    map_evolution_json: 'Historische vergelijking (JSON)',
    dataset_geojson: 'Kaartlaag (GeoJSON)',
    detection_geojson: 'Gebouwdetecties - controlelaag (GeoJSON)',
    segmentation_geojson: 'Segmentaties (GeoJSON)',
    project_metadata_json: 'Werkruimtedata (JSON)',
    project_report_html: 'Projectrapport (HTML)',
  }
  if (labels[value]) {
    return labels[value]
  }
  return value
    .split('_')
    .filter(Boolean)
    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
    .join(' ')
}

function formatExportCreated(value?: string | null): string {
  if (!value) {
    return 'Tijdstip onbekend'
  }
  const parsed = new Date(value)
  return Number.isNaN(parsed.getTime()) ? value : parsed.toLocaleString('nl-BE')
}

function getLatestExportByType(exports: ExportRead[], exportType: string): ExportRead | null {
  return exports.find((item) => item.export_type === exportType) ?? null
}

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 ? 'werkruimte gekozen' : 'kies een werkruimte'
  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 latestHandoffArtifacts = useMemo(
    () => [
      {
        key: 'map_analysis_json',
        label: 'Gebiedsanalyse',
        detail: 'Server-side herberekende metingen van de kaartselectie',
        item: getLatestExportByType(exports, 'map_analysis_json'),
      },
      {
        key: 'map_evolution_json',
        label: 'Historische vergelijking',
        detail: 'Bewaarde evolutie van het geselecteerde gebied',
        item: getLatestExportByType(exports, 'map_evolution_json'),
      },
      {
        key: 'vector_selection_geojson',
        label: 'Kaartselectie (GeoJSON)',
        detail: 'Persistente objecten binnen de geselecteerde rechthoek',
        item: getLatestExportByType(exports, 'vector_selection_geojson'),
      },
      {
        key: 'project_report_html',
        label: 'Leesbaar rapport',
        detail: 'HTML-rapport om te bekijken en te delen',
        item: getLatestExportByType(exports, 'project_report_html'),
      },
      {
        key: 'project_metadata_json',
        label: 'Werkruimtedata',
        detail: 'Technische inventaris in JSON-formaat',
        item: getLatestExportByType(exports, 'project_metadata_json'),
      },
      {
        key: 'dataset_geojson',
        label: 'Kaartlaag (GeoJSON)',
        detail: 'De geselecteerde vector- of referentielaag',
        item: getLatestExportByType(exports, 'dataset_geojson'),
      },
      {
        key: 'detection_geojson',
        label: 'Herkende gebouwen - controlelaag (GeoJSON)',
        detail: 'Bewaarde geometrieën uit beeldanalyse',
        item: getLatestExportByType(exports, 'detection_geojson'),
      },
      {
        key: 'segmentation_geojson',
        label: 'Segmentaties (GeoJSON)',
        detail: 'Bewaarde segmentatiepolygonen',
        item: getLatestExportByType(exports, 'segmentation_geojson'),
      },
    ],
    [exports],
  )
  const availableLatestArtifacts = latestHandoffArtifacts.filter((artifact) => artifact.item)
  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="export-center-shell">
        <div className="panel-title-row">
          <div>
            <h2>Downloads en rapporten</h2>
            <p className="muted">Bewaar de geselecteerde kaartlaag, analyseresultaten of een leesbaar projectrapport.</p>
          </div>
          <span className="count-pill">{exports.length} bestanden</span>
        </div>

        <div className="export-summary-surface" aria-label="Samenvatting van de downloads">
          <div className="quality-summary-grid">
            <div>
              <span>GeoJSON</span>
              <strong>{geojsonExports}</strong>
            </div>
            <div>
              <span>Rapporten</span>
              <strong>{reportExports}</strong>
            </div>
            <div>
              <span>Geselecteerde kaartlaag</span>
              <strong>{selectedDataset?.name ?? 'geen'}</strong>
            </div>
          </div>
        </div>

        <div className="export-handoff-surface" aria-label="Gereedheid voor overdracht">
          <div className="handoff-summary-card">
            <div className="panel-title-row">
              <div>
                <h3>Klaar om te delen</h3>
                <p className="muted">Controleer het juiste bestand voordat je gegevens buiten GeoIntel gebruikt.</p>
              </div>
              <span className="status-badge">{handoffStatus}</span>
            </div>
            <div className="handoff-readiness-grid">
              <div>
                <span>Vectorkaartlaag</span>
                <strong>{canExportDataset ? selectedDataset?.name : 'geen beschikbaar'}</strong>
              </div>
              <div>
                <span>Gebouwanalyse</span>
                <strong>{selectedDetectionRunId || 'geen'}</strong>
              </div>
              <div>
                <span>Segmentatieanalyse</span>
                <strong>{selectedSegmentationRunId || 'geen'}</strong>
              </div>
              <div>
                <span>Laatste bestand</span>
                <strong>{latestExport ? formatExportType(latestExport.export_type) : 'geen'}</strong>
              </div>
            </div>
          </div>
        </div>

        <div className="latest-artifact-surface" aria-label="Latest handoff artifacts">
          <div>
            <h3>Laatste downloads</h3>
            <p className="muted">Open de recentste bestanden zonder in de volledige geschiedenis te zoeken.</p>
          </div>
          <div className="latest-artifact-grid">
            {availableLatestArtifacts.map((artifact) => {
              const item = artifact.item
              return (
                <div className={item ? 'latest-artifact-card' : 'latest-artifact-card latest-artifact-card-empty'} key={artifact.key}>
                  <span>{artifact.label}</span>
                  <strong>{item ? (item.status === 'ready' ? 'Beschikbaar' : item.status) : 'Nog niet gemaakt'}</strong>
                  <p>{item ? compactPath(item.storage_path) : artifact.detail}</p>
                  {item ? (
                    <>
                      <small>{formatExportCreated(item.created_at)}</small>
                      <div className="latest-artifact-actions">
                        {canPreviewJson(item) ? (
                          <button type="button" className="secondary-action" onClick={() => onPreviewContent(item.id)}>
                            Bekijken
                          </button>
                        ) : (
                          <span className="status-badge">alleen downloaden</span>
                        )}
                        <button type="button" className="primary-action" onClick={() => onDownload(item.id)}>
                          Downloaden
                        </button>
                      </div>
                    </>
                  ) : null}
                </div>
              )
            })}
            {availableLatestArtifacts.length === 0 ? (
              <div className="result-state result-state-empty latest-download-empty">
                <strong>Nog geen recente downloads</strong>
                <p>De laatst bewaarde bestanden verschijnen hier.</p>
              </div>
            ) : null}
          </div>
        </div>

        <div className="export-actions-surface" aria-label="Acties om resultaten te bewaren">
          <div className="panel-title-row">
            <div>
              <h3>Wat wil je bewaren?</h3>
              <p className="muted">Maak een leesbaar rapport of download gegevens voor verder gebruik.</p>
            </div>
          </div>
          <div className="export-action-grid">
            <div className="handoff-action-grid">
              <div className="handoff-action-card handoff-action-card-technical">
                <span>Vernieuwen</span>
                <strong>Bewaarde bestanden</strong>
                <p>Laad de persistente downloads van de geselecteerde werkruimte opnieuw.</p>
                <button
                  type="button"
                  className="secondary-action"
                  onClick={onRefresh}
                  disabled={!selectedProjectId || loadingExports}
                  data-testid="refresh-exports"
                >
                  Downloads vernieuwen
                </button>
              </div>
              <div className="handoff-action-card handoff-action-card-primary">
                <span>Rapport</span>
                <strong>Leesbaar projectoverzicht</strong>
                <p>Maak een HTML-rapport met de beschikbare bronnen, controles en resultaten.</p>
                <button type="button" className="primary-action" onClick={onExportProjectReport} disabled={!selectedProjectId || exporting}>
                  Projectrapport maken
                </button>
              </div>
              <div className="handoff-action-card">
                <span>Technische gegevens</span>
                <strong>Projectgegevens (JSON)</strong>
                <p>Download de volledige projectinventaris voor geautomatiseerde verwerking.</p>
                <button
                  type="button"
                  className="secondary-action"
                  onClick={onExportProjectMetadata}
                  disabled={!selectedProjectId || exporting}
                  data-testid="export-project-metadata"
                >
                  Projectgegevens downloaden
                </button>
              </div>
              <div className="handoff-action-card">
                <span>Kaartlaag</span>
                <strong>Geselecteerde bron (GeoJSON)</strong>
                <p>Download de actieve vector- of referentielaag.</p>
                <button type="button" className="secondary-action" onClick={onExportDataset} disabled={!canExportDataset || exporting}>
                  Kaartlaag downloaden
                </button>
              </div>
              {selectedDetectionRunId ? <div className="handoff-action-card">
                <span>Gebouwanalyse</span>
                <strong>Herkende gebouwen - controlelaag (GeoJSON)</strong>
                <p>Bewaar de persistente detectiegeometrie van de geselecteerde analyserun.</p>
                <button type="button" className="secondary-action" onClick={onExportDetectionRun} disabled={!selectedDetectionRunId || exporting}>
                  Gebouwanalyse bewaren
                </button>
              </div> : null}
              {selectedSegmentationRunId ? <div className="handoff-action-card">
                <span>Segmentatieanalyse</span>
                <strong>Segmentaties (GeoJSON)</strong>
                <p>Bewaar de persistente polygonen van de geselecteerde segmentatierun.</p>
                <button type="button" className="secondary-action" onClick={onExportSegmentationRun} disabled={!selectedSegmentationRunId || exporting}>
                  Segmentatie bewaren
                </button>
              </div> : null}
            </div>
          </div>
        </div>

        <div className="export-state-stack">
          {loadingExports ? (
            <div className="result-state result-state-loading">
              <strong>Downloads laden.</strong>
              <p>De bewaarde bestanden van deze werkruimte worden opgehaald.</p>
            </div>
          ) : null}
          {exportError ? (
            <div className="result-state result-state-error">
              <strong>Download kon niet worden gemaakt.</strong>
              <p>{exportError}</p>
            </div>
          ) : null}
          {latestExport ? (
            <div className="latest-export-card">
              <span>Laatste download</span>
              <strong>{formatExportType(latestExport.export_type)}</strong>
              <p>{latestExport.path}</p>
            </div>
          ) : null}
          {exports.length === 0 ? (
            <div className="result-state result-state-empty">
              <strong>Nog niets bewaard</strong>
              <p>Maak een leesbaar rapport, een projectoverzicht, of bewaar de actieve kaartlaag.</p>
            </div>
          ) : null}
        </div>

        <details className="export-history-surface export-history-disclosure" aria-label="Downloadgeschiedenis">
          <summary>
            <span>Downloadgeschiedenis</span>
            <strong>{exports.length} bestanden</strong>
          </summary>
          <div className="export-history-body">
          <div>
            <h3>Bewaarde downloads</h3>
            <p className="muted">Bekijk persistente bestanden en open beschikbare JSON-voorbeelden.</p>
          </div>
          {exports.length > 0 ? (
            <div className="export-history-controls" aria-label="Filters op de downloadgeschiedenis">
              <label>
                Downloads zoeken
                <input
                  type="search"
                  placeholder="Type, id of pad"
                  value={exportSearchQuery}
                  onChange={(event) => setExportSearchQuery(event.target.value)}
                />
              </label>
              <label>
                Type
                <select value={exportTypeFilter} onChange={(event) => setExportTypeFilter(event.target.value)}>
                  <option value="all">Alle 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">Alle statussen</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}
              >
                Filters wissen
              </button>
            </div>
          ) : null}
          {filteredExports.length > 10 ? (
            <div className="list-limit-banner">
              <span>
                {visibleExports.length} van {filteredExports.length} passende downloads zichtbaar.
                {hiddenExportCount > 0 ? ` ${hiddenExportCount} oudere bestanden verborgen.` : ' Alle passende bestanden zijn zichtbaar.'}
              </span>
              <button type="button" className="secondary-action" onClick={() => setShowAllExports((value) => !value)}>
                {showAllExports ? 'Toon laatste 10' : 'Toon alle downloads'}
              </button>
            </div>
          ) : null}
          {exports.length > 0 && filteredExports.length === 0 ? (
            <div className="result-state result-state-empty">
              <strong>Geen downloads passen bij deze filters.</strong>
              <p>Wis de zoekopdracht of filters om de recentste bestanden opnieuw te tonen.</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>download-id: {item.id}</span>
                      {item.analysis_run_id ? <span>analyserun: {item.analysis_run_id}</span> : null}
                      {item.created_at ? <span>gemaakt: {formatExportCreated(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)}>
                      JSON bekijken
                    </button>
                  ) : (
                    <span className="status-badge">HTML alleen downloaden</span>
                  )}
                  <button type="button" className="primary-action" onClick={() => onDownload(item.id)}>
                    Downloaden
                  </button>
                </div>
              </li>
            ))}
          </ul>
          </div>
        </details>
      </div>
    </section>
  )
}