@extends('layouts.ambassador')

@section('title', 'Tableau de bord')

@section('content')
<div class="page-header">
    <h1 class="page-title">Bienvenue, {{ $ambassador->display_or_full_name }}</h1>
    <p class="page-subtitle">Votre cockpit ambassadeur - Code : {{ $ambassador->code }}</p>
</div>

<!-- Alertes -->
@foreach($alerts as $alert)
    <div class="alert alert-{{ $alert['type'] }} alert-dismissible fade show">
        <i class="fas fa-{{ $alert['type'] === 'warning' ? 'exclamation-triangle' : 'info-circle' }} me-2"></i>
        {{ $alert['message'] }}
        @if($alert['type'] === 'warning' && !$ambassador->isStripeConnected())
            <a href="{{ route('ambassador.stripe.connect') }}" class="btn btn-sm btn-warning ms-2">Connecter Stripe</a>
        @endif
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endforeach

<!-- KPI Cards -->
<div class="stats-grid">
    <div class="card-base stat-card">
        <div class="stat-icon" style="background: linear-gradient(135deg, #7c3aed, #5b21b6);"><i class="fas fa-user-tie"></i></div>
        <div class="stat-info"><div class="stat-value">{{ $totalPrestataires }}</div><div class="stat-label">Prestataires rattachés</div></div>
    </div>
    <div class="card-base stat-card">
        <div class="stat-icon" style="background: linear-gradient(135deg, #10b981, #059669);"><i class="fas fa-check-circle"></i></div>
        <div class="stat-info"><div class="stat-value">{{ $activePrestataires }}</div><div class="stat-label">Prestataires actifs</div></div>
    </div>
    <div class="card-base stat-card">
        <div class="stat-icon" style="background: linear-gradient(135deg, #06b6d4, #0891b2);"><i class="fas fa-user-plus"></i></div>
        <div class="stat-info"><div class="stat-value">{{ $newThisMonth }}</div><div class="stat-label">Inscriptions ce mois</div></div>
    </div>
    <div class="card-base stat-card">
        <div class="stat-icon" style="background: linear-gradient(135deg, #f59e0b, #d97706);"><i class="fas fa-hourglass-half"></i></div>
        <div class="stat-info"><div class="stat-value">{{ $pendingValidation }}</div><div class="stat-label">En attente validation</div></div>
    </div>
</div>

<div class="stats-grid">
    <div class="card-base stat-card">
        <div class="stat-icon" style="background: linear-gradient(135deg, #7c3aed, #a78bfa);"><i class="fas fa-shopping-cart"></i></div>
        <div class="stat-info"><div class="stat-value">{{ $ordersCount }}</div><div class="stat-label">Commandes</div></div>
    </div>
    <div class="card-base stat-card">
        <div class="stat-icon" style="background: linear-gradient(135deg, #10b981, #34d399);"><i class="fas fa-chart-line"></i></div>
        <div class="stat-info"><div class="stat-value">{{ number_format($caGenerated, 2, ',', ' ') }} €</div><div class="stat-label">CA généré</div></div>
    </div>
    <div class="card-base stat-card">
        <div class="stat-icon" style="background: linear-gradient(135deg, #f59e0b, #fbbf24);"><i class="fas fa-coins"></i></div>
        <div class="stat-info"><div class="stat-value">{{ number_format($totalCommissions, 2, ',', ' ') }} €</div><div class="stat-label">Commission totale</div></div>
    </div>
    <div class="card-base stat-card">
        <div class="stat-icon" style="background: linear-gradient(135deg, #ef4444, #f87171);"><i class="fas fa-wallet"></i></div>
        <div class="stat-info"><div class="stat-value">{{ number_format($payableCommissions, 2, ',', ' ') }} €</div><div class="stat-label">Disponible versement</div></div>
    </div>
</div>

