@extends('layouts.app')
@section('title', 'My P2P Activity')

@push('styles')
<style>
.p2p-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--border);padding-bottom:.65rem;flex-wrap:wrap;}
.p2p-tab{padding:.45rem 1rem;border-radius:8px;border:none;background:none;color:var(--muted);font-size:.855rem;font-weight:600;cursor:pointer;transition:.2s;}
.p2p-tab.active{background:rgba(99,102,241,.12);color:#a5b4fc;}
.p2p-panel{display:none;}.p2p-panel.active{display:block;}
.order-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.25rem;margin-bottom:.85rem;transition:.2s;}
.order-card:hover{border-color:rgba(99,102,241,.2);}
.order-card.status-paid{border-left:3px solid #fbbf24;}
.order-card.status-disputed{border-left:3px solid #f87171;}
.order-card.status-released{border-left:3px solid var(--gl);}
.order-card.status-pending{border-left:3px solid rgba(255,255,255,.15);}
.oc-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:.75rem;margin-bottom:.85rem;}
.oc-amount{font-size:1.2rem;font-weight:900;color:#a5b4fc;}
.oc-naira{font-size:.78rem;color:var(--muted);margin-top:.1rem;}
.oc-meta{font-size:.75rem;color:var(--muted);margin-bottom:.75rem;}
.oc-actions{display:flex;gap:.5rem;flex-wrap:wrap;}
.oc-btn{padding:.38rem .9rem;border-radius:8px;font-size:.75rem;font-weight:700;cursor:pointer;border:none;transition:.2s;text-decoration:none;display:inline-flex;align-items:center;gap:.3rem;}
.oc-view{background:rgba(99,102,241,.1);color:#a5b4fc;border:1px solid rgba(99,102,241,.2);}
.oc-release{background:rgba(76,175,80,.12);color:var(--gl);border:1px solid rgba(76,175,80,.2);}
.oc-paid{background:rgba(96,165,250,.1);color:#60a5fa;border:1px solid rgba(96,165,250,.2);}
.oc-cancel{background:rgba(255,255,255,.04);color:var(--muted);border:1px solid var(--border);}
</style>
@endpush

@section('content')
<div class="page-header" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;">
  <div><h1>My P2P Activity</h1><p>Manage your listings, buy orders, and sell orders</p></div>
  <a href="{{ route('p2p.index') }}" style="background:rgba(99,102,241,.12);color:#a5b4fc;border:1px solid rgba(99,102,241,.2);border-radius:10px;padding:.5rem 1rem;font-size:.82rem;font-weight:700;text-decoration:none;">← Marketplace</a>
</div>

@if(session('success'))
<div class="alert alert-success"><i class="fas fa-check-circle"></i> {{ session('success') }}</div>
@endif

<div class="p2p-tabs">
  <button class="p2p-tab active" onclick="switchTab('buy',this)"><i class="fas fa-shopping-cart"></i> My Buy Orders <span style="background:rgba(99,102,241,.2);border-radius:50px;padding:.1rem .45rem;font-size:.68rem;margin-left:.3rem;">{{ $buyOrders->count() }}</span></button>
  <button class="p2p-tab" onclick="switchTab('sell',this)"><i class="fas fa-tag"></i> My Sell Orders <span style="background:rgba(99,102,241,.2);border-radius:50px;padding:.1rem .45rem;font-size:.68rem;margin-left:.3rem;">{{ $myOrders->count() }}</span></button>
  <button class="p2p-tab" onclick="switchTab('listings',this)"><i class="fas fa-list"></i> My Listings <span style="background:rgba(99,102,241,.2);border-radius:50px;padding:.1rem .45rem;font-size:.68rem;margin-left:.3rem;">{{ $listings->total() }}</span></button>
</div>

{{-- BUY ORDERS --}}
<div class="p2p-panel active" id="tab-buy">
  @forelse($buyOrders as $order)
  <div class="order-card status-{{ $order->status }}">
    <div class="oc-header">
      <div>
        <div class="oc-amount">{{ number_format($order->coins_amount) }} NC</div>
        <div class="oc-naira">₦{{ number_format($order->total_naira) }} · from {{ $order->seller->name }}</div>
      </div>
      <span class="badge badge-{{ $order->statusColor() }}">{{ ucfirst($order->status) }}</span>
    </div>
    <div class="oc-meta">
      Placed {{ $order->created_at->format('d M Y, H:i') }}
      @if($order->expires_at && $order->status === 'pending') · Expires {{ $order->expires_at->format('H:i') }}@endif
      @if($order->paid_at) · Paid {{ $order->paid_at->format('d M H:i') }}@endif
    </div>

    @if($order->status === 'pending')
    <div style="background:rgba(251,191,36,.06);border:1px solid rgba(251,191,36,.12);border-radius:10px;padding:.75rem 1rem;font-size:.78rem;color:rgba(251,191,36,.8);margin-bottom:.85rem;">
      <i class="fas fa-clock"></i> Send payment to seller and mark as paid below.
      @if($order->listing->bank_name)
      <div style="margin-top:.4rem;font-weight:700;">Bank: {{ $order->listing->bank_name }} · {{ $order->listing->account_number }} · {{ $order->listing->account_name }}</div>
      @endif
    </div>
    @endif

    <div class="oc-actions">
      <a href="{{ route('p2p.order', $order) }}" class="oc-btn oc-view"><i class="fas fa-eye"></i> View</a>
      @if($order->status === 'pending')
      <form method="POST" action="{{ route('p2p.order.paid', $order) }}" style="display:inline;">
        @csrf
        <button class="oc-btn oc-paid"><i class="fas fa-check"></i> Mark as Paid</button>
      </form>
      <form method="POST" action="{{ route('p2p.order.cancel', $order) }}" onsubmit="return confirm('Cancel order?')" style="display:inline;">
        @csrf
        <button class="oc-btn oc-cancel">Cancel</button>
      </form>
      @endif
    </div>
  </div>
  @empty
  <div style="text-align:center;padding:3rem;color:var(--muted);">
    <i class="fas fa-shopping-cart" style="font-size:2rem;opacity:.2;display:block;margin-bottom:.75rem;"></i>
    No buy orders yet. <a href="{{ route('p2p.index') }}" style="color:#a5b4fc;">Browse listings →</a>
  </div>
  @endforelse
</div>

{{-- SELL ORDERS --}}
<div class="p2p-panel" id="tab-sell">
  @forelse($myOrders as $order)
  <div class="order-card status-{{ $order->status }}">
    <div class="oc-header">
      <div>
        <div class="oc-amount">{{ number_format($order->coins_amount) }} NC</div>
        <div class="oc-naira">₦{{ number_format($order->total_naira) }} · to {{ $order->buyer->name }}</div>
      </div>
      <span class="badge badge-{{ $order->statusColor() }}">{{ ucfirst($order->status) }}</span>
    </div>
    <div class="oc-meta">
      Placed {{ $order->created_at->format('d M Y, H:i') }}
      @if($order->paid_at) · <span style="color:#fbbf24;font-weight:700;">Payment marked {{ $order->paid_at->format('d M H:i') }}</span>@endif
    </div>

    @if($order->status === 'paid')
    <div style="background:rgba(76,175,80,.06);border:1px solid rgba(76,175,80,.15);border-radius:10px;padding:.75rem 1rem;font-size:.78rem;color:rgba(129,199,132,.9);margin-bottom:.85rem;">
      <i class="fas fa-check-circle"></i> Buyer has marked payment as sent. Verify and release coins.
    </div>
    @endif

    <div class="oc-actions">
      <a href="{{ route('p2p.order', $order) }}" class="oc-btn oc-view"><i class="fas fa-eye"></i> View</a>
      @if(in_array($order->status, ['paid','pending']))
      <form method="POST" action="{{ route('p2p.order.release', $order) }}" onsubmit="return confirm('Release coins to buyer? This cannot be undone.')" style="display:inline;">
        @csrf
        <button class="oc-btn oc-release"><i class="fas fa-unlock"></i> Release Coins</button>
      </form>
      @endif
    </div>
  </div>
  @empty
  <div style="text-align:center;padding:3rem;color:var(--muted);">
    <i class="fas fa-tag" style="font-size:2rem;opacity:.2;display:block;margin-bottom:.75rem;"></i>
    No sell orders yet.
  </div>
  @endforelse
</div>

{{-- MY LISTINGS --}}
<div class="p2p-panel" id="tab-listings">
  @forelse($listings as $listing)
  <div class="order-card">
    <div class="oc-header">
      <div>
        <div class="oc-amount">{{ number_format($listing->coins_available) }} NC available</div>
        <div class="oc-naira">₦{{ number_format($listing->price_per_coin, 2) }}/NC · Total ≈ ₦{{ number_format($listing->totalNaira()) }}</div>
      </div>
      <span class="badge badge-{{ ['active'=>'confirmed','paused'=>'pending','completed'=>'confirmed','cancelled'=>'rejected'][$listing->status] ?? 'pending' }}">{{ ucfirst($listing->status) }}</span>
    </div>
    <div class="oc-meta">
      Posted {{ $listing->created_at->format('d M Y') }} · {{ $listing->orders()->count() }} orders
    </div>
    <div class="oc-actions">
      @if($listing->status === 'active')
      <form method="POST" action="{{ route('p2p.listings.cancel', $listing) }}" onsubmit="return confirm('Cancel listing? Remaining coins will be refunded.')" style="display:inline;">
        @csrf
        <button class="oc-btn" style="background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.2);">
          <i class="fas fa-times"></i> Cancel Listing
        </button>
      </form>
      @endif
    </div>
  </div>
  @empty
  <div style="text-align:center;padding:3rem;color:var(--muted);">
    <i class="fas fa-list" style="font-size:2rem;opacity:.2;display:block;margin-bottom:.75rem;"></i>
    No listings yet. <a href="{{ route('p2p.index') }}" style="color:#a5b4fc;">Post a listing →</a>
  </div>
  @endforelse
  @if($listings->hasPages())
  <div style="margin-top:1rem;">{{ $listings->links() }}</div>
  @endif
</div>

@push('scripts')
<script>
function switchTab(id, btn) {
  document.querySelectorAll('.p2p-panel').forEach(p => p.classList.remove('active'));
  document.querySelectorAll('.p2p-tab').forEach(b => b.classList.remove('active'));
  document.getElementById('tab-' + id).classList.add('active');
  btn.classList.add('active');
}
</script>
@endpush
@endsection