@extends('layouts.app')

@section('title', 'Billing')

@section('content')
<h1>Billing</h1>

@if(!$isTenantAdmin)
    <div class="card">
        <h2>Restricted</h2>
        <p style="margin:0; color:var(--m3-outline);">Only workspace admins can manage billing.</p>
    </div>
@else
    <div class="card">
        <h2>Current plan</h2>
        <p style="margin:0 0 8px;"><strong>Workspace:</strong> {{ $tenant?->name ?? '—' }}</p>
        <p style="margin:0 0 8px;"><strong>Plan:</strong> {{ ucfirst($tenant?->plan ?? config('plans.default_plan', 'default')) }}</p>
        @if($activeSub)
            <p style="margin:0; color:var(--m3-outline); font-size:0.875rem;">Active subscription expires {{ $activeSub->expires_at?->format('M j, Y') ?? '—' }}.</p>
        @else
            <p style="margin:0; color:var(--m3-outline); font-size:0.875rem;">No active subscription record yet.</p>
        @endif
        <p style="margin:0; font-size:0.875rem;"><a href="{{ route('billing.export') }}" style="color: var(--m3-primary);">Download payment history (CSV)</a></p>
    </div>

    @if($razorpayKeyId === '')
        <div class="card" style="background:#ffebee; color:#c62828;">
            <h2>Razorpay not configured</h2>
            <p style="margin:0;">Set <code>RAZORPAY_KEY_ID</code> and <code>RAZORPAY_KEY_SECRET</code> in <code>.env</code> (backend only) to enable payments.</p>
        </div>
    @endif

    @if($payments->isNotEmpty())
    <div class="card">
        <h2>Recent payments</h2>
        <div class="table-wrap">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Plan</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Date</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($payments as $p)
                        <tr>
                            <td data-label="Plan">{{ ucfirst($p->plan_name) }}</td>
                            <td data-label="Amount">₹{{ number_format($p->amount / 100, 2) }} {{ $p->currency }}</td>
                            <td data-label="Status">{{ $p->status }}</td>
                            <td data-label="Date">{{ $p->created_at->format('M j, Y H:i') }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

    <div class="card">
        <h2>Upgrade plan (Razorpay)</h2>
        <p style="margin:0 0 16px; color:var(--m3-outline); font-size:0.875rem;">Payments are processed by Razorpay. After successful payment, your workspace plan updates immediately.</p>

        <div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;">
            @php $currentPlan = $tenant?->plan ?? config('plans.default_plan', 'default'); @endphp
            @forelse($plans as $planKey => $p)
                <div class="card" style="margin:0;">
                    <h2 style="margin:0 0 8px;">{{ ucfirst($planKey) }}</h2>
                    <p style="margin:0 0 12px; font-size:0.875rem; color:var(--m3-outline);">
                        @if(((int)($p['amount_paise'] ?? 0)) === 0)
                            Free
                        @else
                            ₹{{ number_format(((int)($p['amount_paise'] ?? 0)) / 100, 2) }} / {{ (int)($p['duration_days'] ?? 30) }} days
                        @endif
                    </p>
                    @if($currentPlan === $planKey)
                        <p style="margin:0; padding:10px 14px; border-radius:10px; background:var(--m3-surface-variant); color:var(--m3-outline); font-size:0.875rem; text-align:center;">Current plan</p>
                    @elseif(((int)($p['amount_paise'] ?? 0)) === 0)
                        <p style="margin:0; padding:10px 14px; border-radius:10px; background:var(--m3-surface-variant); color:var(--m3-outline); font-size:0.875rem; text-align:center;">Free plan</p>
                    @else
                        <button type="button"
                            class="buy-btn"
                            data-plan="{{ $planKey }}"
                            {{ $razorpayKeyId === '' ? 'disabled' : '' }}
                            style="padding:10px 14px; border-radius:10px; background:var(--m3-primary); color:var(--m3-on-primary); border:none; cursor:pointer; width:100%; opacity:{{ $razorpayKeyId === '' ? '0.6' : '1' }};">
                            Pay with Razorpay
                        </button>
                    @endif
                </div>
            @empty
                <div class="empty-state">No pricing configured.</div>
            @endforelse
        </div>
    </div>

    <form id="verify-form" method="post" action="{{ route('billing.razorpay.verify') }}" style="display:none;">
        @csrf
        <input type="hidden" name="plan" id="vf-plan" value="">
        <input type="hidden" name="razorpay_order_id" id="vf-order" value="">
        <input type="hidden" name="razorpay_payment_id" id="vf-payment" value="">
        <input type="hidden" name="razorpay_signature" id="vf-signature" value="">
    </form>

    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
    <script>
    (function () {
        var keyId = @json($razorpayKeyId);
        var csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

        function postJson(url, data) {
            return fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrf
                },
                body: JSON.stringify(data || {})
            }).then(function (r) {
                if (r.status === 429) return { ok: false, json: { message: 'Too many requests. Please try again in a minute.' } };
                return r.json().then(function (j) { return { ok: r.ok, json: j }; }).catch(function () {
                    return { ok: false, json: { message: 'Something went wrong. Please try again.' } };
                });
            }).catch(function () {
                return { ok: false, json: { message: 'Network error. Please try again.' } };
            });
        }

        document.querySelectorAll('.buy-btn').forEach(function (btn) {
            btn.addEventListener('click', function () {
                var plan = btn.getAttribute('data-plan');
                btn.disabled = true;
                btn.textContent = 'Creating order...';

                postJson(@json(route('billing.razorpay.order')), { plan: plan })
                    .then(function (res) {
                        if (!res.ok) throw (res.json && res.json.message) ? res.json.message : 'Failed to create order';
                        var data = res.json;

                        var options = {
                            key: data.key_id || keyId,
                            amount: data.amount,
                            currency: data.currency,
                            name: data.tenant_name || @json(config('app.name', 'SmartFlow AI')),
                            description: 'Plan upgrade: ' + plan,
                            order_id: data.order_id,
                            prefill: data.prefill || {},
                            handler: function (response) {
                                document.getElementById('vf-plan').value = plan;
                                document.getElementById('vf-order').value = response.razorpay_order_id;
                                document.getElementById('vf-payment').value = response.razorpay_payment_id;
                                document.getElementById('vf-signature').value = response.razorpay_signature;
                                document.getElementById('verify-form').submit();
                            }
                        };

                        var rzp = new Razorpay(options);
                        rzp.on('payment.failed', function () {
                            alert('Payment failed. Please try again.');
                        });
                        rzp.open();
                    })
                    .catch(function (e) {
                        alert(String(e || 'Error'));
                    })
                    .finally(function () {
                        btn.disabled = false;
                        btn.textContent = 'Pay with Razorpay';
                    });
            });
        });
    })();
    </script>
@endif
@endsection