<script lang="ts">
  import { satsComma } from "$lib";
  import { walletState } from "$lib/wallet.svelte";
  import LoadingIndicator from "./LoadingIndicator.svelte";

  let loading = $derived(!$walletState.open);

  const formattedTotal = $derived(satsComma($walletState.balance));
  const formattedPending = $derived(satsComma($walletState.pendingBalance));
  const formattedLightning = $derived(
    satsComma($walletState.balance - $walletState.cashuBalance)
  );
  const formattedCashu = $derived(satsComma($walletState.cashuBalance));

  let showSplit = $state(false);
  let containerEl: HTMLButtonElement;

  function toggleSplit() {
    showSplit = !showSplit;
  }

  $effect(() => {
    function handleOutside(e: MouseEvent) {
      if (containerEl && !containerEl.contains(e.target as Node)) {
        showSplit = false;
      }
    }
    if (showSplit) {
      window.addEventListener("click", handleOutside);
      return () => window.removeEventListener("click", handleOutside);
    }
  });
</script>

<button
  class="balance-container"
  bind:this={containerEl}
  onclick={toggleSplit}
  aria-label="Toggle balance split"
>
  <div class="balance-label">Total Balance</div>
  <div class="balance-value">
    {#if loading}
      <LoadingIndicator />
    {:else}
      {formattedTotal} sats
    {/if}
  </div>
  <div class="pending-label">Pending</div>
  <div class="pending-value">
    {#if loading}
      <LoadingIndicator />
    {:else}
      {formattedPending} sats
    {/if}
  </div>
  {#if showSplit}
    <div class="popover">
      <div class="split-row lightning">
        <iconify-icon icon="icon-park-twotone:lightning" width="32" height="32"
        ></iconify-icon>
        <span class="label">Lightning</span>
        <span class="amount">
          {#if loading}
            <LoadingIndicator />
          {:else}
            {formattedLightning} sats
          {/if}
        </span>
      </div>
      <div class="split-row cashu">
        <iconify-icon icon="tdesign:nut-filled" width="32" height="32"
        ></iconify-icon>
        <span class="label">Cashu</span>
        <span class="amount">
          {#if loading}
            <LoadingIndicator />
          {:else}
            {formattedCashu} sats
          {/if}
        </span>
      </div>
      <div class="threshold">Auto-melt at 2000 sats</div>
    </div>
  {/if}
</button>

<style>
  .balance-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1rem;
    background: var(--surface-color);
    border: 3px solid var(--accent-color);
    border-radius: 8px;
    box-shadow:
      0 0 0 4px #000,
      0 0 0 8px var(--primary-color);
    padding: 1.2rem 1.5rem;
    position: relative;
    cursor: pointer;
    width: 100%;
  }

  .balance-label {
    font-size: 0.9rem;
    color: var(--primary-color);
    margin-bottom: 0.2rem;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 #000;
  }
  .balance-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    text-shadow:
      2px 2px 0 #000,
      0 0 8px var(--accent-color);
  }
  .pending-label {
    font-size: 0.8rem;
    color: var(--accent-color);
    text-shadow: 1px 1px 0 #000;
  }
  .pending-value {
    font-size: 1rem;
    color: var(--accent-color);
    text-shadow: 1px 1px 0 #000;
  }
  .popover {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.5rem;
    background: var(--surface-alt-color);
    border: 2px solid var(--accent-color);
    border-radius: 6px;
    padding: 0.8rem 1rem;
    box-shadow:
      0 0 0 3px #000,
      0 0 0 6px var(--primary-color);
    z-index: 10;
    min-width: 220px;
  }
  .split-row {
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    color: var(--text-color);
    text-shadow: 1px 1px 0 #000;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .split-row .label {
    margin-left: 0.2rem;
  }
  .split-row .amount {
    margin-left: auto;
    text-align: right;
    min-width: 6ch;
  }
  .threshold {
    font-size: 0.75rem;
    color: var(--accent-color);
    text-shadow: 1px 1px 0 #000;
  }
</style>
