@extends('layouts.admin')

@section('title', ($patientProfile->user->name ?? 'Patient') . ' — Claim Preview')

@section('content')
<div class="max-w-5xl">
    <a href="{{ route('admin.billing.show', $patientProfile) }}" class="text-sm text-ink-muted hover:text-ink-primary">&larr; Billing detail</a>

    <div class="mt-4 flex flex-wrap items-start justify-between gap-4">
        <div>
            <h2 class="text-xl font-bold text-accent">Stedi claim preview</h2>
            <p class="mt-1 text-sm text-ink-muted">{{ $patientProfile->user->name ?? 'Patient' }} · {{ now()->format('F Y') }}</p>
        </div>
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('admin.billing.show', $patientProfile) }}" class="btn-secondary">Back</a>
            @can('submitClaim', [App\Models\BillingPeriod::class, $patientProfile])
                <form method="POST" action="{{ route('admin.billing.claims.submit', $patientProfile) }}">
                    @csrf
                    <button type="submit" class="btn-primary">Release claim to Stedi</button>
                </form>
            @endcan
        </div>
    </div>

    <div class="mt-6 grid gap-4 md:grid-cols-4">
        <div class="card p-4">
            <p class="text-xs font-medium text-ink-muted">Claim version</p>
            <p class="mt-1 text-2xl font-bold text-accent">{{ $preview['claim_version'] }}</p>
        </div>
        <div class="card p-4 md:col-span-2">
            <p class="text-xs font-medium text-ink-muted">Idempotency key</p>
            <p class="mt-1 break-all font-mono text-sm text-accent">{{ $preview['idempotency_key'] }}</p>
        </div>
        <div class="card p-4">
            <p class="text-xs font-medium text-ink-muted">Usage</p>
            <p class="mt-1 text-2xl font-bold text-accent">{{ $preview['payload']['usageIndicator'] ?? '—' }}</p>
        </div>
    </div>

    <div class="mt-4 card p-5">
        <div class="grid gap-3 text-sm md:grid-cols-2">
            <div>
                <p class="text-xs font-medium text-ink-muted">Payload hash</p>
                <p class="mt-1 break-all font-mono text-ink-secondary">{{ $preview['payload_hash'] }}</p>
            </div>
            <div>
                <p class="text-xs font-medium text-ink-muted">Patient control number</p>
                <p class="mt-1 font-mono text-ink-secondary">{{ $preview['payload']['claimInformation']['patientControlNumber'] ?? '—' }}</p>
            </div>
            <div>
                <p class="text-xs font-medium text-ink-muted">Payer</p>
                <p class="mt-1 text-ink-secondary">{{ $preview['payload']['receiver']['organizationName'] ?? $preview['payload']['tradingPartnerServiceId'] ?? '—' }}</p>
            </div>
            <div>
                <p class="text-xs font-medium text-ink-muted">Charge amount</p>
                <p class="mt-1 tabular-nums text-ink-secondary">${{ $preview['payload']['claimInformation']['claimChargeAmount'] ?? '0.00' }}</p>
            </div>
        </div>
    </div>

    <div class="mt-4 card overflow-hidden">
        <div class="border-b border-border-subtle px-4 py-3">
            <h3 class="text-sm font-semibold text-accent">Generated 837P JSON</h3>
        </div>
        <pre class="max-h-[36rem] overflow-auto bg-surface-2 p-4 text-xs leading-relaxed text-ink-secondary">{{ $payloadJson }}</pre>
    </div>
</div>
@endsection