{% extends "base.html" %}
{% block title %}New Project — {{ app_name }}{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1>Create Project</h1>
    <p class="subtitle">Projects live under a workspace (Organization → Workspace → Project)</p>
  </div>
</div>

<div class="form-card" style="margin-bottom:1rem;max-width:42rem">
  <div class="form-group" style="margin:0">
    <label for="workspace_id">Workspace</label>
    <select id="workspace_id" name="workspace_id">
      <option value="">Default workspace (Personal)</option>
    </select>
    <p class="field-hint">A workspace is a team area; a project is one ML use case inside it.</p>
  </div>
</div>

<div class="tabs" role="tablist">
  <button type="button" class="tab active" data-tab="create">New Project</button>
  <button type="button" class="tab" data-tab="import">Import Project</button>
</div>

<div class="tab-panel active" id="panel-create">
  <div class="form-card">
    <form id="create-project-form">
      <div class="form-group">
        <label for="name">Project Name</label>
        <input type="text" id="name" name="name" required placeholder="e.g. Warehouse Detection">
      </div>
      <div class="form-group">
        <label for="description">Description</label>
        <textarea id="description" name="description" rows="3" placeholder="Optional project description"></textarea>
      </div>
      <div class="form-group">
        <label for="project_type">Project Type</label>
        <select id="project_type" name="project_type">
          <optgroup label="Computer vision">
            <option value="object_detection">Object Detection</option>
            <option value="instance_segmentation">Instance Segmentation</option>
            <option value="classification">Image Classification</option>
            <option value="semantic_segmentation">Semantic Segmentation</option>
          </optgroup>
          <optgroup label="Text">
            <option value="text_classification">Text Classification</option>
            <option value="ner">Named Entity Recognition</option>
          </optgroup>
          <optgroup label="Tabular">
            <option value="tabular_classification">Tabular Classification</option>
            <option value="tabular_regression">Tabular Regression</option>
          </optgroup>
          <optgroup label="Audio">
            <option value="audio_classification">Audio Classification</option>
            <option value="transcription">Transcription</option>
          </optgroup>
          <optgroup label="Video">
            <option value="video_classification">Video Classification</option>
            <option value="action_recognition">Action Recognition</option>
          </optgroup>
          <optgroup label="LLM datasets">
            <option value="instruction_tuning">Instruction Tuning</option>
            <option value="preference">Preference (chosen/rejected)</option>
            <option value="rag_eval">RAG Evaluation</option>
          </optgroup>
        </select>
      </div>
      <div class="form-group">
        <label for="location">Project Location</label>
        <input type="text" id="location" name="location" placeholder="{{ default_projects_root }}\&lt;id&gt;">
        <p class="field-hint" id="location-hint">Folder for project assets. Leave blank to use <code>{{ default_projects_root }}</code>.</p>
      </div>
      <div class="form-actions">
        <a href="/" class="btn btn-ghost">Cancel</a>
        <button type="submit" class="btn btn-primary">Create Project</button>
      </div>
    </form>
  </div>
</div>

<div class="tab-panel" id="panel-import">
  <div class="form-card form-card-wide">
    <form id="import-project-form">
      <div class="form-group">
        <label for="import-name">Project Name</label>
        <input type="text" id="import-name" placeholder="Optional — defaults to folder/zip name">
      </div>
      <div class="form-group">
        <label for="import-description">Description</label>
        <textarea id="import-description" rows="2" placeholder="Optional"></textarea>
      </div>
      <div class="form-group">
        <label for="import-type">Project Type</label>
        <select id="import-type">
          <optgroup label="Computer vision">
            <option value="object_detection">Object Detection</option>
            <option value="instance_segmentation">Instance Segmentation</option>
            <option value="classification">Image Classification</option>
            <option value="semantic_segmentation">Semantic Segmentation</option>
          </optgroup>
          <optgroup label="Text / tabular">
            <option value="text_classification">Text Classification</option>
            <option value="ner">NER</option>
            <option value="tabular_classification">Tabular Classification</option>
            <option value="tabular_regression">Tabular Regression</option>
          </optgroup>
          <optgroup label="Audio / video / LLM">
            <option value="audio_classification">Audio Classification</option>
            <option value="transcription">Transcription</option>
            <option value="video_classification">Video Classification</option>
            <option value="action_recognition">Action Recognition</option>
            <option value="instruction_tuning">Instruction Tuning</option>
            <option value="preference">Preference</option>
            <option value="rag_eval">RAG Eval</option>
          </optgroup>
        </select>
      </div>
      <div class="form-group">
        <label for="import-location">Store Project At</label>
        <input type="text" id="import-location" placeholder="Leave blank for default under {{ default_projects_root }}">
        <p class="field-hint">Where copied images will live (ignored if you keep the source folder as location).</p>
      </div>

      <div class="import-source-block">
        <h3 class="form-section-title">Source</h3>
        <p class="muted" id="import-source-hint">Import a YOLO-style dataset (<code>images/</code> + <code>labels/</code> + optional <code>data.yaml</code>) or a folder of images.</p>

        <div class="form-group">
          <label for="import-zip">Zip file</label>
          <input type="file" id="import-zip" accept=".zip,application/zip">
        </div>

        <div class="or-divider"><span>or</span></div>

        <div class="form-group">
          <label for="import-folder">Folder path on this machine</label>
          <input type="text" id="import-folder" placeholder="e.g. C:\Datasets\my-yolo-dataset">
        </div>
        <label class="checkbox-row">
          <input type="checkbox" id="use-source-location">
          <span id="use-source-label">Use the source folder as the project location (don’t copy images)</span>
        </label>
      </div>

      <div class="form-actions">
        <a href="/" class="btn btn-ghost">Cancel</a>
        <button type="submit" class="btn btn-primary" id="import-submit">Import Project</button>
      </div>
      <p id="import-status" class="muted hidden"></p>
    </form>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
const TYPE_HINTS = {
  object_detection: { location: 'Folder where images will be stored.', import: 'YOLO-style dataset (images/ + labels/ + optional data.yaml) or a folder of images.', source: 'don’t copy images' },
  instance_segmentation: { location: 'Folder where images will be stored.', import: 'YOLO-seg or COCO-style folder / zip with images and masks.', source: 'don’t copy images' },
  semantic_segmentation: { location: 'Folder where images will be stored.', import: 'Folder or zip with images and segmentation labels.', source: 'don’t copy images' },
  classification: { location: 'Folder where images will be stored.', import: 'Folder of images (optionally class subfolders) or a zip.', source: 'don’t copy images' },
  text_classification: { location: 'Folder for imported JSONL/CSV and exports.', import: 'JSONL/CSV with text fields (or a zip of those files).', source: 'don’t copy files' },
  ner: { location: 'Folder for imported JSONL and exports.', import: 'JSONL with text (and optional spans).', source: 'don’t copy files' },
  tabular_classification: { location: 'Folder for CSV/JSONL tables.', import: 'CSV or JSONL tabular rows.', source: 'don’t copy files' },
  tabular_regression: { location: 'Folder for CSV/JSONL tables.', import: 'CSV or JSONL with numeric targets.', source: 'don’t copy files' },
  audio_classification: { location: 'Folder for audio JSONL + paths.', import: 'JSONL with audio URIs / paths.', source: 'don’t copy files' },
  transcription: { location: 'Folder for audio JSONL + transcripts.', import: 'JSONL with audio URIs (transcripts optional).', source: 'don’t copy files' },
  video_classification: { location: 'Folder for video JSONL + paths.', import: 'JSONL with video URIs / paths.', source: 'don’t copy files' },
  action_recognition: { location: 'Folder for video JSONL + paths.', import: 'JSONL with video clip URIs.', source: 'don’t copy files' },
  instruction_tuning: { location: 'Folder for SFT JSONL.', import: 'JSONL with instruction / input / output fields.', source: 'don’t copy files' },
  preference: { location: 'Folder for DPO JSONL.', import: 'JSONL with prompt / chosen / rejected.', source: 'don’t copy files' },
  rag_eval: { location: 'Folder for RAG eval JSONL.', import: 'JSONL with query / contexts / answer.', source: 'don’t copy files' },
};

function applyTypeHints(type, { locationHintId, importHintId, sourceLabelId }) {
  const h = TYPE_HINTS[type] || TYPE_HINTS.object_detection;
  const loc = document.getElementById(locationHintId);
  const imp = document.getElementById(importHintId);
  const src = document.getElementById(sourceLabelId);
  if (loc) loc.innerHTML = `${h.location} Leave blank to use <code>{{ default_projects_root }}</code>.`;
  if (imp) imp.textContent = h.import;
  if (src) src.textContent = `Use the source folder as the project location (${h.source})`;
}

document.getElementById('project_type')?.addEventListener('change', (e) => {
  applyTypeHints(e.target.value, { locationHintId: 'location-hint' });
});
document.getElementById('import-type')?.addEventListener('change', (e) => {
  applyTypeHints(e.target.value, {
    importHintId: 'import-source-hint',
    sourceLabelId: 'use-source-label',
  });
});
applyTypeHints(document.getElementById('project_type')?.value || 'object_detection', { locationHintId: 'location-hint' });
applyTypeHints(document.getElementById('import-type')?.value || 'object_detection', {
  importHintId: 'import-source-hint',
  sourceLabelId: 'use-source-label',
});

(async function loadWorkspaces() {
  const sel = document.getElementById('workspace_id');
  if (!sel) return;
  const pref = new URLSearchParams(location.search).get('workspace_id');
  try {
    await api('/api/platform/hierarchy/ensure', { method: 'POST', body: '{}' });
    const tree = await api('/api/platform/hierarchy');
    const opts = [];
    for (const org of (tree.organizations || [])) {
      for (const ws of (org.workspaces || [])) {
        opts.push({
          id: ws.id,
          label: `${org.name} / ${ws.name}`,
        });
      }
    }
    if (opts.length) {
      sel.innerHTML = opts.map((o) =>
        `<option value="${o.id}" ${String(o.id) === String(pref) ? 'selected' : ''}>${o.label}</option>`
      ).join('');
    }
  } catch (_) { /* keep default option */ }
})();

document.querySelectorAll('.tab').forEach(tab => {
  tab.addEventListener('click', () => {
    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
    tab.classList.add('active');
    document.getElementById('panel-' + tab.dataset.tab).classList.add('active');
    history.replaceState(null, '', tab.dataset.tab === 'import' ? '#import' : '#create');
  });
});

if (location.hash === '#import') {
  document.querySelector('.tab[data-tab="import"]')?.click();
}

document.getElementById('create-project-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const body = {
    name: document.getElementById('name').value,
    description: document.getElementById('description').value,
    project_type: document.getElementById('project_type').value,
    location: document.getElementById('location').value.trim(),
  };
  const ws = document.getElementById('workspace_id')?.value;
  if (ws) body.workspace_id = parseInt(ws, 10);
  const res = await fetch('/api/projects', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(body),
  });
  if (res.ok) {
    const project = await res.json();
    window.location.href = `/projects/${project.id}`;
  } else {
    const err = await res.json().catch(() => ({}));
    alert(err.detail || 'Failed to create project');
  }
});

