{% extends "base.html" %}
{% block title %}Import — {{ project.name }} — {{ app_name }}{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <a href="/projects/{{ project.id }}" class="muted">← {{ project.name }}</a>
    <h1>Import {{ modality }} data</h1>
    <p class="subtitle">{{ project.project_type.value | replace('_', ' ') | title }}</p>
  </div>
</div>

<div class="form-card">
  <form id="sample-import-form">
    <div class="form-group">
      <label for="import-file">File</label>
      <input type="file" id="import-file" accept=".jsonl,.csv,.txt,application/json,text/csv" required>
      <p class="field-hint">
        {% if modality == 'tabular' %}
        CSV with header row. Optional <code>label</code> column.
        {% elif modality == 'audio' %}
        JSONL: <code>{"uri":"…","label":"…"}</code> or <code>{"uri":"…","transcript":"…"}</code>
        {% elif modality == 'video' %}
        JSONL: <code>{"uri":"…","label":"walk"}</code>
        {% elif modality == 'llm' %}
        JSONL for instruction (<code>instruction</code>/<code>output</code>), preference (<code>prompt</code>/<code>chosen</code>/<code>rejected</code>), or RAG (<code>query</code>/<code>contexts</code>/<code>answer</code>).
        {% else %}
        JSONL lines: <code>{"text":"…","label":"…"}</code> or CSV with a text column.
        {% endif %}
      </p>
    </div>
    {% if modality == 'text' %}
    <div class="form-group">
      <label for="text-column">Text field / column</label>
      <input type="text" id="text-column" value="text">
    </div>
    {% endif %}
    {% if modality in ['text','tabular','audio','video'] %}
    <div class="form-group">
      <label for="label-column">Label column</label>
      <input type="text" id="label-column" value="label">
    </div>
    {% endif %}
    <div class="form-actions">
      <a href="/projects/{{ project.id }}" class="btn btn-ghost">Cancel</a>
      <button type="submit" class="btn btn-primary">Import</button>
    </div>
  </form>
  <pre id="import-result" class="muted" style="display:none;margin-top:1rem;white-space:pre-wrap"></pre>
</div>

<script>
const PROJECT_ID = {{ project.id }};
const MODALITY = {{ modality | tojson }};
document.getElementById('sample-import-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const file = document.getElementById('import-file').files[0];
  if (!file) return;
  const fd = new FormData();
  fd.append('file', file);
  const labelEl = document.getElementById('label-column');
  if (labelEl) fd.append('label_column', labelEl.value || 'label');
  const textCol = document.getElementById('text-column');
  if (textCol) fd.append('text_column', textCol.value || 'text');
  let path;
  if (MODALITY === 'tabular') path = `/api/projects/${PROJECT_ID}/import/tabular`;
  else if (['audio','video','llm'].includes(MODALITY)) path = `/api/projects/${PROJECT_ID}/import/jsonl`;
  else path = `/api/projects/${PROJECT_ID}/import/text`;
  const res = await fetch(path, { method: 'POST', body: fd });
  const data = await res.json().catch(() => ({}));
  const out = document.getElementById('import-result');
  out.style.display = 'block';
  if (!res.ok) {
    out.textContent = data.detail || res.statusText;
    return;
  }
  out.textContent = JSON.stringify(data, null, 2);
});
</script>
{% endblock %}