@extends('backend.layout.master-tailwind')
@section('title', __('Payments'))
@section('breadcrumb_section', 'Marketplace')
@section('breadcrumb_page', __('Payments'))

@section('admin_styles')
<style>
@media (max-width: 640px) {
  /* Hide ID, Time, Method, Fee, Net — keep Type, Counterparty, Amount, State */
  .tbl th:nth-child(1), .tbl td:nth-child(1),
  .tbl th:nth-child(2), .tbl td:nth-child(2),
  .tbl th:nth-child(5), .tbl td:nth-child(5),
  .tbl th:nth-child(7), .tbl td:nth-child(7),
  .tbl th:nth-child(8), .tbl td:nth-child(8) { display: none; }
  /* Allow card-head to wrap so filter chips drop below the title */
  .card-head { flex-wrap: wrap; }
  .card-head .page-actions { margin-left: 0 !important; }
  /* Sparkline SVG scales to card width */
  .pay-sparkline svg { max-width: 100%; height: auto; }
}
</style>
@endsection

@section('content')
@php
// ── Formatters ───────────────────────────────────────────────────────────────
$fmt = function($v) {
    if ($v >= 1_000_000) return '$' . number_format($v / 1_000_000, 1) . 'M';
    if ($v >= 1_000)     return '$' . number_format($v / 1_000, 1) . 'K';
    return '$' . number_format($v, 0);
};
$fmtFull = function($v) {
    return '$' . number_format((float)$v, 0);
};
$delta = function($cur, $prev) {
    if ($prev == 0) return ['val' => '—', 'dir' => ''];
    $pct = round(($cur - $prev) / abs($prev) * 100, 1);
    return ['val' => ($pct >= 0 ? '↑ ' : '↓ ') . abs($pct) . '%', 'dir' => $pct >= 0 ? 'up' : 'down'];
};
$deltaAbs = function($cur, $prev) {
    $diff = $cur - $prev;
    return ['val' => ($diff >= 0 ? '↑ ' : '↓ ') . abs($diff) . ' items', 'dir' => $diff >= 0 ? 'up' : 'down'];
};
$deltaPp = function($cur, $prev) {
    $diff = round($cur - $prev, 2);
    return ['val' => ($diff >= 0 ? '↑ ' : '↓ ') . abs($diff) . 'pp', 'dir' => $diff >= 0 ? 'up' : 'down'];
};

// ── Sparkline SVG ────────────────────────────────────────────────────────────
$sfn = function($pts, $w, $h) {
    $pts = array_values($pts);
    $max = count($pts) ? max($pts) : 0;
    if (!$max) {
        return '<path d="M0,' . $h . ' L' . $w . ',' . $h . '" stroke="var(--accent)" stroke-width="1.4" fill="none"/>';
    }
    $n    = count($pts);
    $step = $n > 1 ? $w / ($n - 1) : $w;
    $pad  = 4;
    $coords = [];
    foreach ($pts as $i => $v) {
        $x = round($i * $step, 1);
        $y = round($h - $pad - ($v / $max) * ($h - $pad * 2), 1);
        $coords[] = "$x $y";
    }
    $line = 'M' . implode(' L', $coords);
    $fill = $line . ' L' . $w . ' ' . $h . ' L0 ' . $h . ' Z';
    $id   = 'pay-cf-' . substr(md5(implode(',', array_map('intval', $pts))), 0, 6);
    return '<defs><linearGradient id="' . $id . '" x1="0" y1="0" x2="0" y2="1">'
        . '<stop offset="0%" stop-color="var(--accent)" stop-opacity="0.28"/>'
        . '<stop offset="100%" stop-color="var(--accent)" stop-opacity="0"/>'
        . '</linearGradient></defs>'
        . '<path d="' . $fill . '" fill="url(#' . $id . ')"/>'
        . '<path d="' . $line . '" stroke="var(--accent)" stroke-width="1.4" fill="none"/>';
};

// ── Transaction type config ───────────────────────────────────────────────────
$typeConf = [
    'escrow_funded'     => ['color' => 'var(--info)',     'label' => __('Escrow funded')],
    'milestone_release' => ['color' => 'var(--success)',  'label' => __('Milestone release')],
    'payout'            => ['color' => 'var(--success)',  'label' => __('Payout')],
    'refund'            => ['color' => 'var(--warn)',     'label' => __('Refund')],
    'subscription'      => ['color' => 'var(--text-dim)', 'label' => __('Subscription')],
    'chargeback'        => ['color' => 'var(--danger)',   'label' => __('Chargeback')],
];

