{% extends "dashboard/base.html" %}
{% load static browse_extras %}

{% block title %}Wind Data{% endblock %}

{% block content %}

<div style="position: absolute; top: 0.9rem; left: 19rem; z-index: 1000;">
    <h2 style="color: #ffffff; font-weight: 100;">Wind Data</h2>
</div>

<!-- ── Hero banner ──────────────────────────────────────────────────────── -->
<div class="sim-hero" style="margin-bottom:1.5rem;">
    <div class="sim-hero-left">
        <span class="material-symbols-outlined sim-hero-icon">air</span>
        <div>
            <div class="sim-hero-title">Wind Data</div>
            <div class="sim-hero-sub">Upload and manage turbine wind HDF5 files for use in simulations</div>
        </div>
    </div>
    <div class="sim-hero-tips">
        <div class="sim-tip">
            <span class="material-symbols-outlined">upload_file</span>
            Upload <code style="color:#a8e6ec; background:none;">.h5</code> / <code style="color:#a8e6ec; background:none;">.hdf5</code> files from the drag-and-drop area below
        </div>
        <div class="sim-tip">
            <span class="material-symbols-outlined">link</span>
            Link a file to a simulation via a <a href="{% url 'dashboard-home' %}">WindInput</a> component
        </div>
        <div class="sim-tip">
            <span class="material-symbols-outlined">folder_open</span>
            Files are saved to the configurable storage directory
        </div>
    </div>
</div>

