{% extends "journal/base.html" %}
{% block title %}Import CSV — Setup Log Pro{% endblock %}
{% block content %}
<h1>Import CSV</h1>

<style>
  .import-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: 1.25rem 1.5rem; margin-bottom: 2rem; max-width: 1100px;
  }
  .import-card h2 { margin-top: 0; }
  .import-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin-top: 1rem; }
  .import-row label { display: flex; flex-direction: column; font-size: 0.8rem; gap: 0.3rem; }
  .import-mapping-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.8rem; margin-top: 1rem;
  }
  .import-mapping-grid label {
    display: flex; flex-direction: column; font-size: 0.78rem; gap: 0.3rem; opacity: 0.9;
    border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.7rem; background: var(--bg);
  }
  .import-mapping-grid select { width: 100%; }
</style>

{% if not license_info %}
<p style="background:color-mix(in srgb, #F59E0B 12%, transparent); border:1px solid #F59E0B; border-radius:8px; padding:0.75rem 1rem; font-size:0.85rem; max-width:1100px;">
  <b>No license found.</b> The forms below still accept a file and Import still submits, but nothing will actually
  import until a license file is installed — see the footer for how to get one. Manually adding trades, and
  everything else in the app, works either way — up to a free limit of 200 trades total, after which a license
  is needed for that too.
</p>
{% endif %}

<p>Risk per trade (used for R-multiples) — remembered per portfolio:</p>
<form method="post" id="risk-form" data-ajax-submit="1" style="display:flex; gap:0.5rem; align-items:center; margin-bottom:2rem; flex-wrap:wrap;">
  {% csrf_token %}
  <input type="hidden" name="action" value="update_risk">
  <select name="risk_portfolio" id="risk-portfolio">
    <option value="">Default (all portfolios)</option>
    {% for p in risk_portfolios %}<option value="{{ p.pk }}">{{ p.name }}</option>{% endfor %}
  </select>
  {{ risk_form.risk_per_trade }}
  <button type="submit">Save</button>
  <span id="risk-save-status" style="font-size:0.85rem; opacity:0.75;"></span>
</form>
{{ portfolio_risks|json_script:"portfolio-risks" }}
<script>
(function () {
  // Submitted via fetch() instead of a normal POST specifically so it never
  // navigates the page — a full reload here would reset every other form on this
  // page (selected file, trade date, portfolio, column mapping), which is exactly
  // the "lost fields" complaint this replaces.
  var form = document.getElementById("risk-form");
  var status = document.getElementById("risk-save-status");
  var riskSelect = document.getElementById("risk-portfolio");
  var riskInput = form.querySelector("[name=risk_per_trade]");
  var risks = JSON.parse(document.getElementById("portfolio-risks").textContent);

  // A portfolio with no risk of its own shows an empty box with the default as its
  // placeholder - saving it empty keeps it following the default.
  function showRisk() {
    var id = riskSelect.value;
    riskInput.value = risks[id];
    riskInput.placeholder = id ? "Default: " + risks[""] : "";
    riskInput.required = !id;
  }
  riskSelect.addEventListener("change", showRisk);
  showRisk();

  // Picking a portfolio in any import form below switches the risk box to that
  // portfolio, so the risk shown is always the one the import will be scored with.
  document.querySelectorAll(".import-card select[name=portfolio]").forEach(function (sel) {
    sel.addEventListener("change", function () {
      riskSelect.value = sel.value;
      showRisk();
    });
  });

  form.addEventListener("submit", function (e) {
    e.preventDefault();
    status.textContent = "Saving…";
    // Not form.action: this form has a hidden input named "action" (the
    // import_das/import_tradersync/... convention every form on this page uses),
    // and a named form control shadows the form element's own .action property —
    // form.action here is that <input>, not a URL string. Submits to the current
    // page's own URL either way, same as every other form here with no explicit
    // action="" attribute.
    fetch(window.location.href, { method: "POST", body: new FormData(form) })
      .then(function (resp) {
        if (resp.ok) {
          risks[riskSelect.value] = riskInput.value;
          showRisk();
        }
        status.textContent = resp.ok ? "Saved." : "Could not save — try again.";
        setTimeout(function () { status.textContent = ""; }, 2500);
      })
      .catch(function () {
        status.textContent = "Could not save — try again.";
      });
  });
})();
</script>