document.getElementById('import-project-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const zip = document.getElementById('import-zip').files[0];
  const folder = document.getElementById('import-folder').value.trim();
  if (!zip && !folder) {
    alert('Choose a zip file or enter a folder path');
    return;
  }

  const status = document.getElementById('import-status');
  const btn = document.getElementById('import-submit');
  status.classList.remove('hidden');
  status.textContent = 'Importing… this may take a minute for large datasets.';
  btn.disabled = true;

  const fd = new FormData();
  fd.append('name', document.getElementById('import-name').value);
  fd.append('description', document.getElementById('import-description').value);
  fd.append('project_type', document.getElementById('import-type').value);
  fd.append('location', document.getElementById('import-location').value.trim());
  fd.append('folder_path', folder);
  fd.append('use_source_as_location', document.getElementById('use-source-location').checked ? 'true' : 'false');
  const wsImport = document.getElementById('workspace_id')?.value;
  if (wsImport) fd.append('workspace_id', wsImport);
  if (zip) fd.append('file', zip);

  try {
    const res = await fetch('/api/projects/import', { method: 'POST', body: fd });
    if (res.ok) {
      const project = await res.json();
      window.location.href = `/projects/${project.id}`;
      return;
    }
    const err = await res.json().catch(() => ({}));
    status.textContent = err.detail || 'Import failed';
  } catch (err) {
    status.textContent = 'Import failed: ' + err.message;
  } finally {
    btn.disabled = false;
  }
});
</script>
{% endblock %}