import { useEffect, useRef, useState } from 'react'
import type {
  DatasetCreateResponse,
  DetectionModelCapability,
  DetectionQaResult,
  DetectionRead,
  DetectionRunRead,
  DetectionRunResponse,
  ModelAssetRead,
  QualityCheckRead,
  YoloPreflightResponse,
} from '../../types'
import type { DetectionCalibrationRunRow, DetectionWorkflowStage } from '../../hooks/useDetectionWorkflow'
import { DETECTION_OPERATOR_PROFILES, type DetectionOperatorProfile } from './detectionProfiles'

const DETECTION_PAGE_SIZE_OPTIONS = [25, 50, 100] as const
const DEFAULT_DETECTION_PAGE_SIZE = 50

function detectionModelLabel(model: DetectionModelCapability): string {
  if (model.model_id === 'yolo-configured') return 'Lokaal gebouwmodel'
  if (model.model_id === 'manual-fixture-detector') return 'Testmodel (alleen voor demo)'
  if (model.model_id === 'yolo-placeholder') return 'Gebouwmodel nog niet geconfigureerd'
  return model.display_name
}

interface CalibrationRow {
  analysisRunId: string
  qualityCheckId: string
  threshold: number | null
  modelName: string
  modelAssetId: string | null
  detectionCount: number | null
  precision: number | null
  recall: number | null
  f1: number | null
  falsePositives: number | null
  falseNegatives: number | null
  score: number | null
  createdAt: string | null
}

interface DetectionLabProps {
  detectionModels: DetectionModelCapability[]
  modelAssets: ModelAssetRead[]
  loadingDetectionModels: boolean
  detectionModelError: string | null
  modelAssetError: string | null
  selectedDetectionDatasetId: string
  selectedDetectionModelId: string
  selectedModelAssetId: string
  detectionTileManifestPath: string
  detectionConfidenceThreshold: number
  runningDetection: boolean
  detectionRunResult: DetectionRunResponse | null
  detectionRunError: string | null
  detectionRuns: DetectionRunRead[]
  qualityChecks: QualityCheckRead[]
  calibrationThresholdText: string
  runningDetectionCalibration: boolean
  detectionCalibrationRows: DetectionCalibrationRunRow[]
  detectionCalibrationError: string | null
  detectionWorkflowStage: DetectionWorkflowStage
  selectedDetectionRunId: string
  detectionItems: DetectionRead[]
  detectionClassFilter: string
  detectionMinConfidenceFilter: number
  loadingDetectionResults: boolean
  detectionReferenceDatasetId: string
  detectionQaResult: DetectionQaResult | null
  detectionQaError: string | null
  runningDetectionQa: boolean
  yoloPreflight: YoloPreflightResponse | null
  loadingYoloPreflight: boolean
  yoloPreflightError: string | null
  selectedProjectId: string | null
  rasterDatasets: DatasetCreateResponse[]
  referenceDatasets: DatasetCreateResponse[]
  onLoadModels: () => void
  onRefreshYoloPreflight: () => void
  onSelectDataset: (datasetId: string) => void
  onSelectModel: (modelId: string) => void
  onSelectModelAsset: (modelAssetId: string) => void
  onSetConfidenceThreshold: (value: number) => void
  onSetTileManifestPath: (value: string) => void
  onRunDetection: () => void
  onUploadRaster: (file: File) => Promise<boolean>
  onPrepareAndRunDetection: () => Promise<void>
  onOpenResultsOnMap: () => void
  onLoadRuns: () => void
  onSelectRun: (runId: string) => void
  onSetClassFilter: (value: string) => void
  onSetMinConfidenceFilter: (value: number) => void
  onLoadResults: () => void
  onSelectReferenceDataset: (datasetId: string) => void
  onRunQa: () => void
  onSetCalibrationThresholdText: (value: string) => void
  onRunCalibration: () => void
  onOpenCalibrationEvidence: (qualityCheckId: string) => void
  onApplyOperatorProfile: (profile: DetectionOperatorProfile) => void
}