<div class="import-card">
  <h2>Import from DAS Trader Pro</h2>
  <p style="opacity:0.7; font-size:0.85rem; margin-bottom:0;">Upload a DAS Trader Pro export. Since the file only has time-of-day, pick the trading date it belongs to.</p>
  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="hidden" name="action" value="import_das">
    <div class="import-row">
      <label>Trade date {{ form.trade_date }}</label>
      <label>Portfolio {{ form.portfolio }}</label>
      <label>DAS Trader Pro CSV {{ form.csv_file }}</label>
      <button type="submit">Import</button>
    </div>
    {% if form.errors %}
    <p style="color:#c0392b; font-size:0.85rem; margin-top:0.5rem;">
      {% for field in form %}{% for error in field.errors %}{{ field.label }}: {{ error }} {% endfor %}{% endfor %}
    </p>
    {% endif %}
  </form>
</div>

<div class="import-card">
  <h2>Import from TradingView</h2>
  <p style="opacity:0.7; font-size:0.85rem; margin-bottom:0;">
    Upload a TradingView per-fill trade-history export (Symbol, Side, Quantity, Fill price, Time, Net
    amount, Commission). Each row carries its own date and time, so unlike DAS this can cover more than one
    trading day in a single file. Commission is read per fill and summed into each trade's real commission,
    instead of the default-rate estimate used for sources that don't provide one.
  </p>
  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="hidden" name="action" value="import_tradingview">
    <div class="import-row">
      <label>Portfolio {{ tradingview_form.portfolio }}</label>
      <label>TradingView CSV {{ tradingview_form.csv_file }}</label>
      <button type="submit">Import</button>
    </div>
    {% if tradingview_form.errors %}
    <p style="color:#c0392b; font-size:0.85rem; margin-top:0.5rem;">
      {% for field in tradingview_form %}{% for error in field.errors %}{{ field.label }}: {{ error }} {% endfor %}{% endfor %}
    </p>
    {% endif %}
  </form>
</div>

<div class="import-card">
  <h2>Import from TradeZella</h2>
  <p style="opacity:0.7; font-size:0.85rem; margin-bottom:0;">
    Upload a TradeZella trade-history export. Each row is already a full trade (not raw fills) —
    defaults match TradeZella's own column names, adjust below if your export or preference differs.
    A mistake value of "no mistake" is always treated as none, whichever column it's mapped from.
  </p>
  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="hidden" name="action" value="import_tradezella">
    <div class="import-row">
      <label>Portfolio {{ tradezella_form.portfolio }}</label>
      <label>TradeZella CSV {{ tradezella_form.csv_file }}</label>
    </div>
    <details style="margin-top:1rem;">
      <summary style="cursor:pointer; opacity:0.8; font-size:0.85rem;">Column mapping (defaults usually work — expand to adjust)</summary>
      <div class="import-mapping-grid">
        <label>{{ tradezella_form.symbol.label }} {{ tradezella_form.symbol }}</label>
        <label>{{ tradezella_form.side.label }} {{ tradezella_form.side }}</label>
        <label>{{ tradezella_form.qty.label }} {{ tradezella_form.qty }}</label>
        <label>{{ tradezella_form.open_date.label }} {{ tradezella_form.open_date }}</label>
        <label>{{ tradezella_form.open_time.label }} {{ tradezella_form.open_time }}</label>
        <label>{{ tradezella_form.close_date.label }} {{ tradezella_form.close_date }}</label>
        <label>{{ tradezella_form.close_time.label }} {{ tradezella_form.close_time }}</label>
        <label>{{ tradezella_form.entry_price.label }} {{ tradezella_form.entry_price }}</label>
        <label>{{ tradezella_form.exit_price.label }} {{ tradezella_form.exit_price }}</label>
        <label>{{ tradezella_form.pnl.label }} {{ tradezella_form.pnl }}</label>
        <label>{{ tradezella_form.commission.label }} {{ tradezella_form.commission }}</label>
        <label>{{ tradezella_form.fee.label }} {{ tradezella_form.fee }}</label>
        <label>{{ tradezella_form.setup_tags.label }} {{ tradezella_form.setup_tags }}</label>
        <label>{{ tradezella_form.mistake_tags.label }} {{ tradezella_form.mistake_tags }}</label>
        <label>{{ tradezella_form.custom_tags.label }} {{ tradezella_form.custom_tags }}</label>
        <label>{{ tradezella_form.max_move.label }} {{ tradezella_form.max_move }}</label>
        <label>{{ tradezella_form.max_pullback.label }} {{ tradezella_form.max_pullback }}</label>
        <label>{{ tradezella_form.stop_loss.label }} {{ tradezella_form.stop_loss }}</label>
        <label>{{ tradezella_form.target.label }} {{ tradezella_form.target }}</label>
      </div>
    </details>
    <div class="import-row">
      <button type="submit">Import</button>
    </div>
    {% if tradezella_form.errors %}
    <p style="color:#c0392b; font-size:0.85rem; margin-top:0.5rem;">
      {% for field in tradezella_form %}{% for error in field.errors %}{{ field.label }}: {{ error }} {% endfor %}{% endfor %}
    </p>
    {% endif %}
  </form>
