{% 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 flex-wrap justify-between items-start gap-3 mb-4">
    <div class="min-w-0">
      <div class="text-3xl font-bold font-mono flex items-center gap-2">
        <a href="{% url 'investments_index' %}" hx-boost="true" class="no-underline text-base-content/40 hover:text-base-content transition-colors duration-150" aria-label="{% translate 'Investments' %}"><i class="fa-solid fa-arrow-left fa-fw text-lg"></i></a>
        <span class="truncate">{{ account.name }}</span>
        <button class="btn btn-ghost btn-sm btn-square text-base-content/40 hover:text-base-content"
                aria-label="{% translate 'Edit account' %}" data-tippy-content="{% translate 'Edit account' %}"
                hx-get="{% url 'account_edit' pk=account.id %}" hx-target="#generic-offcanvas">
          <i class="fa-solid fa-pencil text-base"></i>
        </button>
      </div>
      <div class="text-sm text-base-content/60 mt-1">
        {% if account.group %}{{ account.group.name }} · {% endif %}
        {% if perf.priced %}{{ a.name }} → {{ c.name }}{% else %}{% translate 'Tracked by value' %}{% endif %}
        {% if perf.estimated %}<i class="fa-solid fa-circle-exclamation text-warning ml-1" data-tippy-content="{% translate 'Some units moved in or out without a linked payment, so they were valued at the market price of that day' %}"></i>{% endif %}
      </div>
    </div>
  </div>

  <div class="card bg-base-100 card-border shadow mb-4">
    <div class="card-body p-5 gap-5">
      <div class="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
        <div>
          <div class="text-4xl font-bold tabular-nums">
            {% 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 items-baseline gap-2">
            <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 class="text-base-content/50">{% translate 'total return' %}</span>
          </div>
          {% if home %}
            {% with h=home.currency %}
            <div class="text-sm tabular-nums mt-1 flex flex-wrap items-baseline gap-x-2 text-base-content/60">
              <span>{% translate 'In' %} {{ h.name }}:</span>
              <c-amount.display :amount="home.market_value" :prefix="h.prefix" :suffix="h.suffix" :decimal_places="h.decimal_places" divless></c-amount.display>
              <span>·</span>
              <c-amount.display :amount="home.total_return" :prefix="h.prefix" :suffix="h.suffix" :decimal_places="h.decimal_places" color="auto" divless></c-amount.display>
              {% include 'investments/fragments/_mwr.html' with mw=home.money_weighted %}
              {% if home.has_rate_history %}
                <span data-tippy-content="{% translate 'How much of the return came from exchange rates moving since you invested' %}">· {% translate 'currency effect' %}
                  <c-amount.display :amount="home.currency_effect" :prefix="h.prefix" :suffix="h.suffix" :decimal_places="h.decimal_places" color="auto" divless></c-amount.display>
                </span>
              {% else %}
                <span>· {% translate 'currency effect' %} <i class="fa-solid fa-triangle-exclamation text-warning text-xs" data-tippy-content="{% translate 'Every date is converted with the same rate. Add historical exchange rates (or an automatic rate service) to see how much exchange rates moved your return.' %}"></i></span>
              {% endif %}
            </div>
            {% endwith %}
          {% endif %}
        </div>
        {% if perf.priced %}
          <div class="sm:text-right text-sm text-base-content/60 tabular-nums">
            <div><c-amount.display :amount="perf.quantity" :prefix="a.prefix" :suffix="a.suffix" :decimal_places="a.decimal_places" divless></c-amount.display></div>
            <div>
              {% 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 %}<span class="text-base-content/40"> · {{ perf.price_date|date:"SHORT_DATE_FORMAT" }}</span>{% endif %}
              {% else %}
                <span class="text-error">{% translate "No exchange rate available" %}</span>
              {% endif %}
            </div>
          </div>
        {% 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>

      <dl class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-x-6 gap-y-4 border-t border-base-content/10 pt-4 text-sm tabular-nums">
        <div>
          <dt class="text-xs text-base-content/50">{% translate 'Invested' %}</dt>
          <dd><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>
          <dt class="text-xs text-base-content/50">{% if perf.priced %}{% translate 'Average cost' %}{% else %}{% translate 'Put in / taken out' %}{% endif %}</dt>
          <dd>
            {% if perf.priced %}
              {% 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 %}
            {% else %}
              <c-amount.display :amount="perf.contributed" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" divless></c-amount.display>
              <span class="text-base-content/50">/</span>
              <c-amount.display :amount="perf.withdrawn" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" divless></c-amount.display>
            {% endif %}
          </dd>
        </div>
        <div>
          <dt class="text-xs text-base-content/50">{% if perf.priced %}{% translate 'Unrealized' %}{% else %}{% translate 'Earnings' %}{% endif %}</dt>
          <dd>
            {% 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>
              {% include 'investments/fragments/_percentage.html' with value=perf.unrealized_percentage css="text-xs" %}
            {% else %}-{% endif %}
          </dd>
        </div>
        <div>
          <dt class="text-xs text-base-content/50">{% translate 'Realized' %}</dt>
          <dd><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>
          <dt class="text-xs text-base-content/50">{% translate 'Income' %}{% if income_entities %} · {{ income_entities|join:", " }}{% endif %}</dt>
          <dd><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>
        {% if perf.priced %}
          <div>
            <dt class="text-xs text-base-content/50">{% translate 'Put in / taken out' %}</dt>
            <dd>
              <c-amount.display :amount="perf.contributed" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" divless></c-amount.display>
              <span class="text-base-content/50">/</span>
              <c-amount.display :amount="perf.withdrawn" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" divless></c-amount.display>
            </dd>
          </div>
        {% endif %}
      </dl>
    </div>
  </div>

  <div class="grid grid-cols-1 {% if income %}xl:grid-cols-3{% endif %} gap-4">
    <div class="card bg-base-100 card-border shadow {% if income %}xl:col-span-2{% endif %}">
      <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 class="whitespace-nowrap text-base-content/60 tabular-nums w-28">{{ tx.date|date:"SHORT_DATE_FORMAT" }}</td>
                <td>
                  <div>{{ tx.description }}</div>
                  <div class="text-xs text-base-content/50">
                    {% 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' %}" data-tippy-content="{% 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 font-semibold">{% translate 'Income' %}</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 class="whitespace-nowrap text-base-content/60 tabular-nums">{{ tx.date|date:"SHORT_DATE_FORMAT" }}</td>
                <td>{{ tx.description }}<div class="text-xs text-base-content/50">{{ 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' %}" data-tippy-content="{% 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>
{% endwith %}