<!-- ── Online data library banner ──────────────────────────────────────── -->
<div style="margin-bottom:1.5rem; padding:0.9rem 1.4rem; background:#a8d8de; border:1px solid #6bbcc6; border-radius:8px; display:flex; align-items:center; gap:0.9rem;">
    <span class="material-symbols-outlined" style="font-size:1.6rem; color:#4a9aa5; flex-shrink:0; padding:0;">public</span>
    <div>
        <span style="font-size:1rem; color:#1a5f68;">Visit the </span>
        <a href="https://www.renewabletools.co.uk/r2h2/data-resources/" target="_blank" rel="noopener noreferrer"
           style="font-size:1rem; font-weight:600; color:#136b75;"><u>R2H2 online data library</u></a>
        <span style="font-size:1rem; color:#1a5f68;"> for ready-to-use wind datasets (https://www.renewabletools.co.uk/r2h2/data-resources/).</span>
    </div>
</div>

<style>
    .sim-hero {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        padding: 1.1rem 1.5rem;
        background: linear-gradient(100deg, #0e5560 0%, #136b75 55%, #1a8a96 100%);
        border-radius: 12px;
        box-shadow: 0 3px 14px rgba(19,107,117,0.18);
        flex-wrap: wrap;
    }
    .sim-hero-left {
        display: flex; align-items: center; gap: 0.9rem;
        flex-shrink: 0;
    }
    .sim-hero-icon {
        font-size: 2.4rem;
        color: rgba(255,255,255,0.55);
        font-variation-settings: 'wght' 100;
        padding: 0 !important;
    }
    .sim-hero-title {
        font-size: 1.25rem; font-weight: 600; color: #fff;
        line-height: 1.2;
    }
    .sim-hero-sub {
        font-size: 0.78rem; color: #a8e6ec; margin-top: 0.2rem;
    }
    .sim-hero-tips {
        display: flex; flex-direction: column; gap: 0.35rem;
        flex: 1; min-width: 200px;
        border-left: 1px solid rgba(255,255,255,0.18);
        padding-left: 1.4rem;
    }
    .sim-tip {
        display: flex; align-items: center; gap: 0.45rem;
        font-size: 0.78rem; color: #cdf0f4;
    }
    .sim-tip .material-symbols-outlined {
        font-size: 0.95rem; color: #64d0db; flex-shrink: 0; padding: 0 !important;
    }
    .sim-tip a { color: #a8e6ec; }
    .sim-tip a:hover { color: #fff; }
</style>

<!-- ── Dropzone card ────────────────────────────────────────────────────── -->
<div style="margin-bottom:1.1rem;">
    <div class="card z-depth-1" style="margin:0;">
      <div class="card-content">
        <span class="card-title" style="font-size:1rem; font-weight:500;">
          <span class="material-symbols-outlined" style="vertical-align:middle; font-size:1.2rem; margin-right:6px;">upload_file</span>
          Upload HDF5 files
        </span>

        <!-- Drop zone -->
        <div id="drop-zone"
             style="border:2px dashed #80CBC4; border-radius:8px; padding:40px 20px;
                    text-align:center; cursor:pointer; background:#f9fffe;
                    transition: background 0.2s, border-color 0.2s;">
          <span class="material-symbols-outlined" style="font-size:3rem; color:#80CBC4;">cloud_upload</span>
          <p style="margin:8px 0 4px; color:#555;">Drag &amp; drop <code>.h5</code> files here</p>
          <p style="margin:0; color:#999; font-size:0.85rem;">or click to browse</p>
          <input id="file-input" type="file" accept=".h5,.hdf5,.hdf" multiple
                 style="display:none;">
        </div>

        <!-- Upload queue -->
        <ul id="upload-list" style="margin-top:16px; list-style:none; padding:0;"></ul>

        <!-- Upload button -->
        <div style="margin-top:12px;">
          <a id="upload-btn" class="btn teal lighten-1 waves-effect waves-light white-text disabled">
            <span class="material-symbols-outlined" style="font-size:1rem; vertical-align:middle;">upload</span>
            Upload
          </a>
          <span id="upload-status" class="grey-text text-darken-1" style="margin-left:14px; font-size:0.88rem;"></span>
        </div>
      </div>
    </div>
</div>

<!-- ── File list card ───────────────────────────────────────────────────────── -->
<style>
    .wi-badge {
        display: inline-flex; align-items: center; gap: 4px;
        background: #e0f4f6; color: #136b75;
        border-radius: 4px; padding: 2px 7px;
        font-size: 0.74rem; font-family: monospace; white-space: nowrap;
    }
    .wi-badge-label {
        font-family: sans-serif; font-size: 0.68rem;
        color: #4a9aa5; font-weight: 600;
    }
    .ds-badge {
        display: inline-flex; align-items: baseline; gap: 5px;
        background: #f0f9fa; color: #2a7a84;
        border: 1px solid #b2dde2; border-radius: 4px;
        padding: 2px 8px; font-size: 0.72rem; font-family: monospace;
        white-space: nowrap; margin-bottom: 3px;
    }
    .ds-name  { font-weight: 600; color: #1a5f68; }
    .ds-shape { color: #4a9aa5; }
    .ds-dtype { color: #80aaae; font-size: 0.66rem; }
    .wi-row-meta { display: flex; flex-direction: column; gap: 3px; }
    .wi-years-badge {
        display: inline-flex; align-items: center; gap: 4px;
        background: #136b75; color: #fff;
        border-radius: 4px; padding: 1px 7px;
        font-size: 0.74rem; font-family: monospace;
    }
</style>
<div style="margin-bottom:1.1rem;">
    <div class="card z-depth-1" style="margin:0;">
      <div class="card-content" style="padding-bottom:8px;">
        <span class="card-title" style="font-size:1rem; font-weight:500;">
          <span class="material-symbols-outlined" style="vertical-align:middle; font-size:1.2rem; margin-right:6px;">dataset</span>
          Stored files
          <span class="grey-text text-darken-1" style="font-size:0.8rem; font-weight:400; margin-left:8px;">
            ({{ files|length }} file{{ files|length|pluralize }})
          </span>
        </span>

        {% if files %}
        <div style="overflow-x:auto;">
        <table class="striped" style="font-size:0.85rem; min-width:600px;">
          <thead>
            <tr>
              <th>File name</th>
              <th style="text-align:right; width:80px;">Size (MB)</th>
              <th style="width:150px;">Last modified</th>
              <th style="width:110px;">WindInput</th>
              <th style="width:180px;">Duration</th>
              <th>HDF5 datasets</th>
            </tr>
          </thead>
          <tbody id="file-table-body">
            {% for f in files %}
            <tr data-name="{{ f.name }}">

              {# ── filename ── #}
              <td>
                <span class="material-symbols-outlined"
                      style="font-size:1rem; vertical-align:middle; color:#80CBC4; margin-right:4px;">data_object</span>
                {{ f.name }}
              </td>

              {# ── size ── #}
              <td style="text-align:right;">{{ f.size_mb }}</td>

              {# ── modified ── #}
              <td class="grey-text">{{ f.modified }}</td>

              {# ── WindInput link ── #}
              <td>
                {% if f.wind_input %}
                <a href="{% url 'dashboard-browse' 'WindInput' %}?id={{ f.wind_input.id }}"
                   class="chip teal lighten-4" style="font-size:0.78rem; cursor:pointer;">
                  <span class="material-symbols-outlined" style="font-size:0.9rem; vertical-align:middle;">link</span>
                  #{{ f.wind_input.id }} {{ f.wind_input.name }}
                </a>
                {% else %}
                <span class="grey-text" style="font-size:0.8rem;">not linked</span>
                {% endif %}
              </td>

              {# ── duration / resolution ── #}
              <td>
                {% if f.ts_n_hours %}
                <div class="wi-row-meta">
                  {# implied years #}
                  {% with years=f.ts_n_hours|floatformat:"-2" %}
                  <span class="wi-years-badge">
                    <span class="material-symbols-outlined" style="font-size:0.8rem;">calendar_month</span>
                    {{ f.ts_n_hours }} h
                    {% if f.ts_n_hours >= 8760 %}
                    &nbsp;(~{% widthratio f.ts_n_hours 8760 1 %} yr)
                    {% endif %}
                  </span>
                  {% endwith %}
                  {# resolution #}
                  {% if f.ts_resolution %}
                  <span class="wi-badge">
                    <span class="wi-badge-label">step</span>
                    {% if f.ts_resolution < 60 %}{{ f.ts_resolution|floatformat:1 }} s
                    {% elif f.ts_resolution < 3600 %}{% widthratio f.ts_resolution 60 1 %} min
                    {% else %}hourly{% endif %}
                  </span>
                  {% endif %}
                </div>
                {% else %}
                <span class="grey-text" style="font-size:0.8rem;">—</span>
                {% endif %}
              </td>

              {# ── HDF5 datasets ── #}
              <td>
                {% if f.h5_datasets %}
                <div style="display:flex; flex-direction:column; align-items:flex-start;">
                  {% for ds in f.h5_datasets|parse_h5_datasets %}
                  <span class="ds-badge">
                    <span class="ds-name">{{ ds.path }}</span>
                    {% if ds.shape %}<span class="ds-shape">{{ ds.shape }}</span>{% endif %}
                    {% if ds.dtype %}<span class="ds-dtype">{{ ds.dtype }}</span>{% endif %}
                  </span>
                  {% endfor %}
                </div>
                {% else %}
                <span class="grey-text">—</span>
                {% endif %}
              </td>

            </tr>
            {% endfor %}
          </tbody>
        </table>
        </div>
        {% else %}
        <p id="empty-msg" class="grey-text text-darken-1" style="margin-top:8px;">
          No HDF5 files found in the storage directory.
        </p>
        {% endif %}
      </div>
    </div>
    </div>
</div>

<!-- ── JavaScript ───────────────────────────────────────────────────────── -->
<script>
(function () {
  const dropZone   = document.getElementById('drop-zone');
  const fileInput  = document.getElementById('file-input');
  const uploadList = document.getElementById('upload-list');
  const uploadBtn  = document.getElementById('upload-btn');
  const uploadStatus = document.getElementById('upload-status');

  let pendingFiles = [];

  // ── Drop zone interactions ───────────────────────────────────────────
  dropZone.addEventListener('click', () => fileInput.click());

  dropZone.addEventListener('dragover', e => {
    e.preventDefault();
    dropZone.style.background = '#e0f7f5';
    dropZone.style.borderColor = '#26A69A';
  });
  dropZone.addEventListener('dragleave', () => {
    dropZone.style.background = '#f9fffe';
    dropZone.style.borderColor = '#80CBC4';
  });
  dropZone.addEventListener('drop', e => {
    e.preventDefault();
    dropZone.style.background = '#f9fffe';
    dropZone.style.borderColor = '#80CBC4';
    addFiles(Array.from(e.dataTransfer.files));
  });
  fileInput.addEventListener('change', () => {
    addFiles(Array.from(fileInput.files));
    fileInput.value = '';
  });

  function addFiles(files) {
    files.forEach(f => {
      if (!/\.(h5|hdf5|hdf)$/i.test(f.name)) {
        M.toast({html: `<span>${f.name} – not a recognised HDF5 file</span>`, classes: 'red lighten-1'});
        return;
      }
      if (pendingFiles.find(p => p.name === f.name)) return;
      pendingFiles.push(f);

      const li = document.createElement('li');
      li.id = 'pending-' + f.name.replace(/[^a-zA-Z0-9]/g, '_');
      li.style.cssText = 'display:flex; align-items:center; padding:6px 0; border-bottom:1px solid #eee; font-size:0.88rem;';
      li.innerHTML = `
        <span class="material-symbols-outlined" style="font-size:1rem; color:#80CBC4; margin-right:8px;">description</span>
        <span style="flex:1;">${escHtml(f.name)}</span>
        <span class="grey-text" style="margin-right:12px;">${(f.size/1e6).toFixed(2)} MB</span>
        <span class="pending-badge" style="background:#eee; color:#555; border-radius:4px; padding:2px 8px; font-size:0.78rem;">Queued</span>
      `;
      uploadList.appendChild(li);
    });
    uploadBtn.classList.toggle('disabled', pendingFiles.length === 0);
  }

  function escHtml(s) {
    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }

  // ── Upload ───────────────────────────────────────────────────────────
  uploadBtn.addEventListener('click', () => {
    if (!pendingFiles.length) return;
    uploadBtn.classList.add('disabled');
    uploadStatus.textContent = 'Uploading…';

    const fd = new FormData();
    pendingFiles.forEach((f, i) => fd.append('file_' + i, f, f.name));

    fetch("{% url 'dashboard-wind-data-upload' %}", {
      method: 'POST',
      headers: {'X-CSRFToken': getCookie('csrftoken')},
      body: fd,
    })
    .then(r => r.json())
    .then(data => {
      const saved  = data.saved  || [];
      const errors = data.errors || [];

      saved.forEach(s => {
        setBadge(s.name, 'teal lighten-2 white-text', '✓ Saved');
        appendRow(s.name, s.size_mb, s.wind_input_id);
      });
      errors.forEach(e => {
        const name = e.split(':')[0];
        setBadge(name, 'red lighten-2 white-text', '✗ Error');
        M.toast({html: escHtml(e), classes: 'red lighten-1', displayLength: 5000});
      });

      pendingFiles = pendingFiles.filter(f => !saved.find(s => s.name === f.name));
      uploadStatus.textContent = saved.length
        ? `${saved.length} file${saved.length > 1 ? 's' : ''} saved.`
        : '';
      if (!pendingFiles.length) uploadBtn.classList.add('disabled');
      else uploadBtn.classList.remove('disabled');

      const emptyMsg = document.getElementById('empty-msg');
      if (emptyMsg && saved.length) emptyMsg.style.display = 'none';
    })
    .catch(err => {
      uploadStatus.textContent = 'Upload failed: ' + err;
      uploadBtn.classList.remove('disabled');
    });
  });

  function setBadge(filename, classes, text) {
    const li = document.getElementById('pending-' + filename.replace(/[^a-zA-Z0-9]/g, '_'));
    if (!li) return;
    const badge = li.querySelector('.pending-badge');
    if (badge) { badge.className = ''; badge.classList.add(...classes.split(' ')); badge.style.cssText = 'border-radius:4px; padding:2px 8px; font-size:0.78rem;'; badge.textContent = text; }
  }

  function appendRow(name, size_mb, wind_input_id) {
    let tbody = document.getElementById('file-table-body');
    if (!tbody) {
      const card = document.querySelector('.card-content:last-of-type');
      const tbl = document.createElement('table');
      tbl.className = 'striped';
      tbl.style.fontSize = '0.85rem';
      tbl.innerHTML = `<thead><tr>
        <th>File name</th>
        <th style="text-align:right;width:80px;">Size (MB)</th>
        <th style="width:150px;">Last modified</th>
        <th style="width:110px;">WindInput</th>
        <th style="width:80px;text-align:right;">Hours</th>
        <th style="width:80px;text-align:right;">Step (s)</th>
        <th style="width:100px;text-align:right;">Time range (s)</th>
        <th>Datasets</th>
      </tr></thead><tbody id="file-table-body"></tbody>`;
      card.appendChild(tbl);
      tbody = document.getElementById('file-table-body');
    }
    if (tbody.querySelector(`tr[data-name="${CSS.escape(name)}"]`)) return;
    const tr = document.createElement('tr');
    tr.dataset.name = name;
    const now = new Date().toISOString().slice(0,16).replace('T',' ');
    const wiCell = wind_input_id
      ? `<a href="/browse/WindInput?id=${wind_input_id}" class="chip teal lighten-4" style="font-size:0.78rem;cursor:pointer;">
           <span class="material-symbols-outlined" style="font-size:0.9rem;vertical-align:middle;">link</span> #${wind_input_id}</a>`
      : `<span class="grey-text" style="font-size:0.8rem;">—</span>`;
    tr.innerHTML = `<td>
      <span class="material-symbols-outlined" style="font-size:1rem;vertical-align:middle;color:#80CBC4;margin-right:4px;">data_object</span>
      ${escHtml(name)}</td>
      <td style="text-align:right;">${size_mb}</td>
      <td class="grey-text">${now}</td>
      <td>${wiCell}</td>
      <td style="text-align:right;font-family:monospace;">—</td>
      <td style="text-align:right;font-family:monospace;">—</td>
      <td style="text-align:right;font-family:monospace;">—</td>
      <td style="font-size:0.75rem;color:#607d8b;">—</td>`;
    tbody.appendChild(tr);
  }

  // ── Save directory ───────────────────────────────────────────────────
  saveDirBtn.addEventListener('click', () => {
    const newDir = dirInput.value.trim();
    if (!newDir) return;
    dirFeedback.textContent = 'Saving…';
    fetch("{% url 'dashboard-wind-data-set-dir' %}", {
      method: 'POST',
      headers: {'X-CSRFToken': getCookie('csrftoken'), 'Content-Type': 'application/x-www-form-urlencoded'},
      body: 'wind_data_dir=' + encodeURIComponent(newDir),
    })
    .then(r => r.json())
    .then(data => {
      if (data.error) {
        dirFeedback.textContent = '✗ ' + data.error;
        dirFeedback.style.color = '#e53935';
      } else {
        dirInput.value = data.wind_data_dir;
        dirFeedback.textContent = '✓ Saved to config.yaml';
        dirFeedback.style.color = '#00796b';
      }
    })
    .catch(err => {
      dirFeedback.textContent = 'Error: ' + err;
      dirFeedback.style.color = '#e53935';
    });
  });

  // ── CSRF helper ──────────────────────────────────────────────────────
  function getCookie(name) {
    const m = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
    return m ? m.pop() : '';
  }
})();
</script>
{% endblock %}