@extends('admin.layouts.app')

@section('title', 'Webhook: ' . $webhook->name)
@section('breadcrumb')
    <a href="{{ route('admin.webhooks.index') }}">Webhooks</a>
    <span class="current">{{ $webhook->name }}</span>
@endsection

@section('content')
<div class="page-header" style="display:flex;align-items:center;justify-content:space-between;">
    <div>
        <h1 class="page-title">
            <span class="title-icon"><i data-lucide="webhook" style="width:20px;height:20px;"></i></span>
            {{ $webhook->name }}
        </h1>
        <p class="page-subtitle" style="font-family:'JetBrains Mono',monospace;font-size:11px;">{{ $webhook->url }}</p>
    </div>
    <div style="display:flex;gap:6px;">
        <form method="POST" action="{{ route('admin.webhooks.test', $webhook) }}">
            @csrf
            <button type="submit" class="btn btn-secondary">
                <i data-lucide="play" style="width:14px;height:14px;"></i> Send Test
            </button>
        </form>
        <form method="POST" action="{{ route('admin.webhooks.toggle', $webhook) }}">
            @csrf
            <button type="submit" class="btn {{ $webhook->is_active ? 'btn-secondary' : 'btn-primary' }}">
                {{ $webhook->is_active ? 'Deactivate' : 'Activate' }}
            </button>
        </form>
    </div>
</div>

@if(session('success'))
<div style="background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);border-radius:6px;padding:12px 16px;margin-bottom:16px;font-size:12px;color:#86efac;">{{ session('success') }}</div>
@endif
@if(session('error'))
<div style="background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);border-radius:6px;padding:12px 16px;margin-bottom:16px;font-size:12px;color:#fca5a5;">{{ session('error') }}</div>
@endif

{{-- Webhook Info --}}
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px;">
    <div class="admin-card" style="text-align:center;">
        <div style="font-size:10px;color:var(--vsc-text-secondary);text-transform:uppercase;">Status</div>
        <span class="badge badge-{{ $webhook->is_active ? 'green' : 'red' }}" style="margin-top:6px;">{{ $webhook->is_active ? 'Active' : 'Inactive' }}</span>
    </div>
    <div class="admin-card" style="text-align:center;">
        <div style="font-size:10px;color:var(--vsc-text-secondary);text-transform:uppercase;">Failures</div>
        <div style="font-size:18px;font-weight:700;color:{{ $webhook->failure_count > 0 ? '#ef4444' : 'var(--vsc-text-active)' }};">{{ $webhook->failure_count }}</div>
    </div>
    <div class="admin-card" style="text-align:center;">
        <div style="font-size:10px;color:var(--vsc-text-secondary);text-transform:uppercase;">Last Triggered</div>
        <div style="font-size:12px;color:var(--vsc-text-active);">{{ $webhook->last_triggered_at ? $webhook->last_triggered_at->diffForHumans() : 'Never' }}</div>
    </div>
    <div class="admin-card" style="text-align:center;">
        <div style="font-size:10px;color:var(--vsc-text-secondary);text-transform:uppercase;">Events</div>
        <div style="font-size:12px;color:var(--vsc-text-active);">{{ count($webhook->events ?? []) }}</div>
    </div>
</div>

{{-- Secret --}}
<div class="admin-card" style="margin-bottom:24px;">
    <div style="font-size:12px;font-weight:600;color:var(--vsc-text-secondary);margin-bottom:6px;">Signing Secret</div>
    <code style="font-size:11px;background:var(--vsc-bg-tertiary);padding:6px 10px;border-radius:4px;display:block;font-family:'JetBrains Mono',monospace;color:var(--vsc-text-active);">{{ $webhook->secret }}</code>
    <div style="font-size:10px;color:var(--vsc-text-secondary);margin-top:4px;">Verify payloads with: <code>sha256=hmac(payload, secret)</code> in <code>X-Webhook-Signature</code> header.</div>
</div>

{{-- Delivery Log --}}
<div class="admin-table-wrap">
    <div class="admin-table-header">
        <div class="admin-table-title">
            <i data-lucide="send" class="icon" style="width:14px;height:14px;"></i>
            Delivery Log
        </div>
    </div>
    <div class="table-responsive">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Event</th>
                    <th>Status</th>
                    <th>HTTP Code</th>
                    <th>Response</th>
                    <th>Time</th>
                </tr>
            </thead>
            <tbody>
                @forelse($deliveries as $d)
                <tr>
                    <td style="font-size:12px;"><span class="badge badge-blue" style="font-size:9px;">{{ $d->event }}</span></td>
                    <td>
                        <span class="badge badge-{{ $d->success ? 'green' : 'red' }}">{{ $d->success ? 'OK' : 'Failed' }}</span>
                    </td>
                    <td style="font-size:12px;font-family:'JetBrains Mono',monospace;">{{ $d->response_code }}</td>
                    <td style="font-size:11px;color:var(--vsc-text-secondary);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                        {{ Str::limit($d->response_body ?? '', 80) }}
                    </td>
                    <td style="font-size:11px;color:var(--vsc-text-secondary);">{{ $d->created_at->diffForHumans() }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" style="text-align:center;padding:24px;color:var(--vsc-text-secondary);">No deliveries yet.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{ $deliveries->links() }}
@endsection