@extends('layout')

@section('title', __('store.affiliate_title'))

@section('content')
<div class="container py-5">
    <div class="row">
        <div class="col-md-10 mx-auto">
            <x-clientarea.page-header
                icon="fas fa-handshake"
                :title="__('store.affiliate_title')"
                :subtitle="__('store.affiliate_description')"
            >
                <a href="{{ route('store.auth.dashboard') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>{{ __('store.clientarea_nav_dashboard') }}
                </a>
            </x-clientarea.page-header>

            @if(! $affiliate)
                {{-- Activation Card --}}
                <div class="card border-0 shadow-sm">
                    <div class="card-body text-center py-5">
                        <i class="fas fa-handshake fa-3x text-primary mb-3"></i>
                        <h4>{{ __('store.affiliate_activate') }}</h4>
                        <p class="text-muted mb-4">{{ __('store.affiliate_activate_description') }}</p>
                        <p class="text-muted">{{ __('store.affiliate_description') }}</p>
                        <form action="{{ route('store.auth.affiliate.activate.submit') }}" method="POST" class="mt-4">
                            @csrf
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-rocket me-2"></i>{{ __('store.affiliate_activate') }}
                            </button>
                        </form>
                    </div>
                </div>
            @else
                {{-- Stats Cards --}}
                <div class="row mb-4">
                    <div class="col-md-4 mb-3">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-body text-center">
                                <h6 class="text-muted mb-2">{{ __('store.affiliate_total_earned') }}</h6>
                                <h3 class="mb-0 text-success">{{ number_format($affiliate->total_earned, 2) }}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-body text-center">
                                <h6 class="text-muted mb-2">{{ __('store.affiliate_pending_balance') }}</h6>
                                <h3 class="mb-0 text-warning">{{ number_format($affiliate->pending_balance, 2) }}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-body text-center">
                                <h6 class="text-muted mb-2">{{ __('store.affiliate_commission_rate') }}</h6>
                                <h3 class="mb-0 text-primary">
                                    @if($affiliate->commission_type === 'percentage')
                                        {{ number_format($affiliate->commission_rate, 2) }}%
                                    @else
                                        {{ number_format($affiliate->commission_rate, 2) }}
                                    @endif
                                </h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mb-4">
                    <div class="col-md-4 mb-3">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-body text-center">
                                <h6 class="text-muted mb-2">{{ __('store.affiliate_total_visitors') }}</h6>
                                <h3 class="mb-0">{{ number_format($affiliate->total_visitors) }}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-body text-center">
                                <h6 class="text-muted mb-2">{{ __('store.affiliate_total_signups') }}</h6>
                                <h3 class="mb-0">{{ number_format($affiliate->total_signups) }}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-body text-center">
                                <h6 class="text-muted mb-2">{{ __('store.affiliate_total_conversions') }}</h6>
                                <h3 class="mb-0">{{ number_format($affiliate->total_conversions) }}</h3>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Monthly Performance Card --}}
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-chart-bar me-2"></i>{{ __('store.affiliate_monthly_performance') }}
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row text-center">
                            <div class="col-md-6 mb-3 mb-md-0">
                                <div class="p-3 border rounded">
                                    <small class="text-muted d-block mb-1">{{ __('store.affiliate_this_month') }}</small>
                                    <h3 class="mb-0 text-success">{{ number_format($thisMonthEarnings, 2) }}</h3>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="p-3 border rounded">
                                    <small class="text-muted d-block mb-1">{{ __('store.affiliate_last_month') }}</small>
                                    <h3 class="mb-0 text-info">{{ number_format($lastMonthEarnings, 2) }}</h3>
                                </div>
                            </div>
                        </div>
                        @if($lastMonthEarnings > 0)
                            @php
                                $changePercent = $lastMonthEarnings > 0
                                    ? round((($thisMonthEarnings - $lastMonthEarnings) / $lastMonthEarnings) * 100, 1)
                                    : 0;
                            @endphp
                            <div class="text-center mt-3">
                                <span class="badge bg-{{ $changePercent >= 0 ? 'success' : 'danger' }}">
                                    <i class="fas fa-arrow-{{ $changePercent >= 0 ? 'up' : 'down' }} me-1"></i>
                                    {{ abs($changePercent) }}%
                                </span>
                            </div>
                        @endif
                    </div>
                </div>

                {{-- Referral Link Card --}}
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-link me-2"></i>{{ __('store.affiliate_your_referral_link') }}
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="input-group">
                            <input type="text" class="form-control" id="referralLink" value="{{ $affiliate->getReferralUrl() }}" readonly>
                            <button class="btn btn-primary js-copy-referral-link" type="button">
                                <i class="fas fa-copy me-1"></i>{{ __('store.affiliate_copy_link') }}
                            </button>
                        </div>
                    </div>
                </div>

                {{-- Payout Request --}}
                @if($affiliate->pending_balance >= $affiliate->minimum_payout)
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-1">{{ __('store.affiliate_request_payout') }}</h6>
                            <small class="text-muted">{{ __('store.affiliate_minimum_payout', ['amount' => number_format($affiliate->minimum_payout, 2)]) }}</small>
                        </div>
                        <form action="{{ route('store.auth.affiliate.payouts.request') }}" method="POST">
                            @csrf
                            <input type="hidden" name="amount" value="{{ $affiliate->pending_balance }}">
                            <input type="hidden" name="method" value="payout_request">
                            <button type="submit" class="btn btn-success js-request-payout">
                                <i class="fas fa-money-bill-wave me-1"></i>{{ __('store.affiliate_request_payout') }}
                            </button>
                        </form>
                    </div>
                </div>
                @else
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body">
                        <small class="text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            {{ __('store.affiliate_minimum_payout', ['amount' => number_format($affiliate->minimum_payout, 2)]) }}
                        </small>
                    </div>
                </div>
                @endif

                {{-- Recent Referrals Table --}}
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-user-plus me-2"></i>{{ __('store.affiliate_recent_referrals') }}
                        </h5>
                    </div>
                    <div class="card-body">
                        @if($referrals->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>{{ __('store.affiliate_referral_email') }}</th>
                                        <th>{{ __('store.affiliate_referral_date') }}</th>
                                        <th>{{ __('store.affiliate_referral_status') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($referrals as $referral)
                                    <tr>
                                        <td>{{ $referral->id }}</td>
                                        <td>
                                            @if($referral->referredClient)
                                                @php
                                                    $email = $referral->referredClient->email;
                                                    $parts = explode('@', $email);
                                                    $name = $parts[0];
                                                    $domain = $parts[1] ?? '';
                                                    $masked = substr($name, 0, 2) . str_repeat('*', max(3, strlen($name) - 2)) . '@' . $domain;
                                                @endphp
                                                {{ $masked }}
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>{{ $referral->created_at->format($dateTimeFormat) }}</td>
                                        <td>
                                            @switch($referral->status)
                                                @case('pending')
                                                    <span class="badge bg-warning text-dark">{{ __('store.affiliate_status_pending') }}</span>
                                                    @break
                                                @case('active')
                                                    <span class="badge bg-info">{{ __('store.affiliate_status_active') }}</span>
                                                    @break
                                                @case('completed')
                                                    <span class="badge bg-success">{{ __('store.affiliate_status_paid') }}</span>
                                                    @break
                                                @default
                                                    <span class="badge bg-secondary">{{ ucfirst($referral->status) }}</span>
                                            @endswitch
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @else
                        <p class="text-muted mb-0">{{ __('store.affiliate_no_referrals') }}</p>
                        @endif
                    </div>
                </div>

                {{-- Commission History Table --}}
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-coins me-2"></i>{{ __('store.affiliate_commission_history') }}
                        </h5>
                    </div>
                    <div class="card-body">
                        @if($commissions->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>{{ __('store.affiliate_commission_description') }}</th>
                                        <th>{{ __('store.affiliate_commission_amount') }}</th>
                                        <th>{{ __('store.status') }}</th>
                                        <th>{{ __('store.affiliate_commission_date') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($commissions as $commission)
                                    <tr>
                                        <td>{{ $commission->id }}</td>
                                        <td>
                                            {{ __('store.affiliate_referral_commission') }}
                                            @if($commission->invoice)
                                                <small class="text-muted">(#{{ $commission->invoice->invoice_number ?? $commission->invoice_id }})</small>
                                            @endif
                                        </td>
                                        <td><strong>{{ number_format($commission->amount, 2) }}</strong></td>
                                        <td>
                                            @switch($commission->status)
                                                @case('pending')
                                                    <span class="badge bg-warning text-dark">{{ __('store.affiliate_status_pending') }}</span>
                                                    @break
                                                @case('approved')
                                                    <span class="badge bg-info">{{ __('store.affiliate_status_approved') }}</span>
                                                    @break
                                                @case('paid')
                                                    <span class="badge bg-success">{{ __('store.affiliate_status_paid') }}</span>
                                                    @break
                                                @case('rejected')
                                                    <span class="badge bg-danger">{{ __('store.affiliate_status_rejected') }}</span>
                                                    @break
                                            @endswitch
                                        </td>
                                        <td>{{ $commission->created_at->format($dateTimeFormat) }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @else
                        <p class="text-muted mb-0">{{ __('store.affiliate_no_commissions') }}</p>
                        @endif
                    </div>
                </div>

                {{-- Payout History Table --}}
                <div class="card border-0 shadow-sm">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-history me-2"></i>{{ __('store.affiliate_payout_history') }}
                        </h5>
                    </div>
                    <div class="card-body">
                        @if($payouts->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>{{ __('store.affiliate_payout_amount') }}</th>
                                        <th>{{ __('store.affiliate_payout_status') }}</th>
                                        <th>{{ __('store.affiliate_payout_date') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($payouts as $payout)
                                    <tr>
                                        <td>{{ $payout->id }}</td>
                                        <td><strong>{{ number_format($payout->amount, 2) }}</strong></td>
                                        <td>
                                            @switch($payout->status)
                                                @case('pending')
                                                    <span class="badge bg-warning text-dark">{{ __('store.affiliate_status_pending') }}</span>
                                                    @break
                                                @case('processing')
                                                    <span class="badge bg-info">{{ __('store.affiliate_status_approved') }}</span>
                                                    @break
                                                @case('paid')
                                                    <span class="badge bg-success">{{ __('store.affiliate_status_paid') }}</span>
                                                    @break
                                                @case('rejected')
                                                    <span class="badge bg-danger">{{ __('store.affiliate_status_rejected') }}</span>
                                                    @break
                                            @endswitch
                                        </td>
                                        <td>{{ $payout->created_at->format($dateTimeFormat) }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @else
                        <p class="text-muted mb-0">{{ __('store.affiliate_no_payouts') }}</p>
                        @endif
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
window.affiliateConfig = {
    translations: {
        linkCopied: '{{ __("store.affiliate_link_copied") }}',
        confirmPayout: '{{ __("store.affiliate_confirm_payout") }}'
    }
};
</script>
@vite('resources/js/store/affiliate.js')
@endpush
