{% extends "base.html" %}

{% block content %}
<main data-plugin="tenant-onboarding" class="mx-auto max-w-4xl px-4 py-10 sm:px-6 lg:px-8">
    {% if logged_in %}
        {% if status == 'none' %}
        <section class="mx-auto max-w-2xl rounded-2xl border border-divider bg-surface p-6 shadow-sm sm:p-8">
            <p class="text-sm font-semibold uppercase tracking-wide text-brand">Partner program</p>
            <h1 class="mt-2 text-2xl font-bold text-foreground sm:text-3xl">Participate in the Referral Scheme</h1>
            <p class="mt-3 leading-relaxed text-muted">Share a link to refer businesses and get payouts for each qualifying onboarding.</p>
            <button class="blocks-button blocks-button-primary mt-6 w-full sm:w-auto" id="apply-referrer-btn" type="button">Apply to be a Referrer</button>
            <p id="apply-status" class="mt-4 hidden rounded-lg border border-success bg-canvas p-3 text-sm text-success" role="status" aria-live="polite">Your application has been submitted for approval.</p>
        </section>
        {% elif status == 'pending' %}
        <section class="mx-auto max-w-2xl rounded-2xl border border-warning bg-surface p-6 shadow-sm sm:p-8" role="status">
            <p class="text-sm font-semibold uppercase tracking-wide text-warning">Application status</p>
            <h1 class="mt-2 text-2xl font-bold text-foreground sm:text-3xl">Application Pending</h1>
            <p class="mt-3 leading-relaxed text-muted">Your application is under review by the platform administrator. We’ll show your referral link here after approval.</p>
        </section>
        {% elif status == 'approved' %}
        <section class="rounded-2xl border border-divider bg-surface p-6 shadow-sm sm:p-8">
            <p class="text-sm font-semibold uppercase tracking-wide text-brand">Partner program</p>
            <h1 class="mt-2 text-2xl font-bold text-foreground sm:text-3xl">Referrer Dashboard</h1>
            <div data-referral-stats class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2">
                <article class="rounded-xl border border-divider bg-canvas p-5">
                    <span class="block text-3xl font-bold text-brand" id="total-referrals">—</span>
                    <span class="mt-1 block text-sm font-medium text-muted">Total referrals</span>
                </article>
                <article class="rounded-xl border border-divider bg-canvas p-5">
                    <span class="block text-3xl font-bold text-brand" id="qualified-referrals">—</span>
                    <span class="mt-1 block text-sm font-medium text-muted">Qualified referrals</span>
                </article>
            </div>
            <p id="dashboard-status" class="mt-4 text-sm text-muted" role="status" aria-live="polite">Loading your referral totals…</p>
            <button id="retry-dashboard" class="blocks-button blocks-button-secondary mt-2 hidden w-full sm:w-auto" type="button">Retry loading totals</button>

            <section class="mt-8 border-t border-divider pt-6" aria-labelledby="referral-link-title">
                <h2 id="referral-link-title" class="text-lg font-semibold text-foreground">Your Referral Link</h2>
                <p class="mt-1 text-sm text-muted">Share this link with a business that may want to create a Blocks workspace.</p>
                <div class="mt-3 flex flex-col gap-2 sm:flex-row">
                    <input class="blocks-input" type="text" id="referral-link-input" readonly aria-label="Your referral link">
                    <button class="blocks-button blocks-button-primary w-full shrink-0 sm:w-auto" id="copy-link-btn" type="button">Copy link</button>
                </div>
                <p id="copy-status" class="mt-2 min-h-5 text-sm text-muted" role="status" aria-live="polite"></p>
            </section>
        </section>
        {% elif status == 'rejected' %}
        <section class="mx-auto max-w-2xl rounded-2xl border border-divider bg-surface p-6 shadow-sm sm:p-8" role="status">
            <p class="text-sm font-semibold uppercase tracking-wide text-muted">Application status</p>
            <h1 class="mt-2 text-2xl font-bold text-foreground sm:text-3xl">Application Rejected</h1>
            <p class="mt-3 leading-relaxed text-muted">You are not eligible for the referral scheme at this time. Contact the platform team if you believe this is an error.</p>
        </section>
        {% endif %}
    {% else %}
    <section class="mx-auto max-w-2xl rounded-2xl border border-divider bg-surface p-6 text-center shadow-sm sm:p-8">
        <p class="text-sm font-semibold uppercase tracking-wide text-brand">Partner program</p>
        <h1 class="mt-2 text-2xl font-bold text-foreground sm:text-3xl">Sign in to manage referrals</h1>
        <p class="mt-3 leading-relaxed text-muted">Use your config-tenant account to apply and, after approval, view your referrals.</p>
        <a href="/auth/google/login" class="blocks-button blocks-button-primary mt-6 w-full sm:w-auto"><i class="fab fa-google" aria-hidden="true"></i> Login with Google</a>
    </section>
    {% endif %}
</main>
{% endblock %}

{% block scripts %}
<script src="/plugins/tenant-onboarding/assets/js/onboarding.js" defer></script>
{% endblock %}