// ── State tag + state key ─────────────────────────────────────────────────────
$resolveState = function($tx) {
    if (in_array((int)$tx->order_status, [6, 7]) || $tx->tx_type === 'chargeback') return 'flagged';
    if ($tx->payment_status === 'complete')  return 'cleared';
    if ($tx->payment_status === 'cancel')    return 'cancelled';
    return 'processing';
};
$stateTag = function($state) {
    $map = [
        'cleared'    => '<span class="tag success"><span class="dot"></span>' . __('Cleared')    . '</span>',
        'processing' => '<span class="tag warn"><span class="dot"></span>'    . __('Processing') . '</span>',
        'flagged'    => '<span class="tag danger"><span class="dot"></span>'  . __('Flagged')    . '</span>',
        'cancelled'  => '<span class="tag"><span class="dot"></span>'         . __('Cancelled')  . '</span>',
    ];
    return $map[$state] ?? $map['processing'];
};

// ── Gateway display name ──────────────────────────────────────────────────────
$gwLabel = function($raw) {
    $map = [
        'stripe'        => 'Stripe',
        'paypal'        => 'PayPal',
        'bank_transfer' => 'Wire',
        'ach'           => 'ACH',
        'wise'          => 'Wise',
        'sepa'          => 'SEPA',
        'manual'        => 'Manual',
    ];
    return $map[strtolower($raw ?? '')] ?? ucfirst($raw ?? '—');
};

// ── Deltas ───────────────────────────────────────────────────────────────────
$dProcessed = $delta($processedToday, $processedYest);
$dPayouts   = $deltaAbs($pendingPayoutsCount, $pendingPayoutsCountPrev);
$dEscrow    = $delta($escrowNew, $escrowPrev);
$dFailure   = $deltaPp($failureRate, $failureRatePrev);
$dCashFlow  = $delta($cashFlowTotal, $cashFlowPrevTotal);

// ── Payout bar colours ────────────────────────────────────────────────────────
$barColors = [
    'var(--accent)',
    'color-mix(in oklch, var(--accent) 70%, white)',
    'color-mix(in oklch, var(--accent) 50%, white)',
    'color-mix(in oklch, var(--accent) 30%, white)',
    'var(--text-dim)',
];
@endphp