export function DetectionLab({
  detectionModels,
  modelAssets,
  loadingDetectionModels,
  detectionModelError,
  modelAssetError,
  selectedDetectionDatasetId,
  selectedDetectionModelId,
  selectedModelAssetId,
  detectionTileManifestPath,
  detectionConfidenceThreshold,
  runningDetection,
  detectionRunResult,
  detectionRunError,
  detectionRuns,
  qualityChecks,
  calibrationThresholdText,
  runningDetectionCalibration,
  detectionCalibrationRows,
  detectionCalibrationError,
  detectionWorkflowStage,
  selectedDetectionRunId,
  detectionItems,
  detectionClassFilter,
  detectionMinConfidenceFilter,
  loadingDetectionResults,
  detectionReferenceDatasetId,
  detectionQaResult,
  detectionQaError,
  runningDetectionQa,
  yoloPreflight,
  loadingYoloPreflight,
  yoloPreflightError,
  selectedProjectId,
  rasterDatasets,
  referenceDatasets,
  onLoadModels,
  onRefreshYoloPreflight,
  onSelectDataset,
  onSelectModel,
  onSelectModelAsset,
  onSetConfidenceThreshold,
  onSetTileManifestPath,
  onRunDetection,
  onUploadRaster,
  onPrepareAndRunDetection,
  onOpenResultsOnMap,
  onLoadRuns,
  onSelectRun,
  onSetClassFilter,
  onSetMinConfidenceFilter,
  onLoadResults,
  onSelectReferenceDataset,
  onRunQa,
  onSetCalibrationThresholdText,
  onRunCalibration,
  onOpenCalibrationEvidence,
  onApplyOperatorProfile,
}: DetectionLabProps): JSX.Element {
  const selectedDetectionModel = detectionModels.find((model) => model.model_id === selectedDetectionModelId) ?? null
  const selectedModelAsset = modelAssets.find((asset) => asset.model_asset_id === selectedModelAssetId) ?? null
  const selectedOperatorProfile = DETECTION_OPERATOR_PROFILES.find(
    (profile) => profile.modelAssetId === selectedModelAssetId,
  ) ?? null
  const yoloRuntimeReady = Boolean(
    yoloPreflight?.checks.enabled &&
    yoloPreflight.checks.dependencies_available &&
    yoloPreflight.checks.model_file_exists,
  )
  const detectionRequiresTileManifest = selectedDetectionModelId === 'yolo-configured'
  const detectionHasDataset = selectedDetectionDatasetId.length > 0
  const detectionHasModel = selectedDetectionModel !== null
  const detectionModelReady = Boolean(selectedDetectionModel?.configured)
  const detectionModelUiRunnable = detectionModelReady && selectedDetectionModelId !== 'manual-fixture-detector'
  const detectionHasExplicitModelAsset =
    selectedDetectionModelId !== 'yolo-configured' || modelAssets.length === 0 || selectedModelAssetId.length > 0
  const calibrationRows = buildCalibrationRows(detectionRuns, qualityChecks)
  const bestF1Candidate = bestCalibrationRow(calibrationRows, 'f1')
  const bestPrecisionCandidate = bestCalibrationRow(calibrationRows, 'precision')
  const lowestFalsePositivePressureCandidate = bestLowestCalibrationRow(calibrationRows, 'falsePositives')
  const [detectionResultPage, setDetectionResultPage] = useState(1)
  const [detectionPageSize, setDetectionPageSize] = useState(DEFAULT_DETECTION_PAGE_SIZE)
  const [pendingRasterFile, setPendingRasterFile] = useState<File | null>(null)
  const rasterFileInputRef = useRef<HTMLInputElement>(null)
  const detectionPageCount = Math.max(1, Math.ceil(detectionItems.length / detectionPageSize))
  const currentDetectionPage = Math.min(detectionResultPage, detectionPageCount)
  const detectionPageStart = (currentDetectionPage - 1) * detectionPageSize
  const detectionPageEnd = Math.min(detectionPageStart + detectionPageSize, detectionItems.length)
  const visibleDetectionItems = detectionItems.slice(detectionPageStart, detectionPageEnd)

  useEffect(() => {
    setDetectionResultPage(1)
  }, [selectedDetectionRunId, detectionClassFilter, detectionMinConfidenceFilter, detectionItems])

  const detectionHasTileManifest =
    !detectionRequiresTileManifest || detectionTileManifestPath.trim().length > 0
  const detectionRunReady =
    Boolean(selectedProjectId) &&
    detectionHasDataset &&
    detectionHasModel &&
    detectionModelUiRunnable &&
    detectionHasExplicitModelAsset &&
    detectionHasTileManifest
  const guidedDetectionReady =
    Boolean(selectedProjectId) &&
    detectionHasDataset &&
    detectionHasModel &&
    detectionModelUiRunnable &&
    detectionHasExplicitModelAsset
  const detectionRunBlockedReason = !selectedProjectId
    ? 'De regionale werkruimte is nog niet geladen'
    : !detectionHasDataset
      ? 'Kies een luchtbeeld'
      : !detectionHasModel
        ? 'Kies een analysemodel'
        : selectedDetectionModelId === 'manual-fixture-detector'
          ? 'Het fixturemodel is alleen bedoeld voor expliciete tests en demo\'s'
          : !detectionModelReady
            ? selectedDetectionModel?.limitation_message ?? 'Het gekozen model is niet geconfigureerd'
            : !detectionHasExplicitModelAsset
              ? 'Kies een lokaal modelbestand onder beheer'
            : !detectionHasTileManifest
              ? 'Maak eerst beeldtegels voor het gekozen luchtbeeld'
              : null
  const calibrationRunReady = detectionRunReady && detectionReferenceDatasetId.length > 0 && calibrationThresholdText.trim().length > 0
  const guidedDetectionBlockedReason = !selectedProjectId
    ? 'De regionale werkruimte is nog niet geladen'
    : !detectionHasDataset
      ? 'Kies of voeg een gegeorefereerd luchtbeeld toe'
      : !detectionHasModel
        ? 'Kies een analysemodel'
        : selectedDetectionModelId === 'manual-fixture-detector'
          ? 'Het fixturemodel is alleen bedoeld voor expliciete tests en demo\'s'
          : !detectionModelReady
            ? selectedDetectionModel?.limitation_message ?? 'Het gekozen model is niet geconfigureerd'
            : !detectionHasExplicitModelAsset
              ? 'Kies een lokaal modelbestand onder beheer'
              : null

  return (
    <section className="workspace-panel ai-lab-shell detection-lab-shell">
      <div className="panel-title-row">
        <div>
          <p className="eyebrow">Analyse van luchtbeelden</p>
          <h2>Gebouwen herkennen</h2>
        </div>
        <button className="secondary-action" type="button" onClick={onLoadModels} disabled={loadingDetectionModels}>
          Status vernieuwen
        </button>
      </div>

      <div className="ai-user-summary" aria-label="Status gebouwdetectie">
        <div className="ai-user-summary-card ai-user-summary-card-primary">
          <span>Actieve analyse</span>
          <strong>Gebouwdetectie</strong>
          <p>{selectedOperatorProfile?.displayName ?? selectedModelAsset?.display_name ?? 'Lokaal YOLO-model'}</p>
        </div>
        <div className={yoloRuntimeReady ? 'ai-user-summary-card ai-user-summary-card-ready' : 'ai-user-summary-card'}>
          <span>PyTorch-runtime</span>
          <strong>{yoloRuntimeReady ? 'Gereed' : loadingDetectionModels ? 'Controleren...' : 'Niet gereed'}</strong>
          <p>{yoloRuntimeReady ? `${yoloPreflight?.runtime.cuda_available ? 'GPU' : 'CPU'} · lokaal model gevonden` : 'Controleer de modelconfiguratie onder beheer.'}</p>
        </div>
        <div className="ai-user-summary-card">
          <span>Gevalideerde kwaliteit</span>
          <strong>{selectedOperatorProfile ? `F1 ${selectedOperatorProfile.f1.toFixed(3)}` : 'Nog niet gekoppeld'}</strong>
          <p>{selectedOperatorProfile ? `${selectedOperatorProfile.positiveSampleCount} testgebieden · resultaten blijven controleplichtig` : 'Kies het goedgekeurde lokale profiel.'}</p>
        </div>
        <div className={rasterDatasets.length > 0 ? 'ai-user-summary-card ai-user-summary-card-ready' : 'ai-user-summary-card'}>
          <span>Beschikbare luchtbeelden</span>
          <strong>{rasterDatasets.length}</strong>
          <p>{rasterDatasets.length > 0 ? 'Klaar om een beeld te kiezen.' : 'Laad eerst een gegeorefereerd luchtbeeld in.'}</p>
        </div>
      </div>

      <details className="ai-lab-model-surface" aria-label="Detection model capabilities">
        <summary>
          <span>Technische modelinformatie</span>
          <strong>{detectionModels.length} registraties</strong>
        </summary>
        <div className="ai-lab-disclosure-body">
        <div className="ai-lab-state-stack">
          {loadingDetectionModels ? (
            <div className="result-state result-state-loading">
              <strong>Loading detection models.</strong>
              <p>Checking backend model registry availability.</p>
            </div>
          ) : null}
          {detectionModelError ? (
            <div className="result-state result-state-error">
              <strong>Detection model registry unavailable.</strong>
              <p>{detectionModelError}</p>
            </div>
          ) : null}
          {modelAssetError ? (
            <div className="result-state result-state-error">
              <strong>Local model assets unavailable.</strong>
              <p>{modelAssetError}</p>
            </div>
          ) : null}
          {detectionModels.length === 0 && !loadingDetectionModels ? (
            <div className="result-state result-state-empty">
              <strong>No detection models reported by backend.</strong>
              <p>Refresh models after the backend is reachable.</p>
            </div>
          ) : null}
        </div>
        <ul className="model-list">
          {detectionModels.map((model) => (
            <li className={model.configured ? 'model-card model-card-ready' : 'model-card'} key={model.model_id}>
              <strong>{detectionModelLabel(model)}</strong>
              <span className={model.configured ? 'status-badge status-badge-ready' : 'status-badge'}>{model.status}</span>
              <div className="entity-meta">
                <span>{model.model_id}</span>
                <span>{model.framework}</span>
                <span>{model.task_type}</span>
              </div>
              <p className="muted">classes: {model.supported_classes.join(', ')}</p>
              <p className="muted">{model.limitation_message}</p>
            </li>
          ))}
        </ul>
        </div>
      </details>

      {selectedDetectionModelId === 'yolo-configured' ? (
        <details className="ai-lab-model-surface" aria-label="Local model asset selection">
          <summary>
            <span>Modelkeuze voor beheerders</span>
            <strong>{selectedOperatorProfile?.displayName ?? selectedModelAsset?.display_name ?? 'Geen lokaal model'}</strong>
          </summary>
          <div className="ai-lab-disclosure-body">
          <div className="ai-lab-section-header">
            <div>
              <h3>Lokaal modelbestand</h3>
              <p>GeoIntel kiest automatisch het actieve lokale model. Een beheerder kan hier bewust een ander reeds aanwezig, alleen-lezen modelbestand kiezen.</p>
            </div>
            <span className={selectedModelAsset ? 'status-badge status-badge-ready' : 'status-badge'}>
              {selectedModelAsset ? 'model gekozen' : 'geen model gekozen'}
            </span>
          </div>
          <div className="model-asset-guidance">
            <strong>Gevalideerde profielen</strong>
            <p>
              Een profiel koppelt een lokaal model aan een gemeten zekerheidsdrempel. Een andere keuze geldt alleen voor de huidige analyse en wijzigt de serverconfiguratie niet.
            </p>
          </div>
          <div className="operator-profile-grid" aria-label="Configured YOLO operator profiles">
            {DETECTION_OPERATOR_PROFILES.map((profile) => {
              const profileAsset = modelAssets.find((asset) => asset.model_asset_id === profile.modelAssetId)
              const profileSelected =
                selectedModelAssetId === profile.modelAssetId &&
                Math.abs(detectionConfidenceThreshold - profile.confidenceThreshold) < 0.0001
              return (
                <div
                  className={profileSelected ? 'operator-profile-card operator-profile-card-selected' : 'operator-profile-card'}
                  key={profile.id}
                >
                  <div className="operator-profile-card-header">
                    <strong>{profile.displayName}</strong>
                    <span className={profile.defaultApproved ? 'status-badge status-badge-ready' : 'status-badge'}>
                      {profile.defaultApproved ? 'standaardprofiel' : 'kandidaat · extra controle vereist'}
                    </span>
                  </div>
                  <p>{profile.description}</p>
                  <div className="operator-profile-metrics">
                    <span>drempel {profile.confidenceThreshold.toFixed(2)}</span>
                    <span>precision {profile.precision.toFixed(3)}</span>
                    <span>recall {profile.recall.toFixed(3)}</span>
                    <span>F1 {profile.f1.toFixed(3)}</span>
                    <span>testgebieden {profile.positiveSampleCount}</span>
                    <span>max. achtergrondfouten {profile.maxBackgroundDetections}</span>
                  </div>
                  <div className="entity-meta">
                    <span>modelbestand: {profile.modelAssetId}</span>
                    <span>beoordeling: {profile.promotionRecommendation}</span>
                    <span>beschikbaar: {profileAsset ? 'ja' : 'niet gekoppeld'}</span>
                  </div>
                  <p className="field-guidance">{profile.limitationMessage}</p>
                  <button
                    className="secondary-action"
                    type="button"
                    onClick={() => onApplyOperatorProfile(profile)}
                    disabled={!profileAsset}
                  >
                    Profiel gebruiken
                  </button>
                </div>
              )
            })}
          </div>
          {selectedModelAsset ? (
            <div className="model-asset-guidance">
              <strong>Status gekozen model</strong>
              <p>
                {selectedModelAsset.display_name} wordt voor deze analyse gebruikt. De standaard serverconfiguratie blijft ongewijzigd.
              </p>
            </div>
          ) : null}
          <label>
            Lokaal modelbestand
            <select value={selectedModelAssetId} onChange={(event) => onSelectModelAsset(event.target.value)}>
              <option value="">Kies een lokaal modelbestand</option>
              {modelAssets.map((asset) => (
                <option key={asset.model_asset_id} value={asset.model_asset_id}>
                  {asset.display_name} {asset.active ? '(active)' : ''}
                </option>
              ))}
            </select>
          </label>
          {modelAssets.length === 0 && !loadingDetectionModels ? (
            <div className="result-state result-state-empty">
              <strong>Geen lokaal modelbestand gevonden.</strong>
              <p>Plaats een gecontroleerd model in de modelmap of configureer het bestaande YOLO-modelpad.</p>
            </div>
          ) : null}
          {selectedModelAsset ? (
            <div className="result-summary-card">
              <p>File: {selectedModelAsset.filename}</p>
              <p>Status: {selectedModelAsset.status}</p>
              <p>Active runtime env model: {selectedModelAsset.active ? 'yes' : 'no'}</p>
              <p>will_download_models: {selectedModelAsset.will_download_models ? 'yes' : 'no'}</p>
              <p>Size: {formatModelAssetSize(selectedModelAsset.size_bytes)}</p>
              <p>SHA-256: {selectedModelAsset.sha256.slice(0, 12)}</p>
              <p>Path: {selectedModelAsset.model_path}</p>
              <p>{selectedModelAsset.limitation_message}</p>
            </div>
          ) : null}
          </div>
        </details>
      ) : null}

      <details className="ai-lab-model-surface" aria-label="YOLO runtime preflight">
        <summary>
          <span>Technische runtimecontrole</span>
          <strong>{yoloRuntimeReady ? 'gereed' : yoloPreflight?.status ?? 'niet geladen'}</strong>
        </summary>
        <div className="ai-lab-disclosure-body">
        <div className="ai-lab-section-header">
          <div>
            <h3>YOLO runtime preflight</h3>
            <p>Read-only runtime status. This does not load a model, run inference or download weights.</p>
          </div>
          <button className="secondary-action" type="button" onClick={onRefreshYoloPreflight} disabled={loadingYoloPreflight}>
            Refresh preflight
          </button>
        </div>
        <div className="ai-lab-state-stack">
          {loadingYoloPreflight ? (
            <div className="result-state result-state-loading">
              <strong>Loading YOLO preflight.</strong>
              <p>Checking backend runtime configuration and optional dependency visibility.</p>
            </div>
          ) : null}
          {yoloPreflightError ? (
            <div className="result-state result-state-error">
              <strong>YOLO preflight unavailable.</strong>
              <p>{yoloPreflightError}</p>
            </div>
          ) : null}
          {!yoloPreflight && !loadingYoloPreflight && !yoloPreflightError ? (
            <div className="result-state result-state-empty">
              <strong>No YOLO preflight loaded.</strong>
              <p>Refresh preflight to inspect the live backend AI runtime before running configured YOLO.</p>
            </div>
          ) : null}
        </div>
        {yoloPreflight ? (
          <div className={yoloPreflight.status === 'ready' ? 'lab-readiness-panel lab-readiness-panel-ready' : 'lab-readiness-panel'}>
            <div className="ai-lab-section-header">
              <div>
                <h3>Status: {yoloPreflight.status}</h3>
                <p>{yoloPreflight.message}</p>
              </div>
              <span className={yoloPreflight.status === 'ready' ? 'status-badge status-badge-ready' : 'status-badge'}>
                {yoloPreflight.checks.dependencies_available ? 'dependencies visible' : 'not ready'}
              </span>
            </div>
            <div className="lab-readiness-grid">
              <div className={yoloPreflight.checks.enabled ? 'lab-readiness-item lab-readiness-item-ready' : 'lab-readiness-item'}>
                <span>YOLO enabled</span>
                <strong>{yoloPreflight.checks.enabled ? 'true' : 'false'}</strong>
              </div>
              <div className={yoloPreflight.checks.dependencies_available ? 'lab-readiness-item lab-readiness-item-ready' : 'lab-readiness-item'}>
                <span>Dependencies</span>
                <strong>{yoloPreflight.checks.dependencies_available === true ? 'available' : yoloPreflight.checks.dependencies_available === false ? 'unavailable' : 'not checked'}</strong>
              </div>
              <div className={yoloPreflight.checks.model_file_exists ? 'lab-readiness-item lab-readiness-item-ready' : 'lab-readiness-item'}>
                <span>Local model file</span>
                <strong>{yoloPreflight.checks.model_file_exists === true ? 'found' : yoloPreflight.checks.model_path_set ? 'missing' : 'not configured'}</strong>
              </div>
              <div className={yoloPreflight.runtime.cuda_available ? 'lab-readiness-item lab-readiness-item-ready' : 'lab-readiness-item'}>
                <span>CUDA</span>
                <strong>{yoloPreflight.runtime.cuda_available === true ? 'available' : yoloPreflight.runtime.cuda_available === false ? 'not available' : 'not checked'}</strong>
              </div>
              <div className={yoloPreflight.checks.manifest_valid ? 'lab-readiness-item lab-readiness-item-ready' : 'lab-readiness-item'}>
                <span>Tile manifest validation</span>
                <strong>{yoloPreflight.checks.manifest_valid === true ? 'valid' : yoloPreflight.checks.manifest_path_set ? 'not valid' : 'not provided'}</strong>
              </div>
              <div className={yoloPreflight.tile_count > 0 ? 'lab-readiness-item lab-readiness-item-ready' : 'lab-readiness-item'}>
                <span>Tile count</span>
                <strong>{yoloPreflight.tile_count} / {yoloPreflight.max_tiles}</strong>
              </div>
            </div>
            <div className="entity-meta">
              <span>torch_version: {yoloPreflight.runtime.torch_version ?? 'n/a'}</span>
              <span>ultralytics_version: {yoloPreflight.runtime.ultralytics_version ?? 'n/a'}</span>
              <span>cuda_available: {String(yoloPreflight.runtime.cuda_available ?? 'unknown')}</span>
              <span>will_run_inference: {String(yoloPreflight.will_run_inference)}</span>
              <span>YOLO_CONFIG_DIR: {yoloPreflight.runtime.yolo_config_dir ?? 'n/a'}</span>
              <span>model directory: {yoloPreflight.runtime.model_directory ?? 'n/a'}</span>
              <span>model_asset_id: {yoloPreflight.model_asset_id ?? 'n/a'}</span>
            </div>
          </div>
        ) : null}
        </div>
      </details>

      <div className="lab-block">
        <div className="ai-lab-run-surface" aria-label="Detection run controls">
          <h3>Nieuwe beeldanalyse</h3>
          <div
            className={guidedDetectionReady ? 'lab-readiness-panel lab-readiness-panel-ready' : 'lab-readiness-panel'}
            aria-label="Detection run readiness"
          >
            <div className="ai-lab-section-header">
              <div>
                <h3>Wat is nog nodig?</h3>
                <p>Kies een luchtbeeld en model. GeoIntel maakt de beeldtegels en laadt het resultaat daarna automatisch op de kaart.</p>
              </div>
              <span className={guidedDetectionReady ? 'status-badge status-badge-ready' : 'status-badge'}>
                {guidedDetectionReady ? 'Klaar om te starten' : 'Nog niet startklaar'}
              </span>
            </div>
            <div className="lab-readiness-grid">
              <div className={detectionHasDataset ? 'lab-readiness-item lab-readiness-item-ready' : 'lab-readiness-item'}>
                <span>Luchtbeeld</span>
                <strong>{detectionHasDataset ? 'Geselecteerd' : 'Nog geen luchtbeeld'}</strong>
              </div>
              <div className={detectionModelReady ? 'lab-readiness-item lab-readiness-item-ready' : 'lab-readiness-item'}>
                <span>Analysemodel</span>
                <strong>
                  {detectionModelReady
                    ? 'Lokaal gebouwmodel beschikbaar'
                    : 'Model niet beschikbaar'}
                </strong>
              </div>
              <div className={detectionHasTileManifest ? 'lab-readiness-item lab-readiness-item-ready' : 'lab-readiness-item'}>
                <span>Beeldtegels</span>
                <strong>
                  {detectionRequiresTileManifest
                    ? detectionHasTileManifest
                      ? 'Beschikbaar'
                      : detectionHasDataset
                        ? 'Worden automatisch voorbereid'
                        : 'Wachten op een luchtbeeld'
                    : 'Niet vereist'}
                </strong>
              </div>
              <div className={detectionHasExplicitModelAsset ? 'lab-readiness-item lab-readiness-item-ready' : 'lab-readiness-item'}>
                <span>Lokale modelkeuze</span>
                <strong>
                  {selectedDetectionModelId === 'yolo-configured'
                    ? selectedModelAsset
                      ? selectedOperatorProfile?.displayName ?? selectedModelAsset.display_name
                      : modelAssets.length > 0
                        ? 'Kies een lokaal model onder beheer'
                        : 'Geen lokaal model gevonden'
                    : 'Niet vereist'}
                </strong>
              </div>
            </div>
          </div>
          <div className={guidedDetectionReady ? 'lab-action-guardrail lab-action-guardrail-ready' : 'lab-action-guardrail'}>
            <span>Analyse</span>
            <strong>{guidedDetectionReady ? 'Klaar om gebouwen te zoeken' : guidedDetectionBlockedReason}</strong>
          </div>
          {rasterDatasets.length === 0 ? (
            <div className="result-state result-state-empty">
              <strong>Geen luchtbeeld beschikbaar in deze werkruimte.</strong>
              <p>Voeg hieronder een gegeorefereerde GeoTIFF toe. GeoIntel controleert de projectie en bewaart het bronbestand als dataset.</p>
            </div>
          ) : null}
          <div className="guided-raster-input" aria-label="Luchtbeeld toevoegen">
            <div>
              <strong>Eigen luchtbeeld toevoegen</strong>
              <p>Gebruik een GeoTIFF met geldige CRS en georeferentie. Een bestaand luchtbeeld kan meteen in de keuzelijst worden gebruikt.</p>
            </div>
            <label className="file-picker-field">
              <span>GeoTIFF-bestand</span>
              <input
                ref={rasterFileInputRef}
                type="file"
                accept=".tif,.tiff,image/tiff,application/geotiff"
                onChange={(event) => setPendingRasterFile(event.target.files?.[0] ?? null)}
                disabled={runningDetection}
              />
            </label>
            <button
              className="secondary-action"
              type="button"
              disabled={!pendingRasterFile || runningDetection}
              onClick={async () => {
                if (pendingRasterFile && await onUploadRaster(pendingRasterFile)) {
                  setPendingRasterFile(null)
                  if (rasterFileInputRef.current) {
                    rasterFileInputRef.current.value = ''
                  }
                }
              }}
            >
              {detectionWorkflowStage === 'uploading' ? 'Luchtbeeld toevoegen...' : 'Luchtbeeld toevoegen'}
            </button>
          </div>
          <div className="lab-form-grid">
            <label>
              Luchtbeeld
              <select
                value={selectedDetectionDatasetId}
                onChange={(event) => {
                  onSelectDataset(event.target.value)
                  onSetTileManifestPath('')
                }}
              >
                <option value="">Kies een luchtbeeld</option>
                {rasterDatasets.map((dataset) => (
                  <option key={dataset.id} value={dataset.id}>
                    {dataset.name}
                  </option>
                ))}
              </select>
            </label>
            <label>
              Analysemodel
              <select value={selectedDetectionModelId} onChange={(event) => onSelectModel(event.target.value)}>
                {detectionModels.map((model) => (
                  <option key={model.model_id} value={model.model_id}>
                    {detectionModelLabel(model)}
                  </option>
                ))}
              </select>
            </label>
            <label>
              Minimale zekerheid
              <input
                type="number"
                min="0"
                max="1"
                step="0.05"
                value={detectionConfidenceThreshold}
                onChange={(event) => onSetConfidenceThreshold(Number(event.target.value))}
              />
              {selectedDetectionModelId === 'yolo-configured' ? (
                <span className="field-guidance">
                  Het actieve gevalideerde profiel gebruikt standaard 0,15 voor een evenwichtige gebouwcontrole.
                </span>
              ) : null}
            </label>
          </div>
          <div className="guided-detection-progress" aria-live="polite">
            <DetectionWorkflowStep label="1. Luchtbeeld" complete={detectionHasDataset} active={detectionWorkflowStage === 'uploading'} />
            <DetectionWorkflowStep label="2. Beeldtegels" complete={detectionHasTileManifest || detectionWorkflowStage === 'complete'} active={detectionWorkflowStage === 'tiling'} />
            <DetectionWorkflowStep label="3. Modelcontrole" complete={detectionWorkflowStage === 'detecting' || detectionWorkflowStage === 'loading' || detectionWorkflowStage === 'complete'} active={detectionWorkflowStage === 'validating'} />
            <DetectionWorkflowStep label="4. Resultaat" complete={detectionWorkflowStage === 'complete'} active={detectionWorkflowStage === 'detecting' || detectionWorkflowStage === 'loading'} />
          </div>
          <button className="primary-action guided-detection-action" type="button" onClick={onPrepareAndRunDetection} disabled={runningDetection || !guidedDetectionReady}>
            {detectionWorkflowActionLabel(detectionWorkflowStage)}
          </button>

          <details className="ai-lab-model-surface technical-manifest-surface" aria-label="Technische tegelinstellingen">
            <summary>
              <span>Technische tegelinstellingen</span>
              <strong>{detectionHasTileManifest ? 'manifest beschikbaar' : 'automatisch'}</strong>
            </summary>
            <div className="ai-lab-disclosure-body">
              <p className="muted">De normale actie gebruikt automatisch 512 px-tegels met 64 px overlap. Alleen beheerders hoeven hier een bestaand manifest te koppelen.</p>
              {selectedDetectionModelId === 'yolo-configured' ? (
                <label>
                  Beeldtegelbestand
                  <input
                    type="text"
                    placeholder="Pad naar de aangemaakte beeldtegels"
                    value={detectionTileManifestPath}
                    onChange={(event) => onSetTileManifestPath(event.target.value)}
                  />
                </label>
              ) : null}
              {selectedDetectionModelId === 'yolo-configured' && detectionTileManifestPath.trim() ? (
                <div className="linked-manifest-card">
                  <strong>Gekoppelde beeldtegels</strong>
                  <p>{detectionTileManifestPath}</p>
                  <span>De technische controle wordt vernieuwd wanneer het model of tegelbestand wijzigt.</span>
                </div>
              ) : null}
              <button className="secondary-action" type="button" onClick={onRunDetection} disabled={runningDetection || !detectionRunReady}>
                Bestaande beeldtegels analyseren
              </button>
            </div>
          </details>
        </div>
      </div>

      <div className="ai-lab-state-stack">
        {detectionRunError ? (
          <div className="result-state result-state-error">
            <strong>De beeldanalyse is mislukt.</strong>
            <p>{detectionRunError}</p>
          </div>
        ) : null}
        {detectionRunResult ? (
          <div className="result-summary-card">
            <p>Status: {detectionRunResult.status}</p>
            <p>Uitleg: {detectionRunResult.message}</p>
            <p>Analyse: {detectionRunResult.analysis_run_id}</p>
            <p>Verwerking: {detectionRunResult.job_id}</p>
            <p>Gevonden objecten: {detectionRunResult.detection_count}</p>
            {detectionRunResult.error_code ? <p className="error">Code: {detectionRunResult.error_code}</p> : null}
          </div>
        ) : null}
      </div>

      <details className="ai-lab-model-surface guided-calibration-surface" aria-label="Guided calibration runner">
        <summary>
          <span>Modelkalibratie voor beheerders</span>
          <strong>{detectionCalibrationRows.length > 0 ? `${detectionCalibrationRows.length} drempels getest` : 'gesloten'}</strong>
        </summary>
        <div className="ai-lab-disclosure-body">
        <div className="ai-lab-section-header">
          <div>
            <h3>Guided calibration runner</h3>
            <p>This runs real configured YOLO jobs and QA comparisons for each threshold. It does not promote or mutate model files.</p>
          </div>
          <span className={calibrationRunReady ? 'status-badge status-badge-ready' : 'status-badge'}>
            {calibrationRunReady ? 'ready' : 'needs dataset, model, manifest and reference'}
          </span>
        </div>
        <div className="lab-form-grid">
          <label>
            Threshold set
            <input
              type="text"
              value={calibrationThresholdText}
              onChange={(event) => onSetCalibrationThresholdText(event.target.value)}
              placeholder="0.50 0.25 0.15"
            />
            <span className="field-guidance">Use spaces, commas or semicolons. Values must be between 0 and 1.</span>
          </label>
          <label>
            Reference dataset
            <select value={detectionReferenceDatasetId} onChange={(event) => onSelectReferenceDataset(event.target.value)}>
              <option value="">Select reference dataset</option>
              {referenceDatasets.map((dataset) => (
                <option key={dataset.id} value={dataset.id}>
                  {dataset.name}
                </option>
              ))}
            </select>
          </label>
        </div>
        <button
          className="primary-action"
          type="button"
          onClick={onRunCalibration}
          disabled={runningDetectionCalibration || !calibrationRunReady}
        >
          Run calibration sweep
        </button>
        {detectionCalibrationError ? (
          <div className="result-state result-state-error">
            <strong>Calibration sweep failed.</strong>
            <p>{detectionCalibrationError}</p>
          </div>
        ) : null}
        {detectionCalibrationRows.length > 0 ? (
          <div className="calibration-progress-panel" aria-label="Calibration run progress">
            <div className="panel-title-row">
              <div>
                <h3>Calibration run progress</h3>
                <p className="muted">Each row is backed by a persisted detection run and QA check when successful.</p>
              </div>
              <div className="panel-action-row">
                <span className="count-pill">{detectionCalibrationRows.length} thresholds</span>
                <button
                  className="secondary-action"
                  type="button"
                  onClick={() => downloadCalibrationSummary(selectedProjectId, detectionCalibrationRows)}
                  disabled={detectionCalibrationRows.length === 0 || !selectedProjectId}
                >
                  Download calibration summary
                </button>
              </div>
            </div>
            <div className="table-scroll">
              <table>
                <thead>
                  <tr>
                    <th>Threshold</th>
                    <th>Status</th>
                    <th>Detections</th>
                    <th>Precision</th>
                    <th>Recall</th>
                    <th>F1</th>
                    <th>False positives</th>
                    <th>False negatives</th>
                    <th>Evidence</th>
                  </tr>
                </thead>
                <tbody>
                  {detectionCalibrationRows.map((row) => (
                    <tr key={row.threshold}>
                      <td>{row.threshold.toFixed(2)}</td>
                      <td>{row.status}</td>
                      <td>{row.detection_count ?? 'n/a'}</td>
                      <td>{formatNullableNumber(row.precision ?? null, 3)}</td>
                      <td>{formatNullableNumber(row.recall ?? null, 3)}</td>
                      <td>{formatNullableNumber(row.f1_score ?? null, 3)}</td>
                      <td>{row.false_positives ?? 'n/a'}</td>
                      <td>{row.false_negatives ?? 'n/a'}</td>
                      <td>
                        <button
                          className="secondary-action table-action"
                          type="button"
                          onClick={() => row.quality_check_id ? onOpenCalibrationEvidence(row.quality_check_id) : undefined}
                          disabled={!row.quality_check_id || row.status !== 'success'}
                          aria-label={`Open evidence map for threshold ${row.threshold.toFixed(2)}`}
                        >
                          Open evidence map
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        ) : (
          <div className="result-state result-state-empty">
            <strong>No calibration sweep has been run in this session.</strong>
            <p>Choose a reference dataset and threshold set, then start the explicit sweep.</p>
          </div>
        )}
        </div>
      </details>

      <div className="ai-lab-results-surface" aria-label="Detection results">
        <div className="panel-title-row">
          <div>
            <h3>Gevonden objecten</h3>
            <p className="muted">Bekijk eerder bewaarde analyses en filter op type of zekerheid.</p>
          </div>
          <div className="panel-action-row">
            <button className="secondary-action" type="button" onClick={onLoadRuns} disabled={!selectedProjectId}>
              Analyses vernieuwen
            </button>
            <button className="primary-action" type="button" onClick={onOpenResultsOnMap} disabled={detectionItems.length === 0}>
              Toon op kaart
            </button>
          </div>
        </div>
        <div className="lab-form-grid">
          <label>
            Analyse
            <select value={selectedDetectionRunId} onChange={(event) => onSelectRun(event.target.value)}>
              <option value="">Kies een bewaarde analyse</option>
              {detectionRuns.map((run) => (
                <option key={run.id} value={run.id}>
                  {run.model_name || 'Gebouwdetectie'} · {run.status} · {run.id}
                </option>
              ))}
            </select>
          </label>
          <label>
            Type object
            <input
              type="text"
              placeholder="bijvoorbeeld gebouw"
              value={detectionClassFilter}
              onChange={(event) => onSetClassFilter(event.target.value)}
            />
          </label>
          <label>
            Minimale zekerheid
            <input
              type="number"
              min="0"
              max="1"
              step="0.05"
              value={detectionMinConfidenceFilter}
              onChange={(event) => onSetMinConfidenceFilter(Number(event.target.value))}
            />
          </label>
        </div>
        <button className="primary-action" type="button" onClick={onLoadResults} disabled={!selectedDetectionRunId || loadingDetectionResults}>
          Resultaten laden
        </button>
        {loadingDetectionResults ? (
          <div className="result-state result-state-loading">
            <strong>Resultaten laden.</strong>
            <p>De bewaarde objecten van deze analyse worden opgehaald.</p>
          </div>
        ) : null}
        <div className="ai-lab-state-stack">
          <div className="result-state result-state-ready">
            <strong>{detectionItems.length} objecten geladen</strong>
            <p>{selectedDetectionRunId ? 'Deze resultaten zijn bewaard in de database.' : 'Kies eerst een bewaarde analyse.'}</p>
          </div>
        </div>
        {detectionItems.length > 0 ? (
          <>
            <div className="pagination-toolbar" aria-label="Detection result pagination">
              <p className="pagination-summary" aria-live="polite">
                <strong>{detectionPageStart + 1}-{detectionPageEnd}</strong>
                <span>van {detectionItems.length}</span>
              </p>
              <label className="pagination-page-size">
                Rijen
                <select
                  value={detectionPageSize}
                  onChange={(event) => {
                    setDetectionPageSize(Number(event.target.value))
                    setDetectionResultPage(1)
                  }}
                >
                  {DETECTION_PAGE_SIZE_OPTIONS.map((pageSize) => (
                    <option key={pageSize} value={pageSize}>{pageSize}</option>
                  ))}
                </select>
              </label>
              <div className="pagination-actions">
                <button
                  className="secondary-action pagination-button"
                  type="button"
                  aria-label="Vorige resultatenpagina"
                  title="Vorige pagina"
                  disabled={currentDetectionPage <= 1}
                  onClick={() => setDetectionResultPage(currentDetectionPage - 1)}
                >
                  {'<'}
                </button>
                <span>Pagina {currentDetectionPage} van {detectionPageCount}</span>
                <button
                  className="secondary-action pagination-button"
                  type="button"
                  aria-label="Volgende resultatenpagina"
                  title="Volgende pagina"
                  disabled={currentDetectionPage >= detectionPageCount}
                  onClick={() => setDetectionResultPage(currentDetectionPage + 1)}
                >
                  {'>'}
                </button>
              </div>
            </div>
            <div className="table-scroll">
              <table>
                <thead>
                  <tr>
                    <th>Type</th>
                    <th>Zekerheid</th>
                    <th>Model</th>
                    <th>Beeldtegel</th>
                  </tr>
                </thead>
                <tbody>
                  {visibleDetectionItems.map((detection) => (
                    <tr key={detection.id}>
                      <td>{detection.class_name}</td>
                      <td>{detection.confidence.toFixed(2)}</td>
                      <td>{detection.model_name}</td>
                      <td className="source-tile-cell" title={detection.source_tile_path ?? undefined}>
                        {formatSourceTilePath(detection.source_tile_path)}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </>
        ) : null}
      </div>

      <details className="secondary-analysis-disclosure detection-technical-evaluation">
        <summary>
          <span>Technische modelevaluatie</span>
          <strong>{calibrationRows.length > 0 || detectionQaResult ? 'resultaten beschikbaar' : 'optioneel'}</strong>
        </summary>
        <div className="ai-lab-disclosure-body">
      <div className="ai-lab-results-surface calibration-comparison-surface" aria-label="Vergelijking modelkalibratie">
        <div className="panel-title-row">
          <div>
            <h3>Kalibraties vergelijken</h3>
            <p className="muted">Vergelijk bewaarde analyseruns per zekerheidsdrempel voordat een modelinstelling wordt goedgekeurd.</p>
          </div>
          <span className="count-pill">{calibrationRows.length} resultaten</span>
        </div>
        {calibrationRows.length > 0 ? (
          <>
            <div className="calibration-summary-grid" aria-label="Calibration comparison winners">
              <CalibrationSummaryCard title="Beste F1-score" row={bestF1Candidate} metric="f1" />
              <CalibrationSummaryCard title="Beste precisie" row={bestPrecisionCandidate} metric="precision" />
              <CalibrationSummaryCard title="Minste foutieve meldingen" row={lowestFalsePositivePressureCandidate} metric="falsePositives" />
            </div>
            <div className="table-scroll">
              <table>
                <thead>
                  <tr>
                    <th>Drempel</th>
                    <th>Model</th>
                    <th>Objecten</th>
                    <th>Precisie</th>
                    <th>Recall</th>
                    <th>F1</th>
                    <th>Fout positief</th>
                    <th>Fout negatief</th>
                    <th>Kwaliteitscontrole</th>
                  </tr>
                </thead>
                <tbody>
                  {calibrationRows.map((row) => (
                    <tr key={`${row.analysisRunId}-${row.qualityCheckId}`}>
                      <td>{formatNullableNumber(row.threshold, 2)}</td>
                      <td>
                        <strong>{row.modelName}</strong>
                        <span className="table-subtle">{row.modelAssetId ?? 'geconfigureerd lokaal model'}</span>
                      </td>
                      <td>{row.detectionCount ?? 'n/a'}</td>
                      <td>{formatNullableNumber(row.precision, 3)}</td>
                      <td>{formatNullableNumber(row.recall, 3)}</td>
                      <td>{formatNullableNumber(row.f1, 3)}</td>
                      <td>{row.falsePositives ?? 'n/a'}</td>
                      <td>{row.falseNegatives ?? 'n/a'}</td>
                      <td>{row.qualityCheckId}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <div className="lab-action-guardrail">
              <span>Voorwaarde voor goedkeuring</span>
              <strong>Keur pas goed nadat meerdere gebieden en de foutieve positieve en negatieve resultaten zijn gecontroleerd.</strong>
            </div>
          </>
        ) : (
          <div className="result-state result-state-empty">
            <strong>Nog geen kalibratievergelijking beschikbaar.</strong>
            <p>Voer het lokale model met meerdere zekerheidsdrempels uit en vergelijk de resultaten met dezelfde referentielaag.</p>
          </div>
        )}
      </div>
        </div>
      </details>

      <div className="ai-lab-qa-surface" aria-label="Kwaliteitscontrole gebouwdetectie">
        <h3>Kwaliteitscontrole gebouwdetectie</h3>
        <p className="muted">Vergelijk de gevonden gebouwen met een bewaarde officiële referentielaag. De uitkomst wordt als kwaliteitscontrole in de database bewaard.</p>
        <label>
          Referentielaag
          <select value={detectionReferenceDatasetId} onChange={(event) => onSelectReferenceDataset(event.target.value)}>
            <option value="">Kies een referentielaag</option>
            {referenceDatasets.map((dataset) => (
              <option key={dataset.id} value={dataset.id}>
                {dataset.name}
              </option>
            ))}
          </select>
        </label>
        <button className="primary-action" type="button" onClick={onRunQa} disabled={runningDetectionQa || !selectedDetectionRunId || !detectionReferenceDatasetId}>
          Vergelijk met referentielaag
        </button>
        {detectionQaError ? (
          <div className="result-state result-state-error">
            <strong>De kwaliteitscontrole is mislukt.</strong>
          <p>{detectionQaError}</p>
        </div>
      ) : null}
      {detectionQaResult ? (
          <div className="result-summary-card">
            <p>Status: {detectionQaResult.status}</p>
            <p>Kwaliteitscontrole: {detectionQaResult.quality_check_id}</p>
            <p>Precisie: {detectionQaResult.precision?.toFixed(3) ?? 'n.v.t.'}</p>
            <p>Recall: {detectionQaResult.recall?.toFixed(3) ?? 'n/a'}</p>
            <p>F1: {detectionQaResult.f1_score?.toFixed(3) ?? 'n/a'}</p>
            <p>Gemiddelde overlap: {detectionQaResult.mean_iou?.toFixed(3) ?? 'n.v.t.'}</p>
            <p>Fout positief: {detectionQaResult.false_positives}</p>
            <p>Fout negatief: {detectionQaResult.false_negatives}</p>
            {detectionQaResult.coverage ? (
              <div className="detection-qa-diagnostic">
                <span>Gecontroleerd beeldbereik</span>
                <strong>
                  {detectionQaResult.coverage.applied
                    ? `${detectionQaResult.coverage.reference_evaluated_count} van ${detectionQaResult.coverage.reference_raw_count} referentieobjecten gecontroleerd`
                    : 'De volledige referentielaag is gecontroleerd'}
                </strong>
                <p>
                  {detectionQaResult.coverage.applied
                    ? `${detectionQaResult.coverage.reference_excluded_outside_count} buiten beeldbereik, ${detectionQaResult.coverage.reference_clipped_boundary_count} aan de rand begrensd, ${detectionQaResult.coverage.tile_count} beeldtegels.`
                    : 'Deze controle gebruikt alle objecten uit de gekozen referentielaag.'}
                </p>
              </div>
            ) : null}
            {detectionQaResult.box_to_footprint_diagnostics ? (
              <div className="detection-qa-diagnostic detection-qa-diagnostic-caution">
                <span>Aanvullende vormdiagnose</span>
                <strong>
                  {detectionQaResult.box_to_footprint_diagnostics.envelope_matches} rechthoekmatches tegenover{' '}
                  {detectionQaResult.box_to_footprint_diagnostics.strict_matches} strikte vormmatches
                </strong>
                <p>
                  {detectionQaResult.box_to_footprint_diagnostics.possible_box_to_footprint_mismatch_count} mogelijke vormafwijkingen. Precisie, recall en F1 hierboven blijven gebaseerd op de strikte geometrische overlap.
                </p>
              </div>
            ) : null}
          </div>
        ) : null}
      </div>
    </section>
  )
}

function CalibrationSummaryCard({
  title,
  row,
  metric,
}: {
  title: string
  row: CalibrationRow | null
  metric: 'f1' | 'precision' | 'falsePositives'
}): JSX.Element {
  return (
    <div className={row ? 'calibration-summary-card calibration-summary-card-ready' : 'calibration-summary-card'}>
      <span>{title}</span>
      {row ? (
        <>
          <strong>{metric === 'falsePositives' ? row.falsePositives ?? 'n/a' : formatNullableNumber(row[metric], 3)}</strong>
          <p>Threshold {formatNullableNumber(row.threshold, 2)} · {row.modelName}</p>
        </>
      ) : (
        <>
          <strong>n/a</strong>
          <p>Persisted QA metrics are required.</p>
        </>
      )}
    </div>
  )
}

function formatModelAssetSize(sizeBytes: number): string {
  if (sizeBytes >= 1024 * 1024) {
    return `${(sizeBytes / (1024 * 1024)).toFixed(1)} MB`
  }
  if (sizeBytes >= 1024) {
    return `${(sizeBytes / 1024).toFixed(1)} KB`
  }
  return `${sizeBytes} B`
}

function DetectionWorkflowStep({
  label,
  complete,
  active,
}: {
  label: string
  complete: boolean
  active: boolean
}): JSX.Element {
  const className = active
    ? 'guided-detection-step guided-detection-step-active'
    : complete
      ? 'guided-detection-step guided-detection-step-complete'
      : 'guided-detection-step'
  return (
    <div className={className}>
      <span aria-hidden="true">{complete ? 'OK' : active ? '...' : '-'}</span>
      <strong>{label}</strong>
    </div>
  )
}

function detectionWorkflowActionLabel(stage: DetectionWorkflowStage): string {
  if (stage === 'tiling') return 'Beeldtegels voorbereiden...'
  if (stage === 'validating') return 'Model en beeld controleren...'
  if (stage === 'detecting') return 'Gebouwen zoeken...'
  if (stage === 'loading') return 'Resultaat op kaart laden...'
  if (stage === 'complete') return 'Analyse opnieuw uitvoeren'
  return 'Gebouwen zoeken en op kaart tonen'
}

function buildCalibrationRows(detectionRuns: DetectionRunRead[], qualityChecks: QualityCheckRead[]): CalibrationRow[] {
  const runById = new Map(detectionRuns.map((run) => [run.id, run]))
  return qualityChecks
    .flatMap((check) => {
      const run = check.analysis_run_id ? runById.get(check.analysis_run_id) : null
      if (!run || run.analysis_type !== 'detection') {
        return []
      }
      const threshold = confidenceThresholdForRun(run)
      return [{
        analysisRunId: run.id,
        qualityCheckId: check.id,
        threshold,
        modelName: run.model_name ?? 'configured detection',
        modelAssetId: stringFromRecord(run.parameters_json, 'model_asset_id'),
        detectionCount: numberFromRecord(run.result_json, 'detection_count'),
        precision: metricValue(check, 'precision'),
        recall: metricValue(check, 'recall'),
        f1: metricValue(check, 'f1'),
        falsePositives: metricValue(check, 'false_positives'),
        falseNegatives: metricValue(check, 'false_negatives'),
        score: check.score ?? null,
        createdAt: check.completed_at ?? check.created_at ?? run.finished_at ?? run.created_at ?? null,
      }]
    })
    .sort((left, right) => {
      const createdDiff = Date.parse(right.createdAt ?? '') - Date.parse(left.createdAt ?? '')
      if (Number.isFinite(createdDiff) && createdDiff !== 0) {
        return createdDiff
      }
      return (right.threshold ?? -1) - (left.threshold ?? -1)
    })
}

function confidenceThresholdForRun(run: DetectionRunRead): number | null {
  return (
    numberFromRecord(run.parameters_json, 'confidence_threshold') ??
    numberFromRecord(run.result_json, 'confidence_threshold') ??
    null
  )
}

function metricValue(check: QualityCheckRead, key: string): number | null {
  const aliases = key === 'f1' ? ['f1', 'f1_score'] : [key]
  for (const alias of aliases) {
    const metric = check.metrics.find((item) => item.metric_key === alias)
    if (typeof metric?.metric_value === 'number' && Number.isFinite(metric.metric_value)) {
      return metric.metric_value
    }
    const findingValue = numberFromRecord(check.findings_json, alias)
    if (findingValue !== null) {
      return findingValue
    }
  }
  return key === 'f1' && typeof check.score === 'number' ? check.score : null
}

function bestCalibrationRow(rows: CalibrationRow[], metric: 'f1' | 'precision'): CalibrationRow | null {
  return rows.reduce<CalibrationRow | null>((best, row) => {
    const value = row[metric]
    if (value === null) {
      return best
    }
    if (!best || value > (best[metric] ?? Number.NEGATIVE_INFINITY)) {
      return row
    }
    return best
  }, null)
}

function bestLowestCalibrationRow(rows: CalibrationRow[], metric: 'falsePositives'): CalibrationRow | null {
  return rows.reduce<CalibrationRow | null>((best, row) => {
    const value = row[metric]
    if (value === null) {
      return best
    }
    if (!best || value < (best[metric] ?? Number.POSITIVE_INFINITY)) {
      return row
    }
    return best
  }, null)
}

function numberFromRecord(record: Record<string, unknown> | null | undefined, key: string): number | null {
  const value = record?.[key]
  return typeof value === 'number' && Number.isFinite(value) ? value : null
}

function stringFromRecord(record: Record<string, unknown> | null | undefined, key: string): string | null {
  const value = record?.[key]
  return typeof value === 'string' && value.trim().length > 0 ? value : null
}

function buildCalibrationSummaryExport(projectId: string, rows: DetectionCalibrationRunRow[]): Record<string, unknown> {
  const successfulRows = rows.filter((row) => row.status === 'success')
  return {
    export_type: 'detection_calibration_summary',
    project_id: projectId,
    created_at: new Date().toISOString(),
    calibration_thresholds: rows.map((row) => row.threshold),
    quality_check_ids: successfulRows.map((row) => row.quality_check_id).filter(Boolean),
    rows: rows.map((row) => ({
      threshold: row.threshold,
      status: row.status,
      analysis_run_id: row.analysis_run_id ?? null,
      job_id: row.job_id ?? null,
      quality_check_id: row.quality_check_id ?? null,
      evidence_geojson_url: row.quality_check_id
        ? `/api/v1/projects/${projectId}/quality-checks/${row.quality_check_id}/evidence/geojson`
        : null,
      detection_count: row.detection_count ?? null,
      precision: row.precision ?? null,
      recall: row.recall ?? null,
      f1_score: row.f1_score ?? null,
      false_positives: row.false_positives ?? null,
      false_negatives: row.false_negatives ?? null,
      message: row.message ?? null,
    })),
  }
}

function downloadCalibrationSummary(projectId: string | null, rows: DetectionCalibrationRunRow[]): void {
  if (!projectId || rows.length === 0) {
    return
  }
  downloadJsonFile('detection-calibration-summary.json', buildCalibrationSummaryExport(projectId, rows))
}

function downloadJsonFile(filename: string, payload: unknown): void {
  const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = filename
  link.click()
  URL.revokeObjectURL(url)
}

function formatNullableNumber(value: number | null, digits: number): string {
  return typeof value === 'number' && Number.isFinite(value) ? value.toFixed(digits) : 'n/a'
}

function formatSourceTilePath(path: string | null | undefined): string {
  if (!path) {
    return 'n/a'
  }
  const parts = path.replace(/\\/g, '/').split('/').filter(Boolean)
  return parts[parts.length - 1] ?? path
}