{% extends "network/base.html" %}
{% block title %}NDC — Ingestion{% endblock %}
{% block head %}
<style>
  .ingest-container { max-width: 1200px; margin: 2rem auto; padding: 0 1rem; }
  .ingest-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
  .ingest-header h1 { font-size: 1.5rem; margin: 0; }
  .drop-zone {
    border: 2px dashed #5a5a7a; border-radius: 8px; padding: 3rem 2rem;
    text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s;
    margin-bottom: 2rem; background: #1a1a2e;
  }
  .drop-zone.drag-over { border-color: #7c3aed; background: #1e1e3a; }
  .drop-zone p { margin: 0.5rem 0; color: #aaa; }
  .drop-zone .drop-icon { font-size: 2.5rem; }
  .drop-zone input[type=file] { display: none; }
  .formats { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-top: 1rem; }
  .fmt-badge { background: #2a2a4a; color: #ccc; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; }
  .section { margin-bottom: 2rem; }
  .section h2 { font-size: 1.1rem; margin-bottom: 0.75rem; border-bottom: 1px solid #333; padding-bottom: 0.4rem; }
  .log-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
  .log-table th, .log-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #2a2a4a; text-align: left; }
  .log-table th { color: #999; font-weight: 500; }
  .status-completed { color: #4ade80; }
  .status-failed { color: #f87171; }
  .status-started { color: #fbbf24; }
  .adapter-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
  .adapter-card { background: #1a1a2e; border: 1px solid #333; border-radius: 8px; padding: 1rem; }
  .adapter-card h3 { margin: 0 0 0.5rem; font-size: 1rem; }
  .adapter-card .status { font-size: 0.8rem; color: #999; }
  .btn { padding: 0.4rem 1rem; border-radius: 4px; border: none; cursor: pointer; font-size: 0.85rem; }
  .btn-primary { background: #7c3aed; color: #fff; }
  .btn-primary:hover { background: #6d28d9; }
  .btn-sm { padding: 0.25rem 0.6rem; font-size: 0.8rem; }
  .stats-row { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
  .stat-card { background: #1a1a2e; border: 1px solid #333; border-radius: 8px; padding: 1rem 1.5rem; min-width: 120px; }
  .stat-card .stat-num { font-size: 1.8rem; font-weight: 600; color: #7c3aed; }
  .stat-card .stat-label { font-size: 0.8rem; color: #999; }
</style>
{% endblock %}
{% block content %}
<div class="ingest-container">
  <div class="ingest-header">
    <h1>Network Data Ingestion</h1>
    <button class="btn btn-primary" onclick="refreshLog()">Refresh</button>
  </div>

  <!-- Stats -->
  <div class="stats-row" id="stats-row">
    <div class="stat-card"><div class="stat-num" id="stat-total">-</div><div class="stat-label">Total</div></div>
    <div class="stat-card"><div class="stat-num" id="stat-completed">-</div><div class="stat-label">Completed</div></div>
    <div class="stat-card"><div class="stat-num" id="stat-failed">-</div><div class="stat-label">Failed</div></div>
    <div class="stat-card"><div class="stat-num" id="stat-docs">-</div><div class="stat-label">Documents</div></div>
  </div>

  <!-- Drop zone -->
  <div class="section">
    <h2>Upload Files</h2>
    <div class="drop-zone" id="dropZone">
      <div class="drop-icon">&#128462;</div>
      <p><strong>Drag & drop files here</strong></p>
      <p>or click to browse</p>
      <input type="file" id="fileInput" multiple/>
      <div class="formats">
        <span class="fmt-badge">.drawio</span><span class="fmt-badge">.vdx</span>
        <span class="fmt-badge">.svg</span><span class="fmt-badge">.pdf</span>
        <span class="fmt-badge">.docx</span><span class="fmt-badge">.csv</span>
        <span class="fmt-badge">.xlsx</span><span class="fmt-badge">.conf</span>
        <span class="fmt-badge">.cfg</span><span class="fmt-badge">.jpg</span>
        <span class="fmt-badge">.png</span><span class="fmt-badge">.txt</span>
        <span class="fmt-badge">.md</span>
      </div>
    </div>
    <div id="uploadStatus"></div>
  </div>

  <!-- NMS Adapters -->
  <div class="section">
    <h2>NMS Adapters</h2>
    <div class="adapter-cards" id="adapterCards">
      <div class="adapter-card">
        <h3>Loading adapters...</h3>
      </div>
    </div>
  </div>

  <!-- Ingestion Log -->
  <div class="section">
    <h2>Ingestion Log</h2>
    <table class="log-table">
      <thead>
        <tr><th>Time</th><th>Channel</th><th>File</th><th>Type</th><th>Status</th></tr>
      </thead>
      <tbody id="logBody">
        <tr><td colspan="5" style="color:#666">Loading...</td></tr>
      </tbody>
    </table>
  </div>
</div>

<script>
const BASE = NC_BASE;

// Drop zone
const dz = document.getElementById('dropZone');
const fi = document.getElementById('fileInput');
dz.addEventListener('click', () => fi.click());
dz.addEventListener('dragover', e => { e.preventDefault(); dz.classList.add('drag-over'); });
dz.addEventListener('dragleave', () => dz.classList.remove('drag-over'));
dz.addEventListener('drop', e => {
  e.preventDefault(); dz.classList.remove('drag-over');
  uploadFiles(e.dataTransfer.files);
});
fi.addEventListener('change', () => uploadFiles(fi.files));

async function uploadFiles(files) {
  const status = document.getElementById('uploadStatus');
  for (const file of files) {
    status.innerHTML += `<p>Uploading ${file.name}...</p>`;
    const fd = new FormData();
    fd.append('file', file);
    try {
      const r = await fetch(`${BASE}/api/network/ingest`, {method:'POST', body:fd});
      const j = await r.json();
      const ok = !j.error;
      status.innerHTML += `<p style="color:${ok?'#4ade80':'#f87171'}">${file.name}: ${ok?'OK':j.error}</p>`;
    } catch(e) {
      status.innerHTML += `<p style="color:#f87171">${file.name}: ${e}</p>`;
    }
  }
  refreshLog();
}

// Load adapters
async function loadAdapters() {
  try {
    const r = await fetch(`${BASE}/api/network/adapters`);
    const j = await r.json();
    const c = document.getElementById('adapterCards');
    c.innerHTML = (j.adapters||[]).map(a =>
      `<div class="adapter-card"><h3>${a}</h3><div class="status">Registered</div>
       <button class="btn btn-sm btn-primary" style="margin-top:0.5rem" onclick="alert('Configure in .env or args/network_canvas_config.yaml')">Configure</button></div>`
    ).join('') || '<div class="adapter-card"><h3>No adapters registered</h3></div>';
  } catch(e) { console.warn('Adapter load failed:', e); }
}

// Load log
async function refreshLog() {
  try {
    const [logR, statR] = await Promise.all([
      fetch(`${BASE}/api/network/ingest/log?limit=20`),
      fetch(`${BASE}/api/network/ingest/status`),
    ]);
    const logJ = await logR.json();
    const statJ = await statR.json();

    document.getElementById('stat-total').textContent = statJ.total_ingestions || 0;
    document.getElementById('stat-completed').textContent = (statJ.by_status||{}).completed || 0;
    document.getElementById('stat-failed').textContent = (statJ.by_status||{}).failed || 0;
    document.getElementById('stat-docs').textContent = statJ.documents_stored || 0;

    const body = document.getElementById('logBody');
    body.innerHTML = (logJ.entries||[]).map(e =>
      `<tr><td>${(e.created_at||'').slice(0,19)}</td><td>${e.channel||''}</td>
       <td>${e.file_name||''}</td><td>${e.file_type||''}</td>
       <td class="status-${e.status||''}">${e.status||''}</td></tr>`
    ).join('') || '<tr><td colspan="5" style="color:#666">No entries</td></tr>';
  } catch(e) { console.warn('Log refresh failed:', e); }
}

loadAdapters();
refreshLog();
</script>
{% endblock %}