@extends('layouts.admin')

@section('title', 'System Settings')
@section('page-title', 'System Settings')
@section('page-icon', 'settings')

@section('content')

<div class="max-w-5xl mx-auto space-y-6">

    <!-- ================= HEADER ================= -->
    <div class="bg-white border border-slate-200 rounded-lg p-6">
        <div class="flex items-center gap-3">
            <div class="p-2 rounded-lg bg-slate-100">
                <i data-lucide="settings" class="w-6 h-6 text-slate-700"></i>
            </div>
            <div>
                <h2 class="text-lg font-semibold text-slate-800">
                    System Configuration
                </h2>
                <p class="text-sm text-slate-500">
                    Platform rules, security policies & environment information
                </p>
            </div>
        </div>
    </div>

    <!-- ================= SETTINGS GRID ================= -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        <!-- Campaign Rules -->
        <div class="bg-white border border-slate-200 rounded-lg p-6">
            <div class="flex items-center gap-2 mb-4">
                <i data-lucide="qr-code" class="w-5 h-5 text-blue-600"></i>
                <h3 class="text-sm font-semibold text-slate-800">
                    Campaign Rules
                </h3>
            </div>

            <ul class="space-y-3 text-sm text-slate-600">
                <li class="flex items-start gap-2">
                    <i data-lucide="check-circle" class="w-4 h-4 text-green-600 mt-0.5"></i>
                    One play allowed per mobile device
                </li>
                <li class="flex items-start gap-2">
                    <i data-lucide="check-circle" class="w-4 h-4 text-green-600 mt-0.5"></i>
                    Campaign entry via QR code only
                </li>
                <li class="flex items-start gap-2">
                    <i data-lucide="check-circle" class="w-4 h-4 text-green-600 mt-0.5"></i>
                    Probability-based reward distribution
                </li>
            </ul>

            <p class="text-xs text-slate-400 mt-4">
                These rules are enforced automatically by the game engine.
            </p>
        </div>

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

            <ul class="space-y-3 text-sm text-slate-600">
                <li class="flex items-start gap-2">
                    <i data-lucide="lock" class="w-4 h-4 text-slate-600 mt-0.5"></i>
                    Admin-only access to management modules
                </li>
                <li class="flex items-start gap-2">
                    <i data-lucide="clock" class="w-4 h-4 text-slate-600 mt-0.5"></i>
                    Session-based gameplay validation
                </li>
                <li class="flex items-start gap-2">
                    <i data-lucide="users" class="w-4 h-4 text-slate-600 mt-0.5"></i>
                    Role-based permissions (Super Admin / Viewer)
                </li>
            </ul>

            <p class="text-xs text-slate-400 mt-4">
                Security rules protect the platform from misuse and fraud.
            </p>
        </div>

    </div>

    <!-- ================= SYSTEM INFO ================= -->
    <div class="bg-white border border-slate-200 rounded-lg p-6">
        <div class="flex items-center gap-2 mb-4">
            <i data-lucide="info" class="w-5 h-5 text-indigo-600"></i>
            <h3 class="text-sm font-semibold text-slate-800">
                System Information
            </h3>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
            <div>
                <p class="text-xs uppercase text-slate-500">Game Engine</p>
                <p class="font-medium text-slate-800">Spin & Scratch</p>
            </div>

            <div>
                <p class="text-xs uppercase text-slate-500">Platform Version</p>
                <p class="font-medium text-slate-800">v1.0.0</p>
            </div>

            <div>
                <p class="text-xs uppercase text-slate-500">System Status</p>
                <p class="font-medium text-green-600 flex items-center gap-1">
                    <i data-lucide="activity" class="w-4 h-4"></i>
                    Operational
                </p>
            </div>
        </div>
    </div>

</div>

@endsection