{% extends "base.html" %}
{% block title %}New Project — {{ app_name }}{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1>Create Project</h1>
    <p class="subtitle">Start empty or import an existing dataset (folder or zip)</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">
          <option value="object_detection">Object Detection</option>
          <option value="instance_segmentation">Instance Segmentation</option>
          <option value="classification">Classification</option>
          <option value="semantic_segmentation">Semantic Segmentation</option>
        </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">Folder where images will be stored. 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">
          <option value="object_detection">Object Detection</option>
          <option value="instance_segmentation">Instance Segmentation</option>
          <option value="classification">Classification</option>
          <option value="semantic_segmentation">Semantic Segmentation</option>
        </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">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>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>
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 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');
  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 %}