{{-- resources/views/filament/pages/dashboard.blade.php --}}

<x-filament-panels::page>
    <div class="space-y-6">
        {{-- Welcome Section --}}
        <h2 class="text-2xl font-bold mb-2">Welcome to Facebook Bot Admin</h2>
        <p class="text-slate-700 dark:text-blue-100 ">Manage your Facebook pages, auto-replies, and monitor conversations all in one place.</p>

        {{-- Widgets --}}
        @if (method_exists($this, 'getWidgets'))
            <x-filament-widgets::widgets
                :widgets="$this->getWidgets()"
                :columns="$this->getColumns()"
            />
        @endif

        {{-- Quick Actions --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900">
                        <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                        </svg>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-semibold">Add New Page</h3>
                        <p class="text-sm text-gray-500">Connect a Facebook page</p>
                    </div>
                </div>
                <a href="{{ route('filament.admin.resources.pages.create') }}"
                   class="mt-4 block text-center px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
                    Get Started
                </a>
            </div>

            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-green-100 dark:bg-green-900">
                        <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                        </svg>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-semibold">Create Auto Reply</h3>
                        <p class="text-sm text-gray-500">Setup automated responses</p>
                    </div>
                </div>
                <a href="{{ route('filament.admin.resources.auto-replies.create') }}"
                   class="mt-4 block text-center px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition">
                    Create Rule
                </a>
            </div>

            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-purple-100 dark:bg-purple-900">
                        <svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                        </svg>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-semibold">View Analytics</h3>
                        <p class="text-sm text-gray-500">Monitor performance</p>
                    </div>
                </div>
                <a href="{{ route('filament.admin.resources.analytics.index') }}"
                   class="mt-4 block text-center px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition">
                    View Reports
                </a>
            </div>
        </div>

        {{-- System Status --}}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold mb-4">System Status</h3>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="flex items-center">
                    <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                    <span class="text-sm">Bot Engine: <strong>Online</strong></span>
                </div>
                <div class="flex items-center">
                    <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                    <span class="text-sm">Database: <strong>Connected</strong></span>
                </div>
                <div class="flex items-center">
                    <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                    <span class="text-sm">Webhooks: <strong>Active</strong></span>
                </div>
                <div class="flex items-center">
                    <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
                    <span class="text-sm">Last Update: <strong>{{ now()->diffForHumans() }}</strong></span>
                </div>
            </div>
        </div>
    </div>
</x-filament-panels::page>