@extends('layouts.admin')

@section('title', 'Payment Health (Razorpay)')

@section('content')
<div class="admin-page-header d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1>Payment Health Dashboard</h1>
        <p class="admin-page-subtitle mb-0">Automated daily summary from Razorpay payment logs</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('admin.reports.payments') }}" class="admin-btn-primary">Open Full Payment Report</a>
        <a href="{{ route('admin.reports.payment-health') }}" class="btn btn-outline-secondary">Reset</a>
    </div>
</div>

<div class="admin-card mb-4">
    <div class="card-body">
        <form id="filterForm" class="row g-3 align-items-end">
            <div class="col-md-3">
                <label class="admin-form-label">End Date</label>
                <input type="date" id="endDate" class="admin-form-control form-control" value="{{ $endDate }}">
            </div>
            <div class="col-md-3">
                <label class="admin-form-label">Days (1-30)</label>
                <input type="number" id="days" class="admin-form-control form-control" min="1" max="30" value="{{ $days }}">
            </div>
            <div class="col-md-3">
                <button type="submit" class="admin-btn-primary w-100">Refresh</button>
            </div>
            <div class="col-md-3 text-md-end">
                <small class="text-muted d-block">Auto refresh: every 60s</small>
                <small class="text-muted" id="lastUpdated">Last updated: -</small>
            </div>
        </form>
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-md-3">
        <div class="kpi-card"><div class="kpi-card-content-wrapper"><div class="kpi-card-value" id="attempted">{{ (int) ($aggregate['attempted_unique_orders'] ?? 0) }}</div><div class="kpi-card-label">Attempted Orders</div></div></div>
    </div>
    <div class="col-md-3">
        <div class="kpi-card"><div class="kpi-card-content-wrapper"><div class="kpi-card-value" id="captured">{{ (int) ($aggregate['captured_unique_orders'] ?? 0) }}</div><div class="kpi-card-label">Captured Orders</div></div></div>
    </div>
    <div class="col-md-3">
        <div class="kpi-card"><div class="kpi-card-content-wrapper"><div class="kpi-card-value" id="hardFailed">{{ (int) ($aggregate['hard_fail_unique_orders'] ?? 0) }}</div><div class="kpi-card-label">Hard Failed Orders</div></div></div>
    </div>
    <div class="col-md-3">
        <div class="kpi-card"><div class="kpi-card-content-wrapper"><div class="kpi-card-value" id="hardFailRate">{{ number_format((float) ($aggregate['hard_fail_rate_pct'] ?? 0), 2) }}%</div><div class="kpi-card-label">Hard Fail Rate</div></div></div>
    </div>
</div>

<div class="admin-card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Daily Breakdown (Razorpay)</h5>
        <span class="badge bg-secondary" id="rangeText">{{ $startDate }} to {{ $endDate }}</span>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="admin-table table table-hover">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Attempted</th>
                        <th>Captured</th>
                        <th>Failed</th>
                        <th>Hard Failed</th>
                        <th>Hard Fail %</th>
                        <th>Top Reason</th>
                    </tr>
                </thead>
                <tbody id="dailyRows">
                    @forelse (collect($daily)->reverse() as $row)
                        @php
                            $reasons = $row['top_failure_reasons'] ?? [];
                            $firstReason = '-';
                            if (!empty($reasons)) {
                                $reasonKey = array_key_first($reasons);
                                $firstReason = $reasons[$reasonKey] . ' :: ' . $reasonKey;
                            }
                        @endphp
                        <tr>
                            <td>{{ $row['date'] }}</td>
                            <td>{{ (int) ($row['attempted_unique_orders'] ?? 0) }}</td>
                            <td>{{ (int) ($row['captured_unique_orders'] ?? 0) }}</td>
                            <td>{{ (int) ($row['failed_unique_orders'] ?? 0) }}</td>
                            <td>{{ (int) ($row['hard_fail_unique_orders'] ?? 0) }}</td>
                            <td>{{ number_format((float) ($row['hard_fail_rate_pct'] ?? 0), 2) }}%</td>
                            <td title="{{ $firstReason }}">{{ $firstReason }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="7" class="text-center py-4">No data available for selected range.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    const apiUrl = "{{ route('admin.reports.payment-health.api.summary') }}";
    const dailyRows = document.getElementById('dailyRows');
    const endDateInput = document.getElementById('endDate');
    const daysInput = document.getElementById('days');
    const lastUpdated = document.getElementById('lastUpdated');
    const rangeText = document.getElementById('rangeText');

    function setKpi(id, value) {
        const el = document.getElementById(id);
        if (el) el.textContent = value;
    }

    function escapeHtml(value) {
        return String(value ?? '')
            .replaceAll('&', '&amp;')
            .replaceAll('<', '&lt;')
            .replaceAll('>', '&gt;')
            .replaceAll('"', '&quot;')
            .replaceAll("'", '&#039;');
    }

    async function loadData() {
        const days = Math.min(30, Math.max(1, Number(daysInput.value || 7)));
        const endDate = endDateInput.value;
        const url = `${apiUrl}?days=${encodeURIComponent(days)}&end_date=${encodeURIComponent(endDate)}`;

        try {
            const res = await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
            if (!res.ok) throw new Error('Request failed');
            const data = await res.json();

            const agg = data.aggregate || {};
            setKpi('attempted', Number(agg.attempted_unique_orders || 0));
            setKpi('captured', Number(agg.captured_unique_orders || 0));
            setKpi('hardFailed', Number(agg.hard_fail_unique_orders || 0));
            setKpi('hardFailRate', `${Number(agg.hard_fail_rate_pct || 0).toFixed(2)}%`);

            const start = data.range?.start_date || '-';
            const end = data.range?.end_date || '-';
            rangeText.textContent = `${start} to ${end}`;

            const rows = (data.daily || []).slice().reverse();
            if (!rows.length) {
                dailyRows.innerHTML = '<tr><td colspan="7" class="text-center py-4">No data</td></tr>';
            } else {
                dailyRows.innerHTML = rows.map(row => {
                    const reasons = row.top_failure_reasons || {};
                    const firstReason = Object.keys(reasons)[0] || '-';
                    const firstReasonCount = reasons[firstReason] || 0;
                    const reasonText = firstReason === '-' ? '-' : `${firstReasonCount} :: ${firstReason}`;

                    return `<tr>
                        <td>${escapeHtml(row.date)}</td>
                        <td>${Number(row.attempted_unique_orders || 0)}</td>
                        <td>${Number(row.captured_unique_orders || 0)}</td>
                        <td>${Number(row.failed_unique_orders || 0)}</td>
                        <td>${Number(row.hard_fail_unique_orders || 0)}</td>
                        <td>${Number(row.hard_fail_rate_pct || 0).toFixed(2)}%</td>
                        <td title="${escapeHtml(reasonText)}">${escapeHtml(reasonText)}</td>
                    </tr>`;
                }).join('');
            }

            lastUpdated.textContent = `Last updated: ${new Date().toLocaleString()}`;
        } catch (e) {
            dailyRows.innerHTML = '<tr><td colspan="7" class="text-center text-danger py-4">Failed to load payment health data</td></tr>';
        }
    }

    document.getElementById('filterForm').addEventListener('submit', function (e) {
        e.preventDefault();
        loadData();
    });

    loadData();
    setInterval(loadData, 60000);
})();
</script>
@endpush