@extends('layouts.app')

@php
    $pageTitle = 'ADMS Dashboard';
    $pageHeading = 'Operational Dashboard';
    $pageDescription = 'Monitoring device, transaksi, command queue, dan integrasi user dalam satu tampilan.';
    $sessionRole = strtolower((string) (($currentUser['role'] ?? null) ?: (!empty($currentUser['is_superuser']) ? 'admin' : 'viewer')));
@endphp

@section('content')
    @php
        $expiredCode = \App\Services\Device\CommandQueue::RETURN_EXPIRED;
    @endphp
    <style>
        .dashboard-summary {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 8px;
            margin-bottom: 12px;
        }

        .dashboard-summary-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            min-height: 50px;
            padding: 8px 12px;
            border: 1px solid #aebbc7;
            border-left: 5px solid #0d6efd;
            border-radius: 7px;
            background: #ffffff;
            text-decoration: none;
        }

        .dashboard-summary-item span {
            color: #475467;
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
        }

        .dashboard-summary-item strong {
            color: #172b4d;
            font-size: 20px;
            line-height: 1;
        }

        .dashboard-summary-item--success { border-left-color: #198754; background: #edf9f2; }
        .dashboard-summary-item--warning { border-left-color: #fd7e14; background: #fff5e8; }
        .dashboard-summary-item--danger { border-left-color: #dc3545; background: #fff0f1; }
        .dashboard-summary-item--info { border-left-color: #0dcaf0; background: #eafaff; }

        .dashboard-offline-warning {
            margin-bottom: 12px;
            padding: 12px;
            border: 1px solid #dc3545;
            border-left: 6px solid #b02a37;
            border-radius: 8px;
            background: #fff0f1;
            box-shadow: 0 5px 14px rgba(220, 53, 69, .12);
        }

        .dashboard-offline-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 9px;
        }

        .dashboard-offline-head h3 {
            display: flex;
            align-items: center;
            gap: 7px;
            margin: 0;
            color: #842029;
            font-size: 15px;
        }

        .dashboard-offline-link {
            padding: 5px 9px;
            border-radius: 5px;
            background: #dc3545;
            color: #ffffff;
            font-size: 11px;
            font-weight: 800;
            text-decoration: none;
        }

        .dashboard-offline-list {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 7px;
        }

        .dashboard-offline-device {
            padding: 8px 10px;
            border: 1px solid #e6a1a8;
            border-radius: 6px;
            background: #ffffff;
        }

        .dashboard-offline-device strong {
            display: block;
            color: #842029;
            font-size: 12px;
        }

        .dashboard-offline-device span {
            display: block;
            margin-top: 2px;
            color: #667085;
            font-size: 10px;
            line-height: 1.45;
        }

        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        .dashboard-table {
            margin: 0;
            border: 1px solid #aebbc7;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
        }

        .dashboard-table--transactions { border-top: 4px solid #0d6efd; }
        .dashboard-table--commands { border-top: 4px solid #fd7e14; }
        .dashboard-table--devices {
            grid-column: 1 / -1;
            border-top: 4px solid #198754;
        }

        .dashboard-table-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 8px;
        }

        .dashboard-table-head h3 {
            margin: 0;
            font-size: 16px;
        }

        .dashboard-count {
            padding: 3px 8px;
            border-radius: 999px;
            background: #344054;
            color: #ffffff;
            font-size: 10px;
            font-weight: 800;
        }

        .dashboard-table table thead th {
            background: #1f4e78;
            color: #ffffff;
            border-color: #406b91;
        }

        .dashboard-table table th,
        .dashboard-table table td {
            padding: 7px 8px;
        }

        .dashboard-table table tbody tr:nth-child(even) td { background: #f1f5f9; }
        .dashboard-table table tbody tr:hover td { background: #dbeafe; }

        .dashboard-table .status {
            border: 1px solid currentColor;
            font-weight: 800;
        }

        .dashboard-status--success { background: #198754; color: #ffffff; }
        .dashboard-status--pending { background: #ffc107; color: #332701; }
        .dashboard-status--error { background: #dc3545; color: #ffffff; }
        .dashboard-status--info { background: #0d6efd; color: #ffffff; }
        .dashboard-status--offline { background: #495057; color: #ffffff; }

        @media (max-width: 1250px) {
            .dashboard-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }

        @media (max-width: 900px) {
            .dashboard-grid,
            .dashboard-summary { grid-template-columns: 1fr; }
            .dashboard-offline-list { grid-template-columns: 1fr; }
        }
    </style>

    @if (($offlineDevices ?? collect())->isNotEmpty())
        <section class="dashboard-offline-warning">
            <div class="dashboard-offline-head">
                <h3><i class="fas fa-triangle-exclamation"></i> {{ $offlineDevices->count() }} perangkat sedang offline</h3>
                <a class="dashboard-offline-link" href="{{ route('devices.index') }}">Buka Device Management</a>
            </div>
            <div class="dashboard-offline-list">
                @foreach ($offlineDevices as $offlineDevice)
                    <div class="dashboard-offline-device">
                        <strong>{{ $offlineDevice->alias ?: $offlineDevice->sn }}</strong>
                        <span>SN: {{ $offlineDevice->sn }} · IP: {{ $offlineDevice->ip_address ?: '-' }}</span>
                        <span>Aktivitas terakhir: {{ $offlineDevice->last_activity ?: 'Belum pernah terhubung' }}</span>
                        <span>{{ $offlineDevice->presence_meta }}</span>
                    </div>
                @endforeach
            </div>
        </section>
    @endif

    <div class="dashboard-summary">
        <div class="dashboard-summary-item">
            <span>Devices</span>
            <strong>{{ number_format($summary['devices']) }}</strong>
        </div>
        <div class="dashboard-summary-item dashboard-summary-item--warning">
            <span>Pending Devices</span>
            <strong>{{ number_format($summary['pending_devices']) }}</strong>
        </div>
        <div class="dashboard-summary-item dashboard-summary-item--warning">
            <span>Waiting First Sync</span>
            <strong>{{ number_format($summary['waiting_first_sync']) }}</strong>
        </div>
        <div class="dashboard-summary-item dashboard-summary-item--danger">
            <span>Offline Devices</span>
            <strong>{{ number_format($summary['offline_devices'] ?? 0) }}</strong>
        </div>
        <div class="dashboard-summary-item dashboard-summary-item--info">
            <span>Employees</span>
            <strong>{{ number_format($summary['employees']) }}</strong>
        </div>
        <div class="dashboard-summary-item dashboard-summary-item--success">
            <span>Transactions</span>
            <strong>{{ number_format($summary['transactions']) }}</strong>
        </div>
        <div class="dashboard-summary-item dashboard-summary-item--warning">
            <span>Pending Commands</span>
            <strong>{{ number_format($summary['pending_commands']) }}</strong>
        </div>
        @if (in_array($sessionRole, ['admin', 'operator', 'viewer'], true))
            <a class="dashboard-summary-item dashboard-summary-item--danger" href="{{ route('device-errors.index') }}">
                <span>Device Bugs</span>
                <strong>{{ number_format($summary['device_errors_open'] ?? 0) }}</strong>
            </a>
        @endif
        <div class="dashboard-summary-item dashboard-summary-item--info">
            <span>Active Users</span>
            <strong>{{ number_format($summary['active_users']) }}</strong>
        </div>
        <div class="dashboard-summary-item">
            <span>Polling Only</span>
            <strong>{{ number_format($deviceActivitySummary['polling'] ?? 0) }}</strong>
        </div>
        <div class="dashboard-summary-item dashboard-summary-item--success">
            <span>Data Sync Active</span>
            <strong>{{ number_format($deviceActivitySummary['data_sync'] ?? 0) }}</strong>
        </div>
    </div>

    <section class="dashboard-grid">
        <div class="table-card dashboard-table dashboard-table--transactions">
            <div class="dashboard-table-head">
                <h3>Latest Transactions</h3>
                <span class="dashboard-count">{{ $latestTransactions->count() }} latest</span>
            </div>
            <div data-datatable>
            <div class="table-scroll">
            <table>
                <thead>
                    <tr>
                        <th>Emp Code</th>
                        <th>Punch Time</th>
                        <th>State</th>
                        <th>Terminal</th>
                        <th>Upload Time</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($latestTransactions as $item)
                        <tr>
                            <td>{{ $item->emp_code }}</td>
                            <td>{{ $item->punch_time }}</td>
                            <td>
                                <span class="status dashboard-status--success" title="State code {{ $item->punch_state }}">
                                    {{ $transactionStateLabels[(int) $item->punch_state] ?? ('UNKNOWN (' . $item->punch_state . ')') }}
                                </span>
                            </td>
                            <td>{{ $item->terminal_sn }}</td>
                            <td>{{ $item->upload_time }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="muted">Belum ada transaksi.</td></tr>
                    @endforelse
                </tbody>
            </table>
            </div>
            </div>
        </div>

        <div class="table-card dashboard-table dashboard-table--commands">
            <div class="dashboard-table-head">
                <h3>Latest Device Commands</h3>
                <span class="dashboard-count">{{ $latestCommands->count() }} latest</span>
            </div>
            <div data-datatable>
            <div class="table-scroll">
            <table style="table-layout: fixed; width: 100%;">
                <colgroup>
                    <col style="width: 160px;">
                    <col style="width: 380px;">
                    <col style="width: 150px;">
                    <col style="width: 140px;">
                </colgroup>
                <thead>
                    <tr>
                        <th>Terminal</th>
                        <th>Content</th>
                        <th>Commit</th>
                        <th>Return</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($latestCommands as $item)
                        <tr>
                            <td>
                                <div style="font-weight: 700;">{{ $item->terminal_alias ?: $item->terminal_sn ?: $item->terminal_id }}</div>
                                @if (($item->terminal_alias ?? null) && ($item->terminal_sn ?? null))
                                    <div class="muted" style="font-size: 12px;">{{ $item->terminal_sn }}</div>
                                @endif
                            </td>
                            <td>
                                <code style="display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="{{ $item->content }}">
                                    {{ \Illuminate\Support\Str::limit($item->content, 70) }}
                                </code>
                            </td>
                            <td><span style="font-size: 13px;">{{ $item->commit_time }}</span></td>
                            <td>
                                @if (is_null($item->return_time))
                                    <span class="status dashboard-status--pending">Pending</span>
                                @elseif ((int) $item->return_value === \App\Services\Device\CommandQueue::RETURN_ACK_OPERLOG)
                                    <span class="status dashboard-status--info" title="ACK source: OPERLOG">Success via OPERLOG</span>
                                @elseif ((int) $item->return_value === 0)
                                    <span class="status dashboard-status--success">Success</span>
                                @elseif ((int) $item->return_value === $expiredCode)
                                    <span class="status dashboard-status--offline">Expired</span>
                                @else
                                    <span class="status dashboard-status--error">Error ({{ $item->return_value }})</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="muted">Belum ada command device.</td></tr>
                    @endforelse
                </tbody>
            </table>
            </div>
            </div>
        </div>

        <div class="table-card dashboard-table dashboard-table--devices">
            <div class="dashboard-table-head">
                <h3>Active Devices Snapshot</h3>
                <span class="dashboard-count">{{ $devices->count() }} devices</span>
            </div>
            <div data-datatable>
            <div class="table-scroll">
            <table>
                <thead>
                    <tr>
                        <th>Alias</th>
                        <th>Serial Number</th>
                        <th>IP</th>
                        <th>State</th>
                        <th>User Qty</th>
                        <th>Transaction Qty</th>
                        <th>Last Poll</th>
                        <th>Last Data Sync</th>
                        <th>Last Activity</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($devices as $device)
                        <tr>
                            <td>
                                <div>{{ $device->alias }}</div>
                                @if ((int) $device->status !== 1 && $device->create_time && \Illuminate\Support\Carbon::parse($device->create_time)->isToday())
                                    <div style="margin-top:6px;"><span class="status dashboard-status--pending">New Device</span></div>
                                @endif
                            </td>
                            <td>{{ $device->sn }}</td>
                            <td>{{ $device->ip_address }}</td>
                            <td>
                                <div>
                                    @if ((int) $device->status !== 1)
                                        <span class="status dashboard-status--error">Ping Blocked</span>
                                    @elseif (empty($device->first_sync_at))
                                        <span class="status dashboard-status--pending">Waiting First Sync</span>
                                    @else
                                        <span class="status {{ ($device->presence_status ?? '') === 'online' ? 'dashboard-status--success' : 'dashboard-status--offline' }}">{{ $device->presence_label }}</span>
                                        <div style="margin-top: 6px;">
                                            @php
                                                $activityClass = match ($device->presence_activity_type ?? null) {
                                                    'polling' => 'dashboard-status--info',
                                                    'data_sync' => 'dashboard-status--success',
                                                    default => 'dashboard-status--pending',
                                                };
                                            @endphp
                                            <span class="status {{ $activityClass }}">
                                                {{ $device->presence_activity_label }}
                                            </span>
                                        </div>
                                    @endif
                                </div>
                                <div class="muted" style="font-size: 12px; margin-top: 6px;">
                                    @if ((int) $device->status !== 1)
                                        Pending approval, belum boleh sync.
                                    @elseif (empty($device->first_sync_at))
                                        Approved, tapi feedback pertama dari mesin belum masuk.
                                    @else
                                        {{ $device->presence_meta }}
                                    @endif
                                </div>
                            </td>
                            <td>
                                <div>{{ $device->user_count }}</div>
                                <div class="muted" style="font-size: 12px;">DB: {{ $device->db_user_count ?? 0 }}</div>
                            </td>
                            <td>
                                <div>{{ $device->transaction_count }}</div>
                                <div class="muted" style="font-size: 12px;">DB: {{ $device->db_transaction_count ?? 0 }}</div>
                            </td>
                            <td>
                                <div>{{ $device->push_time ?: '-' }}</div>
                                <div class="muted" style="font-size: 12px;">
                                    @if (! empty($device->push_time))
                                        {{ \Illuminate\Support\Carbon::parse($device->push_time)->diffForHumans() }}
                                    @else
                                        Belum ada poll
                                    @endif
                                </div>
                            </td>
                            <td>
                                <div>{{ $device->upload_time ?: '-' }}</div>
                                <div class="muted" style="font-size: 12px;">
                                    @if (! empty($device->upload_time))
                                        {{ \Illuminate\Support\Carbon::parse($device->upload_time)->diffForHumans() }}
                                    @else
                                        Belum ada sync data
                                    @endif
                                </div>
                            </td>
                            <td>
                                <div>{{ $device->last_activity ?: '-' }}</div>
                                <div class="muted" style="font-size: 12px;">{{ $device->presence_meta ?? 'Belum ada heartbeat' }}</div>
                                <div class="muted" style="font-size: 12px;">First sync: {{ $device->first_sync_at ?: '-' }}</div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="9" class="muted">Belum ada device yang tersimpan.</td></tr>
                    @endforelse
                </tbody>
            </table>
            </div>
            </div>
        </div>
    </section>
@endsection