</div>

<div class="import-card">
  <h2>Import from Tradersync/Backtester Pro</h2>
  <p style="opacity:0.7; font-size:0.85rem; margin-bottom:0;">
    Upload a TraderSync trade-history export, or a CSV exported from Backtester Pro's run results page.
    Each row is already a full trade (not raw fills), so it's built directly from the columns mapped
    below — adjust any of them if your export doesn't match the defaults. Only Type = SHARE rows are
    imported; options/spreads aren't supported.
  </p>
  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="hidden" name="action" value="import_tradersync">
    <div class="import-row">
      <label>Tradersync/Backtester Pro CSV {{ tradersync_form.csv_file }}</label>
    </div>
    <details style="margin-top:1rem;">
      <summary style="cursor:pointer; opacity:0.8; font-size:0.85rem;">Column mapping (defaults usually work — expand to adjust)</summary>
      <div class="import-mapping-grid">
        <label>{{ tradersync_form.symbol.label }} {{ tradersync_form.symbol }}</label>
        <label>{{ tradersync_form.side.label }} {{ tradersync_form.side }}</label>
        <label>{{ tradersync_form.qty.label }} {{ tradersync_form.qty }}</label>
        <label>{{ tradersync_form.open_date.label }} {{ tradersync_form.open_date }}</label>
        <label>{{ tradersync_form.open_time.label }} {{ tradersync_form.open_time }}</label>
        <label>{{ tradersync_form.close_date.label }} {{ tradersync_form.close_date }}</label>
        <label>{{ tradersync_form.close_time.label }} {{ tradersync_form.close_time }}</label>
        <label>{{ tradersync_form.avg_buy_price.label }} {{ tradersync_form.avg_buy_price }}</label>
        <label>{{ tradersync_form.avg_sell_price.label }} {{ tradersync_form.avg_sell_price }}</label>
        <label>{{ tradersync_form.pnl.label }} {{ tradersync_form.pnl }}</label>
        <label>{{ tradersync_form.commission.label }} {{ tradersync_form.commission }}</label>
        <label>{{ tradersync_form.comment.label }} {{ tradersync_form.comment }}</label>
        <label>{{ tradersync_form.setup_tags.label }} {{ tradersync_form.setup_tags }}</label>
        <label>{{ tradersync_form.mistake_tags.label }} {{ tradersync_form.mistake_tags }}</label>
        <label>{{ tradersync_form.custom_tags.label }} {{ tradersync_form.custom_tags }}</label>
        <label>{{ tradersync_form.portfolio.label }} {{ tradersync_form.portfolio }}</label>
        <label>{{ tradersync_form.max_move.label }} {{ tradersync_form.max_move }}</label>
        <label>{{ tradersync_form.max_pullback.label }} {{ tradersync_form.max_pullback }}</label>
        <label>{{ tradersync_form.stop_loss.label }} {{ tradersync_form.stop_loss }}</label>
        <label>{{ tradersync_form.target.label }} {{ tradersync_form.target }}</label>
      </div>
    </details>
    <div class="import-row">
      <button type="submit">Import</button>
    </div>
    {% if tradersync_form.errors %}
    <p style="color:#c0392b; font-size:0.85rem; margin-top:0.5rem;">
      {% for field in tradersync_form %}{% for error in field.errors %}{{ field.label }}: {{ error }} {% endfor %}{% endfor %}
    </p>
    {% endif %}
  </form>
</div>
{% endblock %}