{% extends "base.html" %}
{% block content %}
{% set network_data = response_data(network) %}
{% set profile_data = response_data(profile) %}
{% set balance_data = response_data(balance) %}
{% set network_error = response_error(network) %}
{% set profile_error = response_error(profile) %}
{% set balance_error = response_error(balance) %}
{% set profile_hash = profile_data or {} %}
{% set balance_hash = balance_data or {} %}
{% set balance_value = balance_hash.get("balance") or balance_hash.get("amount") or ((balance_hash.values()|list)[0] if balance_hash else None) %}
{% set account_formatted %}
  <div class="space-y-0.5">
    <div class="flex items-center justify-between gap-4 border-b border-slate-800/60 py-2 text-xs">
      <span class="text-slate-500">Account UUID</span>
      <span class="min-w-0 break-all text-right font-mono text-slate-300">{{ profile_hash.get("account_uuid") or profile_hash.get("account", {}).get("uuid") or "—" }}</span>
    </div>
    <div class="flex items-center justify-between gap-4 border-b border-slate-800/60 py-2 text-xs">
      <span class="text-slate-500">Email</span>
      <span class="min-w-0 break-all text-right font-mono text-slate-300">{{ profile_hash.get("email") or profile_hash.get("account", {}).get("email") or "—" }}</span>
    </div>
    <div class="flex items-center justify-between gap-4 border-b border-slate-800/60 py-2 text-xs">
      <span class="text-slate-500">Avatar</span>
      <span class="min-w-0 break-all text-right font-mono text-slate-300">{{ profile_hash.get("avatar") or "—" }}</span>
    </div>
  </div>
{% endset %}
{% set balance_formatted %}
  <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
    <div class="rounded-lg border border-slate-800 bg-slate-950/70 p-4">
      <div class="text-[10px] uppercase tracking-wider text-slate-500">Balance</div>
      <div class="mt-2 break-all text-base font-semibold text-slate-100">{{ balance_value or "—" }}</div>
    </div>
    <div class="rounded-lg border border-slate-800 bg-slate-950/70 p-4">
      <div class="text-[10px] uppercase tracking-wider text-slate-500">Currency</div>
      <div class="mt-2 break-all text-base font-semibold text-slate-100">{{ balance_hash.get("currency") or balance_hash.get("unit") or "OCTA" }}</div>
    </div>
  </div>
{% endset %}

<div class="w-full max-w-full space-y-6">
  <div>
    <h1 class="text-lg font-semibold text-slate-100">Dashboard</h1>
    <p class="mt-1 text-sm text-slate-500">
      Account health check. Demonstrates <code class="text-cyan-400">octa_client</code> resource calls in the Python dummy app with runtime real/mock transport switching.
    </p>
  </div>

  <div class="flex flex-wrap items-center gap-3 rounded-lg border border-slate-800 bg-slate-900 px-4 py-3 text-sm">
    <span class="h-2 w-2 rounded-full {{ 'bg-emerald-500' if playground_api_key_present else 'bg-slate-600' }}"></span>
    <span class="text-slate-400">
      {% if playground_mock_active %}
        Mock transport active —
        <span class="font-mono text-slate-300">{{ playground_transport_label }}</span>
      {% elif playground_api_key_present %}
        API key set —
        <span class="font-mono text-slate-300">{{ settings.base_url }}</span>
      {% else %}
        No API key — enter one in the sidebar to test authenticated endpoints
      {% endif %}
    </span>
    {% if playground_mock_active %}
      <span class="ml-auto rounded bg-amber-500/15 px-2 py-0.5 text-[11px] font-medium text-amber-400">Mock: {{ playground_mock_scenario }}</span>
    {% endif %}
  </div>

  <div class="space-y-4 rounded-xl border border-slate-800 bg-slate-900 p-5">
    <div class="flex items-start justify-between gap-4">
      <div>
        <div class="flex items-center gap-2">
          <h2 class="text-sm font-semibold text-slate-100">Network Stats</h2>
          <span class="rounded-full bg-emerald-500/20 px-2 py-0.5 text-[10px] font-medium text-emerald-400">public</span>
        </div>
        <code class="mt-0.5 text-[11px] text-cyan-500">octa_client.network.info</code>
      </div>
      <a href="/playground/network" class="rounded border border-slate-700 px-2.5 py-1 text-xs text-slate-400 transition-colors hover:border-slate-600 hover:text-slate-200">Open</a>
    </div>

    {% if network_error %}
      {% set error = network_error %}
      {% set max_height = "max-h-40" %}
      {% include "shared/error_card.html" %}
    {% elif network_data %}
      {% set data = network_data %}
      {% set max_height = "max-h-40" %}
      {% include "shared/json_viewer.html" %}
    {% else %}
      <div class="rounded-lg border border-dashed border-slate-800 bg-slate-950/40 px-4 py-6 text-center text-sm text-slate-500">No network payload available.</div>
    {% endif %}
  </div>

  <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
    {% set title = "Account" %}
    {% set hook = "octa_client.accounts.profile" %}
    {% set data = profile_data %}
    {% set error = profile_error %}
    {% set locked = not playground_api_key_present %}
    {% set tab_param = "account_tab" %}
    {% set current_tab = request.query_params.get("account_tab", "formatted") %}
    {% set empty_copy = "Account data is unavailable." %}
    {% set locked_copy = "Enter an API key in the sidebar to load this resource" %}
    {% set badge = none %}
    {% set formatted = account_formatted %}
    {% include "shared/resource_panel.html" %}

    {% set title = "Balance" %}
    {% set hook = "octa_client.accounts.balance" %}
    {% set data = balance_data %}
    {% set error = balance_error %}
    {% set locked = not playground_api_key_present %}
    {% set tab_param = "balance_tab" %}
    {% set current_tab = request.query_params.get("balance_tab", "formatted") %}
    {% set empty_copy = "Balance data is unavailable." %}
    {% set locked_copy = "Enter an API key in the sidebar to load this resource" %}
    {% set badge = none %}
    {% set formatted = balance_formatted %}
    {% include "shared/resource_panel.html" %}
  </div>
</div>
{% endblock %}