@extends('layouts.app')

@section('content')
<div class="container-fluid py-3" style="max-width:1000px;">

    <div class="d-flex align-items-center gap-2 mb-3">
        <i data-lucide="activity" style="width:26px;height:26px;"></i>
        <h4 class="mb-0 fw-semibold">Diagnostic Mode</h4>
    </div>
    <p class="text-secondary" style="max-width:760px;">
        Capture a targeted SIP + RTP trace for a single device to diagnose one-way audio,
        no-audio, codec and NAT problems. The capture is <strong>scoped to one device</strong>,
        <strong>size-capped</strong>, and <strong>auto-stops</strong> — so it's always safe to leave running.
        Download the <code>.pcap</code> and open it in Wireshark, or send it to support.
    </p>

    @if (session('success'))
        <div class="alert alert-success d-flex align-items-center gap-2">
            <i data-lucide="check-circle" style="width:20px;height:20px;"></i>
            <div>{{ session('success') }}</div>
        </div>
    @endif
    @if (session('error'))
        <div class="alert alert-danger d-flex align-items-center gap-2">
            <i data-lucide="alert-triangle" style="width:20px;height:20px;"></i>
            <div>{{ session('error') }}</div>
        </div>
    @endif
    @if ($errors->any())
        <div class="alert alert-danger">{{ $errors->first() }}</div>
    @endif

    {{-- ── Live status ── --}}
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            @if (!empty($status['active']))
                <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
                    <div>
                        <span class="badge bg-danger mb-2"><i data-lucide="radio" style="width:14px;height:14px;"></i> CAPTURING</span>
                        <div><strong>Target:</strong> {{ $status['target_label'] ?? $status['target'] }}</div>
                        <div class="text-secondary small">
                            Started {{ \Illuminate\Support\Carbon::parse($status['started_at'])->diffForHumans() }}
                            @if(!empty($status['started_by'])) by {{ $status['started_by'] }} @endif
                            @if(!empty($status['sip_logger'])) · SIP logging on @endif
                            @if(!empty($status['rtp_debug'])) · RTP debug on @endif
                        </div>
                        @if(!is_null($status['seconds_left'] ?? null))
                            <div class="text-secondary small">Auto-stops in
                                <strong>{{ gmdate('i:s', (int) $status['seconds_left']) }}</strong> (mm:ss)</div>
                        @endif
                    </div>
                    <form method="POST" action="{{ route('diagnostics.stop') }}">
                        @csrf
                        <button class="btn btn-outline-danger">
                            <i data-lucide="square" style="width:16px;height:16px;"></i> Stop capture now
                        </button>
                    </form>
                </div>
            @elseif (!empty($status['stale']))
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <div class="text-secondary">
                        <i data-lucide="alert-circle" style="width:16px;height:16px;color:#d97706;"></i>
                        The previous capture ended (expired or stopped). Its files are listed below.
                    </div>
                    <form method="POST" action="{{ route('diagnostics.stop') }}">
                        @csrf
                        <button class="btn btn-sm btn-outline-secondary">Clear</button>
                    </form>
                </div>
            @else
                <div class="text-secondary d-flex align-items-center gap-2">
                    <i data-lucide="power" style="width:18px;height:18px;"></i>
                    No capture running. Start one below when you need to troubleshoot a call.
                </div>
            @endif
        </div>
    </div>

    {{-- ── Start form ── --}}
    @if (empty($status['active']))
    <div class="card shadow-sm mb-4">
        <div class="card-header bg-white fw-semibold">Start a capture</div>
        <div class="card-body">
            <form method="POST" action="{{ route('diagnostics.start') }}" class="row g-3 align-items-end">
                @csrf
                <div class="col-sm-5">
                    <label class="form-label fw-medium">Target device</label>
                    <input type="text" name="target" class="form-control" placeholder="Extension (e.g. 1352) or IP (e.g. 102.39.152.238)" required>
                    <div class="form-text">An extension is resolved to its currently registered device IP. Or enter a device IP directly.</div>
                </div>
                <div class="col-sm-3">
                    <label class="form-label fw-medium">Auto-stop after</label>
                    <select name="minutes" class="form-select">
                        <option value="15">15 minutes</option>
                        <option value="30">30 minutes</option>
                        <option value="60">1 hour</option>
                        <option value="240">4 hours (max)</option>
                    </select>
                </div>
                <div class="col-sm-4">
                    <div class="form-check form-switch">
                        <input type="hidden" name="sip" value="0">
                        <input class="form-check-input" type="checkbox" name="sip" value="1" id="sipLog" checked>
                        <label class="form-check-label" for="sipLog">SIP logging (Asterisk console)</label>
                    </div>
                    <div class="form-check form-switch mb-2">
                        <input type="hidden" name="rtp" value="0">
                        <input class="form-check-input" type="checkbox" name="rtp" value="1" id="rtpLog" checked>
                        <label class="form-check-label" for="rtpLog">RTP packet debug (Asterisk console)</label>
                    </div>
                    <button class="btn btn-primary w-100">
                        <i data-lucide="play" style="width:16px;height:16px;"></i> Start capture
                    </button>
                </div>
            </form>
        </div>
    </div>
    @endif

    {{-- ── Captures list ── --}}
    <div class="card shadow-sm">
        <div class="card-header bg-white fw-semibold d-flex justify-content-between">
            <span>Captured files</span>
            <span class="text-secondary small fw-normal">Auto-deleted after 7 days · max ~200 MB per capture</span>
        </div>
        <div class="card-body p-0">
            @if (count($captures) === 0)
                <div class="p-3 text-secondary">No captures yet.</div>
            @else
                <table class="table table-hover mb-0 align-middle">
                    <thead class="table-light">
                        <tr><th>File</th><th>Size</th><th>Captured</th><th class="text-end">Download</th></tr>
                    </thead>
                    <tbody>
                    @foreach ($captures as $c)
                        <tr>
                            <td class="font-monospace small">{{ $c['name'] }}</td>
                            <td>{{ number_format($c['size'] / 1024, 0) }} KB</td>
                            <td class="text-secondary small">{{ $c['modified'] }}</td>
                            <td class="text-end">
                                <a class="btn btn-sm btn-outline-primary" href="{{ route('diagnostics.download', ['name' => $c['name']]) }}">
                                    <i data-lucide="download" style="width:15px;height:15px;"></i> .pcap
                                </a>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            @endif
        </div>
    </div>

    <p class="text-secondary small mt-3">
        <i data-lucide="shield" style="width:14px;height:14px;"></i>
        Diagnostic Mode is safe to leave alone: captures are limited to the chosen device, capped in size,
        and stopped automatically when the timer expires.
    </p>

</div>
@endsection