@extends('layouts.app')

@section('title', $campaign->name.' — Performance')
@section('page', 'marketing')

@php
  $isCompleted = $campaign->status === 'Sent';
  $statusLabel = $isCompleted ? 'Completed' : $campaign->status;
  $statusVariant = match ($campaign->status) {
    'Sent' => 'success',
    'Scheduled' => 'info',
    'Draft' => 'warning',
    default => 'danger',
  };
@endphp

@section('content')
  @if (session('success'))
    <x-alert class="mb-3" variant="success" icon="bi-check-circle">{{ session('success') }}</x-alert>
  @endif

  <div class="campaign-analytics">
    <div class="campaign-analytics__header">
      <a href="{{ route('marketing.campaigns') }}" class="campaign-analytics__back" title="Back to campaigns" aria-label="Back to campaigns">
        <i class="bi bi-arrow-left" aria-hidden="true"></i>
      </a>
      <div class="campaign-analytics__title-wrap">
        <div class="campaign-analytics__title-row">
          <h1 class="campaign-analytics__title">{{ $campaign->name }}</h1>
          <x-badge :variant="$statusVariant">{{ $statusLabel }}</x-badge>
          <span class="campaign-analytics__channel">Sms</span>
        </div>
        <p class="campaign-analytics__subtitle mb-0">Campaign performance analytics</p>
      </div>
    </div>

    <div class="row g-3 mb-3">
      <div class="col-6 col-md">
        <div class="campaign-metric">
          <div class="campaign-metric__top">
            <span class="campaign-metric__label">Sent</span>
            <span class="campaign-metric__icon campaign-metric__icon--success"><i class="bi bi-send-fill"></i></span>
          </div>
          <p class="campaign-metric__value">{{ number_format($metrics['sent']) }}</p>
          <p class="campaign-metric__delta">Recipients targeted</p>
        </div>
      </div>
      <div class="col-6 col-md">
        <div class="campaign-metric">
          <div class="campaign-metric__top">
            <span class="campaign-metric__label">Delivered</span>
            <span class="campaign-metric__icon campaign-metric__icon--info"><i class="bi bi-check2-circle"></i></span>
          </div>
          <p class="campaign-metric__value">{{ number_format($metrics['delivered']) }}</p>
          <p class="campaign-metric__delta">Accepted by gateway</p>
        </div>
      </div>
      <div class="col-6 col-md">
        <div class="campaign-metric">
          <div class="campaign-metric__top">
            <span class="campaign-metric__label">Failed</span>
            <span class="campaign-metric__icon campaign-metric__icon--warning"><i class="bi bi-x-circle"></i></span>
          </div>
          <p class="campaign-metric__value">{{ number_format($metrics['failed']) }}</p>
          <p class="campaign-metric__delta">Not delivered</p>
        </div>
      </div>
      <div class="col-6 col-md">
        <div class="campaign-metric">
          <div class="campaign-metric__top">
            <span class="campaign-metric__label">Delivery Rate</span>
            <span class="campaign-metric__icon campaign-metric__icon--success"><i class="bi bi-shield-check"></i></span>
          </div>
          <p class="campaign-metric__value">{{ number_format($metrics['delivery_rate'], 1) }}%</p>
          <p class="campaign-metric__delta">Delivered ÷ sent</p>
        </div>
      </div>
    </div>

    <div class="row g-3 mb-3">
      <div class="col-12">
        <div class="campaign-panel">
          <h2 class="campaign-panel__title">Summary</h2>
          <p class="campaign-panel__summary mb-0">
            {{ number_format($metrics['delivered']) }} delivered out of {{ number_format($metrics['sent']) }} sent.
            @if ($metrics['failed'] > 0)
              {{ number_format($metrics['failed']) }} failed.
            @endif
          </p>
        </div>
      </div>
    </div>

    <div class="row g-3">
      <div class="col-lg-7">
        <div class="campaign-panel">
          <h2 class="campaign-panel__title">Delivery Over Time</h2>
          <div id="campaign-trend-chart" style="min-height: 280px;"></div>
        </div>
      </div>
      <div class="col-lg-5">
        <div class="campaign-panel">
          <h2 class="campaign-panel__title">Status Breakdown</h2>
          <div id="campaign-status-chart" style="min-height: 280px;"></div>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('styles')
  <style>
    .campaign-analytics__header {
      display: flex;
      align-items: flex-start;
      gap: 0.85rem;
      margin-bottom: 1.25rem;
    }
    .campaign-analytics__back {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      background: #fff;
      color: #334155;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      flex-shrink: 0;
    }
    .campaign-analytics__back:hover {
      background: #f8fafc;
      color: #0f172a;
    }
    .campaign-analytics__title-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem;
    }
    .campaign-analytics__title {
      font-size: 1.35rem;
      font-weight: 700;
      color: #0f172a;
      margin: 0;
      line-height: 1.2;
    }
    .campaign-analytics__channel {
      display: inline-flex;
      align-items: center;
      padding: 0.15rem 0.55rem;
      border-radius: 999px;
      background: #e0f2fe;
      color: #0369a1;
      font-size: 0.75rem;
      font-weight: 600;
    }
    .campaign-analytics__subtitle {
      margin-top: 0.25rem;
      color: #64748b;
      font-size: 0.9rem;
    }
    .campaign-metric {
      background: #fff;
      border: 1px solid #e8edf3;
      border-radius: 14px;
      padding: 0.9rem 1rem;
      height: 100%;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }
    .campaign-metric__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      margin-bottom: 0.45rem;
    }
    .campaign-metric__label {
      font-size: 0.82rem;
      color: #64748b;
      font-weight: 500;
    }
    .campaign-metric__icon {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
    }
    .campaign-metric__icon--success { background: rgba(16, 185, 129, 0.14); color: #059669; }
    .campaign-metric__icon--info { background: rgba(14, 165, 233, 0.14); color: #0284c7; }
    .campaign-metric__icon--warning { background: rgba(249, 115, 22, 0.14); color: #ea580c; }
    .campaign-metric__value {
      font-size: 1.55rem;
      font-weight: 700;
      color: #0f172a;
      margin: 0 0 0.15rem;
      line-height: 1.1;
    }
    .campaign-metric__delta {
      margin: 0;
      font-size: 0.75rem;
      color: #94a3b8;
    }
    .campaign-panel {
      background: #fff;
      border: 1px solid #e8edf3;
      border-radius: 14px;
      padding: 1rem 1.1rem 1.1rem;
      height: 100%;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }
    .campaign-panel__title {
      font-size: 0.95rem;
      font-weight: 700;
      color: #0f172a;
      margin: 0 0 0.75rem;
    }
    .campaign-panel__hero {
      font-size: 2rem;
      font-weight: 700;
      color: #0f172a;
      margin: 0 0 0.35rem;
      line-height: 1.1;
    }
    .campaign-panel__hint,
    .campaign-panel__summary {
      color: #64748b;
      font-size: 0.9rem;
      line-height: 1.45;
    }
  </style>
@endpush

@push('scripts')
  <script>
    window.CAMPAIGN_ANALYTICS = {
      trend: @json($trend),
      statusBreakdown: @json($statusBreakdown),
      total: {{ (int) max($metrics['sent'], $metrics['delivered'], 1) }},
    };
  </script>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.54.1/dist/apexcharts.min.js"></script>
  <script src="{{ asset('assets/js/pages/campaign-analytics.js') }}"></script>
@endpush