@extends('layouts.app')
@section('title', 'Import Dashboard · QA Dashboard')

@section('content')
<section>
  <h2>Import Dashboard</h2>
  <p class="muted">Upload each project's BA target sheet as <strong>CSV</strong> (in Google Sheets: File → Download → CSV). Its stories become that project's <strong>Quarter Targets</strong>: rows with a Jira key auto-link; keyless rows are title-matched for you to confirm. Every import shows you what it found first — nothing is saved until you confirm it.</p>

  @if (session('status'))<div class="alert ok">{{ session('status') }}</div>@endif
  @if ($errors->any())<div class="alert error">{{ $errors->first() }}</div>@endif

  @foreach ($projects as $name => $p)
  <div class="account-form" style="margin-bottom:1rem">
    <h3>{{ $name }}
      @if ($p['total'])<span class="badge status-done" style="margin-left:.5rem">{{ $p['total'] }} stories imported</span>@endif
    </h3>
    <form method="post" action="/import-dashboard/{{ $name }}/upload" enctype="multipart/form-data"
          data-preview="/import-dashboard/{{ $name }}/preview-csv" data-kind="csv"
          style="display:flex;gap:.75rem;align-items:end;flex-wrap:wrap">
      @csrf
      <div class="dz-field">
        <span class="dz-label">Quarter</span>
        <select name="quarter" required>
          @foreach ($quarters as $q)<option value="{{ $q }}">{{ $q }}</option>@endforeach
        </select>
      </div>
      <div class="dz-field dz-grow">
        <span class="dz-label">CSV file</span>
        <label class="dropzone"
               x-data="{ over:false, name:'', set(fs){ if(fs && fs.length){ this.$refs.f.files = fs; this.name = fs[0].name; } } }"
               @dragover.prevent="over=true" @dragleave.prevent="over=false"
               @drop.prevent="over=false; set($event.dataTransfer.files)"
               :class="{ over: over }">
          <input type="file" name="file" accept=".csv,text/csv" required class="dz-input" x-ref="f"
                 @change="name = $event.target.files.length ? $event.target.files[0].name : ''">
          <span class="dz-icon">⬆</span>
          <span class="dz-text" x-text="name || 'Drag &amp; drop CSV here, or click to browse'"></span>
        </label>
      </div>
      <button type="submit">Import {{ $name }}</button>
      @if ($p['quarters'])
        <a href="/quarter-targets/{{ $name }}"><button type="button" class="wk-confirm-cancel">Open targets</button></a>
      @endif
    </form>

    <div class="import-or"><span>or add a single Jira story by link</span></div>
    <form method="post" action="/import-dashboard/{{ $name }}/from-link"
          data-preview="/import-dashboard/{{ $name }}/preview-link" data-kind="link"
          style="display:flex;gap:.75rem;align-items:end;flex-wrap:wrap">
      @csrf
      <div class="dz-field">
        <span class="dz-label">Quarter</span>
        <select name="quarter" required>
          @foreach ($quarters as $q)<option value="{{ $q }}">{{ $q }}</option>@endforeach
        </select>
      </div>
      <div class="dz-field dz-grow">
        <span class="dz-label">Jira link or key</span>
        <input type="text" name="jira_link" placeholder="e.g. https://bellkenz.atlassian.net/browse/ESCM-1234 or ESCM-1234" required>
      </div>
      <button type="submit">Add story</button>
    </form>
    <p class="muted" style="margin-top:.5rem">Adds one Jira issue as a confirmed target <strong>without</strong> replacing the existing list — for when the BA target sheet isn't ready yet. The issue must already be in the synced Jira cache.</p>

    @if ($name === 'SMPP')
    <div class="import-or"><span>or generate from an Epic Link</span></div>
    <form method="post" action="/import-dashboard/{{ $name }}/from-epic"
          data-preview="/import-dashboard/{{ $name }}/preview-epic" data-kind="epic"
          style="display:flex;gap:.75rem;align-items:end;flex-wrap:wrap">
      @csrf
      <div class="dz-field">
        <span class="dz-label">Quarter</span>
        <select name="quarter" required>
          @foreach ($quarters as $q)<option value="{{ $q }}">{{ $q }}</option>@endforeach
        </select>
      </div>
      <div class="dz-field dz-grow">
        <span class="dz-label">Epic Link</span>
        <input type="text" name="epic_key" placeholder="e.g. PSCOR-1234" required style="text-transform:uppercase">
      </div>
      <button type="submit">Generate from Epic</button>
    </form>
    <p class="muted" style="margin-top:.5rem">Lists all issues whose Epic Link is that epic (Stories, Tasks or Sub-tasks) as targets, with the epic as their parent; each item's linked Bugs, Sub-tasks and Tasks appear under it on the Status page.</p>
    @endif

    @if (!empty($p['by_quarter']))
      <div class="import-imports">
        <div class="import-imports-label">Imported quarters</div>
        @foreach ($p['by_quarter'] as $q => $c)
          <div class="import-quarter">
            <span class="import-quarter-name">{{ $q }} <span class="muted">· {{ $c }} stories</span></span>
            <a href="/quarter-targets/{{ $name }}?quarter={{ $q }}" class="import-quarter-open">Open</a>
            <form method="post" action="/import-dashboard/{{ $name }}/delete" style="display:inline;margin:0"
                  onsubmit="return confirm('Delete the {{ $name }} {{ $q }} import entirely ({{ $c }} stories)? This cannot be undone.')">
              @csrf
              <input type="hidden" name="quarter" value="{{ $q }}">
              <button type="submit" class="wk-del">Delete</button>
            </form>
          </div>
        @endforeach
      </div>
    @endif
  </div>
  @endforeach

  <p class="muted" style="margin-top:1rem">Expected columns: a story/title column (e.g. <code>Story</code>, <code>Title</code>, <code>Target story</code>) and, where available, a Jira key column (<code>Jira</code>, <code>Key</code>, <code>Issue</code>). Re-importing a quarter replaces its list and keeps your prior confirmed matches.</p>
