@extends('admin.layout')

@section('title', 'Analytics')

@section('styles')
<style>
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px;}
.stat-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;}
.stat-label{font-size:12px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-soft);}
.stat-value{font-family:'Sora',sans-serif;font-size:28px;font-weight:800;color:var(--text);letter-spacing:-.5px;}
.stat-change{font-size:12px;font-weight:600;display:flex;align-items:center;gap:4px;}
.stat-change.up{color:var(--green);}
.stat-change.down{color:var(--red);}
.chart-container{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;min-height:300px;}
.chart-title{font-family:'Sora',sans-serif;font-size:16px;font-weight:700;color:var(--text);margin-bottom:16px;}
.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;}
.metric-item{background:var(--bg);padding:16px;border-radius:10px;border:1px solid var(--border);}
.metric-label{font-size:11px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-soft);margin-bottom:8px;}
.metric-value{font-family:'Sora',sans-serif;font-size:20px;font-weight:700;color:var(--text);}
.top-users-list{display:flex;flex-direction:column;gap:12px;}
.top-user-item{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg);border-radius:10px;border:1px solid var(--border);transition:all .2s;}
.top-user-item:hover{background:var(--blue-faint);}
.user-rank{width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;}
.user-rank.gold{background:linear-gradient(135deg,#FFD700,#FFA500);}
.user-rank.silver{background:linear-gradient(135deg,#C0C0C0,#808080);}
.user-rank.bronze{background:linear-gradient(135deg,#CD7F32,#8B4513);}
.user-info{flex:1;min-width:0;}
.user-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-email{font-size:11px;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-stats{text-align:right;}
.user-amount{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;color:var(--green);}
.user-orders{font-size:11px;color:var(--text-soft);}
</style>
@endsection

@section('content')
<div class="pg-title">Analytics</div>
<div class="pg-sub">Detailed insights and performance metrics for your platform.</div>

<!-- KEY METRICS -->
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;">
  <div class="stat-card">
    <div class="stat-icon" style="background:var(--blue-faint);">
      <svg style="width:24px;height:24px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>
    </div>
    <div>
      <div class="stat-label">Total Revenue</div>
      <div class="stat-value">₵{{ number_format($stats['total_volume'], 2) }}</div>
      <div class="stat-change up">
        <svg style="width:14px;height:14px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><polyline points="18 15 12 9 6 15"/></svg>
        All time
      </div>
    </div>
  </div>

  <div class="stat-card">
    <div class="stat-icon" style="background:var(--green-faint);">
      <svg style="width:24px;height:24px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/><path d="M9 12l2 2 4-4"/></svg>
    </div>
    <div>
      <div class="stat-label">Completed Orders</div>
      <div class="stat-value">{{ $analytics['completed_today'] }}</div>
      <div class="stat-change up">
        <svg style="width:14px;height:14px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><polyline points="18 15 12 9 6 15"/></svg>
        Today
      </div>
    </div>
  </div>

  <div class="stat-card">
    <div class="stat-icon" style="background:var(--orange-faint);">
      <svg style="width:24px;height:24px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path d="M12 2v20M2 12h20"/></svg>
    </div>
    <div>
      <div class="stat-label">Average Order</div>
      <div class="stat-value">₵{{ number_format($analytics['avg_order'], 2) }}</div>
      <div class="stat-change">Per transaction</div>
    </div>
  </div>

  <div class="stat-card">
    <div class="stat-icon" style="background:rgba(124,58,237,.09);">
      <svg style="width:24px;height:24px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="8.5" cy="7" r="4"/><polyline points="17 11 19 13 23 9"/></svg>
    </div>
    <div>
      <div class="stat-label">Active Users</div>
      <div class="stat-value">{{ $stats['total_users'] }}</div>
      <div class="stat-change">Registered</div>
    </div>
  </div>
</div>

<!-- CHARTS ROW -->
<div style="display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:24px;">
  
  <!-- 7-DAY VOLUME CHART -->
  <div class="card">
    <div class="card-head">
      <div class="card-title">Transaction Volume (Last 7 Days)</div>
    </div>
    <div class="chart-wrap" style="padding:18px 22px 16px;">
      <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--text-soft);margin-bottom:8px;">
        @foreach($analytics['last_7_days'] as $day)
        <span>{{ $day['day'] }}</span>
        @endforeach
      </div>
      <svg class="chart-svg" viewBox="0 0 600 90" preserveAspectRatio="none" style="width:100%;height:90px;">
        <defs>
          <linearGradient id="cg" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#1A6EC8" stop-opacity=".18"></stop>
            <stop offset="100%" stop-color="#1A6EC8" stop-opacity="0"></stop>
          </linearGradient>
        </defs>
        @php
          $maxVolume = max(array_column($analytics['last_7_days'], 'volume')) ?: 1;
          $points = [];
          $pathD = 'M';
          $fillD = 'M';
          foreach($analytics['last_7_days'] as $index => $day) {
            $x = ($index / 6) * 600;
            $y = 90 - (($day['volume'] / $maxVolume) * 70);
            $points[] = "$x $y";
            if($index === 0) {
              $pathD .= "$x $y";
              $fillD .= "$x $y";
            } else {
              $pathD .= " L$x $y";
              $fillD .= " L$x $y";
            }
          }
          $fillD .= " L600 90 L0 90Z";
        @endphp
        <path d="{{ $pathD }}" fill="none" stroke="#1A6EC8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="{{ $fillD }}" fill="url(#cg)"></path>
        @php
          $lastDay = end($analytics['last_7_days']);
          $lastY = 90 - (($lastDay['volume'] / $maxVolume) * 70);
        @endphp
        <circle cx="600" cy="{{ $lastY }}" r="5" fill="#E8530A"></circle>
        <circle cx="600" cy="{{ $lastY }}" r="9" fill="#E8530A" opacity=".2"></circle>
      </svg>
      <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--text-soft);margin-top:4px;">
        <span>₵{{ number_format(min(array_column($analytics['last_7_days'], 'volume')), 0) }}</span>
        <span style="color:var(--orange);font-weight:700;">₵{{ number_format(end($analytics['last_7_days'])['volume'], 0) }} {{ end($analytics['last_7_days'])['volume'] >= $analytics['last_7_days'][5]['volume'] ? '▲' : '▼' }}</span>
      </div>
    </div>
  </div>

  <!-- QUICK STATS -->
  <div class="chart-container">
    <div class="chart-title">Quick Stats</div>
    <div class="metric-row" style="grid-template-columns:1fr;gap:12px;">
      <div class="metric-item">
        <div class="metric-label">Today's Volume</div>
        <div class="metric-value">₵{{ number_format($analytics['today_volume'], 2) }}</div>
      </div>
      <div class="metric-item">
        <div class="metric-label">Pending Orders</div>
        <div class="metric-value">{{ $stats['pending_orders'] }}</div>
      </div>
      <div class="metric-item">
        <div class="metric-label">Cancel Rate</div>
        <div class="metric-value">{{ number_format($analytics['cancel_rate'], 1) }}%</div>
      </div>
    </div>
  </div>

</div>

<!-- PERFORMANCE METRICS -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;">
  
  <!-- TOP USERS -->
  <div class="card">
    <div class="card-head">
      <div class="card-title">Top Users by Volume</div>
    </div>
    <div class="card-body">
      <div class="top-users-list">
        @forelse($topUsers as $index => $user)
        <div class="top-user-item">
          <div class="user-rank {{ $index === 0 ? 'gold' : ($index === 1 ? 'silver' : ($index === 2 ? 'bronze' : '')) }}">
            {{ $index + 1 }}
          </div>
          <div class="user-info">
            <div class="user-name">{{ $user->name }}</div>
            <div class="user-email">{{ $user->email }}</div>
          </div>
          <div class="user-stats">
            <div class="user-amount">₵{{ number_format($user->wallet_transactions_sum_amount ?? 0, 2) }}</div>
            <div class="user-orders">{{ $user->wallet_transactions_count }} transactions</div>
          </div>
        </div>
        @empty
        <div style="text-align:center;padding:2rem;color:var(--text-soft);">
          <p>No user data available</p>
        </div>
        @endforelse
      </div>
    </div>
  </div>

  <!-- ORDER STATUS BREAKDOWN -->
  <div class="card">
    <div class="card-head">
      <div class="card-title">Transaction Status Breakdown</div>
    </div>
    <div class="card-body">
      <div style="display:flex;flex-direction:column;gap:16px;">
        <div style="display:flex;align-items:center;justify-content:space-between;padding:12px;background:var(--green-faint);border-radius:10px;">
          <div style="display:flex;align-items:center;gap:12px;">
            <svg style="width:20px;height:20px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            <span style="font-size:14px;font-weight:600;color:var(--text);">Completed</span>
          </div>
          <span style="font-family:'Sora',sans-serif;font-size:18px;font-weight:700;color:var(--green);">{{ $stats['completed_orders'] }}</span>
        </div>

        <div style="display:flex;align-items:center;justify-content:space-between;padding:12px;background:rgba(234,179,8,.09);border-radius:10px;">
          <div style="display:flex;align-items:center;gap:12px;">
            <svg style="width:20px;height:20px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            <span style="font-size:14px;font-weight:600;color:var(--text);">Processing</span>
          </div>
          <span style="font-family:'Sora',sans-serif;font-size:18px;font-weight:700;color:#b45309;">{{ $stats['processing_orders'] }}</span>
        </div>

        <div style="display:flex;align-items:center;justify-content:space-between;padding:12px;background:rgba(124,58,237,.09);border-radius:10px;">
          <div style="display:flex;align-items:center;gap:12px;">
            <svg style="width:20px;height:20px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
            <span style="font-size:14px;font-weight:600;color:var(--text);">Pending</span>
          </div>
          <span style="font-family:'Sora',sans-serif;font-size:18px;font-weight:700;color:#7c3aed;">{{ $stats['pending_orders'] }}</span>
        </div>

        <div style="display:flex;align-items:center;justify-content:space-between;padding:12px;background:var(--red-faint);border-radius:10px;">
          <div style="display:flex;align-items:center;gap:12px;">
            <svg style="width:20px;height:20px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
            <span style="font-size:14px;font-weight:600;color:var(--text);">Failed</span>
          </div>
          <span style="font-family:'Sora',sans-serif;font-size:18px;font-weight:700;color:var(--red);">{{ \App\Models\WalletTransaction::where('type', 'topup')->where('status', 'failed')->count() }}</span>
        </div>
      </div>
    </div>
  </div>

</div>

<!-- ADDITIONAL METRICS -->
<div class="metric-row">
  <div class="metric-item">
    <div class="metric-label">Total Orders</div>
    <div class="metric-value">{{ $stats['total_orders'] }}</div>
  </div>
  <div class="metric-item">
    <div class="metric-label">New Users Today</div>
    <div class="metric-value">{{ $stats['new_users_today'] }}</div>
  </div>
  <div class="metric-item">
    <div class="metric-label">Orders Today</div>
    <div class="metric-value">{{ $stats['orders_today'] }}</div>
  </div>
</div>
@endsection