<div class="page">
  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('Payments') }}</h1>
      <p class="page-sub">{{ __('All escrow, payouts, refunds, and subscription transactions') }}</p>
    </div>
    <div class="page-actions">
      <div class="pop-wrap">
        <button class="btn" data-pop="payments-export-pop">
          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M5 21h14"/></svg>
          {{ __('Export CSV') }}
          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
        </button>
        <div class="pop" id="payments-export-pop">
          <div class="pop-section">
            <a href="{{ route('admin.payments.export', ['days' => 30]) }}" class="menu-item">{{ __('Last 30 days') }}</a>
            <a href="{{ route('admin.payments.export', ['days' => 90]) }}" class="menu-item">{{ __('Last 90 days') }}</a>
            <a href="{{ route('admin.payments.export', ['days' => 365]) }}" class="menu-item">{{ __('Last 12 months') }}</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- KPIs --}}
  <div class="kpis">
    <div class="kpi">
      <div class="kpi-label">{{ __('Processed today') }}</div>
      <div class="kpi-value">{{ $fmt($processedToday) }}</div>
      <div class="kpi-meta">
        <span class="delta {{ $dProcessed['dir'] }}">{{ $dProcessed['val'] }}</span>
        <span>{{ __('vs yesterday') }}</span>
      </div>
    </div>
    <div class="kpi">
      <div class="kpi-label">{{ __('Pending payouts') }}</div>
      <div class="kpi-value">{{ $fmt($pendingPayoutsAmt) }}</div>
      <div class="kpi-meta">
        <span class="delta {{ $dPayouts['dir'] }}">{{ $dPayouts['val'] }}</span>
        <span>{{ __('vs yesterday') }}</span>
      </div>
    </div>
    <div class="kpi">
      <div class="kpi-label">{{ __('Held in escrow') }}</div>
      <div class="kpi-value">{{ $fmt($heldEscrow) }}</div>
      <div class="kpi-meta">
        <span class="delta {{ $dEscrow['dir'] }}">{{ $dEscrow['val'] }}</span>
        <span>{{ __('new this week') }}</span>
      </div>
    </div>
    <div class="kpi">
      <div class="kpi-label">{{ __('Failure rate (7d)') }}</div>
      <div class="kpi-value">{{ $failureRate }}%</div>
      <div class="kpi-meta">
        <span class="delta {{ $dFailure['dir'] }}">{{ $dFailure['val'] }}</span>
        <span>{{ __('vs prev 7d') }}</span>
      </div>
    </div>
  </div>

  <div class="grid grid-12" style="margin-top:12px">

    {{-- Recent transactions --}}
    <div class="card span-8">
      <div class="card-head">
        <div class="card-title">{{ __('Recent transactions') }}</div>
        <div class="page-actions" style="margin-left:auto">

          {{-- Type filter --}}
          <div class="pop-wrap">
            <span class="filter-chip" id="pay-type-chip">
              <span class="chip-label">{{ __('Type') }}</span>
              <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
            </span>
            <div class="pop pay-pop" id="pay-type-pop" style="min-width:200px;right:auto;left:0">
              <div class="pop-head">
                <span style="font-weight:600;font-size:13px">{{ __('Type') }}</span>
                <button class="btn ghost sm" id="pay-type-clear">{{ __('Clear') }}</button>
              </div>
              <div class="pop-body" style="padding:4px">
                @foreach($typeConf as $typeKey => $tc)
                <label style="display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--radius);cursor:pointer;font-size:12.5px">
                  <input type="checkbox" class="pay-type-check" value="{{ $typeKey }}" style="accent-color:var(--accent);width:14px;height:14px;flex:none">
                  <span style="width:7px;height:7px;border-radius:50%;background:{{ $tc['color'] }};flex:none"></span>
                  {{ $tc['label'] }}
                </label>
                @endforeach
              </div>
            </div>
          </div>

          {{-- State filter --}}
          <div class="pop-wrap">
            <span class="filter-chip" id="pay-state-chip">
              <span class="chip-label">{{ __('State') }}</span>
              <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
            </span>
            <div class="pop pay-pop" id="pay-state-pop" style="min-width:180px;right:auto;left:0">
              <div class="pop-head">
                <span style="font-weight:600;font-size:13px">{{ __('State') }}</span>
                <button class="btn ghost sm" id="pay-state-clear">{{ __('Clear') }}</button>
              </div>
              <div class="pop-body" style="padding:4px">
                @foreach(['cleared' => ['tag'=>'success','label'=>__('Cleared')], 'processing' => ['tag'=>'warn','label'=>__('Processing')], 'flagged' => ['tag'=>'danger','label'=>__('Flagged')], 'cancelled' => ['tag'=>'','label'=>__('Cancelled')]] as $stateKey => $sc)
                <label style="display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--radius);cursor:pointer;font-size:12.5px">
                  <input type="checkbox" class="pay-state-check" value="{{ $stateKey }}" style="accent-color:var(--accent);width:14px;height:14px;flex:none">
                  <span class="tag {{ $sc['tag'] }}" style="font-size:10px;padding:1px 6px">{{ $sc['label'] }}</span>
                </label>
                @endforeach
              </div>
            </div>
          </div>

          {{-- Sort --}}
          <button class="btn ghost sm" id="pay-sort-btn">
            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4v16m0 0-3-3m3 3 3-3"/><path d="M17 20V4m0 0-3 3m3-3 3 3"/></svg>
            <span class="sort-label">{{ __('Newest') }}</span>
          </button>
        </div>
      </div>

      <div style="overflow-x:auto">
        <table class="tbl">
          <thead>
            <tr>
              <th>{{ __('ID') }}</th>
              <th>{{ __('Time') }}</th>
              <th>{{ __('Type') }}</th>
              <th>{{ __('Counterparty') }}</th>
              <th>{{ __('Method') }}</th>
              <th class="num">{{ __('Amount') }}</th>
              <th class="num">{{ __('Fee') }}</th>
              <th class="num">{{ __('Net') }}</th>
              <th>{{ __('State') }}</th>
            </tr>
          </thead>
          <tbody id="pay-tbody">
            @forelse($transactions as $tx)
            @php
              $conf      = $typeConf[$tx->tx_type] ?? ['color' => 'var(--text-dim)', 'label' => $tx->tx_type];
              $prefix    = $tx->direction ? $tx->direction . ' ' : '';
              $fee       = (float)$tx->fee;
              $net       = (float)$tx->net;
              $txState   = $resolveState($tx);
            @endphp
            <tr data-type="{{ $tx->tx_type }}" data-state="{{ $txState }}" data-time="{{ $tx->tx_time }}">
              <td style="font-family:var(--font-mono);font-size:11.5px;color:var(--text-2)">{{ $tx->tx_id }}</td>
              <td class="dim" style="font-family:var(--font-mono);font-size:11.5px">{{ date('H:i', strtotime($tx->tx_time)) }}</td>
              <td>
                <span style="display:inline-flex;align-items:center;gap:6px">
                  <span style="width:6px;height:6px;border-radius:50%;background:{{ $conf['color'] }};flex:none"></span>
                  {{ $conf['label'] }}
                </span>
              </td>
              <td>{{ $prefix }}{{ $tx->counterparty }}</td>
              <td style="font-family:var(--font-mono);font-size:11.5px;color:var(--text-2)">{{ $gwLabel($tx->method) }}</td>
              <td class="num">{{ $fmtFull($tx->amount) }}</td>
              <td class="num dim">{{ $fee > 0 ? $fmtFull($fee) : '—' }}</td>
              <td class="num">{{ $fmtFull($net) }}</td>
              <td>{!! $stateTag($txState) !!}</td>
            </tr>
            @empty
            <tr id="pay-empty">
              <td colspan="9" style="text-align:center;color:var(--text-3);padding:32px 0">{{ __('No transactions yet') }}</td>
            </tr>
            @endforelse
          </tbody>
        </table>

        {{-- No-results row (shown by JS when filters exclude everything) --}}
        <div id="pay-no-results" style="display:none;text-align:center;color:var(--text-3);padding:32px 0;font-size:13px">
          {{ __('No transactions match the selected filters') }}
        </div>
      </div>
    </div>

    {{-- Right column --}}
    <div class="col span-4">

      <div class="card">
        <div class="card-head"><div class="card-title">{{ __('Cash flow (7d)') }}</div></div>
        <div class="card-body">
          <div style="display:flex;align-items:baseline;gap:8px;margin-bottom:8px">
            <span style="font-family:var(--font-mono);font-size:22px;font-weight:500;letter-spacing:-0.02em">{{ $fmt($cashFlowTotal) }}</span>
            <span class="delta {{ $dCashFlow['dir'] }}">{{ $dCashFlow['val'] }}</span>
          </div>
          <div class="pay-sparkline">
            <svg width="280" height="64" viewBox="0 0 280 64" style="display:block">
              {!! $sfn($cashFlowPoints, 280, 64) !!}
            </svg>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-head"><div class="card-title">{{ __('Payout methods') }}</div></div>
        <div class="card-body" style="padding-top:6px">
          @forelse($payoutMethods as $i => $gw)
          @php $pct = $payoutTotal > 0 ? round($gw->total / $payoutTotal * 100) : 0; @endphp
          <div style="display:flex;align-items:center;gap:8px;padding:5px 0">
            <span style="flex:1;font-size:12.5px">{{ $gw->gateway_name }}</span>
            <div class="bar" style="width:100px">
              <span style="width:{{ $pct }}%;background:{{ $barColors[$i] ?? 'var(--text-dim)' }}"></span>
            </div>
            <span style="font-family:var(--font-mono);font-size:12px;width:36px;text-align:right;color:var(--text-2)">{{ $pct }}%</span>
          </div>
          @empty
          <p style="color:var(--text-3);font-size:12.5px;padding:8px 0">{{ __('No completed payouts yet') }}</p>
          @endforelse
        </div>
      </div>

      <div class="card">
        <div class="card-head"><div class="card-title">{{ __('Risk flags') }}</div></div>
        <div class="card-body" style="padding-top:6px">
          <div class="list-row" style="padding:8px 0;border-bottom:1px solid var(--border)">
            <span style="flex:1;font-size:12.5px">{{ __('Velocity spikes') }}</span>
            <span class="tag {{ $velocitySpikes > 0 ? 'warn' : 'success' }}"><span class="dot"></span>{{ $velocitySpikes }}</span>
          </div>
          <div class="list-row" style="padding:8px 0;border-bottom:1px solid var(--border)">
            <span style="flex:1;font-size:12.5px">{{ __('Chargebacks (7d)') }}</span>
            <span class="tag {{ $chargebacks7d > 0 ? 'danger' : 'success' }}"><span class="dot"></span>{{ $chargebacks7d }}</span>
          </div>
          <div class="list-row" style="padding:8px 0;border-bottom:1px solid var(--border)">
            <span style="flex:1;font-size:12.5px">{{ __('High-value new users (7d)') }}</span>
            <span class="tag {{ $amlHighRisk > 0 ? 'warn' : 'success' }}"><span class="dot"></span>{{ $amlHighRisk }}</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
