{# Import app workspace - routes to different views based on view parameter #}

{% set view = view|default('list') %}

{% if view == 'list' %}
<style>
.import-source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 4rem;
}

.import-source-card {
  border: 1px solid var(--facet-border, #e5e0db);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 1.25rem 1.25rem 1.5rem;
  background: #fff;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font: inherit;
  color: inherit;
  text-align: left;
}

.import-source-card:hover {
  transform: translateY(-2px);
  border-color: var(--facet-color, #b06a1a);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.import-source-card:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.import-source-card-emoji {
  font-size: 2.1em;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  overflow: hidden;
}

.import-source-card-name {
  font-weight: 700;
  font-size: 1.05rem;
}

.import-source-card-desc {
  color: #5b6473;
  font-size: 0.92rem;
  line-height: 1.45;
  margin-top: 0.2rem;
  min-height: 2.7em;
}

.import-guided-flow {
  margin-bottom: 2rem;
  border: 1px solid #d9dfeb;
  border-radius: 12px;
  padding: 1.25rem;
  background: #ffffff;
}

.import-back-link {
  display: inline-block;
  margin-bottom: 1rem;
  color: #0f4c81;
  text-decoration: none;
  font-weight: 600;
}

.import-back-link:hover {
  text-decoration: underline;
}

.import-back-link:active {
  color: #0a3b65;
}

.import-step {
  border-top: 1px solid #edf1f7;
  padding-top: 1rem;
  margin-top: 1rem;
}

.import-steps-list > li:first-child .import-step {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.import-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: #e8f1fb;
  color: #0f4c81;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.import-guide-title {
  margin: 0 0 0.25rem 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.import-guide-subtitle {
  margin: 0 0 1rem 0;
  color: #5b6473;
}

.import-guide-content {
  line-height: 1.6;
}

.import-guide-content h1,
.import-guide-content h2,
.import-guide-content h3 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.import-guide-content h1 { font-size: 1.3em; }
.import-guide-content h2 { font-size: 1.15em; }
.import-guide-content h3 { font-size: 1.05em; }

.import-guide-content ul,
.import-guide-content ol {
  padding-left: 1.5em;
}

.import-guide-content pre {
  background: #f5f7fa;
  border: 1px solid var(--facet-border, #e5e0db);
  padding: 0.75em;
  border-radius: 8px;
  overflow-x: auto;
}

.import-guide-content code {
  background: #f4f4f4;
  padding: 0.1em 0.3em;
  border-radius: 3px;
  font-size: 0.9em;
}

.import-guide-content pre code {
  background: transparent;
  padding: 0;
}

.import-upload-area {
  border: 2px dashed color-mix(in srgb, var(--facet-color, #0f4c81) 40%, #ccc);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  background: color-mix(in srgb, var(--facet-color, #0f4c81) 4%, white);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.import-upload-area:hover {
  border-color: color-mix(in srgb, var(--facet-color, #0f4c81) 60%, #ccc);
  background: color-mix(in srgb, var(--facet-color, #0f4c81) 6%, white);
}

.import-upload-area.dragover {
  border-color: var(--facet-color, #0f4c81);
  background: color-mix(in srgb, var(--facet-color, #0f4c81) 8%, white);
}

.import-upload-area:focus-visible {
  outline: 2px solid var(--facet-color, #b06a1a);
  outline-offset: 2px;
}

.import-upload-area p {
  margin: 0 0 0.5rem 0;
}

.import-upload-help {
  color: #5b6473;
  font-size: 0.9rem;
}

.import-file-label {
  margin-top: 0.65rem;
  font-weight: 700;
  color: #2f3a4c;
}

.import-path-input {
  width: 100%;
  padding: 0.85rem;
  border: 1px solid #cfd7e3;
  border-radius: 10px;
  font-family: monospace;
  font-size: 0.95rem;
  box-sizing: border-box;
  background: #f8fbff;
}

.import-path-input:hover:not(:focus) {
  border-color: #a0aec0;
}

.import-path-input:focus {
  outline: none;
  border-color: #0f4c81;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.1);
}

.import-dedup-notice {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: #fef9e7;
  border: 1px solid #f0d858;
  border-radius: 10px;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.import-dedup-notice .dedup-text {
  flex: 1;
  color: #5b4a08;
}

.import-dedup-notice button {
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  background: white;
  border: 1px solid #d9a800;
  border-radius: 8px;
  cursor: pointer;
  color: #5b4a08;
  white-space: nowrap;
  transition: background 0.1s ease;
}

.import-dedup-notice button:hover {
  background: #fef3c7;
}

.import-dedup-notice button:active {
  background: #fde68a;
}

.import-paste-text {
  width: 100%;
  min-height: 220px;
  padding: 0.75rem;
  border: 1px solid #cfd7e3;
  border-radius: 10px;
  font-family: monospace;
  font-size: 0.9rem;
  resize: vertical;
  box-sizing: border-box;
}

.import-paste-text:hover:not(:focus) {
  border-color: #a0aec0;
}

.import-paste-text:focus {
  outline: none;
  border-color: #0f4c81;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.1);
}

.import-inline-fields {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.import-inline-fields .confirm-field {
  flex: 1 1 220px;
}

.import-action-row {
  margin-top: 1rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.import-primary-btn {
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  background: #0f4c81;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.1s ease;
}

.import-primary-btn:hover {
  background: #0a3b65;
}

.import-primary-btn:disabled {
  background: #c4ccd7;
  color: #5b6473;
  cursor: not-allowed;
}

.import-primary-btn:active:not(:disabled) {
  background: #083050;
}

.import-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  background: white;
  color: #2f3a4c;
  border: 1px solid #cfd7e3;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.1s ease;
}

.import-secondary-btn:hover {
  background: #f7f9fc;
}

.import-secondary-btn:active {
  background: #edf1f7;
}

.import-progress-panel {
  border: 1px solid #d9dfeb;
  border-radius: 12px;
  padding: 1rem;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.import-progress-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.import-progress-message {
  margin: 0 0 0.75rem 0;
  color: #5b6473;
}

.import-progress-stats {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.import-progress-stat {
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: #eef4fb;
  color: #2f3a4c;
  font-size: 0.9rem;
}

.import-completion-summary {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 12px;
  background: #edf8ef;
  border: 1px solid #bfdcc4;
}

.import-completion-summary.failed {
  background: #fff0f0;
  border-color: #f0c2c2;
}

.import-completion-summary.stalled {
  border: 1px solid var(--color-warning, #f59e0b);
  background: rgba(245, 158, 11, 0.08);
}

.import-history-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1rem;
}

.import-history-summary {
  color: #4b5565;
}

.import-history-filters {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.import-history-filters select {
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  border: 1px solid #cfd7e3;
  background: white;
}

.import-history-filters select:hover {
  border-color: #a0aec0;
}

.import-history-filters select:focus {
  outline: none;
  border-color: #0f4c81;
  box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.1);
}

.spinner { display:inline-block; width:12px; height:12px; border:2px solid #ccc; border-top-color:#fff; border-radius:50%; animation:spin 1s linear infinite; margin-left:6px; }
.modal { display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); }
.modal-content { background:white; margin:5% auto; padding:1em; border-radius:8px; max-width:500px; max-height:80vh; overflow:auto; position:relative; }
.close { position:absolute; top:10px; right:15px; cursor:pointer; background:none; border:none; font:inherit; font-size:24px; padding:0; }
.close:hover { color: #374151; }
.close:active { color: #111827; }
.modal-content h3 { margin: 0 0 0.75em 0; font-size: 1.2rem; font-weight: 600; }
.confirm-fields { display: flex; gap: 1em; flex-wrap: wrap; margin-top: 0.5em; }
.confirm-field { display: flex; flex-direction: column; flex: 1 1 180px; min-width: 180px; }
.confirm-field label { font-size: 0.9em; color: #666; margin-bottom: 0.25em; }
.confirm-field input,
.confirm-field select { padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px; background: white; }
.confirm-field input:hover:not(:focus),
.confirm-field select:hover:not(:focus) {
  border-color: #a0aec0;
}
.confirm-field input:focus,
.confirm-field select:focus {
  outline: none;
  border-color: #0f4c81;
  box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.1);
}
.modal-actions { margin-top: 1em; display: flex; justify-content: flex-end; }

.import-list { margin-top: 2em; overflow-x: auto; }
.import-list h2 { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.75rem 0; color: #2f3a4c; }
.import-table { width: 100%; border-collapse: collapse; }
.import-table th { background: #f4f7fb; text-align: left; padding: 8px; border-bottom: 1px solid var(--facet-border, #e5e0db); font-size: 0.9em; }
.import-table td { padding: 8px; border-bottom: 1px solid #edf1f7; vertical-align: top; }
.import-table tr:hover { background: #f7f9fc; cursor: pointer; }
.import-status { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 0.85em; }
.import-status.success { background: #edf8ef; color: #1a5c2a; }
.import-status.pending { background: #fef9e7; color: #5b4a08; }
.import-status.failed { background: #fff0f0; color: #9b2c2c; }
.import-status.running { background: #cfe2ff; color: #084298; display: inline-flex; align-items: center; gap: 6px; }
.import-status.running::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #084298; animation: pulse 1.5s ease-in-out infinite; }
.import-status.stalled { background: rgba(245, 158, 11, 0.16); color: #92400e; }
.progress-detail { font-size: 0.8em; color: #8891a0; margin-top: 2px; }
.progress-detail.import-stalled-meta { color: #92400e; }
.import-retry-btn {
  margin-left: 0.45rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0.18rem 0.45rem;
}
.import-retry-btn:disabled {
  cursor: default;
  opacity: 0.65;
}
.import-retry-result {
  display: block;
  margin-top: 0.3rem;
}
.file-size { color: #4b5565; font-size: 0.9rem; }
.nowrap { white-space: nowrap; }
.timestamp-link { color: var(--facet-color, #0f4c81); text-decoration: none; }
.timestamp-link:hover { text-decoration: underline; }
.no-imports { color: #666; padding: 2em; text-align: center; }
.no-imports-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.no-imports-heading { font-weight: 600; font-size: 1.05rem; margin-bottom: 0.25rem; }
.no-imports-body { margin-bottom: 0; }
.no-imports-body.error { color: #b91c1c; }
.no-imports-action { margin-top: 0.75rem; }
.import-source-inline {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.import-source-inline-emoji {
  font-size: 1.1rem;
}

.import-stats-cell {
  color: #4b5565;
  font-size: 0.9rem;
}

.import-table tbody tr:focus-visible {
  outline: 2px solid var(--facet-color, #b06a1a);
  outline-offset: -2px;
  background: #f0f4ff;
}

.import-table tbody tr {
  transition: background 0.1s ease;
}

.import-table tbody tr.import-row--stalled {
  background: rgba(245, 158, 11, 0.08);
}

.import-table tbody tr.import-row--stalled:hover {
  background: rgba(245, 158, 11, 0.12);
}

.import-table tbody tr:active {
  background: #e8edf5;
}

.import-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 768px) {
  .import-source-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .import-guided-flow,
  .modal-content {
    padding: 1rem;
  }

  .import-table th:nth-child(4),
  .import-table td:nth-child(4),
  .import-table th:nth-child(7),
  .import-table td:nth-child(7),
  .import-table th:nth-child(9),
  .import-table td:nth-child(9) {
    display: none;
  }

  .import-table th,
  .import-table td {
    padding: 6px 4px;
    font-size: 0.85em;
  }

  .import-table tr[tabindex] {
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .import-source-grid {
    grid-template-columns: 1fr;
  }

  .import-table th:nth-child(2),
  .import-table td:nth-child(2),
  .import-table th:nth-child(4),
  .import-table td:nth-child(4),
  .import-table th:nth-child(5),
  .import-table td:nth-child(5),
  .import-table th:nth-child(7),
  .import-table td:nth-child(7),
  .import-table th:nth-child(8),
  .import-table td:nth-child(8),
  .import-table th:nth-child(9),
  .import-table td:nth-child(9) {
    display: none;
  }

  .import-table th,
  .import-table td {
    padding: 8px 4px;
  }

  .import-table tr[tabindex] {
    min-height: 44px;
  }
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .import-status.running::before {
        animation: none;
        opacity: 1;
    }
    .spinner {
        animation: none;
        border-top-color: #fff;
        opacity: 0.7;
    }
}
</style>
<div class="workspace-content-wide">
  <div id="importGrid" class="import-source-grid"></div>

  <div id="importGuide" class="import-guided-flow" style="display:none">
    <a href="#" class="import-back-link" onclick="showGrid(); return false;">← back to sources</a>
    <div id="guideSteps"></div>
  </div>

  <div class="import-list">
    <h2>import history</h2>
    <div id="importListContent">
      <div class="surface-state surface-state--loading" role="status" aria-busy="true">
        <div class="surface-state-spinner" aria-hidden="true"></div>
        <span class="surface-state-text" data-role="loading-status">loading imports...</span>
      </div>
    </div>
  </div>
</div>

<div id="detectModal" class="modal" role="dialog" aria-modal="true" aria-labelledby="detectModalTitle">
  <div class="modal-content">
    <h3 id="detectModalTitle">confirm import details</h3>
    <button class="close" type="button" aria-label="close" onclick="closeDetectModal()">&times;</button>
    <div class="confirm-fields">
      <div class="confirm-field">
        <label for="timestampInput">timestamp</label>
        <input id="timestampInput" />
      </div>
      <div class="confirm-field">
        <label for="facetSelect">facet</label>
        <select id="facetSelect">
          <option value="">none</option>
        </select>
      </div>
      <div class="confirm-field">
        <label for="settingInput">setting</label>
        <input id="settingInput" placeholder="e.g. jer lunch with joe" />
      </div>
    </div>
    <input type="hidden" id="savedPath" />
    <div class="modal-actions">
      <button id="startBtn" class="import-primary-btn">start import</button>
    </div>
  </div>
</div>

<script>
const facetSelect = document.getElementById('facetSelect');
const settingInput = document.getElementById('settingInput');
const startBtn = document.getElementById('startBtn');

const STAGE_NAMES = {
  initialization: 'Preparing...',
  importing: 'Reading your data...',
  detection: 'Detecting content type...',
  audio_segmenting: 'Splitting audio...',
  transcription: 'Transcribing audio...',
  processing: 'Processing entries...',
  writing: 'Writing to journal...',
  indexing: 'Building search index...',
  cleanup: 'Finishing up...',
  segmenting: 'Preparing segments...',
  transcribing: 'Transcribing audio...',
  segments: 'Merging segments...',
  entities: 'Merging entities...',
  facets: 'Merging facets...',
  imports: 'Copying prior imports...',
};
const IMPORT_STALL_TIMEOUT_MS = 10 * 60 * 1000; // longest observed real import; stalled rows surface amber after this without a terminal event
const IMPORT_ROW_EVENTS = new Set(['started', 'status', 'completed', 'error']);
const IMPORT_TERMINAL_EVENTS = new Set(['completed', 'error']);

let cachedSources = [];
let sourceMetadataByName = {};
let sourceEmojiByName = {};
let currentFile = null;
let currentGuideSource = null;
let currentGuidedFile = null;
let currentGuidedSaved = null;
let importEvents = {};
let importsCache = [];
let currentSourceFilter = '';
let currentPage = 1;
let totalImports = 0;
const escapeHtml = window.AppServices.escapeHtml;
let importEventsCleanup = null;

function malformedImportHistoryResponse(url) {
  return new window.ApiError({
    status: 200,
    statusText: 'OK',
    serverMessage: 'Malformed import history response',
    url,
    cause: 'parse',
  });
}

function clearImportListErrors() {
  const container = document.getElementById('importListContent');
  const loadMoreError = document.getElementById('importLoadMoreError');
  if (loadMoreError) {
    loadMoreError.remove();
  }
  if (!container) {
    return;
  }
  const siblingError = container.nextElementSibling;
  if (siblingError && siblingError.classList.contains('surface-state-refresh-error')) {
    siblingError.remove();
  }
}

function trackPendingImport(importId) {
  if (!importId || !importEventsCleanup?.pending) {
    return;
  }
  importEventsCleanup.pending.track(importId);
}

function clearPendingImport(importId) {
  if (!importId || !importEventsCleanup?.pending) {
    return;
  }
  importEventsCleanup.pending.clear(importId);
}

function navigateTo(view, options = {}) {
  const { updateHash = true } = options;
  const grid = document.getElementById('importGrid');
  const guide = document.getElementById('importGuide');
  const nextHash = view === 'grid' ? '' : view;

  if (grid) {
    grid.style.display = view === 'grid' ? '' : 'none';
  }
  if (guide) {
    guide.style.display = view === 'grid' ? 'none' : '';
  }

  if (view.startsWith('guide/')) {
    const source = view.split('/')[1];
    loadGuidedFlow(source);
  } else if (view.startsWith('progress/')) {
    const importId = view.split('/')[1];
    showProgressView(importId);
  } else {
    currentGuideSource = null;
  }

  if (updateHash && window.location.hash.slice(1) !== nextHash) {
    window.location.hash = nextHash;
  }
}

function showGrid() {
  currentGuideSource = null;
  currentGuidedFile = null;
  currentGuidedSaved = null;
  window._guidedForceImport = false;
  navigateTo('grid');
}

window.addEventListener('hashchange', handleHashChange);

function handleHashChange() {
  const hash = window.location.hash.slice(1);
  if (hash.startsWith('guide/')) {
    navigateTo(hash, { updateHash: false });
  } else if (hash.startsWith('progress/')) {
    navigateTo(hash, { updateHash: false });
  } else {
    navigateTo('grid', { updateHash: false });
  }
}

async function loadSourceGrid() {
  if (!cachedSources.length) {
    const res = await fetch('/app/import/api/sources');
    cachedSources = await res.json();
    sourceMetadataByName = Object.fromEntries(cachedSources.map(source => [source.name, source]));
    sourceEmojiByName = Object.fromEntries(cachedSources.map(source => [source.name, source.emoji || '']));
  }

  const grid = document.getElementById('importGrid');
  if (!grid) {
    return;
  }

  grid.innerHTML = cachedSources.map(source => {
    const clickHandler = source.name === 'quick'
      ? 'showQuickImport()'
      : `navigateTo(&quot;guide/${source.name}&quot;)`;
    return `
      <button type="button" class="import-source-card" onclick="${clickHandler}">
        <div class="import-source-card-emoji" aria-label="${escapeHtml(source.display_name)}">${source.emoji || ''}</div>
        <div class="import-source-card-name">${escapeHtml(source.display_name)}</div>
        <div class="import-source-card-desc">${escapeHtml(source.description || '')}</div>
      </button>
    `;
  }).join('');
}

function showQuickImport() {
  navigateTo('guide/quick');
}

let previousDetectFocus = null;
let detectFocusTrapHandler = null;

function showDetect(res) {
  document.getElementById('timestampInput').value = res.timestamp || '';
  document.getElementById('savedPath').value = res.path;
  const defaultFacet = res.facet || window.selectedFacet || '';
  loadFacets(defaultFacet);
  settingInput.value = res.setting || '';
  previousDetectFocus = document.activeElement;
  document.getElementById('detectModal').style.display = 'block';
  document.getElementById('timestampInput').focus();
  detectFocusTrapHandler = function(e) {
    if (e.key !== 'Tab') return;
    const modal = document.getElementById('detectModal');
    const focusable = Array.from(
      modal.querySelectorAll('button, [href], input, select, textarea, [tabindex="0"]')
    ).filter(el => el.offsetParent !== null && el.tabIndex >= 0 && !el.disabled);
    if (focusable.length === 0) return;
    const first = focusable[0];
    const last = focusable[focusable.length - 1];
    if (e.shiftKey && document.activeElement === first) {
      e.preventDefault();
      last.focus();
    } else if (!e.shiftKey && document.activeElement === last) {
      e.preventDefault();
      first.focus();
    }
  };
  document.addEventListener('keydown', detectFocusTrapHandler);
}

function closeDetectModal() {
  document.getElementById('detectModal').style.display = 'none';
  if (detectFocusTrapHandler) {
    document.removeEventListener('keydown', detectFocusTrapHandler);
    detectFocusTrapHandler = null;
  }
  if (previousDetectFocus && previousDetectFocus.isConnected) {
    previousDetectFocus.focus();
  }
  previousDetectFocus = null;
}

function formatFileSize(bytes) {
  if (bytes === 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
}

function formatDuration(minutes) {
  if (!minutes) return '';
  const hours = Math.floor(minutes / 60);
  const mins = minutes % 60;
  if (hours > 0) {
    return `${hours}h ${mins}m`;
  }
  return `${mins}m`;
}

function formatElapsed(ms) {
  if (!ms) return '0s';
  const totalSeconds = Math.floor(ms / 1000);
  const mins = Math.floor(totalSeconds / 60);
  const secs = totalSeconds % 60;
  if (mins > 0) {
    return `${mins}m ${secs}s`;
  }
  return `${secs}s`;
}

function capitalizeStage(stage) {
  if (!stage) return '';
  return stage.charAt(0).toUpperCase() + stage.slice(1);
}

function humanStageName(stage, sourceDisplay = '') {
  const fallback = STAGE_NAMES[stage] || `${capitalizeStage(stage)}...`;
  if (stage === 'importing' && sourceDisplay) {
    return `Reading ${sourceDisplay}...`;
  }
  return fallback;
}

function retryImport(event) {
  event.stopPropagation();
  const button = event.target.closest('[data-import-retry]');
  if (!button) return;
  const importId = button.dataset.importId;
  const stage = button.dataset.stage || '';
  const statusCell = button.closest('.status-cell');
  const result = statusCell?.querySelector('.import-retry-result');
  button.disabled = true;
  button.textContent = 'retrying...';
  if (result) result.textContent = '';
  const payload = { import_id: importId };
  if (stage) payload.stage = stage;
  window.apiJson('/app/health/api/retry-import', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  })
    .then(() => {
      button.textContent = 'retry sent';
      if (result) result.textContent = 'retry sent';
    })
    .catch(err => {
      window.logError(err, { context: 'import: retry-import failed' });
      button.disabled = false;
      button.textContent = stage ? `Retry from ${humanStageName(stage)}` : 'Retry import';
      if (result) {
        result.innerHTML = window.SurfaceState.error({
          heading: "I couldn't retry that import",
          desc: window.CONVEY_COPY?.RELOAD_HINT || 'reload to try again.',
          serverMessage: err.serverMessage,
          detail: err,
          headingLevel: 'h4'
        });
      }
    });
}

document.addEventListener('click', event => {
  if (event.target.closest('[data-import-retry]')) {
    retryImport(event);
  }
});

function formatDateRange(dateRange) {
  if (!Array.isArray(dateRange) || !dateRange[0]) {
    return '';
  }
  if (!dateRange[1] || dateRange[0] === dateRange[1]) {
    return dateRange[0];
  }
  return `${dateRange[0]} - ${dateRange[1]}`;
}

function formatImportStats(entriesWritten, entitiesSeeded) {
  const parts = [];
  if (typeof entriesWritten === 'number' && entriesWritten > 0) {
    parts.push(`${entriesWritten} entries`);
  }
  if (typeof entitiesSeeded === 'number' && entitiesSeeded > 0) {
    parts.push(`${entitiesSeeded} entities`);
  }
  return parts.join(' • ') || '-';
}

function formatProgressStats(eventData) {
  const stats = [];
  if (eventData.items_total) {
    stats.push(`${eventData.items_processed || 0}/${eventData.items_total} items`);
  }
  if (eventData.earliest_date) {
    stats.push(`from ${eventData.earliest_date}`);
  }
  if (eventData.latest_date && eventData.latest_date !== eventData.earliest_date) {
    stats.push(`to ${eventData.latest_date}`);
  }
  if (eventData.entities_found) {
    stats.push(`${eventData.entities_found} entities found`);
  }
  return stats;
}

function renderProgressStats(eventData) {
  const stats = formatProgressStats(eventData);
  if (!stats.length) {
    return '';
  }
  return `<div class="import-progress-stats">${stats.map(stat => `<div class="import-progress-stat">${escapeHtml(stat)}</div>`).join('')}</div>`;
}

function renderSourceDisplay(sourceType, sourceDisplay, fallbackText = '-') {
  const emoji = sourceEmojiByName[sourceType] || '';
  const displayText = sourceDisplay || fallbackText || '-';
  return `<div class="import-source-inline">${emoji ? `<span class="import-source-inline-emoji">${emoji}</span>` : ''}<span>${escapeHtml(displayText)}</span></div>`;
}

function getImportById(importId) {
  return importsCache.find(item => item.timestamp === importId) || null;
}

function buildHistoryHeader(total, totalEntriesWritten, totalEntitiesSeeded) {
  const sourceOptions = [
    '<option value="">All sources</option>',
    ...cachedSources.map(source => {
      const selected = currentSourceFilter === source.name ? ' selected' : '';
      return `<option value="${escapeHtml(source.name)}"${selected}>${escapeHtml(source.display_name)}</option>`;
    }),
  ].join('');

  return `
    <div class="import-history-header">
      <div class="import-history-summary">${total} imports total, ${totalEntriesWritten} entries imported, ${totalEntitiesSeeded} entities found</div>
      <div class="import-history-filters">
        <label for="importSourceFilter">source</label>
        <select id="importSourceFilter">
          ${sourceOptions}
        </select>
      </div>
    </div>
  `;
}

function renderImportRow(imp) {
  const importedAt = imp.imported_at ? new Date(imp.imported_at * 1000).toLocaleString() : new Date(imp.created_at * 1000).toLocaleString();
  const targetDay = imp.target_day ? imp.target_day.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3') : '-';

  let statusClass;
  let statusText;
  let statusDetail = '';
  if (imp.status === 'success') {
    statusClass = 'success';
    statusText = 'Completed';
  } else if (imp.status === 'failed') {
    statusClass = 'failed';
    statusText = 'Failed';
    if (imp.error) {
      const errorStage = imp.error_stage ? ` (${capitalizeStage(imp.error_stage)})` : '';
      statusDetail = `<div class="progress-detail">${escapeHtml(imp.error)}${escapeHtml(errorStage)}</div>`;
    }
  } else if (imp.status === 'running') {
    statusClass = 'running';
    statusText = 'Running';
  } else {
    statusClass = 'pending';
    statusText = 'Pending';
  }

  const sourceCell = imp.source_type
    ? renderSourceDisplay(imp.source_type, imp.source_display || sourceMetadataByName[imp.source_type]?.display_name || imp.original_filename || '-')
    : renderSourceDisplay('', imp.original_filename || '-', imp.original_filename || '-');
  const statsText = formatImportStats(imp.entries_written, imp.entities_seeded);

  let html = `<tr data-import-id="${imp.timestamp}" data-facet="${imp.facet || ''}" data-source-type="${imp.source_type || ''}" tabindex="0" role="link" onclick="window.location.href='/app/import/${imp.timestamp}'" onkeydown="if(event.key==='Enter')window.location.href='/app/import/${imp.timestamp}'">`;
  html += `<td class="nowrap">${importedAt}</td>`;
  html += `<td>${escapeHtml(imp.original_filename || 'Unknown')}</td>`;
  html += `<td class="source-cell">${sourceCell}</td>`;
  html += `<td class="file-size nowrap">${formatFileSize(imp.file_size || 0)}</td>`;
  html += '<td class="nowrap">';
  if (imp.target_day) {
    html += `<a href="/app/activities/${imp.target_day}" class="timestamp-link" onclick="event.stopPropagation();">${targetDay}</a>`;
  } else {
    html += '-';
  }
  html += '</td>';
  html += `<td class="status-cell"><span class="import-status ${statusClass}">${statusText}</span>${statusDetail}</td>`;
  html += `<td class="files-cell">${imp.total_files_created || 0}</td>`;
  html += `<td class="stats-cell import-stats-cell">${statsText}</td>`;
  html += `<td class="duration-cell">${formatDuration(imp.duration_minutes)}</td>`;
  html += '</tr>';
  return html;
}

function scrollToGrid() {
  const grid = document.getElementById('importGrid');
  if (grid) {
    grid.scrollIntoView({ behavior: 'smooth', block: 'start' });
    const firstCard = grid.querySelector('.import-source-card');
    if (firstCard) firstCard.focus();
  }
}

async function loadImports() {
  currentPage = 1;
  await loadSourceGrid();
  try {
    const data = await window.apiJson('/app/import/api/list?page=1&per_page=25');
    if (!Array.isArray(data.imports) || typeof data.total !== 'number' || typeof data.page !== 'number' || typeof data.pages !== 'number') {
      throw malformedImportHistoryResponse('/app/import/api/list?page=1&per_page=25');
    }
    const imports = data.imports;
    importsCache = imports;
    totalImports = data.total;
    const container = document.getElementById('importListContent');
    clearImportListErrors();

    if (imports.length === 0) {
      container.innerHTML = `
        <div class="no-imports">
          <div class="no-imports-icon">📥</div>
          <div class="no-imports-heading">No imports yet</div>
          <div class="no-imports-body">import your data from any supported source above.</div>
          <div class="no-imports-action"><a href="#" onclick="scrollToGrid(); return false;" style="color: #0f4c81; font-weight: 600;">choose a source →</a></div>
        </div>
      `;
      return;
    }

    let html = buildHistoryHeader(data.total, data.total_entries_written || 0, data.total_entities_seeded || 0);
    html += '<table class="import-table">';
    html += '<thead><tr>';
    html += '<th>imported at</th>';
    html += '<th>file</th>';
    html += '<th>source</th>';
    html += '<th>size</th>';
    html += '<th>imported to</th>';
    html += '<th>status</th>';
    html += '<th>files created</th>';
    html += '<th>stats</th>';
    html += '<th>duration</th>';
    html += '</tr></thead><tbody>';

    imports.forEach(imp => {
      html += renderImportRow(imp);
    });

    html += '</tbody></table>';
    if (data.page < data.pages) {
      html += `
        <div id="importLoadMore" style="text-align: center; margin: 1.5rem 0;">
          <button class="import-primary-btn" onclick="loadMoreImports()">
            Load More (${importsCache.length} of ${data.total} shown)
          </button>
        </div>
      `;
    }
    container.innerHTML = html;

    const sourceFilter = document.getElementById('importSourceFilter');
    if (sourceFilter) {
      sourceFilter.onchange = event => {
        currentSourceFilter = event.target.value;
        filterImportsByFacet(window.selectedFacet);
      };
    }

    imports.forEach(imp => {
      if (imp.status === 'running' || imp.status === 'pending') {
        trackPendingImport(imp.timestamp);
      } else {
        clearPendingImport(imp.timestamp);
      }
    });

    filterImportsByFacet(window.selectedFacet);
  } catch (err) {
    window.SurfaceState.replaceLoading('importListContent', window.SurfaceState.error({
      heading: 'Couldn\'t load your import history',
      desc: window.CONVEY_COPY.RELOAD_HINT,
      serverMessage: err?.serverMessage || err?.message || '',
      detail: err,
    }));
  }
}

function renderLoadMoreError(err) {
  const table = document.querySelector('.import-table');
  if (!table || !table.parentNode) {
    return;
  }

  let errorEl = document.getElementById('importLoadMoreError');
  if (!errorEl) {
    errorEl = document.createElement('div');
    errorEl.id = 'importLoadMoreError';
    errorEl.className = 'surface-state-refresh-error';
  }

  const serverMessage = err?.serverMessage || err?.message || '';
  errorEl.innerHTML = `<strong>Couldn&#39;t load more imports.</strong> ${window.CONVEY_COPY.RELOAD_HINT}${serverMessage ? ` ${escapeHtml(serverMessage)}` : ''}`;

  const loadMoreContainer = document.getElementById('importLoadMore');
  if (loadMoreContainer) {
    table.parentNode.insertBefore(errorEl, loadMoreContainer);
  } else {
    table.parentNode.appendChild(errorEl);
  }
}

async function loadMoreImports() {
  currentPage++;
  try {
    const data = await window.apiJson(`/app/import/api/list?page=${currentPage}&per_page=25`);
    if (!Array.isArray(data.imports) || typeof data.total !== 'number' || typeof data.page !== 'number' || typeof data.pages !== 'number') {
      throw malformedImportHistoryResponse(`/app/import/api/list?page=${currentPage}&per_page=25`);
    }

    importsCache = importsCache.concat(data.imports);
    const existingError = document.getElementById('importLoadMoreError');
    if (existingError) {
      existingError.remove();
    }

    const tbody = document.querySelector('.import-table tbody');
    if (tbody) {
      let rowsHtml = '';
      data.imports.forEach(imp => {
        rowsHtml += renderImportRow(imp);
      });
      tbody.insertAdjacentHTML('beforeend', rowsHtml);
    }

    const loadMoreContainer = document.getElementById('importLoadMore');
    if (loadMoreContainer) {
      if (data.page < data.pages) {
        loadMoreContainer.innerHTML = `
          <button class="import-primary-btn" onclick="loadMoreImports()">
            Load More (${importsCache.length} of ${data.total} shown)
          </button>`;
      } else {
        loadMoreContainer.remove();
      }
    }

    data.imports.forEach(imp => {
      if (imp.status === 'running' || imp.status === 'pending') {
        trackPendingImport(imp.timestamp);
      } else {
        clearPendingImport(imp.timestamp);
      }
    });

    filterImportsByFacet(window.selectedFacet);
  } catch (err) {
    currentPage--;
    renderLoadMoreError(err);
  }
}

function filterImportsByFacet(facetName) {
  const rows = document.querySelectorAll('.import-table tbody tr');
  if (rows.length === 0) return;

  let visibleCount = 0;
  rows.forEach(row => {
    const facetMatches = facetName === null || row.dataset.facet === facetName;
    const sourceMatches = !currentSourceFilter || row.dataset.sourceType === currentSourceFilter;
    if (facetMatches && sourceMatches) {
      row.style.display = '';
      visibleCount++;
    } else {
      row.style.display = 'none';
    }
  });

  const container = document.getElementById('importListContent');
  if (visibleCount === 0 && rows.length > 0) {
    const facetData = window.facetsData?.find(f => f.name === facetName);
    const facetTitle = facetData?.title || facetName || 'this view';
    let noMatchEl = container.querySelector('.no-imports-filtered');
    if (!noMatchEl) {
      noMatchEl = document.createElement('div');
      noMatchEl.className = 'no-imports no-imports-filtered';
      container.appendChild(noMatchEl);
    }
    noMatchEl.innerHTML = '<div class="no-imports-icon">🔍</div><div class="no-imports-body">No imports match this filter.</div>';
    noMatchEl.style.display = '';
  } else {
    const noMatchEl = container.querySelector('.no-imports-filtered');
    if (noMatchEl) {
      noMatchEl.style.display = 'none';
    }
  }
}

function markRowStalled(importId) {
  if (!importId) {
    return;
  }

  clearPendingImport(importId);
  importEvents[importId] = { ...(importEvents[importId] || {}), stalled: true };

  const row = document.querySelector(`tr[data-import-id="${importId}"]`);
	  if (row) {
	    row.classList.add('import-row--stalled');
	    const statusCell = row.querySelector('.status-cell');
	    if (statusCell) {
	      const stage = importEvents[importId]?.stage || 'importing';
	      statusCell.innerHTML = `<span class="import-status stalled">stalled</span><button type="button" class="import-retry-btn" data-import-retry="true" data-import-id="${escapeHtml(importId)}" data-stage="${escapeHtml(stage)}">Retry from ${escapeHtml(humanStageName(stage))}</button><div class="progress-detail import-stalled-meta">stalled — no updates in 10 minutes. import ID: ${escapeHtml(importId)}. ${window.CONVEY_COPY.RELOAD_HINT}</div><div class="import-retry-result"></div>`;
	    }
	  }

  refreshInlineProgress(importId);
}

function updateImportRow(importId, eventData) {
  if (importId) {
    importEvents[importId] = { ...(importEvents[importId] || {}), ...eventData };
    if (IMPORT_ROW_EVENTS.has(eventData.event)) {
      importEvents[importId].stalled = false;
    }
  }

  const row = document.querySelector(`tr[data-import-id="${importId}"]`);
  if (!row) {
    refreshInlineProgress(importId, eventData);
    return;
  }

  const statusCell = row.querySelector('.status-cell');
  const filesCell = row.querySelector('.files-cell');
  const statsCell = row.querySelector('.stats-cell');
  const durationCell = row.querySelector('.duration-cell');
  const sourceCell = row.querySelector('.source-cell');

  if (IMPORT_ROW_EVENTS.has(eventData.event)) {
    row.classList.remove('import-row--stalled');
  }

  if (sourceCell && (eventData.source_type || eventData.source_display)) {
    const displayText = eventData.source_display || sourceMetadataByName[eventData.source_type]?.display_name || row.children[1]?.textContent || '-';
    sourceCell.innerHTML = renderSourceDisplay(eventData.source_type || '', displayText, displayText);
    row.dataset.sourceType = eventData.source_type || '';
  }

  if (eventData.event === 'started') {
    if (statusCell) {
      statusCell.innerHTML = `<span class="import-status running">${escapeHtml(humanStageName(eventData.stage, eventData.source_display))}</span>`;
    }
  } else if (eventData.event === 'status') {
    if (statusCell) {
      const stageTime = formatElapsed(eventData.stage_elapsed_ms);
      const totalTime = formatElapsed(eventData.elapsed_ms);
      const progressStats = formatProgressStats(eventData);
      const detailParts = [`${stageTime} (${totalTime} total)`];
      if (progressStats.length) {
        detailParts.push(progressStats.join(' • '));
      }
      statusCell.innerHTML = `<span class="import-status running">${escapeHtml(humanStageName(eventData.stage, eventData.source_display))}</span><div class="progress-detail">${escapeHtml(detailParts.join(' • '))}</div>`;
    }
  } else if (eventData.event === 'completed') {
    if (statusCell) {
      statusCell.innerHTML = '<span class="import-status success">completed</span>';
    }
    if (filesCell && eventData.total_files_created !== undefined) {
      filesCell.textContent = eventData.total_files_created;
    }
    if (statsCell) {
      statsCell.textContent = formatImportStats(eventData.entries_written, eventData.entities_seeded);
    }
    if (durationCell && eventData.duration_ms) {
      durationCell.textContent = formatElapsed(eventData.duration_ms);
    }
    setTimeout(() => loadImports(), 1000);
	  } else if (eventData.event === 'error') {
	    if (statusCell) {
	      statusCell.innerHTML = `<span class="import-status failed">failed</span><button type="button" class="import-retry-btn" data-import-retry="true" data-import-id="${escapeHtml(importId)}">Retry import</button><div class="progress-detail">${escapeHtml(eventData.error || 'unknown error')}</div><div class="import-retry-result"></div>`;
	    }
	  }

  refreshInlineProgress(importId, eventData);
}

function refreshInlineProgress(importId, eventData = null) {
  const hash = window.location.hash.slice(1);
  if (!hash.startsWith('progress/')) {
    return;
  }
  const currentImportId = hash.split('/')[1];
  if (currentImportId !== importId) {
    return;
  }
  const merged = eventData ? { ...(importEvents[importId] || {}), ...eventData } : importEvents[importId];
  if (merged) {
    renderProgressView(importId, merged);
  }
}

async function loadGuidedFlow(sourceName) {
  await loadSourceGrid();
  const source = sourceMetadataByName[sourceName];
  const guideSteps = document.getElementById('guideSteps');
  currentGuideSource = sourceName;
  currentGuidedFile = null;
  currentGuidedSaved = null;
  if (!guideSteps) {
    return;
  }

  if (!source) {
    guideSteps.innerHTML = '<div class="no-imports">unknown import source</div>';
    return;
  }

  if (sourceName === 'quick') {
    renderQuickImportFlow();
    return;
  }

  let guideHtml = '';
  if (source.has_guide) {
    const response = await fetch(`/app/import/api/guide/${sourceName}`);
    if (response.ok) {
      const markdown = await response.text();
      guideHtml = `<li><div class="import-step"><div class="import-step-number">Step 1</div><div class="import-guide-content">${window.AppServices.renderMarkdown(markdown)}</div></div></li>`;
    }
  }

  guideSteps.innerHTML = `
    <div>
      <h3 class="import-guide-title">${source.emoji || ''} ${escapeHtml(source.display_name)}</h3>
      <p class="import-guide-subtitle">${escapeHtml(source.description || '')}</p>
    </div>
    <form id="guidedImportForm" onsubmit="return false;"><ol class="import-steps-list">
    ${guideHtml}
      <li><div class="import-step">
        <div class="import-step-number">Step 2</div>
        ${source.input_type === 'path_input' ? `
          <h4>${escapeHtml(source.upload_prompt || 'Paste the full path to your folder')}</h4>
          <input id="guidedPathInput" class="import-path-input" type="text"
            placeholder="${escapeHtml(source.upload_prompt || 'Paste the full path to your folder')}" />
          <div id="guidedPathStatus" style="margin-top: 0.5em; font-size: 0.9em; color: #666;"></div>
        ` : `
          <h4>upload your export</h4>
          <div class="import-upload-area" id="guidedDropArea" role="button" tabindex="0" aria-label="choose file to upload">
            <p>${escapeHtml(source.upload_prompt || 'Select a file to import')}</p>
            <div class="import-upload-help">${escapeHtml(source.accept ? `Accepted: ${source.accept}` : 'Any supported file')}</div>
            <input id="guidedFileInput" type="file" accept="${escapeHtml(source.accept || '')}" style="display:none" />
            <div id="guidedFileLabel" class="import-file-label"></div>
          </div>
        `}
        <div id="guidedDedupNotice"></div>
      </div></li>
      <li><div class="import-step">
        <div class="import-step-number">Step 3</div>
        <h4>configure and start</h4>
        <div class="import-inline-fields">
          <div class="confirm-field">
            <label for="guidedFacetSelect">facet</label>
            <select id="guidedFacetSelect"><option value="">None</option></select>
          </div>
          <div class="confirm-field">
            <label for="guidedSettingInput">setting</label>
            <input id="guidedSettingInput" placeholder="e.g. weekly planning" />
          </div>
        </div>
        <div class="import-action-row">
          <button id="guidedStartBtn" class="import-primary-btn" type="submit">start import</button>
        </div>
      </div></li>
    </ol></form>
  `;

  loadFacets(window.selectedFacet || '', document.getElementById('guidedFacetSelect'));
  if (source.input_type !== 'path_input') {
    setupGuidedUploadArea();
  } else {
    // Auto-detect default path for path_input sources
    checkDefaultPath(sourceName);
  }
  document.getElementById('guidedStartBtn').addEventListener('click', () => startGuidedImport(source));
  const guidedForm = document.getElementById('guidedImportForm');
  if (guidedForm) {
    guidedForm.addEventListener('submit', e => {
      e.preventDefault();
      document.getElementById('guidedStartBtn').click();
    });
  }
}

async function checkDefaultPath(sourceName) {
  const pathInput = document.getElementById('guidedPathInput');
  const statusDiv = document.getElementById('guidedPathStatus');
  if (!pathInput || !statusDiv) return;

  try {
    const response = await fetch(`/app/import/api/check-path/${sourceName}`);
    if (!response.ok) return;
    const data = await response.json();

    if (data.found && data.path) {
      pathInput.value = data.path;
      statusDiv.textContent = data.message;
      statusDiv.style.color = '#059669';
    } else if (data.message) {
      statusDiv.textContent = data.message;
      statusDiv.style.color = '#d97706';
    }
  } catch (err) {
    // Silent fail — auto-detection is best-effort
  }
}

function renderQuickImportFlow() {
  const guideSteps = document.getElementById('guideSteps');
  if (!guideSteps) {
    return;
  }

  guideSteps.innerHTML = `
    <div>
      <h3 class="import-guide-title">⚡ quick import</h3>
      <p class="import-guide-subtitle">Paste text or drop a file, then confirm the detected timestamp in the modal.</p>
    </div>
    <form id="importForm">
      <ol class="import-steps-list">
        <li><div class="import-step">
          <div class="import-step-number">Step 1</div>
          <div class="import-upload-area" id="dropArea" role="button" tabindex="0" aria-label="choose file to upload">
            <p>Drag file here or click to select</p>
            <input id="fileInput" type="file" style="display:none" />
            <div id="fileLabel" class="import-file-label"></div>
          </div>
        </div></li>
        <li><div class="import-step">
          <div class="import-step-number">Step 2</div>
          <textarea id="pasteText" class="import-paste-text" placeholder="paste text here..."></textarea>
          <div class="import-inline-fields">
            <div class="confirm-field">
              <label for="quickFacetSelect">facet</label>
              <select id="quickFacetSelect"><option value="">None</option></select>
            </div>
            <div class="confirm-field">
              <label for="quickSettingInput">setting</label>
              <input id="quickSettingInput" placeholder="e.g. paste from notes app" />
            </div>
          </div>
          <div class="import-action-row">
            <button type="submit" id="validateBtn" class="import-primary-btn">validate</button>
          </div>
        </div></li>
      </ol>
    </form>
  `;

  loadFacets(window.selectedFacet || '', document.getElementById('quickFacetSelect'));
  setupQuickImportForm();
}

function setupGuidedUploadArea() {
  const dropArea = document.getElementById('guidedDropArea');
  const fileInput = document.getElementById('guidedFileInput');
  const fileLabel = document.getElementById('guidedFileLabel');

  if (!dropArea || !fileInput || !fileLabel) {
    return;
  }

  const setFile = file => {
    currentGuidedFile = file || null;
    fileLabel.textContent = file ? file.name : '';
    currentGuidedSaved = null;
  };

  dropArea.onclick = () => fileInput.click();
  dropArea.addEventListener('keydown', e => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      fileInput.click();
    }
  });
  ['dragenter', 'dragover'].forEach(eventName => {
    dropArea.addEventListener(eventName, event => {
      event.preventDefault();
      dropArea.classList.add('dragover');
    });
  });
  ['dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, event => {
      event.preventDefault();
      dropArea.classList.remove('dragover');
    });
  });
  dropArea.addEventListener('drop', event => {
    const file = event.dataTransfer.files[0];
    if (file) {
      setFile(file);
    }
  });
  fileInput.onchange = event => {
    setFile(event.target.files[0]);
  };
}

function setupQuickImportForm() {
  const dropArea = document.getElementById('dropArea');
  const fileInput = document.getElementById('fileInput');
  const fileLabel = document.getElementById('fileLabel');
  const pasteText = document.getElementById('pasteText');
  const importForm = document.getElementById('importForm');
  const quickFacetSelect = document.getElementById('quickFacetSelect');
  const quickSettingInput = document.getElementById('quickSettingInput');

  if (!dropArea || !fileInput || !fileLabel || !pasteText || !importForm) {
    return;
  }

  currentFile = null;
  dropArea.onclick = () => fileInput.click();
  dropArea.addEventListener('keydown', e => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      fileInput.click();
    }
  });
  ['dragenter', 'dragover'].forEach(ev => dropArea.addEventListener(ev, e => {
    e.preventDefault();
    dropArea.classList.add('dragover');
  }));
  ['dragleave', 'drop'].forEach(ev => dropArea.addEventListener(ev, e => {
    e.preventDefault();
    dropArea.classList.remove('dragover');
  }));
  dropArea.addEventListener('drop', e => {
    const file = e.dataTransfer.files[0];
    if (file) {
      currentFile = file;
      fileLabel.textContent = file.name;
    }
  });
  fileInput.onchange = e => {
    currentFile = e.target.files[0];
    if (currentFile) {
      fileLabel.textContent = currentFile.name;
    }
  };

  importForm.onsubmit = async e => {
    e.preventDefault();
    const validateBtn = document.getElementById('validateBtn');
    const hasFile = currentFile != null;
    const hasText = pasteText.value.trim().length > 0;

    if (!hasFile && !hasText) {
      if (window.showError) {
        showError('Please provide a file or paste text');
      }
      return;
    }

    validateBtn.disabled = true;
    validateBtn.innerHTML = 'validating<span class="spinner"></span>';

    try {
      const fd = new FormData();
      if (hasFile) {
        fd.append('file', currentFile);
      } else {
        fd.append('text', pasteText.value);
      }

      const facet = quickFacetSelect ? quickFacetSelect.value : '';
      if (facet) {
        fd.append('facet', facet);
      }
      const settingValue = quickSettingInput ? quickSettingInput.value.trim() : '';
      if (settingValue) {
        fd.append('setting', settingValue);
      }

      const response = await fetch('/app/import/api/save', { method: 'POST', body: fd });
      const data = await response.json();
      validateBtn.disabled = false;
      validateBtn.textContent = 'validate';

      if (!response.ok) {
        if (window.showError) {
          showError(data.error || 'Validation failed');
        }
        return;
      }
      showDetect(data);
    } catch (_err) {
      validateBtn.disabled = false;
      validateBtn.textContent = 'validate';
      if (window.showError) {
        showError('Validation failed');
      }
    }
  };
}

async function uploadGuidedSourceFile() {
  if (!currentGuidedFile) {
    throw new Error('Please select a file to import.');
  }

  const guidedFacetSelect = document.getElementById('guidedFacetSelect');
  const guidedSettingInput = document.getElementById('guidedSettingInput');
  const fd = new FormData();
  fd.append('file', currentGuidedFile);
  if (guidedFacetSelect && guidedFacetSelect.value) {
    fd.append('facet', guidedFacetSelect.value);
  }
  if (guidedSettingInput && guidedSettingInput.value.trim()) {
    fd.append('setting', guidedSettingInput.value.trim());
  }

  const response = await fetch('/app/import/api/save', {
    method: 'POST',
    body: fd,
  });
  const data = await response.json();
  if (!response.ok) {
    throw new Error(data.error || 'Failed to save import');
  }

  currentGuidedSaved = data;

  // Show dedup notice if the file was previously imported
  if (data.dedup) {
    showDedupNotice(data.dedup);
  }

  return data;
}

function showDedupNotice(dedup) {
  const container = document.getElementById('guidedDedupNotice');
  if (!container) return;
  container.innerHTML = `
    <div class="import-dedup-notice">
      <span class="dedup-text">this file was already imported on ${escapeHtml(dedup.imported_at)}${dedup.entry_count ? ` (${dedup.entry_count} entries)` : ''}.</span>
      <button type="button" id="dedupForceBtn">re-import anyway</button>
    </div>
  `;
  document.getElementById('dedupForceBtn').addEventListener('click', () => {
    window._guidedForceImport = true;
    container.innerHTML = '<div class="import-dedup-notice"><span class="dedup-text">will re-import. click start import to proceed.</span></div>';
  });
}

async function saveGuidedPath(source) {
  const pathInput = document.getElementById('guidedPathInput');
  if (!pathInput || !pathInput.value.trim()) {
    throw new Error('Please enter the path to your vault folder.');
  }

  const guidedFacetSelect = document.getElementById('guidedFacetSelect');
  const guidedSettingInput = document.getElementById('guidedSettingInput');
  const facet = guidedFacetSelect ? guidedFacetSelect.value : '';
  const setting = guidedSettingInput ? guidedSettingInput.value.trim() : '';

  const response = await fetch('/app/import/api/save-path', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ path: pathInput.value.trim(), facet, setting }),
  });
  const data = await response.json();
  if (!response.ok) {
    throw new Error(data.error || 'Path not found');
  }

  currentGuidedSaved = data;
  return data;
}

async function startGuidedImport(source) {
  const startButton = document.getElementById('guidedStartBtn');
  const guidedFacetSelect = document.getElementById('guidedFacetSelect');
  const guidedSettingInput = document.getElementById('guidedSettingInput');
  const originalText = startButton.textContent;

  startButton.disabled = true;
  startButton.innerHTML = 'starting<span class="spinner"></span>';

  try {
    let saved;
    if (source.input_type === 'path_input') {
      saved = currentGuidedSaved || await saveGuidedPath(source);
    } else {
      saved = currentGuidedSaved || await uploadGuidedSourceFile();
    }
    const path = saved.path;
    const ts = saved.timestamp;
    const facet = guidedFacetSelect ? guidedFacetSelect.value : '';
    const setting = guidedSettingInput ? guidedSettingInput.value.trim() : '';
    const force = !!(window._guidedForceImport);

    const metaResponse = await fetch('/app/import/api/facet', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ path, facet, setting }),
    });

    if (!metaResponse.ok) {
      const errorData = await metaResponse.json().catch(() => ({}));
      throw new Error(errorData.error || 'Failed to save import settings');
    }

    const startResponse = await fetch('/app/import/api/start', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ path, timestamp: ts, source: source.name, force }),
    });

    if (!startResponse.ok) {
      const errorData = await startResponse.json().catch(() => ({}));
      throw new Error(errorData.error || 'Failed to start import');
    }

    importEvents[ts] = {
      import_id: ts,
      event: 'started',
      stage: 'initialization',
      source_type: source.name,
      source_display: source.display_name,
    };
    trackPendingImport(ts);
    window._guidedForceImport = false;
    loadImports();
    navigateTo(`progress/${ts}`);
  } catch (err) {
    if (window.showError && err instanceof Error) {
      showError(err.message);
    }
  } finally {
    startButton.disabled = false;
    startButton.textContent = originalText;
  }
}

function showProgressView(importId, eventData = null) {
  const guideSteps = document.getElementById('guideSteps');
  const source = sourceMetadataByName[currentGuideSource] || null;
  const importInfo = getImportById(importId);
  const currentEvent = eventData || importEvents[importId] || null;

  if (!guideSteps) {
    return;
  }

  const displayName = currentEvent?.source_display || importInfo?.source_display || source?.display_name || 'Import';
  const stageLabel = currentEvent?.stalled
    ? 'Stalled — no updates in 10 minutes'
    : currentEvent?.event === 'completed'
      ? 'Import complete'
      : currentEvent?.event === 'error'
        ? 'Import failed'
        : humanStageName(currentEvent?.stage || 'initialization', displayName);
  const progressHtml = currentEvent ? renderProgressStats(currentEvent) : '';
  let completionHtml = '';

  if (currentEvent?.event === 'completed' || importInfo?.status === 'success') {
    const completedInfo = currentEvent || importInfo || {};
    const range = completedInfo.date_range || importInfo?.date_range || null;
    const day = range?.[0] || importInfo?.target_day || null;
    completionHtml = `
      <div class="import-completion-summary">
        <div><strong>Entries written:</strong> ${completedInfo.entries_written || importInfo?.entries_written || 0}</div>
        <div><strong>Entities seeded:</strong> ${completedInfo.entities_seeded || importInfo?.entities_seeded || 0}</div>
        <div><strong>Date range:</strong> ${escapeHtml(formatDateRange(range) || '-')}</div>
        <div><strong>Duration:</strong> ${formatElapsed(completedInfo.duration_ms || 0)}</div>
        <div class="import-action-row">
          <a class="import-secondary-btn" href="/app/import/${completedInfo.processed_timestamp || importId}#content">browse what was imported →</a>
          ${day ? `<a class="import-secondary-btn" href="/app/activities/${day}">view in activities</a>` : ''}
          <a href="#" class="import-secondary-btn" onclick="showGrid(); return false;">import another source</a>
        </div>
      </div>
    `;
  } else if (currentEvent?.event === 'error' || importInfo?.status === 'failed') {
    const errorText = currentEvent?.error || importInfo?.error || 'Unknown error';
    completionHtml = `
      <div class="import-completion-summary failed">
        <div><strong>Error:</strong> ${escapeHtml(errorText)}</div>
        <div class="import-action-row">
          <a href="#" class="import-secondary-btn" onclick="showGrid(); return false;">import another source</a>
        </div>
      </div>
    `;
  } else if (currentEvent?.stalled) {
    completionHtml = `
      <div class="import-completion-summary stalled">
        <div><strong>Import ID:</strong> ${escapeHtml(importId)}</div>
        <div>Stalled — no updates in 10 minutes. ${window.CONVEY_COPY.RELOAD_HINT}</div>
        <div class="import-action-row">
          <a href="#" class="import-secondary-btn" onclick="showGrid(); return false;">import another source</a>
        </div>
      </div>
    `;
  }

  guideSteps.innerHTML = `
    <div class="import-progress-panel">
      <div class="import-step-number">Progress</div>
      <h3 class="import-progress-title">${escapeHtml(displayName)}</h3>
      <p class="import-progress-message">${escapeHtml(stageLabel)}</p>
      ${currentEvent?.elapsed_ms ? `<div class="progress-detail">${escapeHtml(formatElapsed(currentEvent.elapsed_ms))} elapsed</div>` : ''}
      ${progressHtml}
      ${completionHtml}
    </div>
  `;
}

startBtn.addEventListener('click', async () => {
  const ts = document.getElementById('timestampInput').value.trim();
  const path = document.getElementById('savedPath').value;
  const facet = facetSelect.value;
  const setting = settingInput.value.trim();

  if (!ts) {
    if (window.showError) showError('Timestamp is required before starting the import.');
    return;
  }

  const originalText = startBtn.textContent;
  startBtn.disabled = true;
  startBtn.innerHTML = 'starting<span class="spinner"></span>';

  try {
    const response = await fetch('/app/import/api/facet', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ path, facet, setting }),
    });

    if (!response.ok) {
      const errorData = await response.json().catch(() => ({}));
      throw new Error(errorData.error || 'Failed to save facet selection');
    }

    const startResponse = await fetch('/app/import/api/start', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ path, timestamp: ts, source: 'quick', force: false }),
    });

    if (!startResponse.ok) {
      const errorData = await startResponse.json().catch(() => ({}));
      throw new Error(errorData.error || 'Failed to start import');
    }

    startBtn.disabled = false;
    startBtn.textContent = originalText;
    closeDetectModal();
    importEvents[ts] = {
      import_id: ts,
      event: 'started',
      stage: 'initialization',
      source_type: 'quick',
      source_display: 'Quick Import',
    };
    trackPendingImport(ts);
    loadImports();
    navigateTo(`progress/${ts}`);
  } catch (err) {
    startBtn.disabled = false;
    startBtn.textContent = originalText;
    if (window.showError && err instanceof Error) showError(err.message);
  }
});

window.onclick = e => {
  if (e.target === document.getElementById('detectModal')) {
    closeDetectModal();
  }
};

document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape' && document.getElementById('detectModal').style.display === 'block') {
    closeDetectModal();
  }
});

function loadFacets(defaultValue = null, selectEl = null) {
  const select = selectEl || document.getElementById('facetSelect');
  if (!select) {
    return;
  }

  select.innerHTML = '<option value="">None</option>';
  const facets = window.facetsData || [];
  facets.forEach(facet => {
    const opt = document.createElement('option');
    opt.value = facet.name;
    opt.textContent = facet.title || facet.name;
    select.appendChild(opt);
  });

  if (defaultValue !== null) {
    select.value = defaultValue;
  }
}

importEventsCleanup = appEvents.listen('importer', {
  correlationKey: 'import_id',
  timeout: IMPORT_STALL_TIMEOUT_MS,
  onTimeout: markRowStalled,
}, eventData => {
  if (!IMPORT_ROW_EVENTS.has(eventData.event)) {
    return;
  }
  if (IMPORT_TERMINAL_EVENTS.has(eventData.event)) {
    clearPendingImport(eventData.import_id);
  } else {
    trackPendingImport(eventData.import_id);
  }
  updateImportRow(eventData.import_id, eventData);
});

loadSourceGrid();
loadFacets();
loadImports();
handleHashChange();

window.addEventListener('facet.switch', e => {
  filterImportsByFacet(e.detail.facet);
});
</script>

{% elif view == 'detail' %}
  {% include 'import/_detail.html' %}
{% else %}
  <p>Unknown view: {{ view }}</p>
{% endif %}