@extends('layouts.dashboard')

@section('title', 'Affiliates')

@push('css')
    <style>
        .affiliate-page { display:grid; gap:16px; }
        .affiliate-hero { position:relative; display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(280px, .65fr); gap:24px; overflow:hidden; padding:clamp(24px, 4vw, 44px); background:radial-gradient(circle at 88% 18%, rgba(72,189,245,.22), transparent 30%), linear-gradient(135deg, #101f38, #101728 65%, #171431); border:1px solid rgba(72,189,245,.28); border-radius:16px; }
        .affiliate-hero::after { content:""; position:absolute; right:-64px; bottom:-96px; width:280px; height:280px; border:42px solid rgba(72,189,245,.055); border-radius:50%; }
        .affiliate-hero-copy, .affiliate-share-card { position:relative; z-index:1; }
        .affiliate-eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:12px; color:var(--user-cyan, #48bdf5); font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
        .affiliate-eyebrow svg { width:17px; height:17px; }
        .affiliate-hero h1 { max-width:650px; margin:0; color:#f7f9ff; font-size:clamp(2rem, 4vw, 3.55rem); font-weight:850; line-height:1.04; letter-spacing:-.035em; }
        .affiliate-hero-copy > p { max-width:620px; margin:16px 0 22px; color:#c0c9da; font-size:1rem; }
        .affiliate-benefits { display:flex; flex-wrap:wrap; gap:9px; }
        .affiliate-benefits span { display:inline-flex; min-height:36px; padding:7px 11px; align-items:center; gap:7px; color:#c0c9da; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); border-radius:999px; font-size:.82rem; font-weight:700; }
        .affiliate-benefits svg { width:15px; height:15px; color:var(--user-cyan, #48bdf5); }
        .affiliate-share-card { align-self:stretch; padding:20px; background:rgba(6,12,27,.7); border:1px solid rgba(151,170,204,.2); border-radius:14px; backdrop-filter:blur(12px); }
        .affiliate-share-card h2 { margin:0 0 5px; color:#f7f9ff; font-size:1.05rem; }
        .affiliate-share-card > p { margin:0 0 15px; color:#9aa7bd; font-size:.82rem; }
        .affiliate-link { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
        .affiliate-link input { min-width:0; height:46px; padding:0 12px; color:#f7f9ff; background:#070b1d; border:1px solid #263149; border-radius:8px; font-size:.82rem; }
        .affiliate-link .btn { min-width:92px; }
        .affiliate-code { display:flex; justify-content:space-between; gap:12px; padding:12px; margin-top:10px; color:#9aa7bd; background:rgba(72,189,245,.07); border:1px solid rgba(72,189,245,.18); border-radius:8px; font-size:.8rem; }
        .affiliate-code strong { color:var(--user-cyan, #48bdf5); letter-spacing:.08em; }
        .affiliate-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
        .affiliate-stat { display:grid; grid-template-columns:46px minmax(0,1fr); gap:13px; min-height:112px; padding:18px; align-items:center; background:var(--user-surface, #11182a); border:1px solid var(--user-border, #263149); border-radius:12px; }
        .affiliate-stat-icon { display:grid; width:46px; height:46px; place-items:center; color:var(--user-cyan, #48bdf5); background:rgba(72,189,245,.1); border:1px solid rgba(72,189,245,.18); border-radius:10px; }
        .affiliate-stat-icon svg { width:20px; height:20px; }
        .affiliate-stat strong, .affiliate-stat span { display:block; }
        .affiliate-stat strong { color:var(--user-text, #f7f9ff); font-size:1.45rem; line-height:1.15; }
        .affiliate-stat span { margin-top:4px; color:var(--user-muted, #9aa7bd); font-size:.78rem; }
        .affiliate-main { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; }
        .affiliate-panel { overflow:hidden; padding:0; background:var(--user-surface, #11182a); border:1px solid var(--user-border, #263149); border-radius:14px; }
        .affiliate-panel-head { display:flex; padding:18px 20px; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--user-border, #263149); }
        .affiliate-panel-head h2 { margin:0; color:var(--user-text, #f7f9ff); font-size:1.05rem; }
        .affiliate-panel-head p { margin:3px 0 0; color:var(--user-muted, #9aa7bd); font-size:.78rem; }
        .affiliate-tabs { display:flex; gap:4px; padding:4px; background:var(--user-bg, #070b1d); border:1px solid var(--user-border, #263149); border-radius:8px; }
        .affiliate-tabs .nav-link { min-height:36px; padding:7px 11px; color:var(--user-muted, #9aa7bd); border:0; border-radius:6px; font-size:.78rem; font-weight:750; }
        .affiliate-tabs .nav-link.active { color:#07101f; background:var(--user-cyan, #48bdf5); }
        .affiliate-table { margin:0; }
        .affiliate-table thead th { padding:12px 20px; color:var(--user-muted, #9aa7bd); background:rgba(0,0,0,.12); border-color:var(--user-border, #263149); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; }
        .affiliate-table td { padding:14px 20px; vertical-align:middle; border-color:var(--user-border, #263149); }
        .affiliate-user { display:flex; align-items:center; gap:10px; }
        .affiliate-user img { width:36px; height:36px; object-fit:cover; border-radius:9px; }
        .affiliate-amount { color:var(--user-cyan, #48bdf5); font-weight:800; white-space:nowrap; }
        .affiliate-guide { display:grid; gap:12px; padding:20px; background:var(--user-surface, #11182a); border:1px solid var(--user-border, #263149); border-radius:14px; }
        .affiliate-guide h2 { margin:0 0 3px; color:var(--user-text, #f7f9ff); font-size:1.05rem; }
        .affiliate-guide > p { margin:0 0 4px; color:var(--user-muted, #9aa7bd); font-size:.8rem; }
        .affiliate-step { display:grid; grid-template-columns:34px minmax(0,1fr); gap:11px; align-items:start; }
        .affiliate-step b { display:grid; width:34px; height:34px; place-items:center; color:#07101f; background:var(--user-cyan, #48bdf5); border-radius:9px; }
        .affiliate-step strong, .affiliate-step span { display:block; }
        .affiliate-step strong { color:var(--user-text, #f7f9ff); font-size:.87rem; }
        .affiliate-step span { margin-top:2px; color:var(--user-muted, #9aa7bd); font-size:.75rem; line-height:1.45; }
        .affiliate-note { padding:13px; margin-top:4px; color:var(--user-body, #c0c9da); background:rgba(79,209,161,.07); border:1px solid rgba(79,209,161,.18); border-radius:9px; font-size:.76rem; }
        @media (max-width:991px) { .affiliate-hero, .affiliate-main { grid-template-columns:1fr; } .affiliate-stats { grid-template-columns:repeat(3,minmax(180px,1fr)); overflow-x:auto; } }
        @media (max-width:767px) { .affiliate-stats { display:flex; scroll-snap-type:x mandatory; } .affiliate-stat { min-width:220px; scroll-snap-align:start; } .affiliate-panel-head { align-items:flex-start; flex-direction:column; } }
        @media (max-width:575px) { .affiliate-hero { padding:22px 16px; } .affiliate-link { grid-template-columns:1fr; } .affiliate-link .btn { width:100%; } .affiliate-tabs { width:100%; } .affiliate-tabs .nav-item { flex:1; } .affiliate-tabs .nav-link { width:100%; } .affiliate-table thead th, .affiliate-table td { padding:12px 14px; } }
    </style>
@endpush

@section('content')
    <div class="affiliate-page">
        <section class="affiliate-hero" aria-labelledby="affiliateTitle">
            <div class="affiliate-hero-copy">
                <span class="affiliate-eyebrow"><i data-feather="share-2" aria-hidden="true"></i> Affiliate rewards</span>
                <h1 id="affiliateTitle">Invite friends. Earn when they earn.</h1>
                <p>Share your personal link and receive {{ number_format($stats['commission_rate'], 0) }}% of each referred member’s approved earnings for life.</p>
                <div class="affiliate-benefits" aria-label="Affiliate benefits">
                    <span><i data-feather="repeat" aria-hidden="true"></i>Lifetime commission</span>
                    <span><i data-feather="activity" aria-hidden="true"></i>Transparent activity</span>
                    <span><i data-feather="shield" aria-hidden="true"></i>Verified rewards</span>
                </div>
            </div>
            <div class="affiliate-share-card">
                <h2>Refer a Friend</h2>
                <p>Copy your unique link and share it anywhere you connect with friends.</p>
                <div class="affiliate-link">
                    <label class="visually-hidden" for="referralLink">Your referral link</label>
                    <input id="referralLink" type="text" value="{{ $referralUrl }}" readonly>
                    <button class="btn btn-loot" type="button" data-copy-target="referralLink" aria-live="polite"><i data-feather="copy" aria-hidden="true"></i><span>Copy</span></button>
                </div>
                <div class="affiliate-code"><span>Your referral code</span><strong>{{ $code }}</strong></div>
            </div>
        </section>

        <section class="affiliate-stats" aria-label="Affiliate overview">
            <div class="affiliate-stat"><span class="affiliate-stat-icon"><i data-feather="users" aria-hidden="true"></i></span><div><strong>{{ number_format($stats['users_referred']) }}</strong><span>Friends referred</span></div></div>
            <div class="affiliate-stat"><span class="affiliate-stat-icon"><i data-feather="dollar-sign" aria-hidden="true"></i></span><div><strong>{{ format_coins_as_usd($stats['referral_earnings']) }}</strong><span>Commission earned</span></div></div>
            <div class="affiliate-stat"><span class="affiliate-stat-icon"><i data-feather="percent" aria-hidden="true"></i></span><div><strong>{{ number_format($stats['commission_rate'], 0) }}%</strong><span>Lifetime rate</span></div></div>
        </section>

        <div class="affiliate-main">
            <section class="affiliate-panel">
                <div class="affiliate-panel-head">
                    <div><h2>Affiliate activity</h2><p>Track signups and commission events in one place.</p></div>
                    <ul class="nav affiliate-tabs" role="tablist" aria-label="Referral details">
                        <li class="nav-item"><button class="nav-link active" id="referred-users-tab" data-bs-toggle="tab" data-bs-target="#referredUsers" type="button" role="tab" aria-controls="referredUsers" aria-selected="true">Members {{ $referredUsers->count() }}</button></li>
                        <li class="nav-item"><button class="nav-link" id="referral-activity-tab" data-bs-toggle="tab" data-bs-target="#referralActivity" type="button" role="tab" aria-controls="referralActivity" aria-selected="false">Rewards {{ $events->count() }}</button></li>
                    </ul>
                </div>
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="referredUsers" role="tabpanel" aria-labelledby="referred-users-tab" tabindex="0">
                        <div class="table-responsive"><table class="table affiliate-table"><thead><tr><th>Member</th><th>Joined</th><th>Approved earnings</th></tr></thead><tbody>
                        @forelse($referredUsers as $referred)
                            <tr><td><div class="affiliate-user"><img src="{{ $referred->avatar() }}" alt=""><strong>{{ $referred->username }}</strong></div></td><td>{{ $referred->created_at->diffForHumans() }}</td><td class="affiliate-amount">{{ format_coins_as_usd($referred->total_points) }}</td></tr>
                        @empty
                            <tr><td colspan="3" class="text-center py-4 loot-muted">Your first referred member will appear here.</td></tr>
                        @endforelse
                        </tbody></table></div>
                    </div>
                    <div class="tab-pane fade" id="referralActivity" role="tabpanel" aria-labelledby="referral-activity-tab" tabindex="0">
                        <div class="table-responsive"><table class="table affiliate-table"><thead><tr><th>Event</th><th>Member</th><th>Source (USD)</th><th>Commission (USD)</th><th>Time</th></tr></thead><tbody>
                        @forelse($events as $event)
                            <tr><td>{{ Str::headline($event->type) }}</td><td>{{ $event->referredUser?->username ?? 'Unknown user' }}</td><td>{{ format_coins_as_usd($event->source_points) }}</td><td class="affiliate-amount">+{{ format_coins_as_usd($event->reward_points) }}</td><td>{{ $event->created_at->diffForHumans() }}</td></tr>
                        @empty
                            <tr><td colspan="5" class="text-center py-4 loot-muted">Commission activity will appear after an approved earning.</td></tr>
                        @endforelse
                        </tbody></table></div>
                    </div>
                </div>
            </section>

            <aside class="affiliate-guide" aria-label="How affiliate rewards work">
                <div><h2>How it works</h2><p>Three simple steps from link to commission.</p></div>
                <div class="affiliate-step"><b>1</b><div><strong>Share your link</strong><span>Send your unique URL to friends who want to earn.</span></div></div>
                <div class="affiliate-step"><b>2</b><div><strong>They join and earn</strong><span>New members receive {{ number_format($stats['signup_bonus']) }} bonus coins when eligible.</span></div></div>
                <div class="affiliate-step"><b>3</b><div><strong>You receive commission</strong><span>Approved activity automatically credits your balance.</span></div></div>
                <div class="affiliate-note">Commission values are shown in USD at {{ number_format(coins_per_usd()) }} coins = $1.00. Self-referrals and duplicate accounts are not eligible.</div>
            </aside>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.querySelectorAll('[data-copy-target]').forEach(function (button) {
            button.addEventListener('click', async function () {
                const input = document.getElementById(button.getAttribute('data-copy-target'));
                const label = button.querySelector('span');
                input.select();
                input.setSelectionRange(0, input.value.length);
                try { await navigator.clipboard.writeText(input.value); } catch (error) { document.execCommand('copy'); }
                label.textContent = 'Copied';
                window.setTimeout(function () { label.textContent = 'Copy'; }, 1400);
            });
        });
    </script>
@endpush
