@extends('layouts.app')

@section('title', 'Referrals')

@push('styles')
<style>
    .referrals-page h1 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 2rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .referrals-page h1 i { color: var(--accent); }

    /* Referral Code Card */
    .referral-code-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 2rem;
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .referral-code-label {
        font-size: 0.82rem;
        color: var(--text-muted);
        margin-bottom: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 600;
    }

    .referral-code-display {
        font-size: 2rem;
        font-weight: 700;
        color: var(--accent);
        letter-spacing: 0.1em;
        margin-bottom: 1rem;
        font-family: monospace;
    }

    .referral-code-actions {
        display: flex;
        justify-content: center;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
    }

    .referral-link-row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        max-width: 500px;
        margin: 0 auto;
    }

    .referral-link-input {
        flex: 1;
        padding: 0.625rem 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 0.85rem;
        outline: none;
    }

    /* Share Buttons */
    .share-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: pointer;
        font-size: 1rem;
        color: #fff;
        transition: opacity var(--transition);
    }

    .share-btn:hover { opacity: 0.85; }
    .share-btn.whatsapp { background: #25D366; }
    .share-btn.twitter { background: #1DA1F2; }
    .share-btn.email { background: var(--accent); }

    /* Stats */
    .referral-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .referral-stat {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.25rem;
        text-align: center;
    }

    .referral-stat-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    .referral-stat-label {
        font-size: 0.78rem;
        color: var(--text-muted);
        margin-top: 0.25rem;
    }

    /* Earnings Card */
    .earnings-card {
        background: linear-gradient(135deg, var(--accent), #8b5cf6);
        border-radius: var(--radius-lg);
        padding: 1.5rem 2rem;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
    }

    .earnings-info h3 {
        font-size: 0.85rem;
        font-weight: 500;
        opacity: 0.85;
        margin-bottom: 0.25rem;
    }

    .earnings-amount {
        font-size: 1.75rem;
        font-weight: 700;
    }

    .earnings-card .btn {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .earnings-card .btn:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    /* Table */
    .referrals-table-wrapper {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }

    .referrals-table-header {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--border);
        font-size: 0.95rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.625rem;
    }

    .referrals-table-header i { color: var(--accent); }

    .referrals-table {
        width: 100%;
        border-collapse: collapse;
    }

    .referrals-table th {
        padding: 0.875rem 1.25rem;
        text-align: left;
        font-size: 0.78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border);
    }

    .referrals-table td {
        padding: 0.875rem 1.25rem;
        font-size: 0.875rem;
        color: var(--text-primary);
        border-bottom: 1px solid var(--border);
    }

    .referrals-table tr:last-child td { border-bottom: none; }
    .referrals-table tr:hover td { background: var(--bg-hover); }

    .referral-empty {
        text-align: center;
        padding: 3rem 1rem;
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .referral-empty i {
        font-size: 2rem;
        opacity: 0.3;
        display: block;
        margin-bottom: 0.75rem;
    }

    @media (max-width: 768px) {
        .referral-stats { grid-template-columns: 1fr; }
        .earnings-card { flex-direction: column; text-align: center; gap: 1rem; }
        .referrals-table-wrapper { overflow-x: auto; }
        .referrals-table { min-width: 500px; }
    }
</style>
@endpush

@section('content')
    <div class="referrals-page">
        <h1><i class="fas fa-gift"></i> Referrals</h1>

        {{-- Referral Code Card --}}
        <div class="referral-code-card">
            <div class="referral-code-label">Your Referral Code</div>
            <div class="referral-code-display" id="referralCode">{{ $referralCode }}</div>
            <div class="referral-code-actions">
                <button class="btn btn-primary" onclick="copyToClipboard('{{ $referralCode }}')">
                    <i class="fas fa-copy"></i> Copy Code
                </button>
                <a href="https://wa.me/?text=Join%20Tenseal%20with%20my%20referral%20code%3A%20{{ $referralCode }}%20{{ urlencode($referralLink) }}" target="_blank" class="share-btn whatsapp" title="Share on WhatsApp">
                    <i class="fab fa-whatsapp"></i>
                </a>
                <a href="https://twitter.com/intent/tweet?text=Join%20Tenseal%20for%20secure%20escrow%20transactions!%20Use%20my%20referral%20code%3A%20{{ $referralCode }}%20{{ urlencode($referralLink) }}" target="_blank" class="share-btn twitter" title="Share on Twitter">
                    <i class="fab fa-twitter"></i>
                </a>
                <a href="mailto:?subject=Join%20Tenseal&body=Join%20Tenseal%20with%20my%20referral%20code%3A%20{{ $referralCode }}%0A{{ $referralLink }}" class="share-btn email" title="Share via Email">
                    <i class="fas fa-envelope"></i>
                </a>
            </div>
            <div class="referral-link-row">
                <input type="text" class="referral-link-input" value="{{ $referralLink }}" readonly id="referralLink">
                <button class="btn btn-sm btn-secondary" onclick="copyToClipboard('{{ $referralLink }}')">
                    <i class="fas fa-copy"></i> Copy
                </button>
            </div>
        </div>

        {{-- Stats --}}
        <div class="referral-stats">
            <div class="referral-stat">
                <div class="referral-stat-value">{{ $totalReferrals }}</div>
                <div class="referral-stat-label">Total Referrals</div>
            </div>
            <div class="referral-stat">
                <div class="referral-stat-value">{{ $successfulCount }}</div>
                <div class="referral-stat-label">Successful Referrals</div>
            </div>
            <div class="referral-stat">
                <div class="referral-stat-value">{{ number_format($referralEarnings) }}</div>
                <div class="referral-stat-label">Total Earnings (NGN)</div>
            </div>
        </div>

        {{-- Earnings Card --}}
        <div class="earnings-card">
            <div class="earnings-info">
                <h3>Total Referral Earnings</h3>
                <div class="earnings-amount">NGN {{ number_format($referralEarnings, 2) }}</div>
            </div>
            <a href="{{ route('escrow.wallet.index') }}" class="btn"><i class="fas fa-wallet"></i> Go to Wallet</a>
        </div>

        {{-- Referrals Table --}}
        <div class="referrals-table-wrapper">
            <div class="referrals-table-header">
                <i class="fas fa-users"></i> Your Referrals
            </div>
            @if(($referrals ?? collect())->count() > 0)
                <table class="referrals-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Status</th>
                            <th>Date Joined</th>
                            <th>Earnings</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($referrals as $referral)
                            <tr>
                                <td>{{ $referral->name ?? $referral->email }}</td>
                                <td>
                                    @php
                                        $statusClass = match($referral->status) {
                                            'active' => 'badge-success',
                                            'pending' => 'badge-warning',
                                            'expired' => 'badge-danger',
                                            default => 'badge-warning'
                                        };
                                    @endphp
                                    <span class="badge-status {{ $statusClass }}">{{ ucfirst($referral->status) }}</span>
                                </td>
                                <td>{{ $referral->created_at?->format('M d, Y') }}</td>
                                <td>NGN {{ number_format($referral->earnings ?? 0, 2) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div class="referral-empty">
                    <i class="fas fa-users"></i>
                    No referrals yet. Share your code to start earning!
                </div>
            @endif
        </div>
    </div>
@endsection

@push('scripts')
<script>
    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(() => {
            const notification = document.createElement('div');
            notification.textContent = 'Copied to clipboard!';
            notification.style.cssText = 'position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);background:var(--success);color:#fff;padding:0.625rem 1.25rem;border-radius:var(--radius-sm);font-size:0.85rem;z-index:9999;';
            document.body.appendChild(notification);
            setTimeout(() => notification.remove(), 2000);
        });
    }
</script>
@endpush