@extends('layouts.trading')

@section('content')
<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
    @foreach ([
        ['label' => 'Users', 'value' => $stats['users']],
        ['label' => 'Connected Brokers', 'value' => $stats['connected_brokers']],
        ['label' => 'Active Bots', 'value' => $stats['active_bots']],
        ['label' => 'Instruments', 'value' => $stats['instruments']],
    ] as $stat)
        <div class="trade-card">
            <div class="text-sm text-slate-400">{{ $stat['label'] }}</div>
            <div class="text-3xl font-bold text-white">{{ $stat['value'] }}</div>
        </div>
    @endforeach
</div>

<div class="trade-card mt-6">
    <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
        <h3 class="text-lg font-semibold text-white">Market Feed (Admin Credentials)</h3>
        <a href="{{ route('broker') }}" class="trade-btn-ghost">Manage Admin FlatTrade Creds</a>
    </div>
    @if ($marketFeed)
        <p class="text-sm text-emerald-400">Connected — {{ $marketFeed->client_id }} powers WebSocket + scan data for all users.</p>
        <p class="mt-1 text-xs text-slate-500">Last sync: {{ $marketFeed->last_synced_at?->diffForHumans() ?? 'Never' }}</p>
    @else
        <p class="text-sm text-rose-400">Not connected. Admin must save API credentials and complete OAuth on the FlatTrade Account page.</p>
    @endif
</div>

<div class="trade-card mt-6">
    <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
        <h3 class="text-lg font-semibold text-white">Data Sync</h3>
        <div class="flex gap-2">
            <form method="POST" action="{{ route('admin.sync') }}">@csrf<button type="submit" class="trade-btn-primary">Trigger Sync</button></form>
            <a href="{{ route('admin.rulebook.edit') }}" class="trade-btn-ghost">Edit Rulebook</a>
            <a href="{{ route('admin.logs') }}" class="trade-btn-ghost">System Logs</a>
        </div>
    </div>
    <p class="text-sm text-slate-400">Last market tick: {{ $stats['last_tick'] ? \Carbon\Carbon::parse($stats['last_tick'])->diffForHumans() : 'Never' }}</p>
</div>

<div class="trade-card mt-6">
    <h3 class="mb-4 text-lg font-semibold text-white">Worker Health</h3>
    <div class="grid gap-3 md:grid-cols-3">
        @forelse ($workers as $worker)
            <div class="rounded-xl border border-trade-border bg-trade-panel p-4">
                <div class="font-semibold text-white">{{ $worker->worker }}</div>
                <div class="text-sm {{ $worker->status === 'running' ? 'text-emerald-400' : 'text-slate-400' }}">{{ strtoupper($worker->status) }}</div>
                <div class="mt-1 text-xs text-slate-500">{{ $worker->last_heartbeat_at?->diffForHumans() ?? 'Never' }}</div>
            </div>
        @empty
            <p class="text-slate-500">No workers reported yet. Run artisan commands on VPS.</p>
        @endforelse
    </div>
</div>

<div class="trade-card mt-6 overflow-x-auto">
    <h3 class="mb-4 text-lg font-semibold text-white">Users</h3>
    <table class="w-full text-left text-sm">
        <thead class="border-b border-trade-border text-slate-400">
            <tr>
                <th class="pb-3 pr-4">Name</th>
                <th class="pb-3 pr-4">Email</th>
                <th class="pb-3 pr-4">Role</th>
                <th class="pb-3 pr-4">Broker</th>
                <th class="pb-3">Bot</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($users as $user)
                <tr class="border-b border-trade-border/50">
                    <td class="py-3 pr-4 text-white">{{ $user->name }}</td>
                    <td class="py-3 pr-4">{{ $user->email }}</td>
                    <td class="py-3 pr-4"><span class="rounded bg-trade-panel px-2 py-1 text-xs">{{ $user->role }}</span></td>
                    <td class="py-3 pr-4">{{ $user->brokerAccount?->is_connected ? 'Connected' : '—' }}</td>
                    <td class="py-3">{{ $user->botSettings?->auto_trade ? 'Running' : 'Idle' }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection