@extends('layouts.admin')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard')
@section('page-icon', 'layout-dashboard')

@section('content')

<!-- ================= ERP KPI STRIP ================= -->
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 mb-6">

    <div class="bg-white border border-slate-200 rounded-lg p-4">
        <div class="flex justify-between items-center">
            <div>
                <p class="text-xs text-slate-500 uppercase">Campaigns</p>
                <p class="text-2xl font-semibold text-slate-800">{{ $total_campaigns }}</p>
                <p class="text-xs text-slate-400">Total created</p>
            </div>
            <i data-lucide="qr-code" class="w-6 h-6 text-blue-600"></i>
        </div>
    </div>

    <div class="bg-white border border-slate-200 rounded-lg p-4">
        <div class="flex justify-between items-center">
            <div>
                <p class="text-xs text-slate-500 uppercase">Active</p>
                <p class="text-2xl font-semibold text-slate-800">{{ $active_campaigns }}</p>
                <p class="text-xs text-slate-400">Running now</p>
            </div>
            <i data-lucide="activity" class="w-6 h-6 text-green-600"></i>
        </div>
    </div>

    <div class="bg-white border border-slate-200 rounded-lg p-4">
        <div class="flex justify-between items-center">
            <div>
                <p class="text-xs text-slate-500 uppercase">QR Scans</p>
                <p class="text-2xl font-semibold text-slate-800">{{ $total_scans }}</p>
                <p class="text-xs text-slate-400">Total interactions</p>
            </div>
            <i data-lucide="scan-line" class="w-6 h-6 text-indigo-600"></i>
        </div>
    </div>

    <div class="bg-white border border-slate-200 rounded-lg p-4">
        <div class="flex justify-between items-center">
            <div>
                <p class="text-xs text-slate-500 uppercase">Players</p>
                <p class="text-2xl font-semibold text-slate-800">{{ $total_players }}</p>
                <p class="text-xs text-slate-400">Unique users</p>
            </div>
            <i data-lucide="users" class="w-6 h-6 text-yellow-600"></i>
        </div>
    </div>

</div>

<!-- ================= OPERATIONS SUMMARY ================= -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">

    <!-- Plays -->
    <div class="bg-white border border-slate-200 rounded-lg p-5">
        <p class="text-sm text-slate-500">Game Plays</p>
        <p class="text-3xl font-semibold text-slate-800 mt-1">{{ $total_plays }}</p>
        <p class="text-xs text-slate-400 mt-2">Across all campaigns</p>
    </div>

    <!-- Wins -->
    <div class="bg-white border border-slate-200 rounded-lg p-5">
        <p class="text-sm text-slate-500">Wins</p>
        <p class="text-3xl font-semibold text-green-600 mt-1">{{ $total_wins }}</p>
        <p class="text-xs text-slate-400 mt-2">Successful attempts</p>
    </div>

    <!-- Win Rate -->
    <div class="bg-white border border-slate-200 rounded-lg p-5">
        <p class="text-sm text-slate-500">Win Rate</p>

        @php
            $rate = $total_plays > 0 ? round(($total_wins / $total_plays) * 100, 2) : 0;
        @endphp

        <p class="text-3xl font-semibold text-indigo-600 mt-1">{{ $rate }}%</p>

        <div class="w-full h-2 bg-slate-200 rounded-full mt-3">
            <div class="h-2 bg-indigo-600 rounded-full" style="width: {{ $rate }}%"></div>
        </div>

        <p class="text-xs text-slate-400 mt-2">Success probability</p>
    </div>

</div>

<!-- ================= ERP ACTION CENTER ================= -->
<div class="bg-white border border-slate-200 rounded-lg p-6 mb-6">
    <h3 class="text-sm font-semibold text-slate-800 mb-4 flex items-center gap-2">
        <i data-lucide="zap" class="w-4 h-4 text-blue-600"></i>
        Action Center
    </h3>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">

        <a href="{{ route('admin.campaigns.index') }}"
           class="flex items-center gap-2 p-3 border border-slate-200 rounded-lg hover:bg-slate-50">
            <i data-lucide="qr-code" class="w-4 h-4 text-blue-600"></i>
            Campaigns
        </a>

        <a href="{{ route('admin.reports.campaigns') }}"
           class="flex items-center gap-2 p-3 border border-slate-200 rounded-lg hover:bg-slate-50">
            <i data-lucide="bar-chart-3" class="w-4 h-4 text-indigo-600"></i>
            Reports
        </a>

        <a href="{{ route('admin.reports.winners') }}"
           class="flex items-center gap-2 p-3 border border-slate-200 rounded-lg hover:bg-slate-50">
            <i data-lucide="trophy" class="w-4 h-4 text-green-600"></i>
            Winners
        </a>

        @if(auth()->user()->role === 'super_admin')
            <a href="{{ route('admin.campaigns.create') }}"
               class="flex items-center gap-2 p-3 border border-slate-200 rounded-lg hover:bg-slate-50">
                <i data-lucide="plus-circle" class="w-4 h-4 text-slate-800"></i>
                New Campaign
            </a>
        @endif

    </div>
</div>

<!-- ================= SYSTEM STATUS ================= -->
<div class="bg-white border border-slate-200 rounded-lg p-6">
    <h3 class="text-sm font-semibold text-slate-800 mb-4 flex items-center gap-2">
        <i data-lucide="shield-check" class="w-4 h-4 text-green-600"></i>
        System Status
    </h3>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm text-slate-600">

        <div class="flex items-center gap-2">
            <i data-lucide="check-circle" class="w-4 h-4 text-green-600"></i>
            QR Engine operational
        </div>

        <div class="flex items-center gap-2">
            <i data-lucide="smartphone" class="w-4 h-4 text-blue-600"></i>
            One-play-per-device enforced
        </div>

        <div class="flex items-center gap-2">
            <i data-lucide="percent" class="w-4 h-4 text-indigo-600"></i>
            Probability logic active
        </div>

        <div class="flex items-center gap-2">
            <i data-lucide="lock" class="w-4 h-4 text-slate-600"></i>
            Role-based access enabled
        </div>

        <div class="flex items-center gap-2">
            <i data-lucide="server" class="w-4 h-4 text-slate-600"></i>
            Server healthy
        </div>

        <div class="flex items-center gap-2">
            <i data-lucide="activity" class="w-4 h-4 text-green-600"></i>
            No anomalies detected
        </div>

    </div>
</div>

@endsection