@extends('layouts.app')
@section('title','My Nabola Card')
@push('styles')
<style>
.card-wrap{max-width:760px;margin:0 auto;}
@php $isAmbassador = $user->ambassador?->isActive(); @endphp
#nabolaCard{
  width:680px;height:400px;
  background:{{ $isAmbassador
    ? 'linear-gradient(135deg,#1a0f00 0%,#2e1a00 30%,#1a1200 55%,#2e2000 75%,#1a0f00 100%)'
    : 'linear-gradient(135deg,#040d06 0%,#071a0d 30%,#0f2318 55%,#1a3a22 75%,#071a0d 100%)' }};
  border-radius:22px;padding:1.75rem 2rem;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:{{ $isAmbassador
    ? '0 24px 60px rgba(0,0,0,.7),0 0 0 1px rgba(251,191,36,.35),0 0 40px rgba(251,191,36,.08)'
    : '0 24px 60px rgba(0,0,0,.7),0 0 0 1px rgba(76,175,80,.25)' }};
  font-family:'Segoe UI',Arial,sans-serif;color:#fff;margin:0 auto;
}
#nabolaCard .bg-c1{position:absolute;top:-80px;right:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,{{ $isAmbassador ? 'rgba(251,191,36,.15)' : 'rgba(76,175,80,.12)' }},transparent 70%);}
#nabolaCard .bg-c2{position:absolute;bottom:-60px;left:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,{{ $isAmbassador ? 'rgba(245,158,11,.1)' : 'rgba(45,122,58,.1)' }},transparent 70%);}
#nabolaCard .bg-lines{position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 40px,{{ $isAmbassador ? 'rgba(251,191,36,.015)' : 'rgba(76,175,80,.015)' }} 40px,{{ $isAmbassador ? 'rgba(251,191,36,.015)' : 'rgba(76,175,80,.015)' }} 41px);}
#nabolaCard .border-inner{position:absolute;inset:8px;border:1px solid {{ $isAmbassador ? 'rgba(251,191,36,.1)' : 'rgba(76,175,80,.08)' }};border-radius:16px;pointer-events:none;}
#nabolaCard .card-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;}
#nabolaCard .logo{font-size:1.4rem;font-weight:900;letter-spacing:-1px;color:#fff;}
#nabolaCard .logo span{color:{{ $isAmbassador ? '#fbbf24' : '#4caf50' }};}
#nabolaCard .logo-sub{font-size:.5rem;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:2.5px;margin-top:.1rem;}
#nabolaCard .i-am-badge{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;border-radius:50px;padding:.2rem .75rem;display:inline-flex;align-items:center;gap:.3rem;}
#nabolaCard .card-mid{position:relative;z-index:2;display:flex;align-items:center;gap:1rem;flex:1;padding:.5rem 0;}
#nabolaCard .avatar{width:56px;height:56px;border-radius:50%;border:2.5px solid {{ $isAmbassador ? 'rgba(251,191,36,.5)' : 'rgba(76,175,80,.5)' }};object-fit:cover;flex-shrink:0;}
#nabolaCard .avatar-ph{width:56px;height:56px;border-radius:50%;background:{{ $isAmbassador ? 'linear-gradient(135deg,#b45309,#f59e0b)' : 'linear-gradient(135deg,#2d7a3a,#4caf50)' }};display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:900;color:#fff;border:2.5px solid {{ $isAmbassador ? 'rgba(251,191,36,.5)' : 'rgba(76,175,80,.5)' }};flex-shrink:0;}
#nabolaCard .user-name{font-size:1.15rem;font-weight:900;line-height:1.2;}
#nabolaCard .user-role{font-size:.58rem;color:{{ $isAmbassador ? '#fbbf24' : '#4caf50' }};font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-top:.15rem;}
#nabolaCard .user-loc{font-size:.58rem;color:rgba(255,255,255,.35);margin-top:.1rem;}
#nabolaCard .card-bottom{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;}
#nabolaCard .ref-label{font-size:.5rem;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:.15rem;}
#nabolaCard .ref-code{font-size:.95rem;font-weight:900;letter-spacing:.25rem;color:{{ $isAmbassador ? '#fbbf24' : '#4caf50' }};}
#nabolaCard .ref-url{font-size:.48rem;color:rgba(255,255,255,.2);margin-top:.1rem;}
#nabolaCard .stat .sv{font-size:.88rem;font-weight:900;color:#fff;}
#nabolaCard .stat .sl{font-size:.48rem;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.5px;margin-top:.08rem;}
#nabolaCard .qr-wrap{width:72px;height:72px;background:#fff;border-radius:10px;padding:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
#nabolaCard .qr-wrap img{width:100%;height:100%;display:block;}
.card-actions{display:flex;gap:.65rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem;}
.ca{padding:.5rem 1.1rem;border-radius:50px;font-size:.8rem;font-weight:700;text-decoration:none;transition:.2s;display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;border:none;}
.ca-img{background:linear-gradient(135deg,{{ $isAmbassador ? '#b45309,#f59e0b' : 'var(--green),var(--gl)' }});color:#fff;}
.ca-wa{background:rgba(37,211,102,.12);color:#25d366;border:1px solid rgba(37,211,102,.2);}
.ca-tg{background:rgba(0,136,204,.12);color:#0088cc;border:1px solid rgba(0,136,204,.2);}
.ca-tw{background:rgba(29,161,242,.12);color:#1da1f2;border:1px solid rgba(29,161,242,.2);}
.ca-copy{background:rgba(255,255,255,.06);color:var(--muted);border:1px solid var(--border);}
@media(max-width:720px){#nabolaCard{width:100%;height:auto;min-height:220px;padding:1.25rem 1.5rem;}#nabolaCard .user-name{font-size:.95rem;}#nabolaCard .ref-code{font-size:.8rem;}#nabolaCard .qr-wrap{width:60px;height:60px;}}
</style>
@endpush
@section('content')
@php
  $isAmbassador = $user->ambassador?->isActive();
  $ambassador   = $user->ambassador;
  $publicUrl    = route('profile.public', $user->referral_code);
  $qrUrl        = 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data='.urlencode($publicUrl).'&bgcolor=ffffff&color=071a0d&margin=4';
  $refLink      = url('/register').'?ref='.$user->referral_code;

  if ($isAmbassador) {
    $roleLabel  = '🌟 Nabola Ambassador';
    $badgeText  = 'I Am a Nabola Ambassador 🌟';
    $badgeBg    = 'rgba(251,191,36,.12)';
    $badgeBorder= 'rgba(251,191,36,.3)';
    $badgeColor = '#fbbf24';
    $shareText  = 'I am a Nabola Ambassador ♻️ — helping build a cleaner Nigeria! Join with my code '.$user->referral_code.': '.$refLink;
    $tweetText  = 'I am a @i_usenabola Ambassador 🌟♻️ — turning waste into wealth across Nigeria! Join with code '.$user->referral_code.' #Nabola #Ambassador #Recycling #Nigeria';
  } else {
    $roleLabel  = $user->isPremium() ? '⭐ Premium Member' : ($user->isKycApproved() ? '✓ Verified Recycler' : ($user->business?->isApproved() ? '🏢 Business Member' : '♻️ Nabola Recycler'));
    $badgeText  = 'I Am Nabola ♻️';
    $badgeBg    = 'rgba(76,175,80,.1)';
    $badgeBorder= 'rgba(76,175,80,.2)';
    $badgeColor = '#4caf50';
    $shareText  = 'I use Nabola ♻️ — Nigeria\'s waste-to-cash platform! Join with my code '.$user->referral_code.' and start earning: '.$refLink;
    $tweetText  = 'I use @i_usenabola ♻️ — turning waste into cash in Nigeria! Join with code '.$user->referral_code.' #Nabola #Recycling #Nigeria';
  }
@endphp

<div class="card-wrap">
  <div class="page-header" style="text-align:center;">
    <h1>{{ $isAmbassador ? '🌟 My Ambassador Card' : '🌿 My Nabola Card' }}</h1>
    <p>{{ $isAmbassador ? 'Your official Nabola Ambassador identity — share it everywhere' : 'Your personal recycling identity — share it everywhere' }}</p>
  </div>

  <div id="nabolaCard">
    <div class="bg-c1"></div><div class="bg-c2"></div><div class="bg-lines"></div><div class="border-inner"></div>

    {{-- Top --}}
    <div class="card-top">
      <div>
        <div class="logo">Nab<span>o</span>la.</div>
        <div class="logo-sub">Turn Waste Into Cash · Nigeria</div>
      </div>
      <div class="i-am-badge" style="background:{{ $badgeBg }};border:1px solid {{ $badgeBorder }};color:{{ $badgeColor }};">
        {{ $badgeText }}
      </div>
    </div>

    {{-- Middle --}}
    <div class="card-mid">
      @if($user->avatar)
        <img src="{{ Storage::url($user->avatar) }}" class="avatar" alt="{{ $user->name }}">
      @else
        <div class="avatar-ph">{{ strtoupper(substr($user->name,0,2)) }}</div>
      @endif
      <div style="flex:1;">
        <div class="user-name">{{ $user->name }}</div>
        <div class="user-role">{{ $roleLabel }}</div>
        <div class="user-loc">
          {{ $user->city ? $user->city.', ' : '' }}{{ $user->state ?? 'Nigeria' }}
          @if($isAmbassador && $ambassador->region) &nbsp;·&nbsp; {{ $ambassador->region }} @endif
          @if($user->isKycApproved()) &nbsp;·&nbsp; <span style="color:#4caf50;">✓ KYC</span>@endif
        </div>
        <div style="margin-top:.5rem;display:flex;gap:.65rem;flex-wrap:wrap;">
          @if($isAmbassador)
          <div class="stat"><div class="sv">{{ $ambassador->referrals_count }}</div><div class="sl">Referrals</div></div>
          <div class="stat"><div class="sv">{{ number_format($ambassador->coins_earned) }}</div><div class="sl">NC Earned</div></div>
          <div class="stat"><div class="sv">{{ $ambassador->events_hosted }}</div><div class="sl">Events</div></div>
          <div class="stat"><div class="sv">{{ $ambassador->appointed_at?->format('M Y') ?? now()->format('M Y') }}</div><div class="sl">Since</div></div>
          @else
          <div class="stat"><div class="sv">{{ number_format($user->getCoins()) }}</div><div class="sl">NC Earned</div></div>
          <div class="stat"><div class="sv">{{ $user->wasteLogs()->where('status','confirmed')->count() }}</div><div class="sl">Pickups</div></div>
          <div class="stat"><div class="sv">{{ number_format($user->total_kg_recycled,1) }}</div><div class="sl">kg Recycled</div></div>
          <div class="stat"><div class="sv">{{ round($user->getCo2Saved(),1) }}</div><div class="sl">kg CO₂</div></div>
          @endif
        </div>
      </div>
      <div class="qr-wrap">
        <img src="{{ $qrUrl }}" alt="QR Code" crossorigin="anonymous">
      </div>
    </div>

    {{-- Bottom --}}
    <div class="card-bottom">
      <div>
        <div class="ref-label">{{ $isAmbassador ? 'Ambassador Code' : 'Referral Code' }}</div>
        <div class="ref-code">{{ $user->referral_code }}</div>
        <div class="ref-url">nabola.bybimport.com/u/{{ $user->referral_code }}</div>
      </div>
      <div style="text-align:right;">
        @if($isAmbassador)
        <div style="font-size:.55rem;color:rgba(251,191,36,.5);text-transform:uppercase;letter-spacing:1px;margin-bottom:.1rem;">Official Ambassador</div>
        <div style="font-size:.72rem;font-weight:700;color:rgba(251,191,36,.7);">{{ $ambassador->title }}</div>
        @else
        <div style="font-size:.48rem;color:rgba(255,255,255,.2);text-transform:uppercase;letter-spacing:1px;margin-bottom:.15rem;">Member Since</div>
        <div style="font-size:.72rem;font-weight:700;color:rgba(255,255,255,.5);">{{ $user->created_at->format('M Y') }}</div>
        @endif
        <div style="font-size:.48rem;color:rgba(255,255,255,.15);margin-top:.1rem;">Scan QR to view profile</div>
      </div>
    </div>
  </div>

  {{-- Actions --}}
  <div class="card-actions">
    <button class="ca ca-img" id="downloadBtn" onclick="downloadCard()"><i class="fas fa-image"></i> Save as Image</button>
    <button class="ca ca-copy" onclick="copyLink()"><i class="fas fa-link"></i> Copy Link</button>
    <a href="https://wa.me/?text={{ urlencode($shareText) }}" target="_blank" class="ca ca-wa"><i class="fab fa-whatsapp"></i> WhatsApp</a>
    <a href="https://t.me/share/url?url={{ urlencode($refLink) }}&text={{ urlencode($isAmbassador ? 'I am a Nabola Ambassador 🌟♻️! Join with code '.$user->referral_code : 'I use Nabola ♻️! Code: '.$user->referral_code) }}" target="_blank" class="ca ca-tg"><i class="fab fa-telegram"></i> Telegram</a>
    <a href="https://twitter.com/intent/tweet?text={{ urlencode($tweetText) }}&url={{ urlencode($refLink) }}" target="_blank" class="ca ca-tw"><i class="fab fa-twitter"></i> Twitter</a>
  </div>

  <div style="background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:1rem 1.25rem;margin-top:1.25rem;display:flex;align-items:center;gap:.75rem;">
    <div style="flex:1;">
      <div style="font-size:.7rem;color:var(--muted);text-transform:uppercase;font-weight:700;margin-bottom:.2rem;">Your Public Profile Link</div>
      <div style="font-family:monospace;font-size:.82rem;color:{{ $isAmbassador ? '#fbbf24' : 'var(--gl)' }};" id="profileLink">{{ $publicUrl }}</div>
    </div>
    <button onclick="copyLink()" style="background:{{ $isAmbassador ? 'rgba(251,191,36,.1)' : 'rgba(76,175,80,.1)' }};color:{{ $isAmbassador ? '#fbbf24' : 'var(--gl)' }};border:1px solid {{ $isAmbassador ? 'rgba(251,191,36,.2)' : 'rgba(76,175,80,.2)' }};border-radius:8px;padding:.4rem .85rem;font-size:.75rem;font-weight:700;cursor:pointer;white-space:nowrap;"><i class="fas fa-copy"></i> Copy</button>
  </div>

  @if($isAmbassador)
  <div style="background:rgba(251,191,36,.05);border:1px solid rgba(251,191,36,.15);border-radius:12px;padding:1rem 1.25rem;margin-top:1rem;">
    <div style="font-size:.75rem;font-weight:700;color:#fbbf24;margin-bottom:.5rem;"><i class="fas fa-star"></i> Ambassador Sharing Tips</div>
    <div style="font-size:.75rem;color:var(--muted);line-height:1.8;">
      • Share your Ambassador Card to show your official Nabola status<br>
      • Anyone who scans the QR code sees your public ambassador profile<br>
      • Use your code to recruit users in your region — earn per referral<br>
      • Post on social media with #NabolaAmbassador to grow your reach
    </div>
  </div>
  @else
  <div style="background:rgba(99,102,241,.05);border:1px solid rgba(99,102,241,.12);border-radius:12px;padding:1rem 1.25rem;margin-top:1rem;">
    <div style="font-size:.75rem;font-weight:700;color:#a5b4fc;margin-bottom:.5rem;"><i class="fas fa-lightbulb"></i> Sharing Tips</div>
    <div style="font-size:.75rem;color:var(--muted);line-height:1.8;">
      • Save as image and post on Instagram, Facebook, or WhatsApp status<br>
      • Anyone who scans the QR code sees your public Nabola profile<br>
      • Share your referral link to earn 50 NC per signup<br>
      • Post on Twitter/X with #Nabola #Recycling to reach more people
    </div>
  </div>
  @endif
</div>

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
async function downloadCard() {
  const btn = document.getElementById('downloadBtn');
  btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generating...';
  btn.disabled = true;
  try {
    const card = document.getElementById('nabolaCard');
    const canvas = await html2canvas(card, { scale: 2, useCORS: true, allowTaint: true, backgroundColor: null, logging: false });
    const link = document.createElement('a');
    link.download = '{{ $isAmbassador ? "nabola-ambassador-card-" : "nabola-card-" }}{{ Str::slug($user->name) }}.png';
    link.href = canvas.toDataURL('image/png');
    link.click();
  } catch(e) { alert('Could not generate image. Try right-clicking the card and saving.'); }
  btn.innerHTML = '<i class="fas fa-image"></i> Save as Image';
  btn.disabled = false;
}
function copyLink() {
  navigator.clipboard.writeText('{{ $publicUrl }}').then(() => {
    document.querySelectorAll('[onclick="copyLink()"]').forEach(b => {
      const o = b.innerHTML; b.innerHTML = '<i class="fas fa-check"></i> Copied!';
      setTimeout(() => b.innerHTML = o, 2000);
    });
  });
}
</script>
@endpush
@endsection