@endsection

@section('script')
<script>
(function () {
  'use strict';

  var tbody      = document.getElementById('pay-tbody');
  var noResults  = document.getElementById('pay-no-results');
  var rows       = Array.from(tbody.querySelectorAll('tr[data-type]'));
  var activeTypes  = new Set();
  var activeStates = new Set();
  var sortDir      = 'desc'; // newest first

  // ── Filter rows ────────────────────────────────────────────────────────────
  function applyFilters() {
    var visible = 0;
    rows.forEach(function (row) {
      var typeOk  = activeTypes.size  === 0 || activeTypes.has(row.dataset.type);
      var stateOk = activeStates.size === 0 || activeStates.has(row.dataset.state);
      var show    = typeOk && stateOk;
      row.style.display = show ? '' : 'none';
      if (show) visible++;
    });
    noResults.style.display = visible === 0 && rows.length > 0 ? 'block' : 'none';
    updateChipLabels();
  }

  // ── Sort rows ──────────────────────────────────────────────────────────────
  function applySort() {
    var sorted = rows.slice().sort(function (a, b) {
      return sortDir === 'desc'
        ? b.dataset.time.localeCompare(a.dataset.time)
        : a.dataset.time.localeCompare(b.dataset.time);
    });
    sorted.forEach(function (r) { tbody.appendChild(r); });
  }

  // ── Chip label update ──────────────────────────────────────────────────────
  function updateChipLabels() {
    var tc = document.getElementById('pay-type-chip');
    var sc = document.getElementById('pay-state-chip');
    if (activeTypes.size > 0) {
      tc.classList.add('applied');
      tc.querySelector('.chip-label').textContent = '{{ __("Type") }}' + ' · ' + activeTypes.size;
    } else {
      tc.classList.remove('applied');
      tc.querySelector('.chip-label').textContent = '{{ __("Type") }}';
    }
    if (activeStates.size > 0) {
      sc.classList.add('applied');
      sc.querySelector('.chip-label').textContent = '{{ __("State") }}' + ' · ' + activeStates.size;
    } else {
      sc.classList.remove('applied');
      sc.querySelector('.chip-label').textContent = '{{ __("State") }}';
    }
  }

  // ── Pop open/close ─────────────────────────────────────────────────────────
  function closePops() {
    document.querySelectorAll('.pay-pop').forEach(function (p) { p.classList.remove('open'); });
  }

  ['pay-type-chip', 'pay-state-chip'].forEach(function (id) {
    var chip = document.getElementById(id);
    chip.addEventListener('click', function (e) {
      e.stopPropagation();
      var pop  = chip.nextElementSibling;
      var open = pop.classList.contains('open');
      closePops();
      if (!open) pop.classList.add('open');
    });
  });

  document.querySelectorAll('.pay-pop').forEach(function (p) {
    p.addEventListener('click', function (e) { e.stopPropagation(); });
  });
  document.addEventListener('click', closePops);

  // ── Type checkboxes ────────────────────────────────────────────────────────
  document.querySelectorAll('.pay-type-check').forEach(function (cb) {
    cb.addEventListener('change', function () {
      if (this.checked) activeTypes.add(this.value);
      else activeTypes.delete(this.value);
      applyFilters();
    });
  });
  document.getElementById('pay-type-clear').addEventListener('click', function () {
    activeTypes.clear();
    document.querySelectorAll('.pay-type-check').forEach(function (cb) { cb.checked = false; });
    applyFilters();
  });

  // ── State checkboxes ───────────────────────────────────────────────────────
  document.querySelectorAll('.pay-state-check').forEach(function (cb) {
    cb.addEventListener('change', function () {
      if (this.checked) activeStates.add(this.value);
      else activeStates.delete(this.value);
      applyFilters();
    });
  });
  document.getElementById('pay-state-clear').addEventListener('click', function () {
    activeStates.clear();
    document.querySelectorAll('.pay-state-check').forEach(function (cb) { cb.checked = false; });
    applyFilters();
  });

  // ── Sort button ────────────────────────────────────────────────────────────
  document.getElementById('pay-sort-btn').addEventListener('click', function () {
    sortDir = sortDir === 'desc' ? 'asc' : 'desc';
    this.querySelector('.sort-label').textContent = sortDir === 'desc' ? '{{ __("Newest") }}' : '{{ __("Oldest") }}';
    applySort();
  });

})();
</script>
@endsection