@extends('layouts.app')
@section('title','Send Coins')

@push('styles')
<style>
/* ── HERO CARD ── */
.transfer-hero{background:linear-gradient(135deg,#0f1020,#1a1040,#0f1020);border:1px solid rgba(99,102,241,.25);border-radius:22px;padding:2rem;margin-bottom:2rem;position:relative;overflow:hidden;}
.transfer-hero::before{content:'';position:absolute;top:-60px;right:-60px;width:220px;height:220px;background:radial-gradient(circle,rgba(99,102,241,.18),transparent 70%);border-radius:50%;}
.transfer-hero::after{content:'';position:absolute;bottom:-40px;left:-20px;width:160px;height:160px;background:radial-gradient(circle,rgba(139,92,246,.12),transparent 70%);border-radius:50%;}
.th-inner{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem;}
.th-bal .val{font-size:2.8rem;font-weight:900;color:#fff;line-height:1;}
.th-bal .val span{font-size:1.2rem;color:#818cf8;font-weight:700;}
.th-bal .sub{font-size:.82rem;color:rgba(255,255,255,.4);margin-top:.35rem;}
.th-ref{text-align:right;}
.th-ref .code{font-size:1.5rem;font-weight:900;letter-spacing:.25rem;color:#818cf8;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.2);border-radius:10px;padding:.35rem 1rem;display:inline-block;margin-top:.25rem;}
.th-ref .lbl{font-size:.72rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.5px;}

/* ── SEND FORM CARD ── */
.send-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:1.75rem;position:relative;overflow:hidden;}
.send-card::before{content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;background:radial-gradient(circle,rgba(99,102,241,.08),transparent 70%);border-radius:50%;}

/* ── AMOUNT PRESETS ── */
.amount-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1rem;}
.preset-btn{background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.15);border-radius:8px;padding:.45rem;font-size:.8rem;font-weight:700;color:#818cf8;cursor:pointer;transition:.2s;text-align:center;}
.preset-btn:hover{background:rgba(99,102,241,.18);border-color:rgba(99,102,241,.35);}
.preset-btn.active{background:rgba(99,102,241,.2);border-color:#818cf8;color:#fff;}

/* ── PIN INPUT ── */
.pin-row{display:flex;gap:.5rem;justify-content:center;margin-bottom:1rem;}
.pin-digit{width:52px;height:56px;border-radius:12px;background:rgba(255,255,255,.04);border:2px solid var(--border);color:#fff;font-size:1.4rem;font-weight:900;text-align:center;outline:none;transition:.3s;caret-color:transparent;}
.pin-digit:focus{border-color:#818cf8;background:rgba(99,102,241,.08);box-shadow:0 0 0 4px rgba(99,102,241,.12);}

/* ── HISTORY ── */
.txn-card{background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;}
.txn-row{display:flex;align-items:center;gap:.85rem;padding:.9rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.04);transition:.2s;position:relative;}
.txn-row:last-child{border-bottom:none;}
.txn-row:hover{background:rgba(255,255,255,.02);}
.txn-av{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;}
.txn-av.sent{background:rgba(239,68,68,.12);color:#f87171;}
.txn-av.received{background:rgba(76,175,80,.12);color:var(--gl);}
.txn-body{flex:1;min-width:0;}
.txn-name{font-size:.875rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.txn-time{font-size:.72rem;color:var(--muted);margin-top:.1rem;}
.txn-amt{font-weight:800;font-size:.9rem;white-space:nowrap;}
.txn-amt.sent{color:#f87171;}
.txn-amt.received{color:var(--gl);}

/* ── RECIPIENT PREVIEW ── */
.recipient-preview{background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.15);border-radius:12px;padding:.85rem 1rem;margin-bottom:1rem;display:none;align-items:center;gap:.85rem;}
.rp-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#4f46e5,#818cf8);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;color:#fff;flex-shrink:0;}
</style>
@endpush

@section('content')
@php $user = auth()->user(); @endphp

{{-- Hero --}}
<div class="transfer-hero">
  <div class="th-inner">
    <div class="th-bal">
      <div style="font-size:.75rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:1px;margin-bottom:.4rem;">💜 Send Nabola Coins</div>
      <div class="val">{{ number_format($user->getCoins()) }} <span>NC</span></div>
      <div class="sub">≈ ₦{{ number_format($user->getCoins() * 10) }} &nbsp;·&nbsp; Available balance</div>
    </div>
    <div class="th-ref">
      <div class="lbl">Your Referral Code</div>
      <div class="code">{{ $user->referral_code }}</div>
      <div style="font-size:.7rem;color:rgba(255,255,255,.35);margin-top:.35rem;">Share so others can send you coins</div>
    </div>
  </div>
  {{-- Limits bar --}}
  <div style="position:relative;z-index:1;margin-top:1.25rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.07);display:flex;gap:1.5rem;flex-wrap:wrap;">
    <div style="font-size:.75rem;"><span style="color:rgba(255,255,255,.4);">Per transfer limit:</span> <strong style="color:#818cf8;">{{ number_format($transferLimit) }} NC</strong></div>
    <div style="font-size:.75rem;"><span style="color:rgba(255,255,255,.4);">Daily remaining:</span> <strong style="color:{{ $remainingToday < 1000 ? '#fbbf24' : '#818cf8' }};">{{ number_format($remainingToday) }} NC</strong></div>
    @if(!$user->isKycApproved())
    <div style="font-size:.72rem;color:rgba(251,191,36,.6);"><i class="fas fa-shield-alt"></i> <a href="{{ route('kyc') }}" style="color:#fbbf24;text-decoration:none;">Submit KYC</a> to increase to 50,000 NC/day</div>
    @endif
  </div>
</div>

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

<div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;">

  {{-- SEND FORM --}}
  <div class="send-card">
    <div class="card-title" style="position:relative;z-index:1;"><i class="fas fa-paper-plane" style="color:#818cf8;"></i> Send Coins</div>

    <form method="POST" action="{{ route('transfer.send') }}" id="sendForm">
      @csrf

      {{-- Recipient --}}
      <div class="form-group" style="position:relative;z-index:1;">
        <label>Recipient</label>
        <input type="text" name="recipient" id="recipientInput" class="form-control"
          placeholder="Email address or referral code"
          value="{{ old('recipient') }}" required autocomplete="off"
          oninput="lookupRecipient(this.value)">
        <small style="color:var(--muted);font-size:.72rem;">Enter email or Nabola referral code (e.g. ABC12345)</small>
      </div>

      {{-- Recent recipients --}}
      @if($recipientNames->count())
      <div style="margin-bottom:1rem;">
        <div style="font-size:.7rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:.4rem;">Recent Recipients</div>
        <div style="display:flex;flex-wrap:wrap;gap:.4rem;">
          @foreach($recipientNames as $rn)
          <button type="button" onclick="document.getElementById('recipientInput').value='{{ addslashes($rn) }}'"
            style="background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.15);border-radius:50px;padding:.28rem .75rem;font-size:.75rem;font-weight:600;color:#818cf8;cursor:pointer;transition:.2s;">
            {{ $rn }}
          </button>
          @endforeach
        </div>
      </div>
      @endif

      {{-- Recipient preview --}}
      <div class="recipient-preview" id="recipientPreview">
        <div class="rp-av" id="rpAvatar">?</div>
        <div>
          <div style="font-weight:700;font-size:.875rem;" id="rpName">—</div>
          <div style="font-size:.72rem;color:rgba(99,102,241,.7);">Nabola user found ✓</div>
        </div>
      </div>

      {{-- Amount --}}
      <div class="form-group">
        <label>Amount (NC)</label>
        <div class="amount-presets">
          @foreach([50, 100, 250, 500] as $p)
          <div class="preset-btn" onclick="setAmount({{ $p }}, this)">{{ $p }} NC</div>
          @endforeach
        </div>
        <input type="number" name="coins" id="coinsInput" class="form-control"
          placeholder="Or enter custom amount"
          min="1" max="{{ $user->getCoins() }}"
          value="{{ old('coins') }}" required
          oninput="document.querySelectorAll('.preset-btn').forEach(b=>b.classList.remove('active'))">
        <small style="color:var(--muted);font-size:.72rem;">Available: <strong style="color:#818cf8;">{{ number_format($user->getCoins()) }} NC</strong></small>
      </div>

      {{-- Message --}}
      <div class="form-group">
        <label>Message <span style="color:var(--muted);">(optional)</span></label>
        <input type="text" name="note" class="form-control"
          placeholder="e.g. Happy birthday! 🎉"
          maxlength="100" value="{{ old('note') }}">
      </div>

      {{-- PIN --}}
      <div class="form-group">
        <label>Transaction PIN <span style="color:#f87171;">*</span></label>
        <div class="pin-row">
          @for($i = 0; $i < 4; $i++)
          <input type="password" class="pin-digit" maxlength="1" inputmode="numeric"
            pattern="[0-9]" autocomplete="off"
            oninput="pinNext(this, {{ $i }})" onkeydown="pinBack(event, this, {{ $i }})">
          @endfor
        </div>
        <input type="hidden" name="pin" id="pinHidden">
        @error('pin')<div style="color:#f87171;font-size:.78rem;text-align:center;">{{ $message }}</div>@enderror
      </div>

      <div style="background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;padding:.85rem 1rem;margin-bottom:1.25rem;font-size:.82rem;color:var(--muted);">
        <i class="fas fa-shield-alt" style="color:#818cf8;"></i> Transfers are instant and <strong style="color:#f87171;">cannot be reversed</strong>. Double-check recipient details.
      </div>

      <button type="submit" class="btn" style="width:100%;justify-content:center;padding:.8rem;background:linear-gradient(135deg,#4f46e5,#818cf8);color:#fff;font-size:.95rem;" id="sendBtn">
        <i class="fas fa-paper-plane"></i> Send Coins
      </button>
    </form>
  </div>

  {{-- TRANSFER HISTORY --}}
  <div>
    <div style="font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:.85rem;"><i class="fas fa-clock-rotate-left"></i> Transfer History</div>
    <div class="txn-card">
      @forelse($history as $t)
      @php $isSent = $t->type === 'transfer_sent'; @endphp
      <div class="txn-row">
        <div class="txn-av {{ $isSent ? 'sent' : 'received' }}">
          <i class="fas fa-{{ $isSent ? 'arrow-up-right' : 'arrow-down-left' }}"></i>
        </div>
        <div class="txn-body">
          <div class="txn-name">{{ $t->description }}</div>
          <div class="txn-time">{{ $t->created_at->diffForHumans() }} &nbsp;·&nbsp; {{ $t->created_at->format('d M Y') }}</div>
        </div>
        <div class="txn-amt {{ $isSent ? 'sent' : 'received' }}">
          {{ $isSent ? '−' : '+' }}{{ number_format($t->coins) }} NC
        </div>
      </div>
      @empty
      <div style="text-align:center;padding:3rem;color:var(--muted);">
        <div style="font-size:2.5rem;margin-bottom:.75rem;opacity:.2;">💸</div>
        <div style="font-weight:700;margin-bottom:.35rem;">No transfers yet</div>
        <div style="font-size:.82rem;">Send coins to a friend to get started</div>
      </div>
      @endforelse
    </div>

    {{-- Stats summary --}}
    @if($history->count())
    @php
      $totalSent     = $history->where('type','transfer_sent')->sum('coins');
      $totalReceived = $history->where('type','transfer_received')->sum('coins');
    @endphp
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.85rem;">
      <div style="background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.12);border-radius:12px;padding:.85rem;text-align:center;">
        <div style="font-size:1.2rem;font-weight:900;color:#f87171;">{{ number_format($totalSent) }} NC</div>
        <div style="font-size:.72rem;color:var(--muted);margin-top:.15rem;">Total Sent</div>
      </div>
      <div style="background:rgba(76,175,80,.06);border:1px solid rgba(76,175,80,.12);border-radius:12px;padding:.85rem;text-align:center;">
        <div style="font-size:1.2rem;font-weight:900;color:var(--gl);">{{ number_format($totalReceived) }} NC</div>
        <div style="font-size:.72rem;color:var(--muted);margin-top:.15rem;">Total Received</div>
      </div>
    </div>
    @endif
  </div>

</div>

@push('scripts')
<script>
// PIN digit navigation
function pinNext(el, idx) {
  el.value = el.value.replace(/\D/g,'');
  if (el.value.length === 1 && idx < 3) {
    document.querySelectorAll('.pin-digit')[idx + 1].focus();
  }
  updatePin();
}
function pinBack(e, el, idx) {
  if (e.key === 'Backspace' && !el.value && idx > 0) {
    document.querySelectorAll('.pin-digit')[idx - 1].focus();
  }
}
function updatePin() {
  const digits = [...document.querySelectorAll('.pin-digit')].map(d => d.value).join('');
  document.getElementById('pinHidden').value = digits;
}

// Amount presets
function setAmount(val, btn) {
  document.getElementById('coinsInput').value = val;
  document.querySelectorAll('.preset-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
}

// Recipient lookup (debounced)
let lookupTimer;
function lookupRecipient(val) {
  clearTimeout(lookupTimer);
  const preview = document.getElementById('recipientPreview');
  if (val.length < 3) { preview.style.display = 'none'; return; }
  lookupTimer = setTimeout(() => {
    fetch('/transfer/lookup?q=' + encodeURIComponent(val), {
      headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
    })
    .then(r => r.json())
    .then(data => {
      if (data.found) {
        document.getElementById('rpName').textContent = data.name;
        document.getElementById('rpAvatar').textContent = data.initials;
        preview.style.display = 'flex';
      } else {
        preview.style.display = 'none';
      }
    })
    .catch(() => { preview.style.display = 'none'; });
  }, 400);
}

// Confirm before send
document.getElementById('sendForm').addEventListener('submit', function(e) {
  const coins  = document.getElementById('coinsInput').value;
  const recip  = document.getElementById('recipientInput').value;
  const pin    = document.getElementById('pinHidden').value;
  if (pin.length < 4) {
    e.preventDefault();
    alert('Please enter your 4-digit transaction PIN.');
    return;
  }
  if (!confirm(`Send ${coins} NC to "${recip}"?\n\nThis cannot be undone.`)) {
    e.preventDefault();
  }
});
</script>
@endpush
@endsection