{% load i18n %}
{% with c=perf.currency a=account.currency %}
{# Buy/sell are transfers so the tracker sees them; income uses the account's income entity #}
<c-components.fab>
  <c-components.fab_menu_button
      color="success" hx_target="#generic-offcanvas" hx_trigger="click"
      hx_vals='{"to_account": {{ account.id }}}'
      url="{% url 'transactions_transfer' %}"
      icon="fa-solid fa-arrow-right-to-bracket"
      title="{% translate 'Buy / Contribute' %}"></c-components.fab_menu_button>
  <c-components.fab_menu_button
      color="error" hx_target="#generic-offcanvas" hx_trigger="click"
      hx_vals='{"from_account": {{ account.id }}}'
      url="{% url 'transactions_transfer' %}"
      icon="fa-solid fa-arrow-right-from-bracket"
      title="{% translate 'Sell / Withdraw' %}"></c-components.fab_menu_button>
  {% if income_entities %}
    <c-components.fab_menu_button
        color="success" hx_target="#generic-offcanvas" hx_trigger="click"
        hx_vals='{"type": "IN", "entities": "{{ income_entities.0.name|escapejs }}"}'
        url="{% url 'transaction_add' %}"
        icon="fa-solid fa-hand-holding-dollar"
        title="{% translate 'Dividend / Income' %}"></c-components.fab_menu_button>
  {% endif %}
  {% if not perf.priced %}
    <c-components.fab_menu_button
        color="info" hx_target="#generic-offcanvas" hx_trigger="click"
        url="{% url 'account_reconciliation' %}"
        icon="fa-solid fa-scale-balanced"
        title="{% translate 'Update value' %}"></c-components.fab_menu_button>
  {% endif %}
</c-components.fab>
<div class="container pb-20">
  <div class="flex items-center gap-2 mb-1">
    <a href="{% url 'investments_index' %}" hx-boost="true" class="btn btn-ghost btn-sm btn-square text-base-content/50 hover:text-base-content" aria-label="{% translate 'Investments' %}"><i class="fa-solid fa-arrow-left"></i></a>
    <h1 class="text-2xl font-bold truncate">{{ account.name }}</h1>
    <button class="btn btn-ghost btn-sm btn-square text-base-content/40 hover:text-base-content"
            aria-label="{% translate 'Edit account' %}"
            hx-get="{% url 'account_edit' pk=account.id %}" hx-target="#generic-offcanvas">
      <i class="fa-solid fa-pencil"></i>
    </button>
  </div>
  <div class="text-sm text-base-content/50 mb-6 ps-10">
    {% if account.group %}{{ account.group.name }} · {% endif %}
    {% if perf.priced %}{{ a.name }} → {{ c.name }}{% else %}{% translate 'Tracked by value' %}{% endif %}
  </div>

  <div class="card bg-base-100 card-border shadow mb-4">
    <div class="card-body p-5 gap-5">
      <div>
        <div class="text-3xl sm:text-4xl font-bold tabular-nums tracking-tight whitespace-nowrap">
          {% if perf.market_value is not None %}<c-amount.display :amount="perf.market_value" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" divless></c-amount.display>{% else %}-{% endif %}
        </div>
        <div class="text-sm tabular-nums mt-1 flex flex-wrap items-baseline gap-x-2">
          <span class="whitespace-nowrap"><c-amount.display :amount="perf.total_return" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" color="auto" divless></c-amount.display>
          {% include 'investments/fragments/_mwr.html' with mw=perf.money_weighted %}</span>
          <span class="text-base-content/50">{% translate 'all time' %}</span>
        </div>
        {% if home %}{% with h=home.currency %}
          <div class="text-sm tabular-nums mt-1 text-base-content/50">≈ <c-amount.display :amount="home.market_value" :prefix="h.prefix" :suffix="h.suffix" :decimal_places="h.decimal_places" divless></c-amount.display></div>
        {% endwith %}{% endif %}
      </div>

      <div>
        {{ chart|json_script:"investment-chart-data" }}
        {% if chart.price or chart.earnings or chart.income %}
          <div class="tabs tabs-box tabs-sm w-fit mb-3" role="tablist" id="investment-chart-tabs">
            <input type="radio" name="investment_chart" class="tab" role="tab" aria-label="{% translate 'Value' %}" value="value" checked>
            {% if chart.price %}<input type="radio" name="investment_chart" class="tab" role="tab" aria-label="{% translate 'Price' %}" value="price">{% endif %}
            {% if chart.earnings %}<input type="radio" name="investment_chart" class="tab" role="tab" aria-label="{% translate 'Earnings' %}" value="earnings">{% endif %}
            {% if chart.income %}<input type="radio" name="investment_chart" class="tab" role="tab" aria-label="{% translate 'Income' %}" value="income">{% endif %}
          </div>
        {% endif %}
        <div class="h-64" data-panel="value"><canvas data-chart="value"></canvas></div>
        {% if chart.price %}<div class="h-64 hidden" data-panel="price"><canvas data-chart="price"></canvas></div>{% endif %}
        {% if chart.earnings %}<div class="h-64 hidden" data-panel="earnings"><canvas data-chart="earnings"></canvas></div>{% endif %}
        {% if chart.income %}<div class="h-64 hidden" data-panel="income"><canvas data-chart="income"></canvas></div>{% endif %}
      </div>
      <script>
        (() => {
          const data = JSON.parse(document.getElementById('investment-chart-data').textContent);
          const root = document.getElementById('investment-chart-data').parentElement;
          const ink = chartInk(75);
          const muted = chartInk(50);
          const grid = chartInk(12);
          const fmt = chartMoney(data.currency);
          const blue = '#2a78d6';
          const canvas = (name) => root.querySelector(`[data-chart="${name}"]`);
          const options = (extra = {}) => ({
            responsive: true,
            maintainAspectRatio: false,
            interaction: { mode: 'index', intersect: false },
            scales: {
              x: { grid: { display: false }, ticks: { color: ink, maxTicksLimit: 6, maxRotation: 0 } },
              y: { border: { display: false }, grid: { color: grid }, ticks: { color: ink, maxTicksLimit: 5, callback: (v) => fmt(v, 0) } },
            },
            plugins: {
              legend: {
                align: 'end',
                labels: {
                  color: ink, boxWidth: 12, boxHeight: 2,
                  // A series with no points (no sales yet) has nothing to name
                  filter: (item, chart) => chart.datasets[item.datasetIndex].data.some((v) => v !== null),
                },
              },
              tooltip: { callbacks: { label: (ctx) => ctx.raw === null ? null : ` ${ctx.dataset.label}: ${fmt(ctx.raw)}` } },
            },
            ...extra,
          });
          const line = (label, values, color, more = {}) => ({
            label, data: values, borderColor: color, borderWidth: 2, pointRadius: 0, pointHoverRadius: 4, pointStyle: 'line', spanGaps: true, ...more,
          });
          const dashed = { borderWidth: 1.5, borderDash: [4, 4], stepped: true };
          const bars = (label, values) => ({
            label,
            data: values,
            backgroundColor: values.map((v) => (v < 0 ? '#d03b3b' : '#0ca30c')),
            borderRadius: 4,
            maxBarThickness: 24,
          });

          new Chart(canvas('value'), {
            type: 'line',
            data: {
              labels: data.labels,
              datasets: [
                line('{% translate "Value" %}', data.value, blue, { fill: true, backgroundColor: 'rgba(42, 120, 214, 0.12)' }),
                line('{% translate "Invested" %}', data.invested, muted, dashed),
              ],
            },
            options: (() => { const o = options(); o.scales.y.beginAtZero = true; return o; })(),
          });

          if (data.price) {
            const marker = (label, values, color, style) => ({
              type: 'line', label, data: values, showLine: false, pointStyle: style, pointRadius: 6, pointHoverRadius: 8,
              backgroundColor: color, borderColor: chartInk(100), borderWidth: 1,
            });
            new Chart(canvas('price'), {
              type: 'line',
              data: {
                labels: data.labels,
                datasets: [
                  line('{% translate "Price" %}', data.price, blue),
                  line('{% translate "Average cost" %}', data.average_cost, muted, dashed),
                  marker('{% translate "Buy" %}', data.buys, '#0ca30c', 'triangle'),
                  marker('{% translate "Sell" %}', data.sells, '#d03b3b', 'rectRot'),
                ],
              },
              options: (() => { const o = options(); o.plugins.legend.labels.usePointStyle = true; o.plugins.legend.labels.boxHeight = 8; return o; })(),
            });
          }

          if (data.earnings) {
            const opts = options();
            // The month's result against what was invested at the end of the month before
            opts.plugins.tooltip.callbacks.label = (ctx) => {
              const base = data.invested[Math.max(ctx.dataIndex - 1, 0)];
              const share = base ? ` (${(ctx.raw / base * 100).toFixed(2)}%)` : '';
              return ` ${fmt(ctx.raw)}${share}`;
            };
            opts.plugins.legend.display = false;
            new Chart(canvas('earnings'), {
              type: 'bar',
              data: { labels: data.labels, datasets: [bars('{% translate "Earnings" %}', data.earnings)] },
              options: opts,
            });
          }

          if (data.income) {
            const opts = options();
            opts.plugins.legend.display = false;
            new Chart(canvas('income'), {
              type: 'bar',
              data: { labels: data.labels, datasets: [bars('{% translate "Income" %}', data.income)] },
              options: opts,
            });
          }

          root.querySelectorAll('input[name=investment_chart]').forEach((tab) => tab.addEventListener('change', () => {
            root.querySelectorAll('[data-panel]').forEach((panel) => panel.classList.toggle('hidden', panel.dataset.panel !== tab.value));
          }));
        })();
      </script>
    </div>
  </div>

  {% if perf.estimated %}
    <div class="text-sm text-base-content/60 mb-4 flex gap-2 items-baseline">
      <i class="fa-solid fa-circle-info text-warning"></i>
      <span>{% translate 'Some units moved in or out without a linked payment, so they were valued at the market price of that day.' %}</span>
    </div>
  {% endif %}

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 items-start">
    <div class="flex flex-col gap-4 lg:order-last">
      <div class="card bg-base-100 card-border shadow">
        <div class="px-5 pt-4 font-semibold">{% translate 'Your position' %}</div>
        <dl class="px-5 pb-3 flex flex-col divide-y divide-base-content/10 text-sm tabular-nums">
        {% if perf.priced %}
        <div class="flex justify-between items-baseline gap-4 py-2.5">
          <dt class="text-base-content/60 min-w-0">{% translate 'Units' %}</dt>
          <dd class="text-end whitespace-nowrap"><c-amount.display :amount="perf.quantity" :prefix="a.prefix" :suffix="a.suffix" :decimal_places="a.decimal_places" divless></c-amount.display></dd>
        </div>
        <div class="flex justify-between items-baseline gap-4 py-2.5">
          <dt class="text-base-content/60 min-w-0">{% translate 'Price' %}</dt>
          <dd class="text-end whitespace-nowrap">{% if perf.price is not None %}<c-amount.display :amount="perf.price" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" divless></c-amount.display>{% if perf.price_date %}<div class="text-xs text-base-content/40">{{ perf.price_date|date:"SHORT_DATE_FORMAT" }}</div>{% endif %}{% else %}<span class="text-error">{% translate "No exchange rate available" %}</span>{% endif %}</dd>
        </div>
        <div class="flex justify-between items-baseline gap-4 py-2.5">
          <dt class="text-base-content/60 min-w-0">{% translate 'Average cost' %}</dt>
          <dd class="text-end whitespace-nowrap">{% if perf.average_cost is not None %}<c-amount.display :amount="perf.average_cost" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" divless></c-amount.display>{% else %}-{% endif %}</dd>
        </div>
        {% endif %}
        <div class="flex justify-between items-baseline gap-4 py-2.5">
          <dt class="text-base-content/60 min-w-0">{% translate 'Invested' %}</dt>
          <dd class="text-end whitespace-nowrap"><c-amount.display :amount="perf.cost_basis" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" divless></c-amount.display></dd>
        </div>
        <div class="flex justify-between items-baseline gap-4 py-2.5">
          <dt class="text-base-content/60 min-w-0">{% if perf.priced %}{% translate 'Unrealized' %}{% else %}{% translate 'Earnings' %}{% endif %}</dt>
          <dd class="text-end whitespace-nowrap">{% if perf.unrealized is not None %}<c-amount.display :amount="perf.unrealized" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" color="auto" divless></c-amount.display>{% else %}-{% endif %}</dd>
        </div>
        <div class="flex justify-between items-baseline gap-4 py-2.5">
          <dt class="text-base-content/60 min-w-0">{% translate 'Realized' %}</dt>
          <dd class="text-end whitespace-nowrap"><c-amount.display :amount="perf.realized" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" color="auto" divless></c-amount.display></dd>
        </div>
        <div class="flex justify-between items-baseline gap-4 py-2.5">
          <dt class="text-base-content/60 min-w-0">{% translate 'Income' %}</dt>
          <dd class="text-end whitespace-nowrap"><c-amount.display :amount="perf.income" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" color="auto" divless></c-amount.display></dd>
        </div>
        <div class="flex justify-between items-baseline gap-4 py-2.5">
          <dt class="text-base-content/60 min-w-0">{% translate 'Put in' %}</dt>
          <dd class="text-end whitespace-nowrap"><c-amount.display :amount="perf.contributed" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" divless></c-amount.display></dd>
        </div>
        <div class="flex justify-between items-baseline gap-4 py-2.5">
          <dt class="text-base-content/60 min-w-0">{% translate 'Taken out' %}</dt>
          <dd class="text-end whitespace-nowrap"><c-amount.display :amount="perf.withdrawn" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" divless></c-amount.display></dd>
        </div>
        </dl>
      </div>
      {% if home %}{% with h=home.currency %}
        <div class="card bg-base-100 card-border shadow">
          <div class="px-5 pt-4 font-semibold">{% blocktranslate with name=h.name %}In {{ name }}{% endblocktranslate %}</div>
          <dl class="px-5 pb-3 flex flex-col divide-y divide-base-content/10 text-sm tabular-nums">
        <div class="flex justify-between items-baseline gap-4 py-2.5">
          <dt class="text-base-content/60 min-w-0">{% translate 'Value' %}</dt>
          <dd class="text-end whitespace-nowrap"><c-amount.display :amount="home.market_value" :prefix="h.prefix" :suffix="h.suffix" :decimal_places="h.decimal_places" divless></c-amount.display></dd>
        </div>
        <div class="flex justify-between items-baseline gap-4 py-2.5">
          <dt class="text-base-content/60 min-w-0">{% translate 'Return' %}</dt>
          <dd class="text-end whitespace-nowrap"><c-amount.display :amount="home.total_return" :prefix="h.prefix" :suffix="h.suffix" :decimal_places="h.decimal_places" color="auto" divless></c-amount.display> <span class="text-xs">{% include 'investments/fragments/_mwr.html' with mw=home.money_weighted %}</span></dd>
        </div>
        <div class="flex justify-between items-baseline gap-4 py-2.5">
          <dt class="text-base-content/60 min-w-0">{% translate 'From exchange rates' %}</dt>
          <dd class="text-end whitespace-nowrap">{% if home.has_rate_history %}<c-amount.display :amount="home.currency_effect" :prefix="h.prefix" :suffix="h.suffix" :decimal_places="h.decimal_places" color="auto" divless></c-amount.display>{% else %}<span class="text-base-content/50 whitespace-normal">{% translate "Needs historical exchange rates" %}</span>{% endif %}</dd>
        </div>
          </dl>
        </div>
      {% endwith %}{% endif %}
    </div>

    <div class="flex flex-col gap-4 lg:col-span-2">
      <div class="card bg-base-100 card-border shadow">
        <div class="px-5 pt-4 pb-2 font-semibold">{% translate 'Movements' %}</div>
        {% if transactions %}
          <div class="overflow-x-auto">
            <table class="table text-sm">
              <tbody>
            {% for tx in transactions %}
              {% with p=tx.linked_transaction %}
              <tr class="{% if not tx.is_paid %}opacity-50{% endif %}">
                <td>
                  <div>{{ tx.description }}</div>
                  <div class="text-xs text-base-content/50">
                    <span class="tabular-nums">{{ tx.date|date:"SHORT_DATE_FORMAT" }}</span> ·
                    {% if p %}
                      {% if tx.type == 'IN' %}{% translate 'Bought / contributed' %}{% else %}{% translate 'Sold / withdrew' %}{% endif %}
                      · {{ p.account.name }}
                    {% else %}
                      {% if tx.id not in perf.result_ids %}
                        {% if tx.type == 'IN' %}{% translate 'Money in' %}{% else %}{% translate 'Money out' %}{% endif %}
                      {% else %}
                        {% if tx.type == 'IN' %}{% if perf.priced %}{% translate 'Gain' %}{% else %}{% translate 'Earnings' %}{% endif %}{% else %}{% translate 'Loss, tax or fee' %}{% endif %}
                      {% endif %}
                    {% endif %}
                  </div>
                </td>
                <td class="text-end tabular-nums whitespace-nowrap">
                  <c-amount.display :amount="tx.amount" :prefix="a.prefix" :suffix="a.suffix" :decimal_places="a.decimal_places" color="{% if tx.type == 'IN' %}green{% else %}red{% endif %}" divless></c-amount.display>
                  {% if p and p.account.currency != a %}
                    <div class="text-xs text-base-content/50">
                      <c-amount.display :amount="p.amount" :prefix="p.account.currency.prefix" :suffix="p.account.currency.suffix" :decimal_places="p.account.currency.decimal_places" divless></c-amount.display>
                    </div>
                  {% endif %}
                </td>
                <td class="w-8 px-1">
                  <button class="btn btn-ghost btn-xs btn-square text-base-content/40 hover:text-base-content"
                          aria-label="{% translate 'Edit' %}"
                          hx-get="{% if p %}{% url 'transaction_transfer_edit' transaction_id=tx.id %}{% else %}{% url 'transaction_edit' transaction_id=tx.id %}{% endif %}" hx-target="#generic-offcanvas"><i class="fa-solid fa-pencil"></i></button>
                </td>
              </tr>
              {% endwith %}
            {% endfor %}
              </tbody>
            </table>
          </div>
        {% else %}
          <c-msg.empty title="{% translate 'No movements yet' %}" subtitle="{% translate 'Use the + button to buy or contribute' %}"></c-msg.empty>
        {% endif %}
      </div>
      {% if income %}
        <div class="card bg-base-100 card-border shadow">
          <div class="px-5 pt-4 pb-2">
            <div class="font-semibold">{% translate 'Income' %}</div>
            {% if income_entities %}<div class="text-xs text-base-content/50">{{ income_entities|join:", " }}</div>{% endif %}
          </div>
          <div class="overflow-x-auto">
            <table class="table text-sm">
              <tbody>
            {% for tx in income %}
              <tr class="{% if not tx.is_paid %}opacity-50{% endif %}">
                <td>{{ tx.description }}<div class="text-xs text-base-content/50"><span class="tabular-nums">{{ tx.date|date:"SHORT_DATE_FORMAT" }}</span> · {{ tx.account.name }}</div></td>
                <td class="text-end tabular-nums whitespace-nowrap"><c-amount.display :amount="tx.amount" :prefix="tx.account.currency.prefix" :suffix="tx.account.currency.suffix" :decimal_places="tx.account.currency.decimal_places" color="green" divless></c-amount.display></td>
                <td class="w-8 px-1">
                  <button class="btn btn-ghost btn-xs btn-square text-base-content/40 hover:text-base-content"
                          aria-label="{% translate 'Edit' %}"
                          hx-get="{% url 'transaction_edit' transaction_id=tx.id %}" hx-target="#generic-offcanvas"><i class="fa-solid fa-pencil"></i></button>
                </td>
              </tr>
            {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      {% endif %}
    </div>
  </div>
</div>
{% endwith %}