@extends('layouts.admin')

@section('title', 'UID Checker')

@section('content')
<div class="container-fluid">
  <div class="row g-4 mb-4">
    <div class="col-12 col-lg-8">
      <div class="card shadow-sm">
        <div class="card-header bg-body-tertiary d-flex align-items-center">
          <span class="me-2" data-feather="upload"></span>
          <h5 class="mb-0">Upload CSV/XLSX to Check UIDs</h5>
        </div>
  <div class="card-body" style="max-height: calc(100vh - 240px); overflow:auto;">
          <p class="text-body-secondary mb-3">We will detect the UID column automatically (IT-UID, REG-UID, REG-ID, etc.). Matching UIDs will be highlighted in light green, non-matching in orange. The processed file will download in the same format (CSV note: colors require XLSX; CSV gets an extra STATUS column if needed).</p>

          <form id="uidcheck-form" method="POST" action="{{ route('admin.uid-checker.process') }}" enctype="multipart/form-data" class="needs-validation" novalidate>
            @csrf
            <div class="mb-3">
              <label for="file" class="form-label">Select file (.csv, .xlsx, .xls)</label>
              <input class="form-control @error('file') is-invalid @enderror" id="file" name="file" type="file" accept=".csv,.xlsx,.xls" required>
              @error('file')
                <div class="invalid-feedback d-block">{{ $message }}</div>
              @enderror
              <div class="form-text">Max 10 MB. By default all sheets will be processed; use the picker below to limit.</div>
            </div>

            <div class="mb-3">
              <label for="sheets" class="form-label">Sheets to include (Excel)</label>
              <select class="form-select" id="sheets" name="sheets[]" multiple></select>
              <div class="form-text">Leave empty to include all sheets.</div>
              <div class="mt-1 d-flex gap-2">
                <button class="btn btn-sm btn-outline-secondary" type="button" id="sheets-select-all">Select All</button>
                <button class="btn btn-sm btn-outline-secondary" type="button" id="sheets-clear-all">Clear</button>
              </div>
            </div>

            <div class="d-flex align-items-center gap-3">
              <button class="btn btn-primary" id="uidcheck-submit" type="submit">
                <span class="me-1" data-feather="check-circle"></span>
                Process & Download
              </button>
              <div id="uidcheck-progress-wrap" class="flex-grow-1 d-none">
                <div class="progress" style="height:8px;">
                  <div id="uidcheck-progress" class="progress-bar" role="progressbar" style="width:0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <div id="uidcheck-progress-text" class="small text-body-secondary mt-1">Preparing…</div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-4">
      <div class="card mb-3">
        <div class="card-header bg-body-tertiary d-flex align-items-center justify-content-between">
          <h6 class="mb-0">Run Queue</h6>
          <small class="text-body-secondary" id="uidq-status">Idle</small>
        </div>
        <div class="card-body" style="max-height: calc(100vh - 260px); overflow:auto;">
          <div id="uidq-docs" class="vstack gap-2"></div>
        </div>
      </div>
      <div class="card h-100">
        <div class="card-header bg-body-tertiary">
          <h6 class="mb-0">How it works</h6>
        </div>
  <div class="card-body" style="max-height: calc(100vh - 260px); overflow:auto;">
          <ul class="mb-0">
            <li>We search header row for: IT-UID, REG-UID, REG-ID, IT-ID, UID.</li>
            <li>We check against portal_users.reg_uid and portal_users.old_uid.</li>
            <li>Green = found, Orange = not found.</li>
            <li>CSV downloads may include a STATUS column if colors aren’t supported.</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('scripts')
  {{-- SweetAlert2 for success message --}}
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script>
    (function(){
      const form = document.getElementById('uidcheck-form');
      const fileInput = document.getElementById('file');
  const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
  const sheetsSelect = document.getElementById('sheets');
      // Queue UI helpers (sheet-wise under the selected document)
      const qWrap = document.getElementById('uidq-docs');
      const qStatus = document.getElementById('uidq-status');
      let qTotals = 0; let qDone = 0;
      const uidQueueInit = (docName, sheets) => {
        if (!qWrap) return;
        qWrap.innerHTML = '';
        qStatus.textContent = sheets && sheets.length ? 'Queued' : 'Idle';
        qTotals = Array.isArray(sheets) ? sheets.length : 0;
        qDone = 0;
        const items = (Array.isArray(sheets) ? sheets : ['Dataset']).map((s, idx) => `
          <li class="list-group-item d-flex justify-content-between align-items-center" data-ti="${idx}">
            <div class="d-flex align-items-center gap-2">
              <span class="status-icon">⏳</span>
              <span>${s}</span>
            </div>
            <span class="badge bg-secondary">Pending</span>
          </li>`).join('');
        const html = `
          <div class="card border-0">
            <div class="card-header py-2 bg-light">
              <div class="d-flex justify-content-between align-items-center">
                <strong>${docName || 'Document'}</strong>
                <small class="text-body-secondary" id="uidq-doc-status">Pending (0/${qTotals || 1})</small>
              </div>
              <div class="progress mt-1" style="height:6px;">
                <div id="uidq-doc-prog" class="progress-bar" role="progressbar" style="width:0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
            <ul class="list-group list-group-flush small">${items}</ul>
          </div>`;
        qWrap.insertAdjacentHTML('beforeend', html);
      };
      const uidQueueMarkRunning = (ti) => {
        const li = qWrap?.querySelector(`li[data-ti='${ti}']`);
        if (!li) return;
        const badge = li.querySelector('.badge');
        badge?.classList?.remove('bg-secondary','bg-success','bg-danger');
        badge?.classList?.add('bg-info');
        badge.textContent = 'Running';
        const icon = li.querySelector('.status-icon');
        if (icon) icon.textContent = '⏳';
        const st = document.getElementById('uidq-doc-status');
        if (st) st.textContent = `Running (${qDone}/${qTotals || 1})`;
      };
      const uidQueueMarkDone = (ti, countText) => {
        const li = qWrap?.querySelector(`li[data-ti='${ti}']`);
        if (!li) return;
        const badge = li.querySelector('.badge');
        badge?.classList?.remove('bg-secondary','bg-info','bg-danger');
        badge?.classList?.add('bg-success');
        badge.textContent = countText != null ? String(countText) : 'Done';
        const icon = li.querySelector('.status-icon');
        if (icon) icon.textContent = '✓';
        qDone += 1;
        const pct = Math.round(((qDone)/(qTotals || 1))*100);
        const pBar = document.getElementById('uidq-doc-prog');
        if (pBar) { pBar.style.width = pct + '%'; pBar.setAttribute('aria-valuenow', String(pct)); }
        const st = document.getElementById('uidq-doc-status');
        if (st) st.textContent = (qDone >= (qTotals||1)) ? `Completed (${qDone}/${qTotals||1})` : `Running (${qDone}/${qTotals||1})`;
        if (qDone >= (qTotals||1)) qStatus.textContent = 'Completed';
      };
      const uidQueueMarkFailed = (ti) => {
        const li = qWrap?.querySelector(`li[data-ti='${ti}']`);
        if (!li) return;
        const badge = li.querySelector('.badge');
        badge?.classList?.remove('bg-secondary','bg-info','bg-success');
        badge?.classList?.add('bg-danger');
        badge.textContent = 'Failed';
        const icon = li.querySelector('.status-icon');
        if (icon) icon.textContent = '✖';
        const st = document.getElementById('uidq-doc-status');
        if (st) st.textContent = 'Failed';
        qStatus.textContent = 'Failed';
      };
      const uidQueueReset = () => {
        if (qWrap) qWrap.innerHTML = '';
        if (qStatus) qStatus.textContent = 'Idle';
      };
      // Populate sheets picker when a file is chosen (Excel only)
  fileInput?.addEventListener('change', function(){
        const file = this.files && this.files[0];
        if (!file) return;
        const name = file.name.toLowerCase();
        // Clear options first
        sheetsSelect.innerHTML = '';
        if (!(name.endsWith('.xlsx') || name.endsWith('.xls'))) { return; }
        // Ask backend for sheet names via a lightweight list_sheets call
        const fd = new FormData();
        fd.append('file', file);
        fd.append('list_sheets', '1');
        if (csrf) fd.append('_token', csrf);
        fetch('{{ route('admin.uid-checker.process') }}', { method:'POST', headers:{ 'X-Requested-With':'XMLHttpRequest', 'X-CSRF-TOKEN': csrf }, body: fd })
          .then(async (res) => { if (!res.ok) throw new Error(await res.text()); return res.json(); })
          .then((data) => {
            if (Array.isArray(data.sheets)) {
              data.sheets.forEach(n => {
                const opt = document.createElement('option');
                opt.value = n; opt.textContent = n;
                sheetsSelect.appendChild(opt);
              });
      // Initialize Queue UI with sheet names
      uidQueueInit(file.name, data.sheets);
            }
          })
          .catch(()=>{});
      });

      document.getElementById('sheets-select-all')?.addEventListener('click', function(){
        Array.from(sheetsSelect.options).forEach(o => o.selected = true);
      });
      document.getElementById('sheets-clear-all')?.addEventListener('click', function(){
        Array.from(sheetsSelect.options).forEach(o => o.selected = false);
      });
      const submitBtn = document.getElementById('uidcheck-submit');
      const wrap = document.getElementById('uidcheck-progress-wrap');
      const bar = document.getElementById('uidcheck-progress');
      const txt = document.getElementById('uidcheck-progress-text');
      const setProgress = (p, label) => {
        const v = Math.max(0, Math.min(100, Math.round(p||0)));
        bar.style.width = v + '%';
        bar.setAttribute('aria-valuenow', String(v));
        txt.textContent = label || '';
      };

      form?.addEventListener('submit', function(e){
        if (!fileInput?.files?.length) {
          e.preventDefault();
          Swal.fire({ icon: 'warning', title: 'No file selected', text: 'Please choose a CSV/XLSX/XLS file.' });
          return;
        }
        e.preventDefault();
        submitBtn.disabled = true;
        wrap.classList.remove('d-none');
        setProgress(5, 'Uploading…');

        const fd = new FormData(form);
        // Ensure CSRF token is present in the form data (redundant safety)
        if (csrf && !fd.has('_token')) fd.append('_token', csrf);
  // Attach selected sheets names if any (client-side only; backend uses all sheets currently)
  const chosen = Array.from(sheetsSelect.options).filter(o => o.selected).map(o => o.value);
  chosen.forEach(s => fd.append('sheets[]', s));
        // Queue start (sheet 0 as running visual)
        if (chosen.length) { uidQueueInit(fileInput.files[0]?.name, chosen); uidQueueMarkRunning(0); }
        else if (sheetsSelect.options.length) { const all = Array.from(sheetsSelect.options).map(o=>o.value); uidQueueInit(fileInput.files[0]?.name, all); uidQueueMarkRunning(0); }
        else { uidQueueInit(fileInput.files[0]?.name, ['Dataset']); uidQueueMarkRunning(0); }
        fetch(form.action, { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': csrf }, body: fd })
          .then(async (res) => { if (!res.ok) throw new Error(await res.text()); return res.json(); })
          .then((data) => {
            setProgress(90, 'Finalizing…');
            let html = '';
            if (Array.isArray(data.stats)) {
              html += '<ul class="list-group mb-2">';
              data.stats.forEach((s, idx) => {
                const total = (s.found||0) + (s.missing||0);
                const badge = `<span class=\"badge bg-primary rounded-pill\">${(s.found||0)}/${total}</span>`;
                html += `<li class=\"list-group-item d-flex justify-content-between align-items-center\">${(s.sheet||'Sheet')} ${badge}</li>`;
                uidQueueMarkDone(idx, `${(s.found||0)}/${total}`);
              });
              html += '</ul>';
            } else {
              uidQueueMarkDone(0, 'Done');
            }
            setProgress(100, 'Completed');
            Swal.fire({ icon: 'success', title: 'Processed', html: html || 'Completed.', confirmButtonText: 'Download' })
              .then(() => {
                if (data && data.download_url) {
                  // Open download in new tab and reset UI
                  window.open(data.download_url, '_blank');
                }
                // Reset to original state
                form.reset();
                sheetsSelect.innerHTML = '';
                setProgress(0, '');
                wrap.classList.add('d-none');
                uidQueueReset();
              });
          })
          .catch((err) => { Swal.fire({ icon: 'error', title: 'Failed', text: (err && err.message) ? err.message : 'Processing failed.' }); })
          .finally(() => { submitBtn.disabled = false; setProgress(0, ''); wrap.classList.add('d-none'); });
      });

      // Fallback for server-driven flash flow (non-AJAX)
      const token = @json(session('download_token'));
      const successMsg = @json(session('success'));
      if (token && successMsg) {
        const url = @json(route('admin.uid-checker.download', ['token' => 'TOKEN_PLACEHOLDER']));
        const finalUrl = url.replace('TOKEN_PLACEHOLDER', token);
        Swal.fire({ icon: 'success', title: 'Processed', text: successMsg, confirmButtonText: 'OK' })
          .then(() => { window.location.href = finalUrl; setTimeout(() => { window.location.reload(); }, 1000); });
      }
    })();
  </script>
@endsection