{% extends "base.html" %}
{% block content %}
<div class="page-header">
  <h1>Import Statements</h1>
</div>

{% if message %}
<div class="alert-banner {{ 'alert-success' if 'Imported' in message else 'alert-error' }}">
  {{ message }}
  {% if 'Imported' in message %}
    <a href="{{ url_for('review') }}" class="btn btn-primary">Review Transactions</a>
  {% endif %}
</div>
{% endif %}

<div class="card-wide">
  <h2>Upload a Bank or Credit Card Statement</h2>
  <p class="helper-text">Supports CSV exports from your bank or credit union. PDF import only works if the PDF has selectable text — scanned statements won't work.</p>

  <form method="POST" enctype="multipart/form-data" class="import-form">
    <div class="form-group">
      <label for="account">Account Name</label>
      <input type="text" id="account" name="account" placeholder="e.g. Chase Checking, Discover, Affirm" required>
    </div>

    <div class="form-group">
      <label for="statement">Statement File</label>
      <div class="file-drop-area">
        <input type="file" id="statement" name="statement" accept=".pdf,.csv" required>
        <p>Click to choose a file, or drag and drop here</p>
        <p class="file-types">PDF or CSV</p>
      </div>
    </div>

    <button type="submit" class="btn btn-primary btn-large">Import</button>
  </form>
</div>

<div class="card-wide tips">
  <h3>How to export your statements</h3>
  <ul>
    <li><strong>WestConsin Credit Union:</strong> Log in at westconsin.org → select your account → look for a <em>Download</em> or <em>Export</em> button near the top of your transaction list → choose CSV or Excel format → pick your date range and download</li>
    <li><strong>Most other banks:</strong> Log in → Account Details or Transaction History → Export / Download → choose CSV</li>
    <li><strong>Affirm:</strong> affirm.com → Account → Payment History → Export (note: their export is often broken — manual entry may be needed)</li>
    <li><strong>Klarna:</strong> klarna.com → Purchases → Export CSV</li>
    <li><strong>Afterpay:</strong> afterpay.com → Orders → Export</li>
  </ul>
  <p class="helper-text" style="margin-top:0.75rem;">If a CSV imports 0 transactions, let Claude know — the column format varies by bank and may need a quick fix.</p>
</div>
{% endblock %}