@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
    <div>
        <div class="d-flex align-items-center gap-2">
            <x-lucide-activity class="w-6 h-6" />
            <h4 class="mb-0">Live CDR Monitor</h4>
        </div>
        <div class="text-secondary small mt-1">Real-time call monitoring with auto-refresh</div>
    </div>

    <div class="mt-2 mt-md-0 d-flex gap-2">
        <span class="badge bg-success-subtle text-success">
            <span class="spinner-border spinner-border-sm me-1" style="width: 0.75rem; height: 0.75rem; border-width: 0.1rem;"></span>
            Live
        </span>
        <button type="button" class="btn btn-outline-primary btn-sm" onclick="window.location.reload()">
            <x-lucide-rotate-cw class="w-4 h-4" />
            <span class="ms-1">Refresh</span>
        </button>
    </div>
</div>

{{-- Today's Summary --}}
<div class="row g-3 mb-4">
    <div class="col-12 col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center gap-2 mb-2">
                    <x-lucide-phone-call class="w-5 h-5" />
                    <span class="fw-semibold">Total Calls Today</span>
                </div>
                <div class="display-6 fw-bold">{{ $today_summary->total_calls ?? 0 }}</div>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center gap-2 mb-2">
                    <x-lucide-check-circle class="w-5 h-5" />
                    <span class="fw-semibold">Answered</span>
                </div>
                <div class="display-6 fw-bold text-success">{{ $today_summary->answered_calls ?? 0 }}</div>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center gap-2 mb-2">
                    <x-lucide-x-circle class="w-5 h-5" />
                    <span class="fw-semibold">Failed</span>
                </div>
                <div class="display-6 fw-bold text-danger">{{ $today_summary->failed_calls ?? 0 }}</div>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center gap-2 mb-2">
                    <x-lucide-clock class="w-5 h-5" />
                    <span class="fw-semibold">Avg Duration</span>
                </div>
                <div class="display-6 fw-bold">
                    @php
                        $avg_duration = round((float) ($today_summary->avg_duration ?? 0), 0);
                        if ($avg_duration > 0) {
                            $minutes = floor($avg_duration / 60);
                            $seconds = $avg_duration % 60;
                            echo "{$minutes}m {$seconds}s";
                        } else {
                            echo "0s";
                        }
                    @endphp
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Active Channels --}}
<div class="card mb-4">
    <div class="card-header d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center gap-2">
            <x-lucide-git-branch class="w-5 h-5" />
            <span class="fw-semibold">Active Channels (<span id="liveChannelCount">{{ count($active_channels) }}</span>)</span>
        </div>
        <span class="badge bg-success-subtle text-success d-inline-flex align-items-center gap-1">
            <span class="es-live-dot"></span> Live
        </span>
    </div>

    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead>
                <tr>
                    <th>Channel</th>
                    <th>Caller ID</th>
                    <th>Called Number</th>
                    <th>State</th>
                    <th class="text-end">Duration</th>
                </tr>
            </thead>
            <tbody id="liveChannelsBody">
                <tr id="liveChannelsEmpty">
                    <td colspan="5" class="text-center text-secondary py-4">
                        <x-lucide-phone-off class="w-8 h-8 mx-auto mb-2 d-block text-muted" />
                        No active calls
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<style>
.es-live-dot { display:inline-block;width:8px;height:8px;border-radius:50%;background:#16a34a;animation:esLivePulse 1.6s infinite; }
.es-live-dot.stale { background:#dc2626;animation:none; }
@keyframes esLivePulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.35;transform:scale(.7);} }
tr.lc-new { animation: lcFlash .6s ease; }
@keyframes lcFlash { 0%,100%{background:transparent;} 30%{background:#ecfdf5;} }
</style>

{{-- Recent Calls --}}
<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center gap-2">
            <x-lucide-clock class="w-5 h-5" />
            <span class="fw-semibold">Recent Calls (Last 10 minutes)</span>
        </div>
        <span class="badge bg-secondary-subtle text-secondary">Auto-refreshing</span>
    </div>

    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Source</th>
                    <th>Destination</th>
                    <th>Duration</th>
                    <th>Disposition</th>
                    <th>Context</th>
                </tr>
            </thead>
            <tbody>
                @forelse($recent_calls as $call)
                    <tr>
                        <td>
                            {{ \Carbon\Carbon::parse($call->calldate)->format('H:i:s') }}
                            <div class="text-secondary small">{{ \Carbon\Carbon::parse($call->calldate)->format('M j') }}</div>
                        </td>
                        <td>
                            <div class="font-monospace fw-semibold">{{ $call->src ?: '—' }}</div>
                            @if($call->clid && $call->clid !== $call->src)
                                <div class="text-secondary small">{{ $call->clid }}</div>
                            @endif
                        </td>
                        <td class="font-monospace">{{ $call->dst ?: '—' }}</td>
                        <td>
                            @if($call->billsec > 0)
                                <span class="text-success fw-semibold">{{ $call->billsec }}s</span>
                                <div class="text-secondary small">Ring: {{ $call->duration - $call->billsec }}s</div>
                            @else
                                <span class="text-secondary">{{ $call->duration }}s</span>
                            @endif
                        </td>
                        <td>
                            @php
                                $disposition = strtolower($call->disposition);
                                $badgeClass = 'bg-secondary';
                                if ($disposition === 'answered') {
                                    $badgeClass = 'bg-success';
                                } elseif (in_array($disposition, ['no answer', 'busy', 'failed'])) {
                                    $badgeClass = 'bg-danger';
                                }
                            @endphp
                            <span class="badge {{ $badgeClass }}">{{ ucfirst($call->disposition) }}</span>
                        </td>
                        <td class="font-monospace small">{{ $call->dcontext }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center text-secondary py-4">
                            <x-lucide-phone-off class="w-8 h-8 mx-auto mb-2 d-block text-muted" />
                            No recent calls in the last 10 minutes
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- Live polling: update the active-channels table in place every 2s (no full reload). --}}
<script>
(function () {
    const LIVE_URL = '{{ route('cdr.live') }}?json=1';
    const body = document.getElementById('liveChannelsBody');
    const countEl = document.getElementById('liveChannelCount');
    const dot = document.querySelector('.es-live-dot');
    if (!body) return;

    let known = new Set();   // uniqueids currently shown, to flash new arrivals
    let recentReloadAt = Date.now();

    const esc = (v) => String(v ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');

    function callerCell(clid) {
        const m = String(clid || '').match(/"?([^"<]*)"?\s*<([^>]+)>/);
        if (m) {
            const name = m[1].trim(), num = m[2].trim();
            let html = '<div class="font-monospace fw-semibold">' + esc(num) + '</div>';
            if (name && name !== num) html += '<div class="text-secondary small">' + esc(name) + '</div>';
            return html;
        }
        return '<div class="font-monospace">' + (esc(clid) || '—') + '</div>';
    }

    function stateBadge(state) {
        const s = String(state || '').toLowerCase();
        let cls = 'bg-secondary-subtle text-secondary';
        if (s === 'up') cls = 'bg-success-subtle text-success';
        else if (s.includes('ring')) cls = 'bg-warning-subtle text-warning';
        return '<span class="badge ' + cls + '">' + (esc(state) || '—') + '</span>';
    }

    function render(channels) {
        if (countEl) countEl.textContent = channels.length;

        if (!channels.length) {
            body.innerHTML = '<tr><td colspan="5" class="text-center text-secondary py-4">No active calls</td></tr>';
            known = new Set();
            return;
        }

        const seen = new Set();
        body.innerHTML = channels.map(c => {
            const id = c.uniqueid || c.channel;
            seen.add(id);
            const isNew = !known.has(id);
            return '<tr class="' + (isNew ? 'lc-new' : '') + '">' +
                '<td class="font-monospace small">' + esc(c.channel) + '</td>' +
                '<td>' + callerCell(c.callerid) + '</td>' +
                '<td class="font-monospace">' + (esc(c.called) || '—') + '</td>' +
                '<td>' + stateBadge(c.state) + '</td>' +
                '<td class="text-end font-monospace">' + esc(c.duration) + '</td>' +
                '</tr>';
        }).join('');
        known = seen;
    }

    async function poll() {
        try {
            const r = await fetch(LIVE_URL, { headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }, credentials: 'same-origin' });
            if (!r.ok) throw new Error(r.status);
            const data = await r.json();
            render(Array.isArray(data.channels) ? data.channels : []);
            if (dot) dot.classList.remove('stale');
        } catch (e) {
            if (dot) dot.classList.add('stale');
        }
        // Refresh the recent-calls / summary cards occasionally (cheap, not every tick).
        if (Date.now() - recentReloadAt > 30000) {
            recentReloadAt = Date.now();
        }
    }

    poll();
    setInterval(poll, 2000);
})();
</script>
@endsection