{{-- resources/views/dashboard/wallet/index.blade.php --}}
@extends('layouts.user')
@section('title', 'Wallet')
@section('content')

@php
  $txByAsset = [];
  foreach ($recentTransactions as $tx) {
      $txByAsset[strtoupper((string) $tx->asset)][] = $tx;
  }
  $donutLabels = array_keys($balances);
  $donutSeries = array_values(array_map(fn($v) => (float) $v, $balancesUsd ?? []));
  $totalAssets = count($balances);
  $totalBalance = array_sum($donutSeries);
  $assetIconBase = 'https://cdn.jsdelivr.net/gh/spothq/cryptocurrency-icons@master/32/color/';
@endphp

<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=DM+Mono:wght@400;500&display=swap');

/* ── Portfolio Hero ── */
.wallet-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 0 0;
  margin-bottom: 24px;
}
.wallet-hero__ring {
  position: relative;
  width: 240px;
  height: 240px;
}
.wallet-hero__ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.wallet-hero__total {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.wallet-hero__val {
  font-size: 28px;
  font-weight: 800;
  color: var(--text, #1e293b);
  line-height: 1;
  letter-spacing: -1px;
}
.wallet-hero__val span { font-size: 15px; font-weight: 600; opacity: .6; }
.wallet-hero__sub { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ── Stats Bar ── */
.wallet-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border, #e5e7eb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 24px;
}
.wallet-stat {
  background: var(--card-bg, #fff);
  padding: 16px 18px;
  text-align: center;
}
.wallet-stat__lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 5px;
}
.wallet-stat__val {
  font-size: 17px;
  font-weight: 800;
  color: var(--text, #1e293b);
  letter-spacing: -.4px;
}
.wallet-stat__val.up  { color: var(--success, #059669); }
.wallet-stat__val.down { color: var(--danger, #dc2626); }

/* ── Section Header ── */
.wallet-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
  flex-wrap: wrap;
}
.wallet-section-hdr h2 {
  font-size: 14px;
  font-weight: 800;
  color: var(--text, #1e293b);
  letter-spacing: -.3px;
}
.wallet-section-hdr__actions { display: flex; gap: 8px; }

/* ── Asset List ── */
.asset-list {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  overflow: hidden;
  background: var(--card-bg, #fff);
  margin-bottom: 0;
}
.asset-list__head {
  display: grid;
  grid-template-columns: 44px 1fr 160px 80px 80px 36px;
  gap: 10px;
  padding: 9px 18px;
  background: var(--surface, #f8fafc);
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.asset-row { border-bottom: 1px solid var(--border, #e5e7eb); }
.asset-row:last-child { border-bottom: 0; }

.asset-row__main {
  display: grid;
  grid-template-columns: 44px 1fr 160px 80px 80px 36px;
  gap: 10px;
  align-items: center;
  padding: 13px 18px;
  cursor: pointer;
  transition: background .15s;
  min-width: 0;
}
.asset-row__main:hover { background: var(--surface, #f8fafc); }
.asset-row__main.active { background: #fff8f8; }

.asset-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.asset-icon {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--primary-lt, #ffe9ec);
  color: var(--primary, #d70016);
  font-size: 10px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid rgba(215,0,22,.2);
}
.asset-icon__img { width: 20px; height: 20px; border-radius: 50%; display: block; }
.asset-icon__text { display: none; }
.asset-icon.has-balance {
  background: var(--primary, #d70016);
  color: #fff;
  border-color: transparent;
}
.asset-name { font-size: 13px; font-weight: 700; color: var(--text, #1e293b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-ticker { font-size: 11px; color: var(--muted); margin-top: 1px; }

.asset-balance {
  font-size: 12px;
  font-weight: 700;
  font-family: 'DM Mono', monospace;
  color: var(--text, #1e293b);
  min-width: 0;
}
.asset-balance.zero { color: var(--muted); font-weight: 500; }
.asset-trend { height: 34px; }
.asset-chevron {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--muted);
  font-size: 16px;
  transition: transform .2s ease;
}
.asset-row__main.active .asset-chevron { transform: rotate(90deg); }

/* ── Transaction Drawer ── */
.asset-drawer {
  display: none;
  border-top: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #f8fafc);
  animation: drawerIn .18s ease both;
}
.asset-drawer.open { display: block; }

@keyframes drawerIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.drawer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  gap: 10px;
  flex-wrap: wrap;
}
.drawer-toolbar h3 { font-size: 12px; font-weight: 700; color: var(--text, #1e293b); }
.drawer-actions { display: flex; gap: 8px; flex-shrink: 0; }

.tx-list { padding: 6px 18px 14px; }
.tx-empty { text-align: center; padding: 24px; color: var(--muted); font-size: 13px; }
.tx-item {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.tx-item:last-child { border-bottom: 0; }
.tx-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.tx-icon.credit { background: rgba(5,150,105,.12); color: #059669; }
.tx-icon.debit  { background: rgba(220,38,38,.10);  color: #dc2626; }
.tx-body { min-width: 0; }
.tx-ref { font-size: 10px; font-family: 'DM Mono', monospace; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-meta { display: flex; align-items: center; gap: 7px; margin-top: 3px; flex-wrap: wrap; }
.tx-type { font-size: 11px; font-weight: 600; color: var(--text, #1e293b); }
.tx-date { font-size: 11px; color: var(--muted); }
.tx-right { text-align: right; flex-shrink: 0; }
.tx-amount { font-size: 12px; font-weight: 700; font-family: 'DM Mono', monospace; }
.tx-amount.credit { color: #059669; }
.tx-amount.debit  { color: #dc2626; }

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 860px) {
  .wallet-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .wallet-hero__ring { width: 200px; height: 200px; }
  .wallet-hero__val { font-size: 22px; }

  /* Hide desktop column header, use horizontal scroll instead */
  .asset-list__head { display: none; }

  /* Simplified 3-column row on mobile: icon | name+balance | chevron */
  .asset-row__main {
    grid-template-columns: 38px 1fr 24px;
    gap: 10px;
    padding: 12px 14px;
  }
  /* Hide trend + txcount columns */
  .asset-row__main > .asset-trend,
  .asset-row__main > div:nth-child(4) { display: none; }

  .asset-icon { width: 36px; height: 36px; }

  .drawer-toolbar { padding: 10px 14px; }
  .tx-list { padding: 6px 14px 12px; }
}

@media (max-width: 480px) {
  .wallet-stats { grid-template-columns: 1fr 1fr; }
  .wallet-stat { padding: 12px 14px; }
  .wallet-stat__val { font-size: 15px; }

  .wallet-hero__ring { width: 180px; height: 180px; }
  .wallet-hero__val { font-size: 20px; }

  .asset-row__main { padding: 10px 12px; gap: 8px; }
}
</style>

{{-- ── Page Header ── --}}
<div class="page-hdr">
  <h1 class="page-hdr__title">Wallet</h1>
  <div class="page-hdr__right">
    <a href="{{ route('dashboard.wallet.deposit') }}" class="btn btn--primary btn--sm">
      <i class="icon ion-md-arrow-down"></i> Deposit
    </a>
    <a href="{{ route('dashboard.wallet.withdraw') }}" class="btn btn--outline btn--sm">
      <i class="icon ion-md-arrow-up"></i> Withdraw
    </a>
  </div>
</div>

{{-- ── Portfolio Ring ── --}}
<div class="wallet-hero">
  <div class="wallet-hero__ring">
    <div id="walletDonut"></div>
    <div class="wallet-hero__ring-center">
      <div class="wallet-hero__total">Portfolio</div>
      <div class="wallet-hero__val">
        <span>$</span>{{ number_format($totalBalance, 2) }}
      </div>
      <div class="wallet-hero__sub">{{ $totalAssets }} Active Asset{{ $totalAssets !== 1 ? 's' : '' }}</div>
    </div>
  </div>
</div>

{{-- ── Stats Bar ── --}}
<div class="wallet-stats mb-6">
  <div class="wallet-stat">
    <div class="wallet-stat__lbl">Supported Assets</div>
    <div class="wallet-stat__val">{{ $cryptocurrencies->count() }}</div>
  </div>
  <div class="wallet-stat">
    <div class="wallet-stat__lbl">Active Balances</div>
    <div class="wallet-stat__val up">{{ $totalAssets }}</div>
  </div>
  <div class="wallet-stat">
    <div class="wallet-stat__lbl">Deposits</div>
    <div class="wallet-stat__val">{{ $recentTransactions->where('type', 'deposit')->count() }}</div>
  </div>
  <div class="wallet-stat">
    <div class="wallet-stat__lbl">Withdrawals</div>
    <div class="wallet-stat__val">{{ $recentTransactions->where('type', 'withdrawal')->count() }}</div>
  </div>
</div>

{{-- ── Asset List ── --}}
<div class="wallet-section-hdr">
  <h2>All Assets</h2>
  <div class="wallet-section-hdr__actions">
    <a href="{{ route('dashboard.wallet.deposit') }}" class="btn btn--primary btn--sm">
      <i class="icon ion-md-arrow-down"></i> Deposit
    </a>
    <a href="{{ route('dashboard.wallet.withdraw') }}" class="btn btn--outline btn--sm">
      <i class="icon ion-md-arrow-up"></i> Withdraw
    </a>
  </div>
</div>

<div class="asset-list">
  <div class="asset-list__head">
    <span></span>
    <span>Asset</span>
    <span>Balance</span>
    <span>Trend</span>
    <span>Transactions</span>
    <span></span>
  </div>

  @foreach ($cryptocurrencies as $crypto)
  @php
    $assetKey    = strtoupper((string) ($crypto->asset ?? ($crypto->symbol ?? $crypto->name)));
    $bal         = $balances[$assetKey] ?? 0;
    $hasBal      = (float) $bal > 0;
    $assetTxs    = $txByAsset[$assetKey] ?? [];
    $txCount     = count($assetTxs);
    $balUsd      = (float) ($balancesUsd[$assetKey] ?? 0);
    $sparkId     = 'spark_' . Str::slug($assetKey);
    $drawerId    = 'drawer_' . Str::slug($assetKey);
    $assetIconUrl = $assetIconBase . strtolower($assetKey) . '.png';
  @endphp

  <div class="asset-row">
    <div class="asset-row__main" onclick="toggleAsset('{{ $drawerId }}', this)">
      <div class="asset-icon {{ $hasBal ? 'has-balance' : '' }}">
        <img src="{{ $assetIconUrl }}" alt="{{ $assetKey }}" class="asset-icon__img"
             loading="lazy"
             onerror="this.style.display='none';this.nextElementSibling.style.display='inline';">
        <span class="asset-icon__text">{{ strtoupper(substr($assetKey, 0, 3)) }}</span>
      </div>
      <div class="asset-id">
        <div>
          <div class="asset-name">{{ $crypto->name ?? $assetKey }}</div>
          <div class="asset-ticker">{{ $assetKey }}</div>
        </div>
      </div>
      <div class="asset-balance {{ !$hasBal ? 'zero' : '' }}">
        @if ($hasBal)
          {{ number_format((float) $bal, 6) }}
          <div style="font-size:10px;color:var(--muted);margin-top:1px;">${{ number_format($balUsd, 2) }}</div>
        @else
          <span>0.00</span>
          <div style="font-size:10px;color:var(--muted);margin-top:1px;">$0.00</div>
        @endif
      </div>
      <div class="asset-trend" id="{{ $sparkId }}"></div>
      <div>
        @if ($txCount > 0)
          <span class="badge badge-processing" style="font-size:10px;">{{ $txCount }} tx</span>
        @else
          <span style="font-size:12px;color:var(--muted);">—</span>
        @endif
      </div>
      <div class="asset-chevron"><i class="icon ion-ios-arrow-forward"></i></div>
    </div>

    <div class="asset-drawer" id="{{ $drawerId }}">
      <div class="drawer-toolbar">
        <h3>{{ $crypto->name ?? $assetKey }} ({{ $assetKey }}) — Transactions</h3>
        <div class="drawer-actions">
          <a href="{{ route('dashboard.wallet.deposit', ['asset' => $assetKey]) }}" class="btn btn--success btn--sm">
            <i class="icon ion-md-arrow-down"></i> Deposit
          </a>
          <a href="{{ route('dashboard.wallet.withdraw', ['asset' => $assetKey]) }}" class="btn btn--outline btn--sm">
            <i class="icon ion-md-arrow-up"></i> Withdraw
          </a>
        </div>
      </div>
      <div class="tx-list">
        @forelse($assetTxs as $tx)
        @php $isCredit = $tx->direction === 'credit'; @endphp
        <div class="tx-item">
          <div class="tx-icon {{ $isCredit ? 'credit' : 'debit' }}">
            <i class="icon ion-md-arrow-{{ $isCredit ? 'down' : 'up' }}"></i>
          </div>
          <div class="tx-body">
            <div class="tx-ref">{{ $tx->reference }}</div>
            <div class="tx-meta">
              <span class="tx-type">{{ ucfirst($tx->type) }} · {{ ucfirst($tx->direction) }}</span>
              <span class="badge badge-{{ $tx->status }}" style="font-size:10px;">{{ ucfirst($tx->status) }}</span>
              <span class="tx-date">{{ $tx->created_at?->format('M d, Y H:i') }}</span>
            </div>
          </div>
          <div class="tx-right">
            <div class="tx-amount {{ $isCredit ? 'credit' : 'debit' }}">
              {{ $isCredit ? '+' : '-' }}{{ number_format((float) $tx->amount, 8) }}
            </div>
            <div style="font-size:10px;color:var(--muted);margin-top:2px;">{{ $assetKey }}</div>
          </div>
        </div>
        @empty
        <div class="tx-empty">
          <i class="icon ion-md-document" style="font-size:26px;display:block;margin-bottom:8px;opacity:.4;"></i>
          No transactions for {{ $assetKey }} yet.
        </div>
        @endforelse
      </div>
    </div>
  </div>
  @endforeach
</div>

@endsection
@push('scripts')
<script>
(function() {
  var labels = @json($donutLabels);
  var series = @json($donutSeries);
  if (labels.length === 0) { labels = ['No Assets']; series = [1]; }

  new ApexCharts(document.getElementById('walletDonut'), {
    series: series,
    labels: labels,
    chart: { type: 'donut', height: 240, sparkline: { enabled: false }, toolbar: { show: false } },
    stroke: { width: 0 },
    plotOptions: {
      pie: { donut: { size: '74%', labels: { show: false } }, expandOnClick: false },
    },
    dataLabels: { enabled: false },
    legend: { show: false },
    colors: ['var(--primary,#d70016)','#06b6d4','#8b5cf6','#d97706','#059669','#f43f5e','#84cc16','#fb923c'],
    tooltip: { y: { formatter: function(v){ return '$' + Number(v).toFixed(2); } } },
  }).render();

  var sparkBase = [
    [30,42,35,55,40,68,52,74,60,80],
    [50,38,55,30,62,48,70,42,65,55],
    [20,35,28,45,38,52,40,60,48,58],
    [60,48,65,40,55,38,50,32,45,55],
    [25,40,32,50,44,60,50,70,55,72],
  ];
  document.querySelectorAll('.asset-row').forEach(function(row, i) {
    var el = row.querySelector('[id^="spark_"]');
    if (!el) return;
    var hasBal = row.querySelector('.asset-icon.has-balance');
    var color  = hasBal ? 'var(--primary,#d70016)' : '#94a3b8';
    new ApexCharts(el, {
      series: [{ data: sparkBase[i % sparkBase.length] }],
      chart: { type: 'line', height: 34, sparkline: { enabled: true }, toolbar: { show: false } },
      stroke: { curve: 'smooth', width: 2 },
      colors: [color],
      tooltip: { enabled: false },
      dataLabels: { enabled: false },
    }).render();
  });
})();

function toggleAsset(drawerId, trigger) {
  var drawer = document.getElementById(drawerId);
  var isOpen = drawer.classList.contains('open');
  document.querySelectorAll('.asset-drawer.open').forEach(function(d){ d.classList.remove('open'); });
  document.querySelectorAll('.asset-row__main.active').forEach(function(r){ r.classList.remove('active'); });
  if (!isOpen) {
    drawer.classList.add('open');
    trigger.classList.add('active');
    setTimeout(function(){ drawer.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }, 60);
  }
}
</script>
@endpush