@extends('layouts.app')

@section('title', 'Admin Dashboard - BlackSplit')

@push('style')
<style>
  :root {
    --dash-accent: #c98e4a;
    --dash-accent-hover: #b67b36;
    --dash-accent-light: rgba(201, 142, 74, 0.12);
  }

  .admin-hero-card {
    background: linear-gradient(135deg, #1e1e24 0%, #2b231a 55%, #3d2c1c 100%);
    border: 0;
    border-radius: 22px;
    color: #fff;
    padding: 2.2rem 2.4rem;
    box-shadow: 0 14px 36px rgba(25, 18, 12, 0.18);
    position: relative;
    overflow: hidden;
  }

  .admin-hero-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 142, 74, 0.25) 0%, rgba(201, 142, 74, 0) 70%);
    pointer-events: none;
  }

  .admin-hero-title {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
  }

  .admin-hero-subtitle {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1rem;
    max-width: 620px;
  }

  .admin-stat-card {
    background: #ffffff;
    border: 1px solid #f0ece7;
    border-radius: 20px;
    padding: 1.5rem 1.6rem;
    box-shadow: 0 8px 24px rgba(20, 20, 20, 0.04);
    transition: all 0.22s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .admin-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(201, 142, 74, 0.12);
    border-color: rgba(201, 142, 74, 0.35);
  }

  .admin-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
  }

  .admin-stat-value {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.1;
    color: #171717;
    margin-top: 0.65rem;
  }

  .admin-stat-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #7d7d7d;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .admin-table-card {
    background: #ffffff;
    border: 1px solid #f0ece7;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(20, 20, 20, 0.04);
    overflow: hidden;
  }

  .admin-table-header {
    padding: 1.4rem 1.8rem;
    border-bottom: 1px solid #f4f0eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .admin-badge-accent {
    background: var(--dash-accent-light);
    color: var(--dash-accent);
    font-weight: 700;
    border-radius: 10px;
    padding: 4px 10px;
    font-size: 12px;
  }

  .quick-action-btn {
    border-radius: 14px;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 13.5px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
  }

  .quick-action-primary {
    background: var(--dash-accent);
    border: 1px solid var(--dash-accent);
    color: #fff;
  }

  .quick-action-primary:hover {
    background: var(--dash-accent-hover);
    border-color: var(--dash-accent-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(201, 142, 74, 0.3);
  }

  .quick-action-outline {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
  }

  .quick-action-outline:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    transform: translateY(-1px);
  }

  .music-mini-card {
    background: linear-gradient(135deg, #fdfbf7 0%, #f6efe6 100%);
    border: 1px solid #ebd9c5;
    border-radius: 18px;
    padding: 1.25rem 1.4rem;
  }
</style>
@endpush

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <!-- Welcome Hero Banner -->
  <div class="admin-hero-card mb-4">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3">
      <div>
        <div class="admin-hero-title mb-1">
          Welcome back, {{ $user?->name ?? 'Admin' }}! 👋
        </div>
        <div class="admin-hero-subtitle">
          Marketplace overview, inventory status, active packages and platform control center.
        </div>
      </div>

      <div class="d-flex gap-2 flex-wrap mt-2 mt-md-0">
        <a href="{{ route('admin.services.create') }}" class="quick-action-btn quick-action-primary">
          <i class="ti tabler-plus"></i> Add Service
        </a>
        <a href="{{ route('admin.categories.create') }}" class="quick-action-btn quick-action-outline">
          <i class="ti tabler-folder-plus"></i> Add Category
        </a>
        <a href="{{ route('admin.music-settings.index') }}" class="quick-action-btn quick-action-outline">
          <i class="ti tabler-music"></i> Music
        </a>
        <a href="{{ route('admin.subscription-invoices.index') }}" class="quick-action-btn quick-action-outline">
          <i class="ti tabler-file-certificate"></i> Invoices
          @if(getPendingInvoicesCount() > 0)
            <span class="badge rounded-pill bg-danger ms-1">{{ getPendingInvoicesCount() }}</span>
          @endif
        </a>
        <a href="{{ route('subscriptions.index') }}" target="_blank" class="quick-action-btn quick-action-outline">
          <i class="ti tabler-external-link"></i> View Marketplace
        </a>
      </div>
    </div>
  </div>

  @if(getPendingInvoicesCount() > 0)
    <div class="alert alert-warning d-flex align-items-center justify-content-between flex-wrap gap-2 mb-4 shadow-sm" role="alert">
      <div class="d-flex align-items-center gap-2">
        <i class="ti tabler-file-certificate fs-3 text-warning"></i>
        <div>
          <strong class="text-dark">{{ getPendingInvoicesCount() }} New Invoice Verification Request(s)</strong>
          <div class="small text-muted">Subscription owners have uploaded invoices or transaction details awaiting verification.</div>
        </div>
      </div>
      <a href="{{ route('admin.subscription-invoices.index', ['status' => 'pending']) }}" class="btn btn-sm btn-warning text-white fw-bold">
        Review Invoices Now &gt;&gt;
      </a>
    </div>
  @endif

  <!-- Primary Stats Row (4 Columns) -->
  <div class="row g-4 mb-4">
    <!-- Card 1: Users -->
    <div class="col-xl-3 col-md-6 col-12">
      <div class="admin-stat-card">
        <div class="d-flex justify-content-between align-items-start">
          <div class="admin-stat-label">Total Users</div>
          <span class="admin-stat-icon" style="background: rgba(43, 94, 217, 0.12); color: #2b5ed9;">
            <i class="ti tabler-users"></i>
          </span>
        </div>
        <div>
          <div class="admin-stat-value">{{ number_format($stats['total_users']) }}</div>
          <div class="mt-2 small text-muted d-flex align-items-center gap-1">
            <span class="admin-badge-accent">Platform Accounts</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Card 2: Shared Subscriptions -->
    <div class="col-xl-3 col-md-6 col-12">
      <div class="admin-stat-card">
        <div class="d-flex justify-content-between align-items-start">
          <div class="admin-stat-label">Shared Subscriptions</div>
          <span class="admin-stat-icon" style="background: rgba(201, 142, 74, 0.15); color: #c98e4a;">
            <i class="ti tabler-device-tv"></i>
          </span>
        </div>
        <div>
          <div class="admin-stat-value">{{ number_format($stats['total_subscriptions']) }}</div>
          <div class="mt-2 small text-muted d-flex align-items-center gap-1">
            <span class="badge bg-label-success rounded-pill px-2">
              <i class="ti tabler-circle-check me-1"></i> {{ $stats['active_subscriptions'] }} Active
            </span>
            <span class="text-muted ms-1">listings</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Card 3: Services & Plans -->
    <div class="col-xl-3 col-md-6 col-12">
      <div class="admin-stat-card">
        <div class="d-flex justify-content-between align-items-start">
          <div class="admin-stat-label">Services &amp; Plans</div>
          <span class="admin-stat-icon" style="background: rgba(44, 141, 88, 0.12); color: #2c8d58;">
            <i class="ti tabler-apps"></i>
          </span>
        </div>
        <div>
          <div class="admin-stat-value">{{ number_format($stats['total_services']) }}</div>
          <div class="mt-2 small text-muted d-flex align-items-center gap-1">
            <span class="admin-badge-accent">{{ $stats['total_plans'] }} Plans</span>
            <span class="text-muted ms-1">across {{ $stats['total_categories'] }} categories</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Card 4: Co-Subscribers -->
    <div class="col-xl-3 col-md-6 col-12">
      <div class="admin-stat-card">
        <div class="d-flex justify-content-between align-items-start">
          <div class="admin-stat-label">Joined Co-Subscribers</div>
          <span class="admin-stat-icon" style="background: rgba(131, 115, 217, 0.14); color: #8373d9;">
            <i class="ti tabler-user-check"></i>
          </span>
        </div>
        <div>
          <div class="admin-stat-value">{{ number_format($stats['total_members']) }}</div>
          <div class="mt-2 small text-muted d-flex align-items-center gap-1">
            <span class="admin-badge-accent">Occupied Seats</span>
            <span class="text-muted ms-1">in groups</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Secondary Row (Transactions, Payouts, Categories, Music) -->
  <div class="row g-4 mb-4">
    <!-- Payout Requests -->
    <div class="col-xl-3 col-md-6 col-12">
      <div class="admin-stat-card">
        <div class="d-flex justify-content-between align-items-start">
          <div class="admin-stat-label">Pending Payouts</div>
          <span class="admin-stat-icon" style="background: rgba(216, 106, 66, 0.12); color: #d86a42;">
            <i class="ti tabler-cash"></i>
          </span>
        </div>
        <div>
          <div class="admin-stat-value">{{ number_format($stats['pending_payouts']) }}</div>
          <div class="mt-2">
            <a href="{{ route('admin.payout-requests.index') }}" class="text-primary text-decoration-none small fw-bold">
              Review payout requests &gt;&gt;
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Categories -->
    <div class="col-xl-3 col-md-6 col-12">
      <div class="admin-stat-card">
        <div class="d-flex justify-content-between align-items-start">
          <div class="admin-stat-label">Categories</div>
          <span class="admin-stat-icon" style="background: rgba(241, 196, 15, 0.14); color: #c49500;">
            <i class="ti tabler-category"></i>
          </span>
        </div>
        <div>
          <div class="admin-stat-value">{{ number_format($stats['total_categories']) }}</div>
          <div class="mt-2">
            <a href="{{ route('admin.categories.index') }}" class="text-primary text-decoration-none small fw-bold">
              Manage categories &gt;&gt;
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Wallet Transactions -->
    <div class="col-xl-3 col-md-6 col-12">
      <div class="admin-stat-card">
        <div class="d-flex justify-content-between align-items-start">
          <div class="admin-stat-label">Wallet Transactions</div>
          <span class="admin-stat-icon" style="background: rgba(30, 160, 210, 0.12); color: #1ea0d2;">
            <i class="ti tabler-wallet"></i>
          </span>
        </div>
        <div>
          <div class="admin-stat-value">{{ number_format($stats['total_wallet_transactions']) }}</div>
          <div class="mt-2">
            <a href="{{ route('admin.wallet-transactions.index') }}" class="text-primary text-decoration-none small fw-bold">
              View transaction logs &gt;&gt;
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Background Music Status Tile -->
    <div class="col-xl-3 col-md-6 col-12">
      <div class="admin-stat-card">
        <div class="d-flex justify-content-between align-items-start">
          <div class="admin-stat-label">Background Music</div>
          <span class="admin-stat-icon" style="background: rgba(201, 142, 74, 0.14); color: #c98e4a;">
            <i class="fa-solid fa-music"></i>
          </span>
        </div>
        <div>
          <div class="fw-bold text-truncate mb-1" style="font-size: 1.05rem;" title="{{ $musicSetting['music_title'] ?? 'Default Music' }}">
            {{ $musicSetting['music_title'] ?? 'Default Music' }}
          </div>
          <div class="mt-2">
            <a href="{{ route('admin.music-settings.index') }}" class="btn btn-xs btn-outline-warning rounded-pill px-3 py-1" style="font-size: 11.5px; font-weight: 700;">
              <i class="ti tabler-settings me-1"></i> Change Music
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Content Row (Recent Subscriptions Table & Quick Actions) -->
  <div class="row g-4">
    <!-- Recent Marketplace Subscriptions (8 cols) -->
    <div class="col-lg-8 col-12">
      <div class="admin-table-card">
        <div class="admin-table-header">
          <div>
            <h5 class="fw-bold mb-0">Recent Shared Subscriptions</h5>
            <small class="text-muted">Latest subscriptions created on the marketplace</small>
          </div>
          <a href="{{ route('admin.shared-subscriptions.index') }}" class="btn btn-sm btn-outline-primary rounded-pill px-3">
            View All
          </a>
        </div>

        <div class="table-responsive">
          <table class="table align-middle table-hover mb-0">
            <thead class="table-light">
              <tr>
                <th style="font-size: 12px; font-weight: 700; text-transform: uppercase;">Service</th>
                <th style="font-size: 12px; font-weight: 700; text-transform: uppercase;">Owner</th>
                <th style="font-size: 12px; font-weight: 700; text-transform: uppercase;">Plan / Slots</th>
                <th style="font-size: 12px; font-weight: 700; text-transform: uppercase;">Price</th>
                <th style="font-size: 12px; font-weight: 700; text-transform: uppercase;">Status</th>
                <th style="font-size: 12px; font-weight: 700; text-transform: uppercase; text-align: right;">Action</th>
              </tr>
            </thead>
            <tbody>
              @forelse($stats['recent_subscriptions'] as $sub)
                @php
                  $serviceLogo = marketplaceImageUrl($sub->service?->logo ?: $sub->service?->category?->image_url);
                  $serviceName = $sub->service?->name ?? 'Custom';
                @endphp
                <tr>
                  <td>
                    <div class="d-flex align-items-center gap-2">
                      @if($serviceLogo)
                        <img src="{{ $serviceLogo }}" alt="{{ $serviceName }}" style="width: 32px; height: 32px; border-radius: 8px; object-fit: cover;" onerror="this.remove()">
                      @else
                        <span class="badge bg-light text-dark rounded-circle" style="width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800;">
                          {{ strtoupper(substr($serviceName, 0, 1)) }}
                        </span>
                      @endif
                      <div>
                        <div class="fw-bold text-dark">{{ $serviceName }}</div>
                        <small class="text-muted text-truncate d-inline-block" style="max-width: 140px;">{{ $sub->title ?: 'Shared account' }}</small>
                      </div>
                    </div>
                  </td>
                  <td>
                    <div class="fw-semibold text-dark">{{ $sub->owner?->name ?? 'Anonymous' }}</div>
                    <small class="text-muted">{{ $sub->owner?->email ?? '' }}</small>
                  </td>
                  <td>
                    <span class="badge bg-label-primary rounded-pill mb-1">{{ $sub->servicePlan?->name ?? 'Standard' }}</span>
                    <div class="small text-muted">{{ $sub->available_slots }}/{{ $sub->total_slots }} available</div>
                  </td>
                  <td>
                    <div class="fw-bold text-dark">{{ number_format($sub->price_per_slot, 2) }} €</div>
                    <small class="text-muted">/ month</small>
                  </td>
                  <td>
                    @if($sub->status === 'active')
                      <span class="badge bg-label-success rounded-pill">Active</span>
                    @elseif($sub->status === 'pending')
                      <span class="badge bg-label-warning rounded-pill">Pending</span>
                    @else
                      <span class="badge bg-label-secondary rounded-pill">{{ ucfirst($sub->status ?? 'Draft') }}</span>
                    @endif
                  </td>
                  <td style="text-align: right;">
                    <a href="{{ route('subscriptions.manage', $sub) }}" class="btn btn-xs btn-outline-primary rounded-pill px-2">
                      Manage
                    </a>
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="6" class="text-center py-4 text-muted">
                    No shared subscriptions created yet.
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- Quick Controls & System Health (4 cols) -->
    <div class="col-lg-4 col-12">
      <!-- Quick Navigation Panel -->
      <div class="admin-table-card mb-4">
        <div class="admin-table-header">
          <h5 class="fw-bold mb-0">Platform Shortcuts</h5>
        </div>
        <div class="p-3 d-flex flex-column gap-2">
          <a href="{{ route('admin.services.index') }}" class="d-flex align-items-center justify-content-between p-2 rounded text-dark text-decoration-none bg-light">
            <span class="d-flex align-items-center gap-2">
              <i class="ti tabler-apps text-primary fs-5"></i>
              <span class="fw-semibold">Services Catalog</span>
            </span>
            <span class="badge bg-primary rounded-pill">{{ $stats['total_services'] }}</span>
          </a>

          <a href="{{ route('admin.categories.index') }}" class="d-flex align-items-center justify-content-between p-2 rounded text-dark text-decoration-none bg-light">
            <span class="d-flex align-items-center gap-2">
              <i class="ti tabler-folder text-warning fs-5"></i>
              <span class="fw-semibold">Categories</span>
            </span>
            <span class="badge bg-warning rounded-pill">{{ $stats['total_categories'] }}</span>
          </a>

          <a href="{{ route('admin.service-plans.index') }}" class="d-flex align-items-center justify-content-between p-2 rounded text-dark text-decoration-none bg-light">
            <span class="d-flex align-items-center gap-2">
              <i class="ti tabler-list-details text-success fs-5"></i>
              <span class="fw-semibold">Plan Tiers</span>
            </span>
            <span class="badge bg-success rounded-pill">{{ $stats['total_plans'] }}</span>
          </a>

          <a href="{{ route('admin.users.index') }}" class="d-flex align-items-center justify-content-between p-2 rounded text-dark text-decoration-none bg-light">
            <span class="d-flex align-items-center gap-2">
              <i class="ti tabler-user-cog text-info fs-5"></i>
              <span class="fw-semibold">Manage Users</span>
            </span>
            <span class="badge bg-info rounded-pill">{{ $stats['total_users'] }}</span>
          </a>

          <a href="{{ route('admin.music-settings.index') }}" class="d-flex align-items-center justify-content-between p-2 rounded text-dark text-decoration-none bg-light">
            <span class="d-flex align-items-center gap-2">
              <i class="ti tabler-music text-warning fs-5"></i>
              <span class="fw-semibold">Music Settings</span>
            </span>
            <i class="ti tabler-chevron-right text-muted"></i>
          </a>
        </div>
      </div>

      <!-- Top Brands / Services -->
      <div class="admin-table-card">
        <div class="admin-table-header">
          <h5 class="fw-bold mb-0">Top Active Services</h5>
        </div>
        <div class="p-3">
          @forelse($stats['top_services'] as $topService)
            @php
              $topLogo = marketplaceImageUrl($topService->logo ?: $topService->category?->image_url);
            @endphp
            <div class="d-flex align-items-center justify-content-between mb-3">
              <div class="d-flex align-items-center gap-2">
                @if($topLogo)
                  <img src="{{ $topLogo }}" alt="{{ $topService->name }}" style="width: 28px; height: 28px; border-radius: 6px; object-fit: cover;" onerror="this.remove()">
                @else
                  <span class="badge bg-light text-dark rounded-circle" style="width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px;">
                    {{ strtoupper(substr($topService->name, 0, 1)) }}
                  </span>
                @endif
                <span class="fw-semibold text-dark">{{ $topService->name }}</span>
              </div>
              <span class="badge bg-label-primary rounded-pill">
                {{ $topService->shared_subscriptions_count ?? 0 }} packages
              </span>
            </div>
          @empty
            <div class="text-muted text-center py-3">No service data available.</div>
          @endforelse
        </div>
      </div>
    </div>
  </div>
</div>
@endsection