{% extends "base.html" %}
{% block title %}Upload CAS · Networthy HQ{% endblock %}
{% block content %}

<section class="card narrow">
  <h1>Upload a CAS statement</h1>
  <p class="muted">
    Your NSDL CAS is a password-protected PDF. Select one or more — statements
    for different periods all share the same password (your PAN). Files and
    password are used only to parse each total; nothing is stored except the
    dated net-worth figures.
  </p>

  {% if error %}
  <div class="alert">{{ error }}</div>
  {% endif %}

  <form method="post" action="/upload" enctype="multipart/form-data">
    <label>
      CAS PDFs (one or more)
      <input type="file" name="files" accept="application/pdf" multiple required />
    </label>
    <label>
      PDF password
      <input type="password" name="password" placeholder="usually your PAN" />
    </label>
    <button class="btn btn-lg" type="submit">Parse &amp; save</button>
  </form>

  <p class="muted csv-note">
    No CAS, or it won't read? You can
    <a href="/import/csv">import holdings from any broker's CSV export</a> instead —
    Zerodha, Groww, ICICI Direct, Trendlyne and Screener all offer one.
  </p>

  <div id="upload-progress" class="upload-progress" hidden>
    <div class="up-bar"><div class="up-fill" id="up-fill"></div></div>
    <p class="up-status" id="up-status">Preparing…</p>
  </div>

  {% if results %}
  <div class="results">
    <h2>Results</h2>
    <ul class="result-list">
      {% for r in results %}
      <li class="{{ 'ok' if r.ok else 'fail' }}">
        <span class="r-icon" aria-hidden="true">{{ '✓' if r.ok else '✕' }}</span>
        <span class="r-body">
          <span class="r-file">{{ r.filename }}</span>
          <span class="r-msg">{{ r.message }}</span>
          {% if r.warn %}<span class="r-warn">{{ r.warn }} Saved anyway — the total is
          read from the statement and is right; it's the breakdown that's off.</span>{% endif %}

          {# A failure must never be the end of the page. Four of the five causes
             the reader can fix in seconds; the fifth is ours, and it gets an
             apology, a one-click report and a way to carry on regardless. #}
          {% if not r.ok %}
          <div class="r-help">
            {% if r.cause == 'password' %}
            <p><strong>Try the password again.</strong> For an NSDL CAS it's your
            <strong>PAN in capitals</strong>, no spaces — e.g. <code>ABCDE1234F</code>.
            Statements for different months all share it.</p>
            {% elif r.cause == 'scanned' %}
            <p><strong>This file is a picture, not a document.</strong> That happens when a
            statement is scanned or photographed. Download the original PDF from the email
            NSDL or CAMS sent you and upload that one.</p>
            {% elif r.cause == 'unreadable' %}
            <p><strong>That file didn't open as a PDF.</strong> Check it downloaded fully,
            and that it's the statement rather than a ZIP or an email attachment stub.</p>
            {% elif r.cause == 'layout' %}
            <p><strong>This one is our fault, not yours.</strong> The file opened and read
            fine — we just don't recognise how this statement is laid out. These formats
            change, and we can only fix the ones we hear about.</p>
            {% else %}
            <p>Something went wrong reading that file.</p>
            {% endif %}

            {% if r.diagnostic %}
            <details class="r-diag">
              <summary>Send us the shape of this file (no figures, no names)</summary>
              <p class="muted">
                This is <em>everything</em> that would be sent. Every letter is replaced with
                X and every digit with 9, so it describes the layout and nothing in it — no
                names, no amounts, no ISINs, no folio numbers. Read it first; it's yours.
              </p>
              <form method="post" action="/feedback">
                <input type="hidden" name="kind" value="bug">
                <input type="hidden" name="form_token" value="{{ form_token }}">
                <textarea name="message" rows="10" readonly>A statement failed to parse.

{{ r.diagnostic }}</textarea>
                <button class="btn" type="submit">Send this report</button>
              </form>
            </details>
            {% endif %}

            <p class="r-alts">
              Meanwhile you can still use everything: <a href="/networth">add your holdings
              by hand</a>, <a href="/import/csv">import a CSV from your broker</a>, or try a
              <a href="/networth/import/cams">CAMS mutual-fund statement</a> — a CAS is a
              shortcut, not a requirement.
            </p>
          </div>
          {% endif %}
        </span>
      </li>
      {% endfor %}
    </ul>
    {% if saved %}
    <a href="/" class="btn">View dashboard · {{ saved }} saved</a>
    {% endif %}
  </div>
  {% endif %}
</section>

<script>
// Progressive enhancement: submit via XHR so we can show upload progress and a
// parsing state. If JS is off, the plain <form> POST above still works.
(function () {
  const form = document.querySelector('form[action="/upload"]');
  if (!form || !window.XMLHttpRequest) return;

  const btn = form.querySelector('button[type="submit"]');
  const fileInput = form.querySelector('input[type="file"]');
  const box = document.getElementById('upload-progress');
  const fill = document.getElementById('up-fill');
  const status = document.getElementById('up-status');

  form.addEventListener('submit', function (e) {
    // Let native "required" validation handle the empty case.
    if (!fileInput.files || fileInput.files.length === 0) return;
    e.preventDefault();

    const n = fileInput.files.length;
    const noun = n === 1 ? 'file' : 'files';

    btn.disabled = true;
    btn.textContent = 'Uploading…';
    box.hidden = false;
    box.classList.remove('parsing');
    fill.style.width = '0%';
    status.textContent = 'Starting upload…';

    const xhr = new XMLHttpRequest();
    xhr.open('POST', form.action, true);

    xhr.upload.addEventListener('progress', function (ev) {
      if (!ev.lengthComputable) return;
      const pct = Math.round((ev.loaded / ev.total) * 100);
      fill.style.width = pct + '%';
      status.textContent = 'Uploading ' + n + ' ' + noun + ' — ' + pct + '%';
    });

    // Bytes are up; the server is now decrypting + parsing. Go indeterminate.
    xhr.upload.addEventListener('load', function () {
      fill.style.width = '100%';
      box.classList.add('parsing');
      btn.textContent = 'Parsing…';
      status.textContent =
        'Parsing ' + n + ' ' + (n === 1 ? 'statement…' : 'statements…');
    });

    // Response arrives (200 saved, or 400 all-failed) — either way it's the
    // rendered results page. Swap it in; document.write re-runs this script so
    // the next upload keeps the progress UI.
    xhr.addEventListener('load', function () {
      document.open();
      document.write(xhr.responseText);
      document.close();
    });

    xhr.addEventListener('error', function () {
      box.classList.remove('parsing');
      status.textContent = 'Upload failed — check the connection and try again.';
      btn.disabled = false;
      btn.textContent = 'Parse & save';
    });

    xhr.send(new FormData(form));
  });
})();
</script>

{% endblock %}