</section>

{{-- ── Import preview ───────────────────────────────────────────────────────────
     Every import form is intercepted: it POSTs to its /preview-* endpoint first,
     which parses/fetches WITHOUT writing, and the result is listed here. Save
     submits the original form (the real import); Cancel closes and clears it.

     The styles and script are inline because this box needs no build step —
     Vite assets are prebuilt in public/build and Node isn't installed here. --}}
<div class="wk-modal" id="imp-modal" hidden>
  <div class="wk-modal-card imp-card">
    <div class="wk-modal-head">
      <strong data-role="title">Import preview</strong>
      <button type="button" class="wk-modal-close" data-role="dismiss" aria-label="Close">✕</button>
    </div>
    <div class="imp-body" data-role="body"></div>
    <div class="wk-confirm-actions">
      <button type="button" class="wk-confirm-cancel" data-role="cancel">Cancel</button>
      <button type="button" class="wk-modal-save" data-role="save">Save</button>
    </div>
  </div>
</div>

<style>
  #imp-modal .imp-card { width: min(900px, 94vw); max-height: 86vh; display: flex; flex-direction: column; }
  #imp-modal .imp-body { padding: 1rem 1.1rem; overflow: auto; }
  #imp-modal .imp-sum { color: var(--muted); font-size: .85rem; margin-bottom: .75rem; }
  #imp-modal .imp-parent { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .75rem; margin-bottom: .9rem; }
  #imp-modal .imp-parent .imp-k { font-weight: 600; }
  #imp-modal .imp-grp { font-weight: 600; font-size: .85rem; margin: .9rem 0 .35rem; }
  #imp-modal table.imp-t { width: 100%; border-collapse: collapse; font-size: .82rem; }
  #imp-modal .imp-t th, #imp-modal .imp-t td { text-align: left; padding: .35rem .5rem;
    border-bottom: 1px solid var(--line); vertical-align: top; }
  #imp-modal .imp-t th { position: sticky; top: 0; background: var(--card); z-index: 1; }
  #imp-modal .imp-t td.imp-n { color: var(--muted); width: 2.4rem; }
  #imp-modal .imp-k { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
  #imp-modal .imp-err { color: #dc2626; }
  #imp-modal .imp-note { color: var(--muted); font-size: .8rem; margin-top: .6rem; }
  #imp-modal .badge { font-size: .72rem; }
</style>

<script>
(function () {
  var modal = document.getElementById('imp-modal');
  if (!modal) return;

  var titleEl  = modal.querySelector('[data-role=title]');
  var bodyEl   = modal.querySelector('[data-role=body]');
  var saveBtn  = modal.querySelector('[data-role=save]');
  var activeForm = null;

  // app.js watches for a visible .wk-modal and applies the shell blur itself, so
  // toggling `hidden` is all we do here — setting the class too would fight it.
  function openModal()  { modal.hidden = false; }
  function closeModal() { modal.hidden = true; activeForm = null; }

  function esc(s) {
    return String(s === null || s === undefined ? '' : s).replace(/[&<>"']/g, function (c) {
      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
    });
  }

  // Cancel clears every field so a rejected preview leaves nothing staged. The
  // file input's Alpine label listens on `change`, so fire one after reset to
  // put "Drag & drop CSV here" back.
  function clearForm(form) {
    if (!form) return;
    form.reset();
    form.querySelectorAll('input[type=file]').forEach(function (i) {
      i.dispatchEvent(new Event('change', { bubbles: true }));
    });
  }

  function cancel() {
    var form = activeForm;
    closeModal();
    clearForm(form);
  }

  function badge(ok, yes, no) {
    return '<span class="badge ' + (ok ? 'status-done' : 'status-progress') + '">' + esc(ok ? yes : no) + '</span>';
  }

  function renderCsv(d) {
    var shown = d.rows.slice(0, 500);
    var h = '<div class="imp-sum"><strong>' + esc(d.filename) + '</strong> — ' + d.total +
      ' target' + (d.total === 1 ? '' : 's') + ' found · ' + d.matched + ' auto-link, ' + d.pending + ' to confirm' +
      (d.not_developed ? ' · ' + d.not_developed + ' not yet in development' : '') + '.' +
      (d.replaces ? ' <strong>Replaces</strong> the ' + d.replaces + ' row' + (d.replaces === 1 ? '' : 's') +
        ' already imported for ' + esc(d.project) + ' ' + esc(d.quarter) + '.' : '') + '</div>';
    h += '<table class="imp-t"><thead><tr><th>#</th><th>Story</th><th>Jira key</th><th>Match</th></tr></thead><tbody>';
    shown.forEach(function (r, i) {
      h += '<tr><td class="imp-n">' + (i + 1) + '</td><td>' + esc(r.title) +
        (r.not_developed ? ' <span class="muted">· not developed</span>' : '') + '</td>' +
        '<td class="imp-k">' + esc(r.key || '—') + '</td>' +
        '<td>' + badge(r.matched, 'auto-link', 'to confirm') + '</td></tr>';
    });
    h += '</tbody></table>';
    if (d.rows.length > shown.length) {
      h += '<p class="imp-note">Showing the first ' + shown.length + ' of ' + d.rows.length +
        ' rows. All ' + d.rows.length + ' will be imported.</p>';
    }
    return h;
  }

  function parentCard(key, title, type, status) {
    return '<div class="imp-parent"><span class="imp-k">' + esc(key) + '</span>' +
      (type ? ' <span class="badge">' + esc(type) + '</span>' : '') +
      (status ? ' <span class="badge">' + esc(status) + '</span>' : '') +
      '<div>' + esc(title || '') + '</div></div>';
  }

  function relTable(rows) {
    var h = '<table class="imp-t"><thead><tr><th>Key</th><th>Type</th><th>Summary</th><th>Status</th></tr></thead><tbody>';
    rows.forEach(function (r) {
      h += '<tr><td class="imp-k">' + esc(r.key) + '</td><td>' + esc(r.type || '—') + '</td>' +
        '<td>' + esc(r.summary || '') + '</td><td>' + esc(r.status || '—') + '</td></tr>';
    });
    return h + '</tbody></table>';
  }

  function renderLink(d) {
    var h = '<div class="imp-sum">Adds <span class="imp-k">' + esc(d.key) + '</span> as a target for ' +
      esc(d.project) + ' ' + esc(d.quarter) + '.' +
      (d.already ? ' <strong>It is already a target</strong> — saving changes nothing.' : '') + '</div>';
    h += '<div class="imp-grp">Target</div>' + parentCard(d.key, d.title, d.type, d.status);

    var rel = d.related || [];
    if (!rel.length) {
      h += '<p class="imp-note">Nothing else links to this issue yet.</p>';
      return h;
    }
    // Group so bugs, tasks and sub-tasks are each easy to spot.
    var order = ['Bug', 'Sub-task', 'Subtask', 'Task', 'Story'];
    var groups = {};
    rel.forEach(function (r) {
      var k = r.type || 'Other';
      (groups[k] = groups[k] || []).push(r);
    });
    var names = Object.keys(groups).sort(function (a, b) {
      var ia = order.indexOf(a), ib = order.indexOf(b);
      return (ia < 0 ? 99 : ia) - (ib < 0 ? 99 : ib);
    });
    var total = (d.related_total === undefined ? rel.length : d.related_total);
    h += '<div class="imp-grp">Linked work — ' + total + ' item' + (total === 1 ? '' : 's') +
      ' that will appear under it on the Status page' +
      (total > rel.length ? ' <span class="muted">(showing the first ' + rel.length + ')</span>' : '') + '</div>';
    names.forEach(function (n) {
      h += '<div class="imp-grp">' + esc(n) + ' <span class="muted">· ' + groups[n].length + '</span></div>' +
        relTable(groups[n]);
    });
    return h;
  }

  function renderEpic(d) {
    var h = '<div class="imp-sum">' + d.total + ' target' + (d.total === 1 ? '' : 's') + ' under ' +
      '<span class="imp-k">' + esc(d.epic) + '</span> · ' + d.from_structure + ' below it, ' +
      d.from_links + ' linked to those.' +
      (d.replaces ? ' <strong>Replaces</strong> the ' + d.replaces + ' row' + (d.replaces === 1 ? '' : 's') +
        ' already imported for ' + esc(d.project) + ' ' + esc(d.quarter) + '.' : '') + '</div>';
    h += '<div class="imp-grp">Parent</div>' + parentCard(d.epic, d.epic_title, null, null);
    h += '<div class="imp-grp">Targets — stories, tasks and sub-tasks</div>' + relTable(
      d.rows.map(function (r) { return { key: r.key, type: r.type, summary: r.summary, status: r.status }; })
    );
    var notes = [];
    if (d.skipped_bugs && d.skipped_bugs.length) notes.push(d.skipped_bugs.length + ' QA-filed bug(s) left out');
    if (d.skipped_containers && d.skipped_containers.length) notes.push(d.skipped_containers.length + ' epic/container(s) left out');
    if (d.truncated) notes.push('the tree was truncated at the resolver limit');
    if (notes.length) h += '<p class="imp-note">' + esc(notes.join(' · ')) + '.</p>';
    return h;
  }

  var renderers = { csv: renderCsv, link: renderLink, epic: renderEpic };

  document.querySelectorAll('form[data-preview]').forEach(function (form) {
    form.addEventListener('submit', function (ev) {
      ev.preventDefault();
      activeForm = form;

      var kind = form.getAttribute('data-kind');
      var quarter = (form.querySelector('[name=quarter]') || {}).value || '';
      titleEl.textContent = 'Import preview · ' + quarter;
      bodyEl.innerHTML = '<p class="muted">Reading…</p>';
      saveBtn.disabled = true;
      openModal();

      fetch(form.getAttribute('data-preview'), {
        method: 'POST',
        body: new FormData(form),
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
        credentials: 'same-origin'
      })
        .then(function (res) { return res.json().then(function (d) { return { ok: res.ok, d: d }; }); })
        .then(function (r) {
          if (!r.ok) {
            var msg = r.d.error || (r.d.errors ? Object.values(r.d.errors)[0][0] : 'Preview failed.');
            bodyEl.innerHTML = '<p class="imp-err">' + esc(msg) + '</p>';
            return;
          }
          bodyEl.innerHTML = (renderers[kind] || renderCsv)(r.d);
          saveBtn.disabled = false;
        })
        .catch(function (e) {
          bodyEl.innerHTML = '<p class="imp-err">' + esc('Preview failed: ' + e.message) + '</p>';
        });
    });
  });

  // Save runs the real import. form.submit() does not re-fire the submit event,
  // so this is not intercepted again.
  saveBtn.addEventListener('click', function () {
    if (!activeForm) return;
    saveBtn.disabled = true;
    saveBtn.textContent = 'Saving…';
    activeForm.submit();
  });

  modal.querySelector('[data-role=cancel]').addEventListener('click', cancel);
  modal.querySelector('[data-role=dismiss]').addEventListener('click', cancel);
  modal.addEventListener('click', function (ev) { if (ev.target === modal) cancel(); });
  document.addEventListener('keydown', function (ev) {
    if (ev.key === 'Escape' && !modal.hidden) cancel();
  });
})();
</script>
@endsection