<div class="row">
    <!-- Graphique commissions -->
    <div class="col-lg-8 mb-4">
        <div class="card-base">
            <h6 class="fw-bold mb-3"><i class="fas fa-chart-bar me-2"></i>Évolution des commissions (6 mois)</h6>
            <canvas id="commissionsChart" height="250"></canvas>
        </div>
    </div>

    <!-- Lien affilié -->
    <div class="col-lg-4 mb-4">
        <div class="card-base mb-4">
            <h6 class="fw-bold mb-3"><i class="fas fa-link me-2"></i>Mon lien affilié</h6>
            @if($referralLink)
                <div class="input-group mb-3">
                    <input type="text" class="form-control form-control-sm" value="{{ $referralLink->url }}" readonly id="refLink">
                    <button class="btn btn-sm btn-primary" onclick="navigator.clipboard.writeText(document.getElementById('refLink').value).then(() => { this.innerHTML='<i class=\'fas fa-check\'></i> Copié'; setTimeout(() => this.innerHTML='<i class=\'fas fa-copy\'></i> Copier', 2000); })">
                        <i class="fas fa-copy"></i> Copier
                    </button>
                </div>
                <div class="row text-center g-2">
                    <div class="col-4"><div class="fw-bold text-primary">{{ $referralLink->clicks_count }}</div><small class="text-muted">Clics</small></div>
                    <div class="col-4"><div class="fw-bold text-success">{{ $referralLink->registrations_count }}</div><small class="text-muted">Inscrits</small></div>
                    <div class="col-4"><div class="fw-bold text-info">{{ $referralLink->conversion_rate }}%</div><small class="text-muted">Conversion</small></div>
                </div>
            @else
                <p class="text-muted">Aucun lien configuré.</p>
            @endif
        </div>

        <div class="card-base">
            <h6 class="fw-bold mb-3"><i class="fas fa-euro-sign me-2"></i>Résumé commissions</h6>
            <div class="d-flex justify-content-between mb-2">
                <span class="text-muted">En attente</span>
                <span class="fw-bold text-warning">{{ number_format($pendingCommissions, 2, ',', ' ') }} €</span>
            </div>
            <div class="d-flex justify-content-between mb-2">
                <span class="text-muted">Payable</span>
                <span class="fw-bold text-primary">{{ number_format($payableCommissions, 2, ',', ' ') }} €</span>
            </div>
            <div class="d-flex justify-content-between mb-2">
                <span class="text-muted">Déjà versé</span>
                <span class="fw-bold text-success">{{ number_format($paidCommissions, 2, ',', ' ') }} €</span>
            </div>
            <hr>
            <div class="d-flex justify-content-between">
                <span class="fw-bold">Total</span>
                <span class="fw-bold fs-5">{{ number_format($totalCommissions, 2, ',', ' ') }} €</span>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Derniers prestataires -->
    <div class="col-lg-6 mb-4">
        <div class="card-base">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="fw-bold mb-0"><i class="fas fa-user-tie me-2"></i>Derniers prestataires</h6>
                <a href="{{ route('ambassador.prestataires.index') }}" class="btn btn-sm btn-outline-primary">Voir tout</a>
            </div>
            @forelse($latestPrestataires as $lp)
                <div class="d-flex justify-content-between align-items-center py-2 border-bottom">
                    <div>
                        <div class="fw-semibold">{{ $lp->prestataire?->user?->name ?? 'N/A' }}</div>
                        <small class="text-muted">{{ $lp->assigned_at->format('d/m/Y') }} - {{ $lp->source_label }}</small>
                    </div>
                    @if($lp->prestataire?->is_approved)
                        <span class="badge bg-success">Actif</span>
                    @else
                        <span class="badge bg-warning">En attente</span>
                    @endif
                </div>
            @empty
                <p class="text-muted text-center py-3">Aucun prestataire encore</p>
            @endforelse
        </div>
    </div>

    <!-- Dernières commissions -->
    <div class="col-lg-6 mb-4">
        <div class="card-base">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="fw-bold mb-0"><i class="fas fa-coins me-2"></i>Dernières commissions</h6>
                <a href="{{ route('ambassador.commissions.index') }}" class="btn btn-sm btn-outline-primary">Voir tout</a>
            </div>
            @forelse($latestCommissions as $lc)
                <div class="d-flex justify-content-between align-items-center py-2 border-bottom">
                    <div>
                        <div class="fw-semibold">{{ number_format($lc->ambassador_commission_amount, 2, ',', ' ') }} €</div>
                        <small class="text-muted">{{ $lc->prestataire?->user?->name ?? 'N/A' }} - {{ $lc->created_at->format('d/m/Y') }}</small>
                    </div>
                    <span class="badge bg-{{ $lc->status_color }}">{{ $lc->status_label }}</span>
                </div>
            @empty
                <p class="text-muted text-center py-3">Aucune commission encore</p>
            @endforelse
        </div>
    </div>
</div>

@if($inactivePrestataires > 0)
<div class="card-base mb-4" style="border-color: #fbbf24;">
    <div class="d-flex align-items-center gap-3">
        <div class="stat-icon" style="background: linear-gradient(135deg, #f59e0b, #d97706);"><i class="fas fa-bell"></i></div>
        <div>
            <h6 class="fw-bold mb-0">{{ $inactivePrestataires }} prestataire(s) à relancer</h6>
            <small class="text-muted">Sans activité depuis 30 jours</small>
        </div>
        <a href="{{ route('ambassador.prestataires.index') }}" class="btn btn-sm btn-warning ms-auto">Voir la liste</a>
    </div>
</div>
@endif

@push('scripts')
<script>
const ctx = document.getElementById('commissionsChart').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: {!! json_encode(collect($chartData)->pluck('label')) !!},
        datasets: [{
            label: 'Commissions (€)',
            data: {!! json_encode(collect($chartData)->pluck('commissions')) !!},
            backgroundColor: 'rgba(124, 58, 237, 0.8)',
            borderRadius: 8,
        }, {
            label: 'CA généré (€)',
            data: {!! json_encode(collect($chartData)->pluck('ca')) !!},
            backgroundColor: 'rgba(16, 185, 129, 0.3)',
            borderRadius: 8,
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { position: 'bottom' } },
        scales: { y: { beginAtZero: true, ticks: { callback: v => v + ' €' } } }
    }
});
</script>
@endpush
@endsection