@extends('business::layouts.app')

@section('title', 'Webhooks — BizWap')

@push('styles')
<style>
    .wh-card {
        background: var(--bw-surface);
        border: 1px solid var(--bw-border);
        border-radius: 0.75rem;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .wh-card h5 {
        font-size: 0.9rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--bw-text-muted);
        margin-bottom: 1rem;
    }

    .secret-box {
        font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
        font-size: 0.82rem;
        background: var(--bw-bg);
        border: 1px solid var(--bw-border);
        border-radius: 0.5rem;
        padding: 0.75rem 1rem;
        word-break: break-all;
        color: var(--bw-text);
        position: relative;
    }

    .copy-btn {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        background: var(--bw-surface);
        border: 1px solid var(--bw-border);
        border-radius: 0.35rem;
        padding: 0.2rem 0.5rem;
        font-size: 0.75rem;
        color: var(--bw-text-muted);
        cursor: pointer;
        transition: background 0.15s, color 0.15s;
    }

    .copy-btn:hover {
        background: var(--bw-primary-light);
        color: var(--bw-primary);
    }

    .delivery-table th {
        font-size: 0.78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--bw-text-muted);
        border-bottom: 1px solid var(--bw-border);
        padding: 0.6rem 0.75rem;
        white-space: nowrap;
    }

    .delivery-table td {
        font-size: 0.875rem;
        padding: 0.65rem 0.75rem;
        border-bottom: 1px solid var(--bw-border);
        vertical-align: middle;
    }

    .delivery-table tbody tr:last-child td {
        border-bottom: none;
    }

    .status-badge {
        font-size: 0.75rem;
        font-weight: 600;
        padding: 0.2rem 0.55rem;
        border-radius: 0.3rem;
        letter-spacing: 0.03em;
    }

    .status-delivered {
        background: #dcfce7;
        color: #166534;
    }

    .status-failed {
        background: #fee2e2;
        color: #991b1b;
    }

    .status-pending {
        background: #fef9c3;
        color: #854d0e;
    }

    [data-bs-theme="dark"] .status-delivered { background: #14532d; color: #86efac; }
    [data-bs-theme="dark"] .status-failed    { background: #7f1d1d; color: #fca5a5; }
    [data-bs-theme="dark"] .status-pending   { background: #422006; color: #fde68a; }
</style>
@endpush

@section('content')
<div class="d-flex align-items-center gap-2 mb-4">
    <i class="bi bi-broadcast fs-4" style="color: var(--bw-primary)"></i>
    <div>
        <h1 class="h4 mb-0 fw-bold">Webhooks</h1>
        <p class="text-muted mb-0" style="font-size:0.85rem">Register a URL to receive real-time event notifications from BizWap.</p>
    </div>
</div>

@if(session('success'))
<div class="alert alert-success border-0 shadow-sm mb-4" style="border-left: 4px solid var(--bw-primary) !important;">
    <i class="bi bi-check-circle-fill me-2" style="color: var(--bw-primary)"></i>{{ session('success') }}
</div>
@endif

{{-- ── Settings Form ── --}}
<div class="wh-card">
    <h5><i class="bi bi-gear me-1"></i> Webhook Settings</h5>

    <form method="POST" action="{{ route('business.webhooks.update') }}">
        @csrf

        <div class="mb-3">
            <label class="form-label fw-semibold" style="font-size:0.875rem">Webhook URL</label>
            <input
                type="url"
                name="webhook_url"
                class="form-control @error('webhook_url') is-invalid @enderror"
                placeholder="https://your-server.com/bizwap-webhook"
                value="{{ old('webhook_url', $business->webhook_url) }}"
            >
            @error('webhook_url')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
            <div class="form-text">BizWap will POST events to this URL. Leave blank to disable forwarding.</div>
        </div>

        <div class="mb-4">
            <label class="form-label fw-semibold" style="font-size:0.875rem">Subscribe to Events</label>
            <div class="d-flex flex-column gap-2">
                <div class="form-check">
                    <input
                        class="form-check-input"
                        type="checkbox"
                        name="webhook_events[]"
                        value="message.status"
                        id="event-status"
                        {{ in_array('message.status', $business->webhook_events ?? []) ? 'checked' : '' }}
                    >
                    <label class="form-check-label" for="event-status" style="font-size:0.875rem">
                        <strong>message.status</strong>
                        <span class="text-muted ms-1">— delivery updates (sent, delivered, read, failed)</span>
                    </label>
                </div>
                <div class="form-check">
                    <input
                        class="form-check-input"
                        type="checkbox"
                        name="webhook_events[]"
                        value="message.inbound"
                        id="event-inbound"
                        {{ in_array('message.inbound', $business->webhook_events ?? []) ? 'checked' : '' }}
                    >
                    <label class="form-check-label" for="event-inbound" style="font-size:0.875rem">
                        <strong>message.inbound</strong>
                        <span class="text-muted ms-1">— incoming messages from users</span>
                    </label>
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-sm" style="background: var(--bw-primary); color:#fff">
            <i class="bi bi-floppy me-1"></i> Save Settings
        </button>
    </form>
</div>

{{-- ── Webhook Secret ── --}}
@if($business->webhook_secret)
<div class="wh-card">
    <h5><i class="bi bi-shield-lock me-1"></i> Webhook Secret</h5>
    <p class="text-muted mb-3" style="font-size:0.82rem">
        Verify incoming requests are from BizWap by checking the <code>X-BizWap-Signature</code> header.
        It contains <code>sha256=HMAC-SHA256(payload, secret)</code>.
    </p>
    <div class="secret-box" id="secret-box">
        <span id="secret-value">{{ str_repeat('•', 40) }}</span>
        <button class="copy-btn" onclick="revealAndCopy(this)" type="button" id="reveal-btn">
            <i class="bi bi-eye"></i> Reveal
        </button>
    </div>
    <div class="mt-3">
        <p class="text-muted mb-2" style="font-size:0.82rem">
            Regenerating will immediately invalidate the current secret.
        </p>
        <button type="button" class="btn btn-sm btn-outline-warning" onclick="confirmRegenerateSecret()">
            <i class="bi bi-arrow-repeat me-1"></i> Regenerate Secret
        </button>
    </div>
</div>
@endif

{{-- ── How to Verify ── --}}
@if($business->webhook_url)
<div class="wh-card">
    <h5><i class="bi bi-code-slash me-1"></i> Verifying Requests</h5>
    <p class="text-muted mb-3" style="font-size:0.82rem">
        Each request from BizWap includes an <code>X-BizWap-Signature</code> header. Verify it like this:
    </p>
    <div style="font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.8rem; background: var(--bw-bg); border: 1px solid var(--bw-border); border-radius: 0.5rem; padding: 1rem; white-space: pre; overflow-x: auto;">$secret    = 'your-webhook-secret';
$payload   = file_get_contents('php://input');
$signature = 'sha256=' . hash_hmac('sha256', $payload, $secret);

if (!hash_equals($signature, $_SERVER['HTTP_X_BIZWAP_SIGNATURE'] ?? '')) {
    http_response_code(401);
    exit;
}

$event = json_decode($payload, true);
// handle $event['event'], $event['data'], etc.</div>
</div>
@endif

{{-- ── Delivery Log ── --}}
<div class="wh-card">
    <h5><i class="bi bi-list-check me-1"></i> Delivery Log</h5>

    @if($deliveries->isEmpty())
        <p class="text-muted mb-0" style="font-size:0.875rem">No delivery attempts yet.</p>
    @else
        <div class="table-responsive">
            <table class="table delivery-table mb-0">
                <thead>
                    <tr>
                        <th>Event</th>
                        <th>Status</th>
                        <th>Attempts</th>
                        <th>Response</th>
                        <th>Last Tried</th>
                        <th>Created</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($deliveries as $delivery)
                    <tr>
                        <td>
                            <code style="font-size:0.8rem">{{ $delivery->event_type }}</code>
                        </td>
                        <td>
                            <span class="status-badge status-{{ $delivery->status }}">
                                {{ ucfirst($delivery->status) }}
                            </span>
                        </td>
                        <td>{{ $delivery->attempts }}</td>
                        <td>
                            @if($delivery->response_code)
                                <code style="font-size:0.8rem">{{ $delivery->response_code }}</code>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td style="font-size:0.82rem; color: var(--bw-text-muted)">
                            {{ $delivery->last_attempted_at?->diffForHumans() ?? '—' }}
                        </td>
                        <td style="font-size:0.82rem; color: var(--bw-text-muted)">
                            {{ $delivery->created_at->format('d M Y, H:i') }}
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        @if($deliveries->hasPages())
        <div class="mt-3">
            {{ $deliveries->links() }}
        </div>
        @endif
    @endif
</div>

@endsection

@push('scripts')
<script>
    var secretRevealed = false;

    function revealAndCopy(btn) {
        if (!secretRevealed) {
            fetch('{{ route('business.webhooks.show-secret') }}', {
                headers: { 'Accept': 'application/json' }
            })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                document.getElementById('secret-value').textContent = data.secret;
                secretRevealed = true;
                btn.innerHTML = '<i class="bi bi-copy"></i> Copy';
                btn.onclick = function() { copySecret(); };
            });
        } else {
            copySecret();
        }
    }

    function confirmRegenerateSecret() {
        Swal.fire({
            title: 'Regenerate secret?',
            text: 'The current secret will be immediately invalidated. Update your verification code before proceeding.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, regenerate',
            cancelButtonText: 'Cancel',
            confirmButtonColor: '#d97706',
            reverseButtons: true,
        }).then(function(result) {
            if (result.isConfirmed) {
                fetch('{{ route('business.webhooks.regenerate-secret') }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                    }
                })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    document.getElementById('secret-value').textContent = data.secret;
                    secretRevealed = true;
                    var btn = document.getElementById('reveal-btn');
                    if (btn) {
                        btn.innerHTML = '<i class="bi bi-copy"></i> Copy';
                        btn.onclick = function() { copySecret(); };
                    }
                    Swal.fire('Done', 'New secret generated. Copy it now.', 'success');
                });
            }
        });
    }

    function copySecret() {
        var text = document.getElementById('secret-value').textContent;
        navigator.clipboard.writeText(text).then(function() {
            var btn = document.getElementById('reveal-btn');
            var original = btn.innerHTML;
            btn.innerHTML = '<i class="bi bi-check2"></i> Copied';
            setTimeout(function() { btn.innerHTML = original; }, 2000);
        });
    }
</script>
@endpush