@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
    <div class="page-head">
        <div>
            <h1>Operations dashboard</h1>
            <p>{{ auth()->user()->organization?->name }} &middot; {{ now()->format('l, j F Y H:i') }} {{ config('app.timezone') }}</p>
        </div>
        <div class="page-actions">
            <a href="{{ route('customers.create') }}" class="btn secondary">+ New customer</a>
            <a href="{{ route('services.create') }}" class="btn secondary">+ New service</a>
            <a href="{{ route('payments.create') }}" class="btn">Take payment</a>
        </div>
    </div>

    {{-- ============ Financial + subscriber KPIs ============ --}}
    <div class="grid grid-6 mb-2">
        @include('components.kpi', ['label' => 'Monthly recurring revenue', 'value' => money($kpi['mrr']),
            'variant' => 'good', 'href' => route('reports.financial'), 'delta' => 'ARR '.money($kpi['arr'])])
        @include('components.kpi', ['label' => 'ARPU', 'value' => money($kpi['arpu']),
            'variant' => 'info', 'href' => route('reports.subscribers'), 'delta' => $kpi['active_customers'].' active accounts'])
        @include('components.kpi', ['label' => 'Active services', 'value' => number_format($kpi['active_services']),
            'href' => route('services.index', ['status' => 'active']), 'delta' => $kpi['suspended_services'].' suspended'])
        @include('components.kpi', ['label' => 'Online now', 'value' => number_format($kpi['online_now']),
            'variant' => 'good', 'href' => route('radius.sessions', ['online' => 1]), 'delta' => 'live RADIUS sessions'])
        @include('components.kpi', ['label' => 'Outstanding', 'value' => money($finance['outstanding']),
            'variant' => $finance['outstanding'] > 0 ? 'warn' : 'good', 'href' => route('reports.collections'),
            'delta' => $collections['overdue_invoices'].' overdue invoices'])
        @include('components.kpi', ['label' => 'Collected today', 'value' => money($finance['collected_today']),
            'variant' => 'good', 'href' => route('payments.index'), 'delta' => money($finance['collected_month']).' this month'])
    </div>

    <div class="grid grid-2">
        {{-- Revenue trend --}}
        <div class="card">
            <div class="card-head">
                <div>
                    <h3>Revenue collected — last 30 days</h3>
                    <div class="sub">Successful payments by day</div>
                </div>
                <a href="{{ route('reports.financial') }}" class="btn ghost sm">Report &rarr;</a>
            </div>
            <div class="card-body">
                @include('components.chart', [
                    'series' => collect($charts['revenue_30d'])->map(fn ($p) => [
                        'label' => \Carbon\Carbon::parse($p['date'])->format('d M'),
                        'value' => $p['total'],
                    ])->all(),
                    'type' => 'line', 'format' => 'money', 'height' => 200,
                ])
            </div>
        </div>

        {{-- MRR trend --}}
        <div class="card">
            <div class="card-head">
                <div>
                    <h3>MRR &amp; subscriber trend</h3>
                    <div class="sub">Nightly KPI snapshot, 12 months</div>
                </div>
                <a href="{{ route('reports.subscribers') }}" class="btn ghost sm">Report &rarr;</a>
            </div>
            <div class="card-body">
                @if (count($charts['mrr_trend']) > 1)
                    @include('components.chart', [
                        'series' => collect($charts['mrr_trend'])->map(fn ($p) => [
                            'label' => \Carbon\Carbon::parse($p['date'])->format('M'),
                            'value' => $p['mrr'],
                        ])->all(),
                        'type' => 'line', 'format' => 'money', 'height' => 200,
                    ])
                @else
                    <div class="empty">
                        <span class="ico">&#128200;</span>
                        <strong>No KPI snapshots yet</strong>
                        <p class="small mb-0">Run <code>php artisan nowills:snapshot</code> to build the first data point.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="grid grid-3">
        {{-- Network health --}}
        <div class="card">
            <div class="card-head">
                <h3>Network health</h3>
                <a href="{{ route('noc') }}" class="btn ghost sm">NOC &rarr;</a>
            </div>
            <div class="card-body">
                <div class="grid grid-2 mb-2">
                    <div class="kpi {{ $noc['devices']['down'] > 0 ? 'bad' : 'good' }}">
                        <div class="label">Devices up</div>
                        <div class="value">{{ $noc['devices']['up'] }}<span class="small muted">/{{ $noc['devices']['total'] }}</span></div>
                    </div>
                    <div class="kpi {{ $noc['availability'] >= 99.5 ? 'good' : 'warn' }}">
                        <div class="label">Availability 30d</div>
                        <div class="value">{{ number_format($noc['availability'], 2) }}%</div>
                    </div>
                </div>

                <div class="stat-list">
                    <div class="row"><span>Active alerts</span>
                        <span>{{ $noc['alerts']['active'] }} ({{ $noc['alerts']['critical'] }} critical)</span></div>
                    <div class="row"><span>Raised today</span><span>{{ $noc['alerts']['today'] }}</span></div>
                    <div class="row"><span>Maintenance windows</span><span>{{ count($noc['maintenance']) }}</span></div>
                </div>

                @if ($criticalAlerts->isNotEmpty())
                    <hr style="border:none;border-top:1px solid var(--ink-200);margin:.9rem 0;">
                    <div class="small muted mb-1"><strong>Critical now</strong></div>
                    @foreach ($criticalAlerts as $alert)
                        <div class="flex-between mb-1" style="font-size:.8rem;">
                            <div class="truncate">
                                <span class="badge danger">
                                    <span class="dot"></span>{{ $alert->severity }}
                                </span>
                                <a href="{{ route('alerts.index') }}" class="truncate" style="display:inline-block;max-width:170px;vertical-align:bottom;">
                                    {{ $alert->title }}
                                </a>
                            </div>
                            <span class="tiny muted" data-time-ago="{{ $alert->created_at->toIso8601String() }}"></span>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>

        {{-- Service delivery --}}
        <div class="card">
            <div class="card-head">
                <h3>Service delivery</h3>
                <a href="{{ route('tickets.index') }}" class="btn ghost sm">Tickets &rarr;</a>
            </div>
            <div class="card-body">
                <div class="stat-list">
                    <div class="row"><span>Open tickets</span>
                        <span><a href="{{ route('tickets.index', ['status' => 'open']) }}">{{ $operations['tickets_open'] }}</a></span></div>
                    <div class="row"><span>SLA breached</span>
                        <span class="{{ $operations['tickets_breached'] > 0 ? 'badge danger' : '' }}">{{ $operations['tickets_breached'] }}</span></div>
                    <div class="row"><span>Open work orders</span>
                        <span><a href="{{ route('work-orders.index') }}">{{ $operations['work_orders_open'] }}</a></span></div>
                    <div class="row"><span>Devices down</span>
                        <span class="{{ $operations['devices_down'] > 0 ? 'badge danger' : '' }}">{{ $operations['devices_down'] }}</span></div>
                </div>

                <hr style="border:none;border-top:1px solid var(--ink-200);margin:.9rem 0;">
                <div class="small muted mb-1"><strong>Plan mix</strong></div>
                @forelse (collect($charts['plan_mix'])->take(6) as $plan)
                    @php $maxSubs = collect($charts['plan_mix'])->max('subscribers') ?: 1; @endphp
                    <div class="bar-row">
                        <span class="bar-label">{{ $plan['plan'] }}</span>
                        <span class="bar-track"><span class="bar-fill" style="width: {{ ($plan['subscribers'] / $maxSubs) * 100 }}%"></span></span>
                        <span class="bar-value">{{ $plan['subscribers'] }}</span>
                    </div>
                @empty
                    <p class="small muted mb-0">No active subscriptions yet.</p>
                @endforelse
            </div>
        </div>

        {{-- Collections --}}
        <div class="card">
            <div class="card-head">
                <h3>Receivables</h3>
                <a href="{{ route('reports.collections') }}" class="btn ghost sm">Detail &rarr;</a>
            </div>
            <div class="card-body">
                <div class="stat-list mb-2">
                    <div class="row"><span>Collection rate</span>
                        <span>{{ number_format($finance['collection_rate'] ?? 0, 1) }}%</span></div>
                    <div class="row"><span>Overdue amount</span>
                        <span>{{ money($collections['overdue_amount']) }}</span></div>
                    <div class="row"><span>New this month</span><span>{{ $kpi['new_this_month'] }}</span></div>
                    <div class="row"><span>Churned this month</span>
                        <span class="{{ $kpi['churned_this_month'] > 0 ? 'badge danger' : '' }}">{{ $kpi['churned_this_month'] }}</span></div>
                </div>

                <div class="small muted mb-1"><strong>Aging</strong></div>
                @php $agingMax = max(1, collect($collections['aging'])->max('amount')); @endphp
                @foreach ($collections['aging'] as $bucket)
                    <div class="bar-row">
                        <span class="bar-label">{{ $bucket['label'] }}</span>
                        <span class="bar-track">
                            <span class="bar-fill {{ $bucket['label'] === '90+ days' || $bucket['label'] === '61–90 days' ? 'danger' : ($bucket['label'] === 'Not yet due' ? '' : 'warn') }}"
                                  style="width: {{ ($bucket['amount'] / $agingMax) * 100 }}%"></span>
                        </span>
                        <span class="bar-value">{{ money($bucket['amount']) }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="grid grid-2">
        {{-- Overdue invoices --}}
        <div class="card">
            <div class="card-head">
                <h3>Overdue invoices</h3>
                <a href="{{ route('invoices.index', ['status' => 'overdue']) }}" class="btn ghost sm">All &rarr;</a>
            </div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead>
                        <tr>
                            <th>Invoice</th><th>Customer</th><th class="num">Balance</th><th class="num">Days</th><th></th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse ($overdueInvoices as $invoice)
                            <tr>
                                <td class="mono nowrap"><a href="{{ route('invoices.show', $invoice) }}">{{ $invoice->invoice_number }}</a></td>
                                <td><a href="{{ route('customers.show', $invoice->customer) }}">{{ $invoice->customer->display_name }}</a></td>
                                <td class="num strong">{{ money($invoice->balance, $invoice->currency) }}</td>
                                <td class="num">
                                    <span class="badge {{ $invoice->due_date->diffInDays(now()) > 30 ? 'danger' : 'warning' }}">
                                        {{ (int) $invoice->due_date->diffInDays(now()) }}
                                    </span>
                                </td>
                                <td class="right">
                                    <a href="{{ route('payments.create', ['customer' => $invoice->customer_id]) }}" class="btn xs secondary">Collect</a>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="5">
                                @include('components.empty-state', ['icon' => '&#10003;', 'title' => 'No overdue invoices',
                                    'message' => 'Every account is current.'])
                            </td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Live sessions --}}
        <div class="card">
            <div class="card-head">
                <h3>Live sessions</h3>
                <a href="{{ route('radius.sessions', ['online' => 1]) }}" class="btn ghost sm">All &rarr;</a>
            </div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead>
                        <tr><th>Subscriber</th><th>IP</th><th>NAS</th><th class="num">Uptime</th><th class="num">Traffic</th></tr>
                        </thead>
                        <tbody>
                        @forelse ($liveSessions as $session)
                            <tr>
                                <td>
                                    <span class="pulse"></span>
                                    @if ($session->service)
                                        <a href="{{ route('services.show', $session->service) }}">{{ $session->username }}</a>
                                    @else
                                        <span class="mono">{{ $session->username }}</span>
                                    @endif
                                </td>
                                <td class="mono">{{ $session->framed_ip ?: '—' }}</td>
                                <td class="mono tiny">{{ $session->nas_ip }}</td>
                                <td class="num">{{ $session->duration_label }}</td>
                                <td class="num">{{ $session->traffic_label }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="5">
                                @include('components.empty-state', ['icon' => '&#128268;', 'title' => 'No live sessions',
                                    'message' => 'Sessions appear here once the NAS starts sending RADIUS accounting.'])
                            </td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-2">
        {{-- Open tickets --}}
        <div class="card">
            <div class="card-head">
                <h3>Latest tickets</h3>
                <a href="{{ route('tickets.create') }}" class="btn ghost sm">+ New</a>
            </div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead><tr><th>Ticket</th><th>Customer</th><th>Priority</th><th>Owner</th><th>Age</th></tr></thead>
                        <tbody>
                        @forelse ($openTickets as $ticket)
                            <tr>
                                <td>
                                    <a href="{{ route('tickets.show', $ticket) }}" class="mono">{{ $ticket->ticket_number }}</a>
                                    <div class="tiny muted truncate" style="max-width:220px;">{{ $ticket->subject }}</div>
                                </td>
                                <td>{{ $ticket->customer->display_name }}</td>
                                <td><span class="badge {{ $ticket->priority === 'urgent' ? 'danger' : ($ticket->priority === 'high' ? 'warning' : 'muted') }}">{{ $ticket->priority }}</span></td>
                                <td class="small">{{ $ticket->assignee?->name ?: 'Unassigned' }}</td>
                                <td class="small muted" data-time-ago="{{ $ticket->created_at->toIso8601String() }}"></td>
                            </tr>
                        @empty
                            <tr><td colspan="5">@include('components.empty-state', ['icon' => '&#9993;', 'title' => 'No open tickets'])</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Pending work orders --}}
        <div class="card">
            <div class="card-head">
                <h3>Field jobs</h3>
                <a href="{{ route('field.board') }}" class="btn ghost sm">Board &rarr;</a>
            </div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead><tr><th>Job</th><th>Customer</th><th>Type</th><th>Technician</th><th>Scheduled</th></tr></thead>
                        <tbody>
                        @forelse ($pendingWorkOrders as $wo)
                            <tr>
                                <td><a href="{{ route('work-orders.show', $wo) }}" class="mono">{{ $wo->work_order_number }}</a></td>
                                <td>{{ $wo->customer?->display_name ?: '—' }}</td>
                                <td><span class="badge info">{{ title_case_words($wo->type) }}</span></td>
                                <td class="small">{{ $wo->technician?->name ?: 'Unassigned' }}</td>
                                <td class="small nowrap">{{ $wo->scheduled_start?->format('d M H:i') ?: '—' }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="5">@include('components.empty-state', ['icon' => '&#128295;', 'title' => 'No pending jobs'])</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Recent services --}}
    <div class="card">
        <div class="card-head">
            <h3>Recently provisioned services</h3>
            <a href="{{ route('services.index') }}" class="btn ghost sm">All services &rarr;</a>
        </div>
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead>
                    <tr>
                        <th>Service</th><th>Customer</th><th>Plan</th><th>RADIUS user</th>
                        <th class="num">Price</th><th>Status</th><th>Next bill</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse ($recentServices as $service)
                        <tr>
                            <td class="mono"><a href="{{ route('services.show', $service) }}">{{ $service->service_number }}</a></td>
                            <td><a href="{{ route('customers.show', $service->customer) }}">{{ $service->customer->display_name }}</a></td>
                            <td class="small">{{ $service->plan?->name }}</td>
                            <td class="mono tiny">{{ $service->username }}</td>
                            <td class="num">{{ money($service->effective_price, $service->customer->currency) }}</td>
                            <td><span class="badge {{ status_color($service->status) }}"><span class="dot"></span>{{ $service->status }}</span></td>
                            <td class="small nowrap">{{ $service->next_billing_date?->format('d M Y') ?: '—' }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="7">
                            @include('components.empty-state', ['icon' => '&#8644;', 'title' => 'No services yet',
                                'message' => 'Provision your first subscriber to get started.',
                                'action' => '<a href="'.route('services.create').'" class="btn sm">+ New service</a>'])
                        </td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection